Смайлики в комментариях без плагина на Wordpress

Главная » Создание блога » Обходимся без плагинов » Смайлики в комментариях без плагина на WordPress

Смайлики в комментариях без плагина на WordPress

2013-06-04 автор: Виталий Кириллов

Всем привет! Сегодня на SEO-Mayak.com я расскажу как сделать на WordPress смайлики в комментариях без плагина.

Лично я сам «рожицами» пользуюсь не часто, наверное в силу своей консервативности и на своем блоге я все же не стану это реализовывать, но раз читатели просят, ну как тут можно отказать 🙂 придется осветить и эту тему.

Конечно, молодое поколение и не только активно используют смайлики в комментариях для передачи своего настроение или выражения эмоций и надо стараться идти в ногу с временем.

Многие веб-мастера не заморачиваются и используют плагины типа Qip Smile или WP-Monalisa, но как известно я не сторонник плагинов и для своих читателей я покажу способ, как в очередной раз обойтись без них.

smailiki v kommentariyah

Немного покопавшись в CMS WordPress я понял, как можно добавить в форму комментариев практически любой смайл, но давайте все по порядку.

Как активировать смайлики в WordPress

В WordPress уже есть смайлики по умолчанию и эту функцию надо просто активировать и вставить в нужное место.

Чтобы реализовать задуманное, открываем для редактирования файл cоmments.php, который расположен в папке с темой (wp-content/themes/Название темы/cоmments.php). Не устану повторять, что для редактирования файлов, пользуйтесь текстовым редактором Notepad++!

Для начала нам надо определиться: где будет располагаться блок со смайликами. Обычно его ставят или непосредственно над формой ввода комментариев или под ней.

Ищем в файле comments.php что-то похожее на такую строчку:

<textarea name="comment" id="comment" cols="100" rows="10" tabindex="4"></textarea>

Затем, над вышеупомянутой строчкой или под ней, в зависимости от того, где вы хотите вывести блок, вставляем следующий код.

<script type="text/javascript">
function addsmile($smile){
document.getElementById( 'comment' ).value=document.getElementById( 'comment' ).value+' '+$smile+' ';
}
</script>
<?php
global $wpsmiliestrans;
$dm_showsmiles = '';
$dm_smiled = array();
foreach ($wpsmiliestrans as $tag => $dm_smile) {
    if (!in_array($dm_smile,$dm_smiled)) {
        $dm_smiled[] = $dm_smile;
        $tag = str_replace(' ', '', $tag);
        $dm_showsmiles .= '<img src="' .get_bloginfo( 'wpurl' ). '/wp-includes/images/smilies/' .$dm_smile. '" alt="' . $tag. '" onclick="addsmile(\''.$tag.'\');"/> ';
    }
}
echo '<div class="smaliki">'.$dm_showsmiles.'</div>';
?>

Вот в принципе и все, на этом можно было бы закончить статью и пожелать всем успехов, только вот смайлики от WordPress мне лично не очень приглянулись, да и выбор мне показался каким-то скудным.

smailiki1

И дабы не ударить лицом в грязь перед своими читателями, я решил пойти немного дальше.

Как заменить изображения смайликов на любые другие

Изображения со смайликами хранятся в директории wp-includes/images/smilies и имеют расширение .gif. Чтобы заменить картинки на желаемые, их конечно надо иметь на своем компьютере.

Благо в интернете полно различных сайтов, качественных и не очень, с которых можно все это дело скачать.

Далее, воспользуемся FTP клиентом и заменим изображения, которые находятся в папке smilies, на новые, при этом обязательно надо сохранить исходные названия.

Ну вот, теперь смайлики выглядят куда интереснее:

smailiki2

В файле style.css надо настроить отступы, для этого в коде я задал специальный класс:

class="smaliki"

Вот для этого класса можно прописать отступы и много другое, если есть знания и желание:

.smaliki {
 margin: 5px;
}

Но и это еще не предел возможностей! Для тех кто хочет предоставить своим комментаторам полный набор смайликов, надо будет их добавить к уже имеющимся, но тогда придется залезть в дебри CMS WordPress.

Как увеличить количество смайликов

Для реализации задуманного нам потребуется отредактировать файл functions.php. ВНИМАНИЕ! Это нет тот functions.php, который расположен в папке с темой. Требуемый нам файл находиться в папке wp-includes, прошу не путать и сделайте резервную копию файла, чтобы избежать не нужных проблем, если что-нибудь не получится.

Открываем файл и ищем 2426 строку. Функция отвечающая за вывод смаликов выглядит так:

function 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',
 );
 }

В одинарных кавычках справа от символов «=>» прописаны названия изображений, а слева, также в одинарных кавычках, коды, отвечающие за вывод того или иного смайлика. Сразу оговорюсь, что некоторые коды смайликов не совпадают с общепринятым в России их написанием.

Итак, что надо сделать, чтобы добавить новые смайлики или поменять уже существующие? Давайте для примера возьмем смайлик «Бандит» из скайпа и попробуем добавить его в наш блок.

В скайпе код «бандита» пишется как «(bandit)» без кавычек конечно.

Назовем изображение — «icon_bandit.dif» и с помощью FTP клиента закинем картинку в папку wp-includes/images/smilies. В файл functions.php перед строчкой

// This one transformation breaks regular text with frequency.

вставляем следующее:

'(bandit)' => 'icon_bandit.dif',

Язык PHP не терпит ошибок и если вы вдруг забудете поставить обыкновенную запятую, то Ваш сайт станет недоступен. Будьте внимательны!

Смотрим на результат:

smailiki3

И вот «рожица» в маске появилась в самом конце. Возможно в будущем я расскажу как сделать с помощью jQuery, выезжающий сверху или снизу, блок со смайликами, так что советую подписаться на обновления блога.

Таким образом выводятся смайлики в комментариях без плагина. Надеюсь я объяснил понятно, но если есть вопросы, я всегда готов на них ответить в комментариях.

На сегодня у меня все! Как Вам статья!

С уважением, Виталий Кириллов