[NOVO] O WP Media Cleanup elimina imagens não utilizadas escondidas na sua biblioteca multimédia
Joella Dunn
Joella Dunn
John Turner
John Turner
Já se perguntou como é que os sítios Web funcionam realmente?
Pode parecer magia, mas há uma linguagem por detrás de cada página Web que vê. Essa linguagem chama-se HTML.
Pense no HTML como os blocos de construção básicos da Internet.
Mesmo apenas um pouco de conhecimento de HTML pode realmente melhorar o seu jogo no WordPress. Já vi em primeira mão como ajuda as pessoas a melhorar ainda mais os seus sítios Web WordPress.
Neste post, vou explicar o que é HTML, porque é importante e como pode adicionar código HTML personalizado ao seu site WordPress.
Poderá ficar surpreendido com a facilidade e a utilidade que pode ter para uma conceção eficaz da Web!
HTML significa HyperText Markup Language (Linguagem de Marcação de Hipertexto). Basicamente, HTML é a linguagem que estrutura o conteúdo da Web. Pense nela como o esqueleto de uma página Web.
O HTML utiliza algo chamado "etiquetas". As etiquetas indicam ao navegador Web o que é cada parte do seu conteúdo.
Por exemplo, as etiquetas podem indicar ao navegador que algo é um título, um parágrafo ou uma imagem. Os browsers lêem estas etiquetas para apresentar as páginas Web da forma que devem ter.
O HTML não é uma linguagem de programação. É mais uma forma de organizar a informação para que os browsers a possam compreender.
O WordPress é muito fácil de utilizar. É possível construir um sítio Web completo sem saber qualquer código. Por isso, porquê preocupar-se com HTML?
Bem, o HTML dá-lhe mais controlo sobre o seu conteúdo. Por vezes, o editor normal do WordPress não é suficiente.
Digamos que pretende adicionar um atributo específico a uma imagem. Ou talvez queira criar um estilo de lista realmente único. O HTML permite-lhe fazer coisas desse género.
O HTML é também um salva-vidas para a resolução de problemas.
Já teve um problema de formatação estranho no WordPress? Olhar para o HTML pode ajudá-lo a encontrar e corrigir rapidamente o problema. É muito mais rápido do que tentar adivinhar com o editor visual.
Além disso, o HTML dá-lhe flexibilidade. Quer adicionar algumas personalizações avançadas? Por exemplo, classes personalizadas para estilos ou esquemas mais complexos? O HTML abre essas possibilidades.
E aqui está uma das mais importantes: a preparação para o futuro.
O WordPress está sempre a mudar. Mas HTML? É uma competência web fundamental que será sempre útil.
Já vi isso várias vezes - compreender HTML torna-o muito mais adaptável no mundo da Web.
Vamos falar sobre os blocos de construção do HTML. Chamam-se etiquetas.
As etiquetas são instruções que dizem ao browser o que fazer com o seu conteúdo. A maioria das etiquetas vem em pares: uma etiqueta de abertura e uma etiqueta de fecho.
Por exemplo, se quisermos criar um parágrafo, utilizamos a função <p> para o iniciar e </p> para o terminar.
Vê a barra na etiqueta de fecho? É assim que se sabe que é o fim.
Vejamos algumas etiquetas HTML comuns que irá utilizar frequentemente:
Os cabeçalhos são para títulos e subtítulos. Tem <h1>, <h2>, <h3>, <h4>, <h5>e <h6>.
<h1> é o título mais importante (normalmente o título principal), e <h6> é o menos importante.
As hiperligações são o que torna a Web, bem, uma Web! Os <a> cria ligações. <a> significa âncora.
Quer mostrar imagens? A <img> A etiqueta é tua amiga. <img> é a abreviatura de imagem.
Precisa de fazer uma lista de coisas? O HTML dá-lhe cobertura. Existem dois tipos principais:
<ul> para listas não ordenadas (bullet points). "ul" significa "unordered list" (lista não ordenada).<ol> para listas ordenadas (listas numeradas). "ol" significa "lista ordenada".E dentro de ambos <ul> e <ol>, utiliza <li> para cada item da lista. "li" significa "item da lista".
As etiquetas também podem ter atributos. Os atributos fornecem informações adicionais sobre uma etiqueta.
Por exemplo, o <a> precisa de uma etiqueta href para lhe dizer para onde deve ligar. Assim: <a href="https://example.com">Link text</a>. O href O atributo contém o endereço do sítio Web.
E o <img> precisa de uma etiqueta src para lhe dizer onde encontrar o ficheiro de imagem. Também deve ter um atributo alt para "texto alternativo", que é importante se a imagem não puder ser carregada ou para acessibilidade.
Assim: <img src="image.jpg" alt="Descriptive text">.
Aqui está um exemplo super simples de HTML em ação:
<h1>Welcome to My Blog</h1>
<p>This is my first paragraph of content. It's going to be awesome!</p>
<a href="https://duplicator.com">Check out Duplicator!</a>Esse código criaria um título principal, um parágrafo e uma ligação numa página Web.
Quando comecei a aprender HTML, estas etiquetas básicas foram o meu ponto de partida. E sinceramente? Continuam a ser a base de quase tudo o que faço online. Estas etiquetas simples são poderosas!
Então, como é que se pode realmente utilizar HTML no WordPress? Vejamos alguns exemplos.
Quer colocar um texto a negrito ou em itálico? O HTML pode fazer isso.
Utilização <strong> e </strong> para tornar o texto a negrito. Ou utilize <b> e </b> também tornam o texto a negrito.
Assim: <strong>This text is bold</strong>.
Para itálico, utilizar <em> ou <i>. Assim: <em>This text is italic</em>.
Estas etiquetas ajudam-no a realçar palavras e frases no seu conteúdo.
Falámos sobre o <a> tag. Pode utilizá-la para ligar a outras páginas do seu sítio ou a outros sítios Web.
Pode ligar texto, imagens ou mesmo botões. É tudo uma questão de utilizar o <a> com a etiqueta correta href atributo.
Quer adicionar um vídeo do YouTube ou do Vimeo ao seu sítio WordPress? A maioria das plataformas de vídeo fornece-lhe códigos de incorporação. Estes códigos são normalmente HTML, muitas vezes utilizando <iframe> tags.
Basta copiar o código de incorporação do YouTube (ou onde quer que o seu vídeo esteja alojado) e colá-lo no WordPress. O WordPress sabe o que fazer com ele.
Precisa de uma lista com marcadores? Utilizar <ul> etiquetas. Para uma lista numerada, utilize <ol> e <li> tags.
Pretende adicionar uma linha para separar secções do seu conteúdo? O <hr> cria uma regra horizontal. É uma forma simples de separar visualmente o seu texto.
Estes são apenas alguns exemplos, mas pode ver como o HTML pode ser realmente útil no WordPress. Trata-se de adicionar um pouco de estrutura e funcionalidade extra ao conteúdo do seu sítio Web.
Então, está a pensar: "Ok, o HTML parece útil, mas como é que o aprendo?" Boa pergunta! Felizmente, existem imensos recursos excelentes por aí.
Aqui estão alguns sítios onde pode começar a aprender HTML agora mesmo.
MDN Web Docs é como a enciclopédia do desenvolvimento web. É feita pela Mozilla (o pessoal por trás do Firefox) e é super abrangente e fiável.
Se gosta de aprendizagem interactiva, a Codecademy é fantástica. Têm cursos em que pode escrever código diretamente no seu browser.
W3schools é um sítio Web popular para tutoriais de desenvolvimento Web. Tem imensos exemplos e referências de HTML.
Quer ver como o HTML é utilizado especificamente no WordPress? Consulte a documentação oficial do desenvolvedor do WordPress. É um pouco mais técnica, mas é um ótimo recurso à medida que se vai sentindo mais à vontade.
Independentemente do recurso que escolher, o mais importante é praticar. A sério. Não vai aprender HTML apenas lendo sobre o assunto. Tem de escrever código e ver o que acontece.
Experimentar! Não tenhas medo de partir coisas. É assim que se aprende.
Existem várias formas de utilizar HTML no WordPress. Vamos analisá-las uma a uma.
Se estiveres a usar o Editor de Blocos (Gutenberg) no WordPress, podes usar um bloco especial apenas para HTML. Chama-se o bloco HTML personalizado.
Para o utilizar, basta adicionar um novo bloco à sua página ou publicação do WordPress. Procure por "HTML" na barra de pesquisa do bloco. Verá o bloco HTML personalizado aparecer.
Clique nele para o adicionar ao seu conteúdo. É exatamente como adicionar qualquer outro bloco. Pode até arrastá-lo e largá-lo onde quiser.
Depois de adicionar o bloco, verá uma caixa onde pode escrever ou colar o seu código HTML do WordPress. Basta colocar o seu HTML aí.
Clique em Pré-visualizar para ver o aspeto do seu código HTML na página sem o publicar efetivamente.
Isto é muito útil para verificar o seu código.
Sabia que pode editar qualquer bloco do WordPress como HTML? Sim, até os blocos de parágrafos normais.
Isto é útil se quiser fazer pequenos ajustes HTML num bloco que já existe.
Em primeiro lugar, clique no bloco que pretende editar. Depois, procura os três pontos na barra de ferramentas do bloco. Clique neles.
Aparecerá um menu. Nesse menu, prima o botão Editar como HTML.
De repente, o bloco transforma-se! Em vez do editor visual habitual, verá o código HTML personalizado para esse bloco. Agora pode editar diretamente o HTML.
Isto é ótimo para pequenos ajustes. Talvez pretenda adicionar uma classe específica a um parágrafo para estilizar mais tarde. Ou talvez precise de corrigir um pequeno problema de formatação que é mais fácil de resolver em HTML.
Quando terminar de editar HTML, pode clicar em Editar visualmente na barra de ferramentas do bloco para voltar à vista normal do editor visual.
Para aqueles que se sentem à vontade com o código, o editor de blocos do WordPress tem uma vista completa do Editor de Código. Esta mostra-lhe o código HTML de toda a sua publicação ou página.
Para mudar para o Editor de Código, olhe para o canto superior direito do ecrã do seu editor Gutenberg. Também lá verá três pontos - o menu principal de opções para todo o editor. Clique nesses pontos.
Nesse menu, verá uma opção chamada Editor de código. Clique nela.
Verá as etiquetas e a estrutura de toda a sua página apresentadas em código.
Este editor HTML do WordPress destina-se a utilizadores avançados que preferem trabalhar diretamente no código. Se gosta de codificar e quer ver a estrutura HTML da sua página em termos gerais, o editor de código é para si.
Mas tenha cuidado! Se cometer erros no HTML, pode estragar o layout da sua página. É importante compreender a linguagem HTML se pretender utilizar extensivamente o Editor de código.
Se quiser voltar ao editor visual normal, basta voltar ao menu superior direito e clicar em Editor visual.
O editor clássico do WordPress tem dois separadores: Visual e Texto. O separador Texto é onde pode entrar no código.
Quando clicar em Texto, verá todo o código HTML da sua publicação. É aqui que pode escrever ou colar o código HTML diretamente.
Depois de ter adicionado ou editado o seu HTML, pode clicar novamente no separador Visual para ver o seu aspeto. É-lhe mostrada a versão renderizada do seu HTML.
Por vezes, pretende adicionar pequenos fragmentos de HTML, CSS ou JavaScript ao seu sítio WordPress. Talvez queira adicionar algum código de rastreamento personalizado ou um estilo especial para uma determinada parte do seu site.
Pode editar os ficheiros do seu tema para o fazer, mas isso pode ser arriscado. E se o seu tema for atualizado, as suas alterações podem ser substituídas.
É aí que entram os plug-ins de snippets de código. Estes plugins permitem-lhe adicionar fragmentos de código diretamente através do seu painel de controlo do WordPress.
Mantêm o seu código organizado e separado dos ficheiros do seu tema. Isto é muito mais seguro e fácil de gerir, especialmente se não for um especialista em código.
O meu plugin de trechos de código favorito é o WPCode (anteriormente "Insert Headers and Footers"). Esta ferramenta permite-lhe adicionar HTML, CSS e JavaScript ao seu sítio Web.
Além disso, existem imensos snippets pré-criados para utilizar se não estiver habituado a programar.
Utilizar um plugin de trechos de código é muito mais seguro do que editar diretamente os ficheiros do tema. Também é mais fácil manter o controlo do seu código personalizado.
O WordPress vem com um widget incorporado chamado HTML personalizado. Para o encontrar, aceda ao painel de controlo do WordPress e clique em Aparência e depois em Widgets.
Verá diferentes áreas de widgets, como a barra lateral ou o rodapé. Estas dependem do seu tema WordPress.
Adicione o widget HTML personalizado na área do widget onde pretende adicionar o seu HTML.
Escreva ou cole o seu HTML diretamente nessa caixa.
Pode adicionar todo o tipo de coisas com HTML nos widgets. Texto personalizado, imagens, ligações, até códigos de incorporação - tudo funciona!
Depois de ter adicionado o HTML, clique no botão Atualizar nas definições do widget.
E pronto! O seu HTML estará agora disponível na área do widget no seu sítio Web.
Na verdade, pode ir diretamente aos ficheiros do seu tema WordPress e editar o HTML. Isto dá-lhe muito controlo sobre a estrutura do seu sítio, mas também acarreta grandes riscos.
A edição direta de ficheiros de temas pode danificar o seu sítio Web se não tiver cuidado. Um pequeno erro no código pode causar grandes problemas.
Avisos à parte, eis como pode editar ficheiros de temas. No seu painel de controlo do WordPress, vá a Appearance (Aparência ) e depois Theme File Editor (Editor de ficheiros de temas).
No lado direito, verá uma lista dos seus ficheiros de tema. Estes ficheiros controlam a estrutura e a disposição do seu sítio Web.
Alguns ficheiros comuns que contêm HTML são:
Pode editar o HTML diretamente no Editor de Ficheiros de Tema. Basta clicar num ficheiro para o abrir, encontrar o HTML que pretende alterar e fazer as suas edições. Em seguida, clique em Atualizar arquivo para salvar suas alterações.
Lembre-se: Só edite ficheiros de temas se souber realmente o que está a fazer e utilize sempre um tema secundário e tenha uma cópia de segurança.
Na minha experiência, só edito ficheiros de temas para personalizações muito específicas que não podem ser feitas de outras formas. E mesmo assim, sou muito cauteloso. Os temas filhos e as cópias de segurança do Duplicator fazem sempre parte do meu fluxo de trabalho quando mexo em ficheiros de temas.
FTP significa File Transfer Protocol (Protocolo de Transferência de Ficheiros). Dá-lhe o acesso mais direto para editar os ficheiros do seu tema WordPress (e outros ficheiros também).
Para utilizar o FTP, são necessários alguns elementos:
Depois de as ter, abra o seu cliente FTP e introduza as suas credenciais FTP para se ligar ao seu servidor.
Depois de se ligar, verá uma vista com dois lados. Um lado mostra os ficheiros no seu computador e o outro lado mostra os ficheiros no seu servidor Web.
Navegue até aos ficheiros do seu tema WordPress no lado do servidor. O caminho é normalmente algo como /wp-content/themes/your-theme-name/.
Depois de ter feito a cópia de segurança e estar na pasta do tema através de FTP, pode descarregar os ficheiros HTML do tema para o seu computador ou editá-los diretamente.
Basta clicar com o botão direito do rato no ficheiro no seu cliente FTP e escolher Transferir ou Ver/Editar.
Agora, edite o ficheiro descarregado no seu computador utilizando um editor de código. Os bons editores de código para este efeito são o VS Code, o Sublime Text, o Atom ou o Notepad++.
Abra o ficheiro no seu editor de código e faça as suas alterações HTML.
Quando tiver terminado de adicionar HTML, guarde o ficheiro. Clique com o botão direito do rato no ficheiro no seu cliente FTP e selecione Carregar. Isto substituirá o ficheiro original no seu servidor pela sua versão editada.
O FTP é uma ferramenta poderosa, mas requer alguns conhecimentos técnicos. E é importante ser responsável ao utilizá-la. Verifique sempre as suas alterações antes de as carregar e tenha sempre uma cópia de segurança pronta.
Adicione código HTML no Elementor utilizando o widget HTML. Arraste o widget para o seu layout e, em seguida, cole o seu código HTML na caixa de conteúdo. Este método permite-lhe inserir HTML personalizado em qualquer parte da sua página sem editar os ficheiros do tema.
Add HTML code in WordPress headers by inserting it into the <head> section using a plugin like WPCode. Install the plugin and find the Header & Footer tab. Add HTML code into the header code box and save your changes. This avoids editing theme files directly.
O melhor plugin de editor de código do WordPress é o WPCode (anteriormente Insert Headers and Footers). O WPCode permite-lhe adicionar com segurança código personalizado ao seu site sem editar ficheiros de tema. Ele suporta a adição de CSS, HTML, JavaScript e PHP. Além disso, inclui proteção contra erros e lógica condicional para colocação de código direcionado.
O WordPress é construído principalmente com PHP, que é executado no servidor para gerar conteúdo dinâmico. Também utiliza HTML, CSS e JavaScript para renderizar e estilizar páginas Web no browser. O PHP trata da lógica de backend, enquanto o HTML estrutura o conteúdo apresentado aos utilizadores.
Encontre modelos HTML para WordPress em mercados como o ThemeForest ou o TemplateMonster. Estas plataformas oferecem modelos HTML concebidos profissionalmente que podem ser adaptados para o desenvolvimento do WordPress. Descarregue, personalize e converta-os utilizando um construtor de páginas ou uma estrutura de temas.
Aprender até mesmo um pouco de HTML pode realmente abrir um novo mundo de possibilidades com o WordPress. Dá-lhe mais controlo, mais flexibilidade e uma compreensão mais profunda de como os sítios Web funcionam realmente.
Não tenha medo de continuar a aprender e a experimentar. Quanto mais brincar com o código, mais confortável se sentirá.
Explore os recursos que mencionei, experimente as diferentes formas de adicionar HTML no WordPress e veja o que consegue criar!
E lembre-se, faça sempre cópias de segurança do seu site antes de efetuar grandes alterações! Ferramentas como o Duplicator tornam as cópias de segurança muito fáceis e podem poupar-lhe muitas dores de cabeça no futuro.
Já que está aqui, acho que vai gostar destes outros guias do WordPress:
Divulgação: O nosso conteúdo é apoiado pelos leitores. Isto significa que, se clicar em algumas das nossas hiperligações, podemos ganhar uma comissão. Apenas recomendamos produtos que acreditamos que acrescentam valor aos nossos leitores.
