Предпросмотр комментариев в wordpress без плагинов

Предпросмотр комментария перед отправкой позвляет комментатору увидеть, как будет выглядеть написанный им текст. Это позволяет поправить ошибки, неточности, недостатки в оформлении до сохранения комментария в базе данных.

В статье я расскажу о том как сделать предпросмотр безо всяких плагинов. Долой излишнюю нагрузку!
Предпросмотр будет реализован с помощью jQuery и CSS.

Для начала нужно подключить jQuery к вашей wordpress теме. Для этого в файле header.php прямо перед вызовом wp_head(); добавьте этот код:

<?php wp_enqueue_script('jquery'); ?>

Дальше перед тегом < / head > вставляем скрипт предпросмотра комментариев:

<script type="text/javascript">
$(document).ready(function(){
 
	$("").add("<h3 id='preview-title'>Предпросмотр комментария</h3><div id='comment-preview'></div>").appendTo(document.body);
	$("#comment-preview, #preview-title").insertAfter("#comment");
 
	var comment = '';
	$('#comment').keyup(function() {
		comment = $(this).val();
		comment = comment.replace(/\n\n+/g, '<br /><br />').replace(/\n/g, "<br />");
		$('#comment-preview').html( comment );
	});
 
});
</script>

Остается немного стилизовать предпросмотр с помощью CSS:

#comment-preview {
	border: 1px solid #ccc;
	padding: 5px 15px 15px 15px;
	}
h3#preview-title {
	margin-bottom: 5px
	}

Конечно же, Вы можете использовать свои стили и настройки.
Предпросмотр комментариев в WordPress готов. Просто, быстро и без плагинов.

Запись опубликована в рубрике WordPress с метками . Добавьте в закладки постоянную ссылку.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">