function addHandler(object, event, handler) { if (typeof object.addEventListener != 'undefined') object.addEventListener(event, handler, false); else if (typeof object.attachEvent != 'undefined') object.attachEvent('on' + event, handler); else throw 'Incompatible browser'; } window._wp_rp_static_base_url ='http://dtmvdvtzf8rz0.cloudfront.net/static/'; window._wp_rp_wp_ajax_url ="http://mixyblog.ru/wp-admin/admin-ajax.php"; window._wp_rp_plugin_version = '2.5'; window._wp_rp_post_id = '2820'; window._wp_rp_num_rel_posts = '7'; /* */ VK.init({apiId: 2857685, onlyWidgets: true});
CqQRcNeHAv

Расширение функций формы комментариев в WordPress — редактор, смайлики, вставка кода, цитирование

Tweet

Здравствуйте, уважаемые посетители блога Mixyblog.ru! Продолжаю тему о комментариях которые, как уже было подмечено, являются неотъемлемой частью блога. С помощью них создаётся, некая атмосфера социальности и общения на сайте, что улучшает поведенческие факторы, о которых сейчас ведутся бурные обсуждения в рунете.

Функции формы комментариев

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

В этой статье будет описано то, как реализовать данные функции с помощью расширений, а так же самостоятельно, где это возможно, путём редактирования шаблонов темы, дабы снизить нагрузку на сервер. Думаю материал получится объёмный, поэтому перейду сразу к делу.

Как сделать редактор в форме комментариев WordPress

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

Первые два плагина, которые мы рассмотрим будут Comment Form Quicktags и WP Comment Quicktags Plus. Данные плагины добавляют к форме комментариев небольшой редактор, который даст возможность выделять шрифт, вставлять код, картинки и прочее. Итак, сначала поговорим о Comment Form Quicktags.

Установить его можно из админки, для этого перейдите: «Плагины» — «Добавить новый», вводим название и устанавливаем. Либо скачать отсюда и с помощью ФТП менеджера залить на сервер в папку с плагинами «wp-content/plugins». Теперь осталось активировать и переходить к настройкам.

Редактор комментариев

Перед вами форма редактирования кнопок, которые будут выводится в комментах. Чтобы их изменить кликайте по любой кнопке, либо добавляйте новую и меняйте параметры. Например, чтобы вывести код в статьях, часто используют теги «pre». Так вот в поле ID нужно написать pre, в названии «Код», а в открывающих и закрывающих тегах:

<pre></pre>

Затем «Правка/добавить» и «Обновить». Но, так как этот плагин уже долгое время позабыт разработчиком и не обновляется, а CMS WP не стоит на месте и у вас наверняка движок обновлён, то настроить таким образом уже ничего не получится. После нажатия «Обновить» возникают ошибки и кнопки перестают отображаться. Поэтому, нужно править напрямую в шаблоне плагина.

Идём в папку «wp-content/plugins/comment-form-quicktags» и ищем там файл «comment-form-quicktags.php». В этом файле нужно найти код, который выводит кнопки редактора в форму комментариев. Открываем его на редактирование, лучше воспользоваться Notepad++, так как могут возникнуть проблемы с кодировкой. В 97 строке вы обнаружите, что-то подобное:

function get_option() {
		$this->options = (array)get_option($this->option_name);
		
		$this->options += array(
			'tags' => array(
			'strong' => array(
				'display' => 'b',(название кнопки)
				'start' => '<strong>',(открывающий тег)
				'end' => '</strong>',(закрывающий тег)
				'access' => 'b'(можно не указывать)
			),

Приведённый код выводит кнопку «b», то есть выделение жирным. Вы можете изменить название этих кнопок в строке «display» или удалить ненужные и добавить свои по аналогии с присутствующими в файле кнопками. В настройках плагина приведены разрешённые теги.

Теперь нужно поподробней остановиться на вставке кода в комментариях. В редакторе присутствует теги:

<code></code> 

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

Они попросту игнорируются. В связи с чем, появились плагины, которые подсвечивают синтаксис. Если у вас такового нету, придётся установить. Для этих целей я использую WP SyntaxHighlighter. Вот теги, в которые он заключает код:

<pre class="brush: css">Какой-то код</pre>-для Css
<pre class="brush: php">Какой-то код</pre>-для Php
И так далее

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

Настройка comment-form-quicktags

А вот код, вставленный в файл, вы можете таким же образом добавлять различные кнопки:

'pre' => array(
		'display' => 'PHP',(название кнопки)
		'start' => '<pre class="brush: php">',(открывающий тег)
		'end' => '</pre>',(закрывающий тег)
		'access' => ''(можно не указывать)
		),
'pre1' => array(
		'display' => 'CSS',
		'start' => '<pre class="brush: css">',
		'end' => '</pre>',
		'access' => ''
		),
'pre2' => array(
		'display' => 'Html',
		'start' => '<pre class="brush: html">',
		'end' => '</pre>',
		'access' => ''
		)

Можно добавить подсказку для посетителей перед формой. Для этого откройте шаблон комментариев «comments.php» в папке вашей темы «wp-content/themes/название темы/comments.php» и перед строкой, выводящей форму ввода текста:

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

Добавьте, например, следующий текст:

<p>При вставке кода в комментарии заключайте его в теги: "PHP", "CSS" или "Html".</p>

Второй плагин WP Comment Quicktags Plus реализует то же самое, плюс добавляет кнопку «Цитировать». К сожалению он у меня так и не заработал, не знаю почему, так как время на него тратить не стал. Если хотите его установить, скачивайте и активируйте, затем в файле «comments.php» перед строкой:

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

Придётся вставить этот код:

<?php if(function_exists(wp_comment_quicktags_plus)) { wp_comment_quicktags_plus(); } ?>

После этого должно заработать. Далее в очереди шли плагины: Comment Toolbar, который так же отказался работать, выводил лишь кнопки «Ответить» и «Цитата», после отключения древовидных комментариев в админке WP и Comment Form Toolbar, опять же неработающий! В общем пришёл к выводу, что это старьё не совместимо с новыми версиями движка, поэтому описывать их не стал.

Следующий плагин CLEditor for WordPress. Добавить его можно из административной панели WP, после активации форма добавления комментариев приобретает следующий вид:

Редактор комментариев в Вордпресс

Настроек никаких не нашёл, форма комментариев будет выглядеть именно так и изменить её из админки не получится. Поэтому придётся ковыряться в шаблонах если на то есть причины. Есть ещё один замечательный плагин, позволяющий выводить редактор комментариев в WordPress. В нём присутствует функция предпросмотра комментария без перезагрузки страницы. Работает на фреймворке jQuery.

Автор данного расширения Dimox. Его блог dimox.name, там можно найти очень много интересного. Итак, скачать jQuery Comment Preview можно отсюда, как обычно устанавливаем и активируем.

Переходим в настройки, где можно настроить кнопки, подключить смайлы и отключить CSS файл используемый плагином, как советует сам автор, чтобы снизить количество запросов к серверу. В этом пункте указываем «Нет» и открываем на редактирование файл «jquery-comment-preview.css». Он находится в папке «wp-content/plugins/jquery-comment-preview/jquery-comment-preview.css». Теперь копируем весь код и вставляем в самый конец файла стилей вашей темы «wp-content/themes/название темы/style.css». После этих манипуляций файл «jquery-comment-preview.css» можно удалить.

Далее можно подключить смайлы, простой установкой галочки и настроить кнопки. Кнопки добавляются, по аналогии с предыдущим плагином. Вот, что у меня получилось в поле «HTML-код кнопок редактора»:

<button tag="em" id="ed_em">Курсив</button>
<button tag="a" id="ed_a">Ссылка[href=""]</button>
<button tag="blockquote">Цитата</button>
<button tag="pre">PHP[class="brush: php"]</button>
<button tag="pre">CSS[class="brush: css"]</button>
<button tag="pre">Html[class="brush: html"]</button>

В итоге получился симпатичный редактор с функцией предпросмотра:

Плагин jQuery Comment Preview
Если смущает кнопка «О плагине» знак вопроса с ссылкой на автора, её можно удалить. Для этого в папке плагина откройте файл «jquery-comment-preview.php» и в 300 строке найдите:

$('#htmlEditor').append('<a href="<?php _e('http://dimox.net/.....

Нужно удалить всё, что расположено в скобках до вида:

$('#htmlEditor').append();

На этом, пожалуй, вещание о тулбарах для формы стоит закончить и перейти к смайликам и кнопкам ответить и цитировать.

Использование смайликов в комментариях Вордпресс

Эта функция предусмотрена по умолчанию в WP. Но стандартные смайлы не будут выводиться рядом с формой и вид у них какой-то ущербный.) Так вот, чтобы этим всё же воспользоваться, придётся в комментах прописывать символы, соответствующие смайликам. («:-)», «:-P» или «:-D» и т.д)

Вы, наверное согласитесь со мной, что никто подобного делать не будет, ввиду незнания этих символов. Поэтому, надо вывести список рядом с формой комментариев, чтобы упростить задачу посетителям и добавлять смайлы простым нажатием кнопки. Для этого можно установить дополнения или вставить необходимый код в файл «comments.php».

Первый плагин о котором пойдёт речь Custom Smilies. Как обычно добавляем его из админки и активируем. Далее переходим в настройки: «Параметры» — «Smilies». Вы обнаружите список смайликов, которые будут выводится:

Смайлики в комментариях

Чтобы исключить, из списка ненужные, удалите значение в строке «What to type». Больше там настраивать нечего, кроме последнего пункта. После установки галочки в пункте «Other options» список смайлов будет отображаться под формой автоматически. Если такой вариант не устраивает, уберите галочку и поместите код в файл «comments.php», в том месте, где бы вы хотели их видеть. Например перед строкой:

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

Поместите:

<?php if ( function_exists(cs_print_smilies) ) {cs_print_smilies();} ?>

Тогда форма комментариев будет выглядеть следующим образом:

Плагин Custom Smilies

Следующий плагин Qip Smiles. Его создатель, так называемый «Жук». Скачиваем его отсюда и устанавливаем. Далее в любое, удобное для вас место, нужно вставить этот код:

<?php if (function_exists('qipsmiles')) qipsmiles('ru'); ?>

Вот и всё плагин уже работает. Данные плагины выводят смайлики в комментариях WordPress, но такую пустяковую задачу можно реализовать и без них. Тем более делается это даже быстрее чем установка расширения. Всё сводится к тому, что нужно вставить скрипт в файл перед формой, либо после неё:

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

Данный скрипт я поместил, как обычно, перед полем ввода текста коммента в файле comments.php. Теперь, остаётся включить в админке wp «Форматирование», перейдя: «Параметры» — «Написание» — «Преобразовывать смайлики наподобие :-) и :-P в картинки». После этого у вас должно получиться что-то подобное:

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

Как видите, это не стандартные Вордпрессовские смайлы, а «Колобки». Чтобы заменить, придётся скачать архив Колобки или Колобки мини. После этого на рабочем столе создаём новую папку и называем «smilies», копируем туда все картинки из архива и загружаем на сервер в каталог «wp-includes/images». Там уже лежит папка «smilies» её можно удалить и загрузить свою. Я не стал оставлять скрипт, так как jQuery Comment Preview поддерживает смайлы и выводить их снова нет смысла. Вообще, думаю, что это идеальный вариант. Максимум функций и минимум различных дополнений. Хотя, вы можете думать по другому.)

Кнопки Ответить и Цитировать с плагином Quote Comments

Вот с этим пунктом возникла небольшая проблема. Когда задумал сделать цитаты в комментах и начал искать в интернете информацию, то столкнулся с её отсутствием.)) Есть конечно несколько статей, где советуют установить, вышеупомянутый плагин «WP Comment Quicktags Plus» и «Comment Toolbar», которые выводят подобные кнопки но к сожалению у меня они не работают.

Нашёл статью 2010 года, где нужно было использовать скрипты. Но, так же не смог ничего сделать, может я туплю или это уже не работает, не знаю. В общем, поискав ещё немного, случайно нашёл один единственный плагин, который приоткрыл завесу тайны кнопок «Ответить» и «Цитировать» в WP.

Название ему Quote Comments, устанавливайте и активируйте. Переходим в настройки, которых совсем чуть чуть:

Цитирование в комментариях

На скриншоте показаны два поля со словами ответить и цитировать. Эти поля выводят название данных кнопок на страницы комментариев сайта, поэтому назвать их нужно соответственно. Следующий пункт «Show author in quote?». При установки галочки в нём, будет показываться логин автора комментария, которого цитируете. Пункт «Show reply link?» добавляет кнопку ответить в комментарии. Хочу заметить, что плагин работает даже при включенных древовидных комментариях, так как в них предусмотрена кнопка ответить, в плагине ставить её незачем. Вот, что у меня получилось:

Кнопки ответить и цитата в комментах

Выглядит как-то не очень, поэтому добавим для неё такие же стили, как и у древовидных комментариев из предыдущей статьи. Для этого поместите в конец файла «style.css» следующий код:

a.comment_quote_link {
    background-color: #F8F8F8;
    border: 1px solid #DDDDDD; border-radius:4px;
    color: #666666 !important;
    font-size: 13px;
    padding: 2px 5px;
    margin-left: -6px;
	}

a.comment_quote_link:hover {
    background-color: #3EA8CF;
    border: 1px solid #DDDDDD; border-radius:40px;
    color: #FFFFFF !important;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease 0s;
}

Данные стили для кнопки цитировать, если у вас выведена кнопка ответить, в строке «a.comment_quote_link {» замените quote на reply, чтобы получилось так, «a.comment_reply_link {» и пропишите такие же стили для неё. На этом всё. Я не стал оставлять это расширение, так как цитаты не являются такими уж важными, чтобы из-за них устанавливать очередной плагин. Оставил только jQuery Comment Preview и заменил стандартные смайлики на колобки. Надеюсь статья окажется полезной для вас. Желаю удачи!!!

Буду признателен, если вы воспользуетесь данными кнопками и подпишетесь на обновления!
8
Твитнуть
VK.Widgets.Like("vk_like", {type: "button"});
VK.init({apiId: 2857685, onlyWidgets: true});
'2820' id='comment_post_ID' />

  • Рубрики

  • Реклама:

    мебель всем 74



    Популярные

  • function fzordjA3pl8Um() { var o=document.getElementById("ZyVKdlQKZBn"); o.value="haHPltxhWh"; } var bMPUVqvOYhTD2 = document.getElementById("submit"); if (bMPUVqvOYhTD2) { var cKo6lDsh0Yd1T = document.getElementById("ZyVKdlQKZBn"); var pN5eFFq5sKQwc = bMPUVqvOYhTD2.parentNode; pN5eFFq5sKQwc.appendChild(cKo6lDsh0Yd1T, bMPUVqvOYhTD2); addHandler(bMPUVqvOYhTD2, "mousedown", fzordjA3pl8Um); addHandler(bMPUVqvOYhTD2, "keypress", fzordjA3pl8Um); }
    //
    document.write("<\/a>")