Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

pt-br:Usando Smilies

Smileys, também chamados de Emoticons, são conjuntos de caracteres ou gráficos usados para adicionar emoções a sua escrita. Eles são um jeito divertido de adicionar leveza ao seu site. smile emoticon

Emoticons de texto são criados ao se digitar certos caracteres que simulam um rosto sorridente (ou triste também). Alguns exemplos:

;-) equivale a smile emoticon
:-) equivale a smile emoticon
:-( equivale a sad emoticon
:-? equivale a confused emoticon

Para saber mais sobre a história dos emoticons leia na Wikipedia sobre os Emoticons.

Como o WordPress Lida com Smileys?

Por padrão, o WordPress converte automaticamente smileys de texto para imagens gráficas. Quando você digita ;-) em seu post, você verá smile emoticon quando visualizar ou publicar seu post.

Como Desativar Smileys

Você pode desativar gráficos smileys, então o texto não será convertido em gráfico.

  1. Vá em Configurações > Escrita
  2. Na seção Formatação, desmaque a opção converter emoticons como :-) e :-P em gráficos.

Ao fazer isso, significa que ao digitar ;-) no texto de um post, página ou comentário, você verá os caracteres ;-). Ou seja, esta opção não impede de usar caracteres reunidos em emoticons, apenas não mais mostra seu gráfico correspondente.

Lista de Emoticons WordPress

icon text text full text icon full text
smile :) :-) :smile: lol :lol:
biggrin :D :-D :grin: redface :oops:
sad :( :-( :sad: cry :cry:
surprised :o :-o :eek: evil :evil:
eek 8O 8-O :shock: twisted :twisted:
confused :? :-? :???: rolleyes :roll:
cool 8) 8-) :cool: exclaim :!:
mad :x :-x :mad: question :?:
razz :P :-P :razz: idea :idea:
neutral :| :-| :neutral: arrow :arrow:
wink ;) ;-) :wink: mrgreen :mrgreen:

* Em alguns casos, outros tipos de grupos de caracteres servem para mostrar o mesmo gráficos, por exemplo ;-) é o mesmo que ;)

Problemas com Emoticons

Vejo os carcteres nos textos

Talvez o administrador do site desativou este recurso, ou ainda, os arquivos dos gráficos que ficam em /wp-includes/images/smilies não estão presentes.

Para mim não funciona

Sempre deixe um espaço antes e depois do conjunto de caracteres do emoticon, isso vai previnir que os caracteres sejam inseridos no texto antes ou depois.redface emoticon Não use aspas ou qualquer outro tipo de sinal de pontuação antes ou depois dos caracterese de emoticon.rolleyes emoticon

Onde os arquivos gráficos ficam?

Os arquivos gráficos ficam em /wp-includes/images/smilies directory. Note que os nomes de arquivos de cada gráfico é especialmente referenciado no código do sistema, então não é possível adicionar outros arquivos ou arquivos com nomes diferentes para que fiquem disponíveis em seu site.

Como posso ter gráficos diferentes?

O modo mais simples:

  1. Localize a pasta contendo os gráficos que fica em /wp-includes/images/smilies e faça backup por precaução. Você deve substituir os arquivos pelos seus.
  2. Observe os nomes de cada arquivo. Seus novos arquivos devem ter o mesmo nome e ser do mesmo formato (gif).
  3. Por precaução, as dimensões dos arquivos devem ser 16x16 pixel.
  4. Envie os novos arquivos diretamente para a pasta /wp-includes/images/smilies.

E para adicionar novos caracteres?

Isto é algo que precisa de mais prática e cuidado, porque vai modificar arquivos do sistema WordPress. O código/função de substituição fica em /wp-includes/functions.php, há um tutorial em inglês) que pode tentar. Outra forma mais segura, é procurar por plugins que permite modificar/adicionar novos emoticons ao seu sistema.

Enviei imagens e aparecem em branco

Se acabou de enviar novas imagens e nada aparece, talvez tenha enviado por FTP no modo ASCII. Renvie os arquivos em modo BINARY.

Há algum classe CSS nesses gráficos?

Sim, o WordPress atribui a classe .wp-smiley aos emoticons, automaticamente. Você pode modificar/adicionar esta classe ao seu arquivo CSS para modificar como o gráfico é mostrado. Não atribua posicionamento nesta classe ou o gráfico flutuará dentro do texto. Certifique-se disso adicionando float:none:

img.wp-smiley {
    float: none;
}

Saiba Mais

brasil-1.png
A documentação do WordPress em Português do Brasil.
Todas as comunidades lusófonas também são bem-vindas! Adicione {{Codex-pt}} em seus artigos.