Snippets e Shortcodes

Como Criar e Usar Smilies Personalizados no WordPress

Google+ Pinterest LinkedIn Tumblr
Anúncios Google

Não há quem não conheça os velhos smilies. Presentes em redes sociais, blogs, no velho MSN e mais um monte de lugares, é uma ferramenta simplíssima que converte conjutos de caracteres em ícones, para expressar alguma emoção.

Por padrão, o WordPress converte automaticamente vários smilies. Quem não conhece o 😉 ou o famoso Mr. Green :mrgreen:? Mas talvez você não goste dos smilies comuns e precise de carinhas novas para seu projeto. Nesse caso, não é uma boa ideia simplesmente caçar a pasta onde eles estão instalados e alterá-los.

O melhor é usar uma função que vai vincular uma nova pasta de smilies. Essa é a recomendação oficial do WordPress. Veja como fazer para trocar os padrões e também criar novos.

Alterar Smilies Padrão

Os smilies ficam na pasta /wp-includes/images/smiles. Procurando lá você nota que eles são imagens no formato GIF, com fundo transparente. Se vai criar um novo conjunto de smilies, use esse mesmo formato e salve cada imagem exatamente com o mesmo nome do smile original.

Nota: se seus smilies personalizados foram salvos em outro formato, como PNG, e você não tem como salvá-los em em GIF, renomeie-o mudando a extensão. Se a extensão não estiver visível, leia essa ajuda da Microsoft para resolver.

Mas não salve na pasta original, ou vai excluir o smile padrão. Crie uma nova pasta “smilies” em outro lugar, como na pasta wp-content. Dentro dela coloque seus smilies personalizados.

Note que eles devem ter o tamanho certo (15 x 15 pixels) para evitar que linhas fiquem muito altas quando eles forem exibidos, e os mesmos nomes dos smilies originais, ou não vai funcionar. Se forem mais altos que 15 pixels, talvez você precise alterar a propriedade line-height no texto do seu blog, via CSS, para tornar as linhas mais altas.

Agora adicione ao seu arquivo functions.php o seguinte:

function meus_smilies($img_src, $img, $siteurl){
    return $siteurl.'/wp-content/smilies/'.$img;
}
add_filter('smilies_src','meus_smilies', 1, 10);

Na segunda linha, entre as aspas simples, coloque o caminho para a pasta dos seus novos smilies. Como sugeri antes, o exemplo é uma pasta dentro da wp-content/smilies. Use outro local se preferir.

Só isso. Se tudo estiver certo, os smilies dessa nova pasta passarão a ser exibidos em vez dos “comuns”.

Criar Novos Smilies

Aí já complica um pouco mais, pois é preciso criar um código que pegue suas combinações de caracteres personalizadas para novos smilies.

Para não ter que editar o arquivo functions.php da instalação do WordPress (fica no caminho wp-includes/functions.php – nunca é recomendável editar diretamente os arquivos da instalação, já que ao atualizar a versão do WP essas mudanças se perderão), vamos “clonar” a função que carrega os smilies no arquivo functions.php do nosso template (tema). Essa função então é modificada para carregar os smilies novos.

Cole isso no functions.php do seu template:

function my_smilies_init() {
	global $wpsmiliestrans, $wp_smiliessearch;

	// don't bother setting up smilies if they are disabled
	if ( !get_option( 'use_smilies' ) )
		return;

	if ( !isset( $wpsmiliestrans ) ) {
		$wpsmiliestrans = array(
		':mrgreen:' => 'icon_mrgreen.gif',
		':neutral:' => 'icon_neutral.gif',
		':twisted:' => 'icon_twisted.gif',
		  ':arrow:' => 'icon_arrow.gif',
		  ':shock:' => 'icon_eek.gif',
		  ':smile:' => 'icon_smile.gif',
		    ':???:' => 'icon_confused.gif',
		   ':cool:' => 'icon_cool.gif',
		   ':evil:' => 'icon_evil.gif',
		   ':grin:' => 'icon_biggrin.gif',
		   ':idea:' => 'icon_idea.gif',
		   ':oops:' => 'icon_redface.gif',
		   ':razz:' => 'icon_razz.gif',
		   ':roll:' => 'icon_rolleyes.gif',
		   ':wink:' => 'icon_wink.gif',
		    ':cry:' => 'icon_cry.gif',
		    ':eek:' => 'icon_surprised.gif',
		    ':lol:' => 'icon_lol.gif',
		    ':mad:' => 'icon_mad.gif',
		    ':sad:' => 'icon_sad.gif',
		      '8-)' => 'icon_cool.gif',
		      '8-O' => 'icon_eek.gif',
		      ':-(' => 'icon_sad.gif',
		      ':-)' => 'icon_smile.gif',
		      ':-?' => 'icon_confused.gif',
		      ':-D' => 'icon_biggrin.gif',
		      ':-P' => 'icon_razz.gif',
		      ':-o' => 'icon_surprised.gif',
		      ':-x' => 'icon_mad.gif',
		      ':-|' => 'icon_neutral.gif',
		      ';-)' => 'icon_wink.gif',
		// This one transformation breaks regular text with frequency.
		//     '8)' => 'icon_cool.gif',
		       '8O' => 'icon_eek.gif',
		       ':(' => 'icon_sad.gif',
		       ':)' => 'icon_smile.gif',
		       ':?' => 'icon_confused.gif',
		       ':D' => 'icon_biggrin.gif',
		       ':P' => 'icon_razz.gif',
		       ':o' => 'icon_surprised.gif',
		       ':x' => 'icon_mad.gif',
		       ':|' => 'icon_neutral.gif',
		       ';)' => 'icon_wink.gif',
		      ':!:' => 'icon_exclaim.gif',
		      ':?:' => 'icon_question.gif',
		);
	}

	if (count($wpsmiliestrans) == 0) {
		return;
	}

	krsort($wpsmiliestrans);

	$wp_smiliessearch = '/(?:s|^)';

	$subchar = '';
	foreach ( (array) $wpsmiliestrans as $smiley => $img ) {
		$firstchar = substr($smiley, 0, 1);
		$rest = substr($smiley, 1);

		// new subpattern?
		if ($firstchar != $subchar) {
			if ($subchar != '') {
				$wp_smiliessearch .= ')|(?:s|^)';
			}
			$subchar = $firstchar;
			$wp_smiliessearch .= preg_quote($firstchar, '/') . '(?:';
		} else {
			$wp_smiliessearch .= '|';
		}
		$wp_smiliessearch .= preg_quote($rest, '/');
	}

	$wp_smiliessearch .= ')(?:s|$)/m';
}
remove_action('init', 'smilies_init', 5);
add_action('init', 'my_smilies_init', 5);

Se procurar no functions.php que fica na pasta wp-includes da instalação do WordPress, verá exatamente esse trecho de código (exceto as duas últimas linhas) por volta da linha 2500. Agora é só criar os novos smilies.

Dentro do array com todos os caracteres que viram smile, crie novos, por exemplo:

...
':!:' => 'icon_exclaim.gif',
':?:' => 'icon_question.gif',

':mario:' => 'icon_mario.png', // novo smile criado
':alien:' => 'icon_alien.png', // novo smile criado
		);
	}

Cuidado ao atribuir esses novos atalhos, pois se já existir um que comece do mesmo jeito, será sobreposto. Por exemplo, se criar qualquer um começando por : e o, ele vai virar :o, mesmo que seja :ovo:, ou :ohnao:, etc.

Como ficou? Assim:

teste de smilies customizados

Mais sobre Smiles no Codex do WordPress.

Os ícones do Mario e do alien foram tirados desse pacote que você encontra no deviantART.

Fundador do Tutoriart em 2010, é ex-instrutor de Photoshop, design web e gráfico. Em quase uma década de redação online, tem cerca de 1500 artigos publicados. Gerencia também o Memória BIT.

2 Comments

    • DanielLemes Reply

      Olá, é uma edição do mesmo código postado na primeira parte; na segunda caixa de código só destaquei o trecho que é alterado. Ali onde criamos os novos atalhos (para o ícones “mario” e “alien”, é a sequência dos atalhos que já existiam.

Write A Comment

Pin