Смайли на блозі Wordpress

Доброго дня! З Вами знову я, автор Блогу Вільного Вебмастера і сьогодні мова піде про смайликах на Вордпресс. Смайли вже давно завоювали свою популярність. Це відмінний спосіб виразити свої емоції і часом досить використовувати всього лише один смайл щоб висловити свої почуття.

Чесно кажучи мене не дуже вразили стандартні смайли вордпресс. Їх вигляд здався мені примітивним, дуже вже древнім і тому вирішив змінити їх на інші.

Стандартні смайли wordpress

Тут можна піти двома шляхами.

Перший - це встановити плагін, який автоматично замінить стандартні смайли на інші. Але занадто багато активних плагінів сповільнить роботу блогу, збільшить навантаження на сервер. До того ж плагіни часто додають свої таблиці в базу даних MySQL, а при видаленні не завжди чистять за собою цю базу і доводиться чистити вручну , Через панель phpMyAdmin.
Другий шлях дозволить уникнути таких неприємностей, до того ж дозволить краще вивчити роботу WordPress. Він має на увазі під собою ручне редагування.

Тому ми підемо іншим шляхом. Стандартні смайли знаходяться в папці / wp-includes / images / smilies / в корені Вашого блогу. Щоб їх змінити потрібно просто переписати старі на нові. Ви можете взяти абсолютно будь-які смайли, перейменувати їх, щоб імена файлів збігалися зі стандартними і закачати назад в ту ж папку. Викладаю набори смайликів, які у мене вже є:

Колобки міні

Колобки

смайли Skype

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

Наступне питання: як додати смайли над текстовим полем сторінки написання коментарів? Тут також все дуже просто! Для цього в файлі comments.php Вашої теми перед відкриває тегом <textarea>, у мене він має такий вигляд:

1 <textarea name = "comment" id = "comment" rows = "10" cols = "1"> </ textarea>

вставити наступний код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script> 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 style = "width: 100%; margin-left: 0px; margin-right: 0px;">'. $ Dm_showsmiles. '</ Div>'; ?>

<Script> 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 style = "width: 100%; margin-left: 0px; margin-right: 0px;">'. $ Dm_showsmiles. '</ Div>'; ?>

От і все! Даними діями нам вдалося замінити стандартні смайли wordpress на більш привабливі та сучасні, а також додати їх над текстовим полем форми коментарів. І все це без використання будь-яких плагінів.

Починаючи з версії 4.2 і вище розробники впровадили в ядро WordPress нову бібліотеку Twemoji - це набір символів в форматі Unicode, які при формуванні сторінки конвертуються в Emoji. Якщо браузер не підтримує емодзі, то відбувається автоматична заміна символів на графічні зображення, підкачуємі з CDN.

Таким чином старі добрі смайли ймовірно назавжди пішли в минуле ... Для себе я виділив негативні сторони подібної заміни і хочу поділитися з Вами:

навіть сучасні браузери не завжди підтримують Emoji;
зображення мають справжні розміри 72х72px і при завантаженні масштабируются, збільшуючи час рендеринга сторінки;
в секції <head> завантажуються інлайновие скрипти і стилі, не винесені в окремі файли.

До того ж всі статті та коментарі на блозі придбали зовсім інший зовнішній вигляд, який мене не влаштовував. Пропоную скористатися рішенням, яке дозволяє повернути колишні смайлики на свої місця. Воно містить частину функцій плагіна Classic Smilies, а також власні напрацювання.

Для початку в каталозі з назвою теми блогу необхідно створити папку smilies і в неї розпакувати зображення смайликів (посилання на завантаження наведені вище). Потім виконати інструкції, призначені для ранніх версій WordPress, додаючи трохи модифікований код в comments.php теми:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <script> 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_template_directory_uri (). '/ Smilies /'. $ Dm_smile. '" Alt = "'. $ Tag. '" Onclick = "addsmile (\' '. $ Tag.' \ '); "/>'; }} Echo '<div style = "width: 100%; margin-left: 0px; margin-right: 0px;">'. $ Dm_showsmiles. '</ Div>'; ?>

<Script> 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_template_directory_uri (). '/ Smilies /'.$ dm_smile.'" Alt = " '. $ Tag.'" Onclick = "addsmile (\ ''. $ Tag. ' \ '); "/>'; }} Echo '<div style = "width: 100%; margin-left: 0px; margin-right: 0px;">'. $ Dm_showsmiles. '</ Div>'; ?>

У файл functions.php додаємо наступний код:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 // Задаємо нове розташування зображень за замовчуванням function classic_smilies_src ($ old, $ img) {$ mythemes = get_template (); return site_url ( "/ wp-content / themes / $ mythemes / smilies / {$ img}", __FILE__); } // Повертаємо зіставлення символів файлів add_action ( 'init', 'classic_smilies_init', 1); function classic_smilies_init () {global $ wpsmiliestrans; $ Wpsmiliestrans = array ( ': mrgreen:' => 'icon_mrgreen.gif', ': neutral:' => 'icon_neutral.gif', ': twisted:' => 'icon_twisted.gif', ': arrow:' = > 'icon_arrow.gif', ': o' => 'icon_eek.gif', ':)' => 'icon_smile.gif', ': ???:' => 'icon_confused.gif', ': cool: '=>' icon_cool.gif ',': evil: '=>' icon_evil.gif ',': D '=>' icon_biggrin.gif ',': idea: '=>' icon_idea.gif ',': oops : '=>' icon_redface.gif ',': P '=>' icon_razz.gif ',': roll: '=>' icon_rolleyes.gif ',': wink: '=>' icon_wink.gif ',': cry: '=>' icon_cry.gif ',': eek: '=>' icon_surprised.gif ',': D '=>' 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', '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',); add_filter ( 'smilies_src', 'classic_smilies_src', 10, 2); // Відключаємо завантаження скриптів і стилів Emoji remove_action ( 'wp_head', 'print_emoji_detection_script', 7); remove_action ( 'admin_print_scripts', 'print_emoji_detection_script'); remove_action ( 'wp_print_styles', 'print_emoji_styles'); remove_action ( 'admin_print_styles', 'print_emoji_styles'); remove_filter ( 'the_content_feed', 'wp_staticize_emoji'); remove_filter ( 'comment_text_rss', 'wp_staticize_emoji'); remove_filter ( 'wp_mail', 'wp_staticize_emoji_for_email'); add_filter ( 'tiny_mce_plugins', 'classic_smilies_rm_tinymce_emoji'); add_filter ( 'the_content', 'classic_smilies_rm_additional_styles', 11); add_filter ( 'the_excerpt', 'classic_smilies_rm_additional_styles', 11); add_filter ( 'comment_text', 'classic_smilies_rm_additional_styles', 21); } // Відключаємо Emoji в візуальному редакторі TinyMCE function classic_smilies_rm_tinymce_emoji ($ plugins) {return array_diff ($ plugins, array ( 'wpemoji')); } // Прибираємо розміри смайликів рівні 1em (нові задаються для класу .wp-smiley) function classic_smilies_rm_additional_styles ($ content) {return str_replace ( 'class = "wp-smiley" style = "height: 1em; max-height: 1em;" ',' class = "wp-smiley" ', $ content); }

// Задаємо нове розташування зображень за замовчуванням function classic_smilies_src ($ old, $ img) {$ mythemes = get_template (); return site_url ( "/ wp-content / themes / $ mythemes / smilies / {$ img}", __FILE__); } // Повертаємо зіставлення символів файлів add_action ( 'init', 'classic_smilies_init', 1); function classic_smilies_init () {global $ wpsmiliestrans; $ Wpsmiliestrans = array ( ': mrgreen:' => 'icon_mrgreen.gif', ': neutral:' => 'icon_neutral.gif', ': twisted:' => 'icon_twisted.gif', ': arrow:' = > 'icon_arrow.gif', ': o' => 'icon_eek.gif', ':)' => 'icon_smile.gif', ': ???:' => 'icon_confused.gif', ': cool: '=>' icon_cool.gif ',': evil: '=>' icon_evil.gif ',': D '=>' icon_biggrin.gif ',': idea: '=>' icon_idea.gif ',': oops : '=>' icon_redface.gif ',': P '=>' icon_razz.gif ',': roll: '=>' icon_rolleyes.gif ',': wink: '=>' icon_wink.gif ',': cry: '=>' icon_cry.gif ',': eek: '=>' icon_surprised.gif ',': D '=>' 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', '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',); add_filter ( 'smilies_src', 'classic_smilies_src', 10, 2); // Відключаємо завантаження скриптів і стилів Emoji remove_action ( 'wp_head', 'print_emoji_detection_script', 7); remove_action ( 'admin_print_scripts', 'print_emoji_detection_script'); remove_action ( 'wp_print_styles', 'print_emoji_styles'); remove_action ( 'admin_print_styles', 'print_emoji_styles'); remove_filter ( 'the_content_feed', 'wp_staticize_emoji'); remove_filter ( 'comment_text_rss', 'wp_staticize_emoji'); remove_filter ( 'wp_mail', 'wp_staticize_emoji_for_email'); add_filter ( 'tiny_mce_plugins', 'classic_smilies_rm_tinymce_emoji'); add_filter ( 'the_content', 'classic_smilies_rm_additional_styles', 11); add_filter ( 'the_excerpt', 'classic_smilies_rm_additional_styles', 11); add_filter ( 'comment_text', 'classic_smilies_rm_additional_styles', 21); } // Відключаємо Emoji в візуальному редакторі TinyMCE function classic_smilies_rm_tinymce_emoji ($ plugins) {return array_diff ($ plugins, array ( 'wpemoji')); } // Прибираємо розміри смайликів рівні 1em (нові задаються для класу .wp-smiley) function classic_smilies_rm_additional_styles ($ content) {return str_replace ( 'class = "wp-smiley" style = "height: 1em; max-height: 1em;" ',' class = "wp-smiley" ', $ content); }

Тепер не потрібно кожен раз після поновлення WordPress замінювати картинки на нові, так як вони розташовуються в іншій папці і оновлення їх не зачіпає.

Таким чином ми відключили завантаження і показ Emoji, замінивши їх своїми смайликами, які використовували раніше. Успіхів!

Наступне питання: як додати смайли над текстовим полем сторінки написання коментарів?
Value + ' '+ $ smile +' '; } </ Script> <?
Lt;/ Div>'; ?
Value + '' + $ smile + ''; } </ Script> <?
Lt;/ Div>'; ?
Value + ' '+ $ smile +' '; } </ Script> <?
Lt;/ Div>'; ?
Value + '' + $ smile + ''; } </ Script> <?
Lt;/ Div>'; ?
Gif', ': ?

Производственная компания El.Od

Смайли на блозі WordPress

Как с вами связаться: