Formatação de Postagem de Blog e HTML Básico

>

Formatação de Postagem de Blog não requer que você saiba muito HTML mas definitivamente ajuda!

Se você quer que seu blog seja levado a sério, então você precisa dominar a formatação de sua postagem de blog.

Isso também significa aprender alguns truques HTML básicos para ajudar a tornar seus artigos interessantes e com estilo consistente.

Agora não se preocupe, não estou dizendo que você precisa se tornar um programador ou qualquer coisa para criar posts atraentes e desinformados no blog, mas pegar algumas habilidades essenciais vai ajudar muito.

WordPress é um CMS (Content Management System) e como tal não requer que você codifique tudo sozinho.

Existem ferramentas para isso.

A maior parte do código está escondida para evitar que algo se quebre e você tem um editor WYSIWYG (What You See is What You Get) para escrever e formatar posts e páginas de blog.

Se você tem usado o WordPress por um tempo, então você saberá que há uma aba Visual e de Texto no canto superior direito do editor de conteúdo que permite que você mude da versão estilizada do seu post e do HTML bruto.

Para os novatos.

Visual = Editor Visual WordPress

Texto = Editor HTML WordPress / Texto Bruto

A maioria dos iniciantes ficam sobrecarregados e assustados quando vêem o HTML bruto na aba de texto pela primeira vez e voltam rapidamente.

But este não precisa ser o caso e você se tornará um blogueiro muito melhor se você tomar um tempo para ficar confortável trabalhando e editando neste modo.

Com um pouco de prática, você pode facilmente dominar alguns dos conceitos básicos, a sintaxe é na verdade bastante lógica.

Sintaxe (Computer Definition): A estrutura das instruções em uma linguagem de computador.

Então o que é HTML?

HTML significa Hypertext Markup Language e é a linguagem de programação usada para criar páginas web e aplicações.

HTML permite que você crie funcionalidades básicas que você pode então estilizar com CSS (Cascading Style Sheets).

Foi criado em 1990 por Tim Berners-Lee, um herói pessoal meu que também é atribuído a inventar a internet, mas não vou ensinar-lhe tudo sobre HTML e a história, mas se você é do tipo curioso, você pode continuar lendo na Wikipedia.

Estamos aqui apenas para ver como o HTML pertence a escrever e editar posts e páginas do WordPress.

Quando você vê código desconhecido na aba Texto do editor do WordPress você está olhando para HTML e, em alguns casos, pode incluir alguns estilos CSS em linha.

HTML Exemplo

<h2>This is a title</h2>

As partes que estão destacadas em vermelho são HTML e neste exemplo, você vê uma tag de título h2 de abertura no início e a tag de título h2 de fechamento no final.

Notice a única diferença é que a tag de fechamento tem uma barra invertida antes do nome da tag? É assim que você pode ver rapidamente quando seu HTML foi aberto e fechado.

Esta é uma ótima dica para detectar erros ou HTML quebrado.

HTML com Inline CSS Example

<h2 style="color:red;">This is a title</h2>

No exemplo acima, usamos o mesmo h2, no entanto, desta vez usamos HTML para chamar um pedaço de CSS para mudar a cor para vermelho. Note que a única parte que é realmente CSS é destacada em vermelho.

Idealmente, você não verá muito CSS em linha porque a melhor maneira é estilizar seus elementos HTML com arquivos CSS externos, esta é a maneira típica de os Temas do WordPress aplicarem estilos à página do seu blog automaticamente.

Eu pessoalmente não aconselho estilizar seu HTML inline no editor WordPress, mas é importante estar ciente disso caso você precise editar ou limpar o código que encontrou seu caminho a partir de outros fontes como um plugin ou de copiar e colar a partir de outro fonte.

Inevitavelmente você se beneficiará de ser capaz de limpar as coisas quando gremlins (não um termo técnico) encontrar o seu caminho para o seu conteúdo.

Então vamos ver como adicionar HTML aos posts e posts do WordPress e o que você precisa saber.

WordPress Basic HTML Essentials

Quando você estiver adicionando HTML para dar estilo ao seu conteúdo, você precisa se lembrar de embrulhar seu conteúdo com as tags de abertura e fechamento relevantes.

Exemplo:

<p>Paragraphs should be wrapped with p tags</p>

Exemplos de elementos HTML úteis que não requerem uma tag de fechamento porque são de fechamento automático.

Um exemplo é a quebra de linha <br> que funcionará sem uma tag de fechamento, isto é porque as quebras de linha não funcionam e não podem conter conteúdo dentro.

Headings Tags & Sub Headings

>>273>WordPress Heading HTML

Existem vários tipos de título num post do WordPress, primeiro, você tem o título do post, este é um <h1> e depois você tem a habilidade de adicionar títulos de título ao seu conteúdo para ajudá-lo a agrupar seus pensamentos.

Estes variam de h1 (Título 1) a h6 (Título 6) e o seu tema irá tipicamente estilizá-los para serem de tamanho apropriado.

Desde que a sua página ou título do post é automaticamente um h1 que você quer evitar usar no seu conteúdo, pois qualquer outra instância irá competir com o título principal que é o nome do seu post.

Em vez disso, siga o processo de ordenação semanticamente correto e na primeira vez que você precisar usar um título de seção desça para o título do título h2.

Embora você possa facilmente configurá-los usando o drop-down no canto superior esquerdo do editor WYSIWYG, é útil saber como eles funcionam no formato HTML para que você possa corrigir qualquer erro.

Aqui estão alguns exemplos

<h1>This is a heading 1, you won't need to use me in your content</h1>
<h2>This is a heading 2, I’m very useful, you can use me to organize your articles into sections.</h2>
<h3>This is a heading 3, Only use me if you already have h2 section headings and you need to divide those sections into sub-sections.</h3>
<h4>This is a heading 4, I'm similar to the above, only use me if you have already used h3's</h4>>

>

>Aesperadamente, você está começando a ver um padrão aqui com a sintaxe HTML.

>

Todos os elementos HTML começam com uma abertura <

Também fecham com um fechamento >

>

Os elementos que abrem podem simplesmente conter o nome do elemento.

As tags que fecham contêm uma barra de avanço após sua abertura < e antes do nome do elemento HTML eles estão fechando.

>

Apenas se familiarizando um pouco mais com o acima descrito, você vai dar saltos e limites além da maioria dos bloggers usando o WordPress.

Ouro ou Itálico

Quando você quer enfatizar um ponto e chamar a atenção para certas palavras você pode querer usar negrito ou itálico para fazê-las sobressair.

Eu definitivamente prefiro esta abordagem a TODOS OS CAPS, que para mim se apresenta como um grito.

O HTML para negrito é <strong> e para itálico é <em>.

Fun fact: Forte é fácil de lembrar por fazer algo em negrito, mas porque é que o elemento itálico usa em? Em é uma abreviação de ênfase. Isso pode ajudar a manter.

<em>This text is italicized, I am for gentle emphasis</em>

<strong>This text is bold, I am for strong emphasis</strong>

>Adicionalmente, você pode usar o WordPress WYSIWYG ou o atalho de teclado CTRL + B para Negrito e CTRL + I para itálico após destacar o texto que você quer modificar.

Para uma lista completa de atalhos de teclado do WordPress e outras formatações, os métodos vão para aqui.

Existem algumas regras de como você deve e não deve usar estas incluindo mantê-las mutuamente exclusivas, reservá-las para frases curtas e usá-las com moderação.

Practical Typography tem um ótimo artigo explicando a importância destas regras.

Se você está escrevendo uma cópia para realmente engajar as pessoas, como uma cópia de vendas, então estas regras podem ser dobradas, mas não quebradas.

Dênfase

Remmbrar, se tudo é enfatizado, então nada é enfatizado!

Listas – Ordered & Unordered

Existem dois tipos de listas que você pode adicionar usando HTML que também são suportadas pelo WordPress WYSIWYG.

These are:

Ordered Lists – <ol>

Ordered lists display as a series of numbered items. Isto é útil quando se escreve uma lista onde a ordem é importante.

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

>

>O código acima se transforma:

1. Item 1
2. Item 2
3. Item 3

Listas não ordenadas – <ul>

Listas não ordenadas são essencialmente listas de pontos.

><ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>>

E esta se transforma na lista de balas abaixo.

• Item 1
• Item 2
• Item 3

Todos nós sabemos como as listas são úteis e também ajudam a quebrar o seu conteúdo e torná-lo mais interessante.

Uma diferença importante que você vai notar aqui é que há itens individuais da lista <li> e eles são embrulhados na sua totalidade com um <ol> ou <ul> embrulho.

Isto é importante de estar ciente, porque se o embrulho <ol> ou <ul> estão faltando os itens da lista não serão renderizados.

Images

Outro aspecto importante da formatação de um post de blog ou qualquer página com WordPress é o uso de imagens e você não deve ter problemas para encontrar algumas fotos interessantes que você pode obter das imagens do Yahoo e outros sites de imagens sem direitos autorais. Algumas dessas opções são pagas, mas muitas delas são gratuitas desde que você dê crédito com uma menção de Fonte e link.

Um pequeno preço a pagar para ter visuais profissionais em seu site ou blog.

Uma imagem vale por mil palavras, como dizem, elas também fornecem aos seus leitores estímulos visuais, bem como pausas para ajudar a quebrar seu conteúdo em pedaços digeríveis.

Isso ajuda a manter seus leitores engajados e enquanto você não precisa codificar as imagens você mesmo entendendo que a sintaxe é útil.

Aqui está um exemplo de código de imagem e como ela será quando você olhar para a aba Texto do seu editor.

<img src="https://mazepress.com/image.png">

Uma imagem não requer uma tag de fechamento porque toda a informação que ela precisa está contida dentro dos parênteses de abertura e fechamento do elemento HTML. O src simplesmente chama a localização da URL.

WordPress permite que você flutue suas imagens para a esquerda, direita ou você pode centralizá-las. Se você fizer isso e verificar o código na aba Texto você verá que foram adicionadas classes que são usadas para estilizar as imagens de acordo.

Este é um exemplo de onde CSS externo está sendo usado para aplicar estilos diferentes a imagens diferentes. Útil para saber!

Importante: Antes de adicionar imagens aos seus posts e páginas certifique-se de que elas estão otimizadas para velocidade e mecanismos de busca.

Embeds

Inevitavelmente você vai querer usar códigos de incorporação de sites externos.

Um exemplo é quando você quer adicionar um vídeo do YouTube ou do Vimeo, você vai para compartilhar e ele lhe dá algum código longo que você pode copiar.

O principal a lembrar é que você não pode colar HTML ou qualquer outro código na aba visual do editor de conteúdo. Ao fazer isso, você vai codificar o código e torná-lo inútil quando você clicar em save.

Certifique-se de ir para a aba de texto e depois cole onde você quer que ele apareça.

Below é um exemplo de código embed do YouTube.

<iframe width="560" height="315" src="https://www.youtube.com/embed/ssxCQuv3KzE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

>

Embora o WordPress permita que você simplesmente cole uma URL do YouTube no seu post para exibi-la como um vídeo, isso pode não lhe dar controle total sobre as dimensões do vídeo e as outras configurações de embed.

Por este motivo, e porque eu sou da velha guarda, eu ainda uso o código de incorporação iframe.

A maioria dos sites que oferecem códigos de incorporação não são suportados nativamente pelo WordPress e por isso você ainda precisará estar ciente dos códigos de incorporação, iframes e como eles funcionam para poder adicionar multimídia aos seus posts.

Códigos de incorporação

Códigos de incorporação não são HTML. Na verdade, eles não são sequer uma linguagem de programação, eles são uma função nativa do WordPress que permite aos desenvolvedores de plugins e temas criar formas simples para você e eu adicionarmos elementos às nossas páginas web e posts.

O exemplo mais simples que aparece em praticamente todos os blogs é um atalho de formulário de contato, mas há centenas se não milhares de usos potenciais para atalhos que incluem a capacidade de adicionar:

• Tables
• Galleries
• Pacotes de preços
• Videos
• Formulários de entrada de Imãs de chumbo / Email Opt-in
• Épisódios dePodcast

>

Aqui está um atalho para um formulário de contato gerado pelo plugin Formulário de Contato 7, um dos nossos plugins recomendados que instalamos em 90% dos nossos sites e blogs.

Nota: Eu tive que adicionar espaços após a abertura e antes dos parênteses de fechamento para impedir que ele realmente mostrasse o formulário de contato, então imagine sem os espaços.

Nota: a sintaxe para um atalho é diferente. Eles começam com um parêntese de abertura ao invés de < e >.

Eles são então formatados pelo desenvolvedor do atalho para facilitar o ajuste e mudança de configurações essenciais.

Quando a página web carrega, este formulário de contato na verdade carrega cerca de 20 linhas de HTML confuso, então é muito mais fácil para você quando você pode acessar um atalho.

A única ressalva é que você não quer usar os atalhos em excesso, pois eles irão diminuir a velocidade de suas páginas web.

São úteis para saber e podem tornar o processo de edição do seu post muito menos complicado quando você não tem que usar grandes quantidades de HTML que você não entende e tem que trabalhar com cautela.

Conselhos Diversos de Formatação

Há várias outras dicas que aconselho os novos alunos do WordPress a ter em mente que vou cobrir brevemente.

Estas incluem:

• Não adicione quebras de linha desnecessárias. Isto significa tentar não usar <br> tag HTML e evite bater duas vezes entre parágrafos e seções, a menos que seja absolutamente necessário. Isso faz seus artigos parecerem confusos e você é obrigado a criar inconsistências.
• Não adicione famílias de fontes, tamanhos e cores específicas da página – Mais uma vez isso faz seus posts parecerem horrendos e como se tivessem sido criados em 1995. Você pode pensar que um título verde personalizado com uma fonte única chama a atenção quando na verdade ele se mostra inconsistente e não profissional. Seu tema deve ditar estes estilos.
• Nunca adicione HTML ou código embutido na aba Visual – Isto pode levar a resultados inesperados, envolver muita limpeza ou quebrar sua página completamente.
• Nunca carregue vídeos para o WordPress – Sua hospedagem de site não foi feita para fornecer conteúdo de vídeo. Felizmente, o YouTube e o Vimeo fornecem hospedagem de vídeo super rápida e 100% gratuita de qualquer forma. É por isso que é melhor incorporar vídeos do YouTube mesmo quando eles são seus.

Nada muito complicada mas eu vejo muitas vezes as pessoas a cometerem estes erros e a tornarem as suas vidas mais difíceis.

Mas em breve, as coisas poderão ser diferentes, muito diferentes de facto!

Gutenberg, The Future of Blogging?

Gutenberg é um novo editor de conteúdos que está a ser construído a partir do zero pelo WordPress e que em breve estará a chegar a uma instalação perto de si.

É o futuro dos blogues? Quem sabe? Mas é definitivamente o futuro do WordPress, por isso está na altura de o conseguir.

Gutenberg é uma besta diferente.

Se alguma vez usou o Medium.com para fazer blogs, então quando experimentar o Gutenberg pela primeira vez vai sentir-se estranhamente semelhante.

Na minha opinião, isto é uma coisa boa, o editor de conteúdos sem distracções do Medium é muito fácil de usar e ver o WP a tomar nota disto é positivo para todos os envolvidos na execução de blogs e sítios Web a correr no WP.

O editor do Gutenberg também é modular e permite-lhe arrastar e largar blocos no seu conteúdo, cada um com um propósito diferente.

Isto é semelhante a como os plugins do construtor de páginas e certos temas fornecem actualmente este tipo de solução de arrastar e largar, mas agora estas funcionalidades estão a chegar ao WordPress por defeito.

Se há um aspecto do WordPress que não evoluiu muito ao longo dos anos, tem sido o editor TinyMCE, por isso dou as boas-vindas a esta inovação de braços abertos.

Se está a debater-se com a formatação de posts no blogue com o editor actual, já pode tentar o Gutenberg descarregando-o e instalando-o indo a plugins no seu tablier e procurando por “Gutenberg”.

Formatação de posts no blog &Palavra Final HTML Básica

Se passar um pouco de tempo a praticar o acima descrito, ganhará muito mais controlo sobre o seu conteúdo e a forma como é apresentado.

Esperançosamente, sente-se um pouco mais confortável agora com a formatação de posts no blog e o uso básico de HTML.

Esta capacidade pode poupar-lhe muito tempo, dinheiro e arranhões na cabeça quando a formatação do seu conteúdo corre mal ou não é renderizada correctamente.

Embora o básico acima seja suficiente para a maioria dos bloggers e donos de sites WordPress, se você estiver curioso para saber mais, existem alguns ótimos sites gratuitos onde você pode aprender HTML incluindo CodeAcademy e w3Schools.

Agora, vá e torne seu conteúdo bonito! 🙂

Se você achou este artigo útil, considere verificar alguns de nossos outros guias úteis de blog como nossa Lista de Verificação de Postagem de Blog: Essentials Guide ou How to Repurpose Content e se você é fã deste tipo de guias, assine minha newsletter e eu compartilharei meu melhor conteúdo e descobertas com você via e-mail.