Плагин для подсветки незаполненных полей формы комментариев WordPress

Автор:
Nurlan Kemelbekov

Эта статья о том, как создать свой плагин для проверки  и подсветки незаполненных обязательных полей формы комментариев WordPress. Нет ничего ужаснее, чем после написания комментария на  блоге и отправке, узнать, что забыл заполнить обязательные поля после того, как нажал кнопку “Отправить”.

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

Ошибка: пожалуйста, заполните необходимые поля (имя, email).

Ошибка: пожалуйста, введите комментарий.

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

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

форма коммнтариев

рования.
Вот так выглядит подсветка формы комментирования с незаполненными обязательными полями на блоге maks-1.com.

Создание каталога плагина подсветки незаполненных полей формы комментариев.

1) Перейдите к папке плагинов: «wp-content/plugins».
Создайте новую папку под названием «custom-comments-validation». Это основная папка плагина, в которой будут содержаться все файлы плагина. Я назвал плагин » custom-comments-validation», на странице источника он назывался pbd-validate-comments , а вы можете назвать ее по своему желанию. Внутри «custom-comments-validation» создать папки CSS и JS.

каталог

2) Теперь, мы должны создать основной PHP файл плагина, который будет использоваться для управления плагином. Откройте желаемый редактор кода и создайте новый PHP файл с именем custom-comment-validation.php. Добавить этот код в «custom-comment-validation.php » файл:

<?php
/**
* Plugin Name: Custom Comments Validation
* Plugin URI: http://maks-1.com
* Description: Добавляет настраиваемые формы проверки JQuery в форме комментариев WordPress
* Version: 1.0
* Author: Maks
* Author URI: http://maks-1.com
* License: GPL
*/

/**
* Add jQuery Validation script on posts.
*/

Все поля выше говорят сами за себя, однако, для более глубокого понимания создания плагинов WordPress можете посетить страницу Кодекс  WordPress.org  Написание плагина WordPress.

Теперь в файл custom-comment-validation.php, вставьте следующее:

/**
* Добавить JQuery скрипт проверки сообщения.
*/
function pbd_vc_scripts() {
if(is_single() ) {
wp_enqueue_script(
'jquery-validate',
plugin_dir_url( __FILE__ ) . 'js/jquery.validate.min.js',
array('jquery'),
'1.10.0',
true
);

wp_enqueue_style(
'jquery-validate',
plugin_dir_url( __FILE__ ) . 'css/style.css',
array(),
'1.0'
);
}
}
add_action('template_redirect', 'pbd_vc_scripts');

/**
* Инициировать сценарий.
* Вызывает параметры проверки в форме комментария.
*/
function pbd_vc_init() { ?>
<script type="text/javascript">
jQuery(document).ready(function($) {

$('#commentform').validate({
rules: {
author: {
required: true,
minlength: 2
},

email: {
required: true,
email: true
},

url: {
url: true
},

comment: {
required: true,
minlength: 20
}
},

messages: {
author: "Пожалуйста, укажите Ваше имя.",
email: "Пожалуйста, введите действительный адрес электронной почты.",
url: "Пожалуйста, используйте правильный адрес веб-сайта.",
comment: "Сообщение должно быть не менее 20 символов."
}
});
});
</script>
<?php }
add_action('wp_footer', 'pbd_vc_init', 999);

3) Перейдите на сайт Bassistance.de и скачайте последнюю версию jQuery Validation Plugin.jquery validate4
После того, как файлы будут загружены, открыть и извлечь все файлы.
В папке «dist» вы увидите файл с именем jquery.validate.min.js.
Скопируйте этот файл и поместите его в папку «JS», расположенную в каталоге нашего плагина.

4) Окончательный файл, который мы хотим создать — это файл CSS, содержащий стили для отображения при выводе наших пользовательских сообщений об ошибке заполнения полей формы комментариев. Если сохранить и активировать плагин сейчас, все это будет работать отлично. Тем не менее, немного CSS для сообщений об ошибках не повредит.

Откройте стандартный блокнот notepad, скопируйте эти стили туда, сохраните, как style.css и загрузите в папку css.

label.error {
display: block;
background: #ffd2d2;
padding: 0 10px;

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

Статьи по теме: Как установить минимальную длину комментария в WordPress без плагина
Вот и все! Сохраните ваш плагин, активируйте его в приборной панели админки WordPress и попробуйте отправить фальшивый комментарий. Вы должны тут же (как говорится «не отходя от кассы») увидеть ошибки указывающие на незаполненные обязательные поля формы комментариев WordPress с подсветкой.

 



Вам также может понравиться:


2 комментарий на “Плагин для подсветки незаполненных полей формы комментариев WordPress

  1. Все работает без проблем, но в панели разработчика висит сообщение об ошибке. В console вот такая информация:
    Uncaught TypeError: undefined is not a function (index):505
    (anonymous function) (index):505
    j
    k.fireWith
    m.extend.ready
    J

    Что тут в коде не так, и можно ли это поправить?
    Спасибо.

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

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

* Copy This Password *

* Type Or Paste Password Here *

9 − 2 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!