Artigos sobre a plataforma atual mais poderosa para criação de sites

Posts

Aprenda como responder, aprovar ou excluir comentários em seu site ou blog desenvolvido na plataforma WordPress.

Configurações

Efetue essa configuração para receber notificações sobre novos comentários:

  • Acesse o painel do seu site (www.seusite.com.br/wp-admin);
  • Clique no item “Configurações” no menu esquerdo e então em “Geral”;
  • Verifique se seu e-mail está configurado corretamente, caso realize alguma alteração, clique em “Salvar”;

Veja como acessar o painel do seu site: Como acessar o painel administrativo do WordPress

Aprovar e responder comentários

Quando você for notificado sobre um novo comentário, você poderá excluir, aprovar ou responder:

  • Acesse o painel do seu site (www.seusite.com.br/wp-admin);
  • Clique em “Comentários” no menu lateral esquerdo;
  • Escolha uma ação e pronto.

Atenção: Dependendo da configuração do seu site, os comentários só serão publicados caso sejam aprovados.

Vídeo: Como aprovar e responder comentários no WordPress

É muito comum clientes e amigos terem dificuldade na hora de publicar algum conteúdo em seus site, a plataforma WordPress é bem simples e muito funcional, basta entender o funcionamento do editor de texto que você não terá mais dificuldades.

Antes de mais nada, temos que prestar a atenção em um detalhe, existem duas maneiras de preparar o conteúdo no editor, existe o modo Visual (recomendado) e o modo Texto (você deve conhecer programação HTML).

Verifique sempre antes de iniciar o artigo se está no modo correto, recomendo que utilize sempre o mode Visual caso não tenha conhecimento em HTML.

modo-visual-editar-texto-wordpress

Após selecionar o modo do editor, repare na opção “Parágrafo”, é ali que iremos escolher se vamos utilizar um título, subtítulo, parágrafo ou outros…

Opções de Formatação de Post

Este é o menu de formatação de texto do WordPress, no qual se pode atribuir negrito, itálico, criar listas ordenadas e não ordenadas, criar citação, mudar alinhamento de textos e imagens entre outros.

No botão assinalado em vermelho, você poderá visualizar outras formatações extras do sistema, que são: Formatação de títulos, sublinhado, texto justificado, mudança de cor em textos e outras.

As duas opções assinaladas em laranja são importantíssimas, pois através destas você irá copiar e colar textos pré-formatados em documentos de texto normal, formatados em MS Word ou Open Office.

painel-formatacao-editor-wordpressAtenção: Esteja sempre atendo, pois o WordPress permite você copiar e colar textos sempre passar pelo botão de colar do Word, com isso você poderá colar excesso de formatação do Word para o seu artigo e desta forma isso poderá prejudicar a visualização do seu website.

Como utilizar os cabeçalhos no WordPress?

As opções de cabeçalhos do editor do WordPress equivalem aos códigos HTML: h1, h2, h3… e etc, por exemplo:

Cabeçalho 1 é o título 1 do artigo

Cabeçalho 2 é o título 2 (subtitulo) do artigo

Cabeçalho 3 é o título 3 (subtitulo) do artigo

e assim por diante.

Selecione o texto, sem deixar espaços antes ou depois do texto, após selecionar o texto, escolha no menu “Parágrafo” a opção desejada. Assim como no word ou em outros editores de texto, você deve formatar seu texto utilizando parágrafos, cabeçalhos e etc.

Veja um exemplo:

exemplo-selecionado-texto-editor-wordpress

 

Sendo assim, você pode utilizar fontes maiores ou menores em seu texto.

Como criar listas no editor do WordPress?

Recomendo que utilize listas para facilitar a leitura e obter uma aparência mais agradável em seus textos, alem disso, a utilização de listas é favorável para a indexação da sua página no Google por diversos motivos.

Vamos utilizar um exemplo onde iremos ter um Título e 5 ítens como lista, irei selecionar o texto “Título” e defini-lo como Cabeçalho 3, irei então adicionar os 5 ítens, selecionado os 5 iténs, irei clicar na opção “Lista não ordena”, no menu superior do editor:

inserir-listas-editor-wordpress

Resultado:

Título:

  • Ítem;
  • Ítem;
  • Ítem;
  • Ítem;
  • Ítem.

*Pressione duas vezes a tecla “enter” para finalizar a lista e voltar a formatação de texto padrão (parágrafos)

Como inserir links (hyperlink) em seus textos no WordPress?

É muito comum as pessoas adicionarem o endereço completo de uma página por escrito em seus artigos, isso é ruim por diversas razões mas para mim, o pior é a questão estética, as URL’s longas atrapalham a leitura do visitante.

Para isso, recomendo que utilize a função “Inserir Link” no editor do WordPress, é bem simples de se utilzar.

Copie o endereço da página que será “linkada” e então escreva o texto normal, ou uma palavra como “Clique”. Selecione o texto que irá contem o link, no caso vamos utilizar “Clique” como exemplo, então, após selecionar o termo ou palavra, clique na opão “Inserir Link”:

inserir-links-editor-wordpress

Insira o endereço da página destino (aquele que já copiamos) no campo solicitado (URL) e coloque um título para o link (utilize o título da página de destino, se o link for para a página do Google, o título deve ser: Google, por exemplo):

adicionando-links-editor-wordpress

Após inserir a URL e o Título, clique em “Adicionar link”, pronto, a palavra ou texto previamente selecionado irá agora estar com um link para a página que está mencionando, melhor que colar aquelas URL’s gigantescas que atrapalham a leitura e nem sempre o visitante consegue clicar ou copiar o endereço.

Resultado:

Google

Como aumentar ou diminuir o tamanho de um texto ou uma palavra através do editor?

É comum quando escrevemos um texto inserir uma legenda, observação ou assinatura e queremos as vezes deixar esse texto menor ou maior, caso você não queira utilizar os cabeçalhos para isso e nem negritar a frase, você poderá inserir um código HTML entre a frase ou palavra, definindo o tamanho em pixels, no caso do HTML, px.

Não é possível alterar ou personalizar o tamanho da fonte diretamente pelo editor, para fazer isso será necessário utilizar um código HTML no modo Texto do editor.

Para isso você deve antes de mais nada alterar o editor para o modo Texto (HTML), cuidado para não alterar a fortação do conteúdo já existente, então você deve inserir o código <span style=”font-size: 20px;”> Exemplo </span>.

Repare que o valor 20px é o tamanho que escolhi, porém você pode escolher o valor que quiser, maior ou menor. Adicione sempre o código <span style=”font-size: 20px;”> na frente do texto que irá alterar e no final adicione o código </span> para não alterar o restante do conteúdo.

Resultado:
Exemplo da fonte em 20px

Atenção: Não utilize esse código no modo Visual pois não irá funcionar, tenha certeza de alterar o modo do editor para o modo Texto, caso ainda não consiga utilizar o código, tente alterar o sinal de aspas “” caso tenha copiado e colado o código, as vezes ele pode ser alterado e isso causa problema.

Como otimizar imagens para sites

Otimizar Imagens

A otimização de imagens para sites é mais uma prática essencial para um bom posicionamento por um simples motivo, os buscadores como Google ImagensBing Imagens e outros ainda não conseguem “ler” imagens, por isso, é fundamental informar detalhes sobre as imagens em seu site, assim como otimizar o tamanho da imagem (o peso, não as dimensões da imagem).

Nome da Imagem

Nome da imagem para otimização de sites

Isso é algo simples mas muito importante, nunca salve suas imagens com nomes como: “xyz123.jpg” ou outras sequências que não serão compreendidas pelos buscadores ou usuários.

Geralmente quando você tira uma foto com uma máquina digital ou com o celular o nome da imagem é salva por uma sequência de letras e números como por exemplo: “DCIM0002013.jpg” ou “IMG0020120629.jpg“.

A recomendação aqui é que você altere o nome dessa imagem para alguma “breve descrição”, use uma palavra chave, mas sem exageros. Por exemplo se eu for publicar uma foto do meu cachorro (Shiva) na praia, vou alterar o nome para: shiva-na-praia.jpge

Não se preocupe muito em descrever a imagem com detalhes ou utilizar palavras-chave estritamente relacionadas ao seu conteúdo, isso deve ser algo natural, acredite, o jeito natural de otimização é o que traz melhores resultados, pois são realmente eficazes e os buscadores conseguem avaliar isso.

Obs: Não utilize espaços no título da imagem, recomendo utilizar hifens em palavras compostas, não deixe espaços pois eles serão formatados em códigos html como %20, nesse caso, o resultado seria shiva%20na%20praia.jpge e não é isso que queremos.

Tamanho da Imagem e Tempo de Carregamento

Quanto menor possível, melhor. Quanto mais leve for a imagem, menor será o tempo de carregamento da página (O Google confirmou que isso um fator no ranking), inclusive em dispositivos móveis. Estamos falando de milésimos de segundos e os buscadores dão prioridade para páginas que são carregadas em menos tempo, alem disso, pesquisas mostraram que o tempo médio de espera para o carregamento de uma página no smartphone é de 4 segundos ou a grande maioria acaba saindo do site (aumento da taxa de rejeição).

Se para você é importante disponibilizar a imagem em um tamanho maior, são diversas opões, disponibilizar a imagem para ser “baixada” em algum disco virtual como o Dropbox ou Google Drive ou hospedar a imagem em algum site específico para isso como Picasa ou Flickr por exemplo e criar miniaturas em seu site com links externos para a imagem e maior tamanho publicada nesses outros sites.

É verdade que imagens pesadas, em alta definição e cheias de mega pixels são ótimas para quem vai imprimir ou dar zoom para ver detalhes das imagens, mas não são indicadas para a grande maioria de sites na web, ao eliminar esses detalhes através de softwares, é possível manter a imagem com  a mesma qualidade aparente e um tamanho muito menor.

Obs: É possível através de softwares como o Adobe PhotoShop, reduzir o peso de uma imagem em até 80% ou mais sem perder qualidade, mantendo as dimensões originais. Fotos tiradas através do celular em média tem um peso de 4MB, você consegue reduzir o tamanho dessa imagem para 300Kb por exemplo, sem perder muita qualidade.

Reduzindo o tamanho de uma imagem para otimização

Título e Texto Alternativo (Alt Text)

Assim como falamos sobre o nome da imagem, é importante atribuir um título e um texto alternativo para a imagem, essas informações não são visíveis na página mas os buscadores utilizam essas informações para indexar as imagens, é a maneira como informamos ao buscador os detalhes da imagem, muitas pessoas ignoram isso mas essa é uma das partes mais importantes da otimização de imagens.

Escreva um titulo com as palavras-chave da imagem, atribua uma descrição detalhada, por exemplo:

Título e Descrição de imagens para web

Metadados da Imagem

Essa dica é muito útil para fotógrafos e sites com foco em imagens, é um assunto polêmico e não sabemos ao certo como o Google utiliza essas informações, mas sabemos que esses metadados são “lidos” e mantidos pelo Google, eu particularmente utilizo e acho muito importante, através dessas informações você pode especificar os direitos autorais e da imagem e ainda detalhes técnicos como por exemplo: tipo de câmera, foco, lente e diversas outras informações.

Para isso, clique com o segundo botão em “propriedades” da imagem e você terá a opção de adicionar essas informações na aba “detalhes”, veja o exemplo:

detalhes de imagem na otimização de sites