Tutorial Wordpress - Postando!

Por Pamela Rebelo

OiE meninas! ^_^

Fiz esse tutorial com o objetivo de dar algumas dicas pra quem não conhece muito o Wordpress, e também padronizar o método de postagem.
Eu sou uma pessoa um tanto detalhista e perfeccionista (ambas as palavras podem ser sinônimo de *chata* T.T), então como eu disse acima, esse tutorial é para ajudar todas vocês a postarem com um certo padrão, pra deixar o blog mais organizado.

Postando

Acho que o caminho básico todas conhecem, né? é só se logar depois ir na aba Posts » Adicionar novo.
Primeira coisa, eu não uso o editor visual do Wordpress, porque ele polui todo o código HTML do post, cria classes desnecessárias (que eu vou explicar o que é mais pra baixo), e por aí vai.

Eu sei que o editor visual é mais fácil pra quem não conhece nada de código HTML, no entanto a intenção deste tutorial é deixar vocês mais familiarizadas com ele, e consequentemente formatar corretamente seus posts.
Para isso é só clicar na aba HTML ao lado da aba Visual. Editor HTML

Escrevendo e alinhando um texto

No modo HTML digite seu texto normalmente. Quando você quebrar uma linha apertando Enter uma vez
o texto vai aparecer assim :), ou seja, da mesma forma que você faz no editor visual.

Se você quebrar duas linhas (2x Enter), você vai criar um parágrafo como este.

O legal do editor HTMl é que ele reconhece automaticamente essas quebras de linhas, não havendo necessidade das tags ou , portanto nem vou falar delas! :P

Caso você precise alinhar ao centro uma pequena quantidade de texto use essa tag:

Seu texto aqui

Seu texto vai aparecer assim

Obs: Não precisa memorizar tag nenhuma. Sempre que vc for postar, abra esse tutorial, copie a tag, cole no post e faça as modificações necessárias, como trocar "Seu texto aqui" pelo texto que você desenha alinhar.
Obs2: NUNCA deixe o texto inteiro do post centralizado! Isso incomoda os olhos da pessoa que vai ler o post. Digo isso pois é uma espécie de regra de diagramação.

Imagens

Para inserir uma imagem é só clicar no quadradinho, ao lado do Upload/Inserir. Inserir imagem

Muita calma nessa hora! é agora que o Wordpress adora destruir um código bem feito rsrsrs
A primeira coisa é selecionar a imagem que você quer no seu computador. Inserir imagem

Feito isso, o Wordpress vai te mostrar uma série de opções de configurações sobre aquela imagem.

O que fazer quando for uma foto:
No campo Título coloque um título simples para a foto e cole no campo abaixo, o Texto Alternativo. O Wordpress faz o campo Título ser obrigatório, mas na verdade isso é um erro de confirguração, pois o atributo obrigatório em uma tag de imagem é o alt="", ou seja, o texto alternativo que aparecerá caso a imagem não consiga ser carregada. Inserir imagem

Deixe o campo URL do Link preenchido somente se você estiver inserindo uma foto muito grande, com mais de 500px de largura. Ao lado do campo Tamanho você pode ver o tamanho completo da sua imagem. Se ela por inferior a 500px de largura, no campo URL do link clique em Nenhuma, e o link desaparecerá.
Por que? Porque isso faz com que o Wordpress crie um link desnecessário. Inserir imagem

Fique sempre atenta ao tamanho da sua imagem

O Wordpress por padrão seleciona o tamanho médio, porém as vezes a imagem fica muito pequena no post. Como eu falei, se ela tiver 500 de largura e não for muito comprida (tenha em mente no máximo uns 300px de altura nesse caso) escolha sempre o Tamanho Completo. Inserir imagem

Se sua imagem passar de 500 de largura, selecione um dos tamanhos (grande, médio ou miniatura) que se aproximar da medida 500, e nesse caso pode manter a URL do link, pois quando a pessoa clicar na imagem do post, ela aumentará. Aí sim o link que o Wordpress gera é útil ;)

Obs: Por alguma razão que eu desconheço, o Wordpress desabilita o tamanho grande. 300 de largura eu acho muito pequeno, então eu prefiro ajustar a imagem no meu próprio computador para inserir no post já com 500px de largura.
Obs2: 500px é o máximo de largura para imagens que cabe na área de posts, por isso essa medida :)

Sempre selecione Nenhuma no campo de Alinhamento para fotos, pois você vai alinhar no centro com a próxima tag que vou mostrar.

Feito tudo isso é só clicar em Inserir no post. Você vai ver um código bem "sujo" que o Wordpress gerou ¬¬

O que estiver dentro da tag <a href=""> é o link, nele você não precisa mexer. O que estiver depois dele é a imagem.
Lembre-se: se você clicou em Nenhuma no campo URL do link, a tag <a href=""> não aparecerá. Inserir imagem

Este é o código que o Wordpress gerou:

<a href="http://enderecoenormedaimagem.jpg"><img src="http://dolls.virgula.uol.com.br/tutoriais/Wordpress/http://enderecoenormedaimagem2.jpg" alt="Borboletas" title="Borboletas" width="300" height="225" class="alignnone size-medium wp-image-2152" /></a>

Mesmo pedindo Alinhamento: nenhum, o Worpress insiste em colocar classes inúteis dentro da imagem. (classe é um atributo HTML para formatar um determinado elemento, no caso a imagem do post).

Então você vai apagar isso: class="alignnone size-medium wp-image-2152"
Isso é uma classe inútil rs

Lembra do título e do texto alternativo? Eles aparecem assim:
alt="Borboletas" title="Borboletas"

Muita atenção agora rs. o alt="Borboletas" você vai deixar lá, quietinho ^^ E o title="Borboletas" você vai selecionar inteiro com o mouse e Recortar (Ctrl + X ou botão da direita, Recortar). Se você não conseguir recortar, é só colar (Ctrl + C), apagar o texto.

Feito isso ele vai sumir de dentro da tag da imagem, certo?
Agora você cola ele dentro da tag do link. Por precaução cole sempre depois do <a, é só dar um espaço e colar. Inserir imagem

Por que? Porque os links tem um efeito no título, quando você passa o mouse sobre eles aparece uma descrição numa caixinha verde com letra branca bem bonitinha ^^ Isso serve para orientar os usuários sobre o que tem naquele link em que eles estão clicando.

Não custa reforçar: <img> tem alt="" e <a href=""> tem title="". Sempre ;)

Feito toda essa limpeza, o código vai ficar assim:

<a title="Borboletas" href="http://enderecoenormedaimagem.jpg"><img src="http://dolls.virgula.uol.com.br/tutoriais/Wordpress/http://enderecoenormedaimagem2.jpg" alt="Borboletas" width="300" height="225" /></a>

Ou seja, sem classes inúteis na tag da imagem, e com o atributo title="" dentro do link.

Feito isso você vai usar uma classe para alinhar a foto ao centro. Essa classe também insere um contorno em volta da foto.

Seu código ficará assim:

<a title="Borboletas" href="http://enderecoenormedaimagem.jpg"><img src="http://dolls.virgula.uol.com.br/tutoriais/Wordpress/http://enderecoenormedaimagem2.jpg" alt="Borboletas" width="300" height="200" /></a>

E você visualizará o post assim: Inserir imagem

Sempre use  para alinhar fotos, sempre sempre sempre SEMPRE T.T

O que fazer quando for uma doll:
Você executa todo o procedimento acima, porém ao invés de usar a classe postimg_center, você vai usar a pagimg_center, pois as dolls não vão ficar legais com um contorno verde em volta.

Sendo assim seu código fica:

<img src="http://dolls.com.br/tutoriais/Wordpress/http://enderecodadoll.gif" alt="Doll" width="150" height="200" />

Repare que aqui eu não usei link nenhum, então ao inserir uma doll sempre (sempre sempre rs) clique em Nenhuma no campo URL do link.
Se você quiser linkar a doll para o Deviant Art, por exemplo, ou algum outro site, é só colocar o endereço dele no campo URL do link, aí sim pode :)

Ah é, nesse caso não tem para onde transferir o atributo title="", daí você simplesmente apaga ;)

Legendas

Sempre que você quiser inserir legenda em alguma foto, não use tags como (itálico) ou (negrito), pois eu criei uma classe própria para isso.
Inserir imagem

Seu código ficará assim:

<a title="Borboletas" href="http://enderecoenormedaimagem.jpg"><img src="http://dolls.com.br/tutoriais/Wordpress/http://enderecoenormedaimagem2.jpg" alt="Borboletas" width="300" height="225" /></a> Texto da legenda aqui

Existe também o class="legenda2", que exibe o texto da legenda um pouco menor. Eu uso quando o texto da legenda é muito longo.

Destacando elementos

Vou usar esse post da Mari como exemplo.
Se você vai iniciar um tópico ou item (no caso dela o tom de pele) e ele vier acompanhado de dois pontos: sempre coloque em negrito, pois isso vai diferenciar o texto e vai dar a entender ao leitor que algo novo vai começar ali. Para isso use a tag Seu texto Inserir imagem

Também coloquei as cores em itálico, para diferenciar do resto das palavras que ela usou para justificar a escolha das cores. Para isso use a tag Seu texto

Não tem regra para o uso dessas coisas, vai da opção de cada uma. Se você vai citar nomes de músicas, artistas, ou mesmo nomes estrangeiros também acho legal destacar em itálico.
Procurem sempre fazer esses pequenos destaques, principalmente se o post tiver poucas ou mesmo uma imagem, pois assim o post não fica parecendo só um bando de texto cinza escuro ^^

Selecionando tags

Creio que isso é bem simples, é só digitar as tags que você quer no campo de tags. O Wordpress tem um auto-completar que mostra a tag quando ela já existe se você estiver digitando. Você também pode clicar em "Choose from the most used tags" para ver as tags mais utilizadas. é só clicar nas que você quiser selecionar. Inserir imagem

Obs: A não ser que seja nome próprio, de pessoa, de empresa, programa, etc, sempre use as tags em minúsculo, ou seja, não coloque a letra inicial em maiúsculo.
Obs2: Não crie um bando de tags similares, tipo São Paulo, Sampa e SP ou teatro, teatro-infanto-juvenil, infanto, infantil e juvenil. Seja seletiva, escolha uma tag para cada assunto e use somente ela.

Enviando o post para o Twitter

Com a ajuda de um plugin, o Wordpress faz isso automaticamente, é só você ir na caixinha Twitter Tolls e selecionar a opção Yes.
Assim que você postar, um novo tweet será criado no perfil do Dolls. Por favor, sempre façam isso antes de publicar o post ;) Inserir imagem

Salvando como rascunho

Veio um texto na cabeça e vc ficou louca pra postar sobre ele, mas ainda não tem o post completo?
Simples, inicie o post e Salve como rascunho. Assim você pode editar depois com mais calma e postar quando estiver pronto :) Inserir imagem

Agendando o post

Você posta em um dia específico da semana, porém já sabe que não vai ter tempo nesse dia?
Faça o post com antecedência sempre que possível e agende-o.
Inserir imagem

Ao lado de Publicar imediatamente, clique em Editar e selecione a data e hora em que você quer que o post seja publicado.
Cuidado com rascunhos nesse caso, pois posts programados também são rascunhos. Se você não finalizar um post programado, ele será postado do jeito que está.

Se você posta em tags específicas (dia específico da semana)

Sempre coloque esse código no final do seu post, fazendo as mudanças necessárias no nome da tag. Isso é importante para interagirmos com os leitores e saberem o que eles querem ler.

<img src="/imagens/seta.png" alt="" align="left" /> Para sugerir outros temas para a tag <a href="http://dolls.com.br/tag/esmaltes/">Esmaltes</a>, vai lá na <a title="Comunidade do Dolls.com.br no Orkut" href="http://www.orkut.com/Community.aspx?cmm=107642995" target="_blank">comunidade do Dolls no Orkut</a>!

Troquem sempre o nome dentro do link da tag, e também o nome dela que está linkado. No caso o link é http://dolls.com.br/tag/esmaltes/ e o nome dela é Esmaltes.
O endereço de uma tag sempre será: http://dolls.com.br/tag/nomedatag/, em caso de tags com mais de uma palavra, provavelmente o endereço do link é assim: http://dolls.com.br/tag/bolo-de-chocolate/. O bolo de chocolate foi só pra exemplificar xD

Dica: Salvem um modelo desse código com o nome correto da sua tag no bloco de notas. Assim é só copiar e colar no final do post ;)

Acho que é isso meninas ^^ Desculpem o tutorial tão comprido e espero que entendam o quanto é importante para os leitores visualizarem um blog com padrões de organização.