Добавление пользовательских полей к форме коментирования WordPress

Если вы создали сайт или блог, то для вас WordPress не нуждается в представлении, одна из самых популярных систем управления контентом (CMS). WordPress обеспечивает работу миллионов веб-сайтов, как отдельных людей, так и  крупных компаний. Почему он так успешен?

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

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

Add custom fields in WordPress comment form
Flickr/ Neal

В этой статье мы добавим три поля ввода на форму комментирования WordPress веб-сайта : два текстовых поля ввода (для указания номера телефона и заголовка комментария) и переключатель для оценки текущей статьи. Мы будем использовать функцию add_comment_meta для добавления поля мета-данных к комментариям. В ходе этого процесса мы также изменим форму комментирования с помощью Фильтра comment_form_default_fields и действий comment_form_after_fields и comment_form_logged_in_after. Так же мы будем использовать множество других функции для достижения желаемого результата.

Мы можем расширить форму комментирования редактируя тему или создать тему, которая изменяет поведение активной темы, чтобы добавить дополнительные поля ввода. Изменение темы относительно легче сделать, но у него есть очевидное ограничение: все те усилия, которые были направлены на кастомизацию будут напрасными, если тема будет перемещена. Использование плагина для настройки формы комментирования освобождает нас от этого ограничения. Таким образом, кастомизированная форма комментирования будет применена ко всем темам оформления (кроме тех, которые имеют нестандартные методы для добавления формы комментирования). Давайте подготовим плагин, чтобы избежать необходимости проходить через весь процесс кодирования в случае, если мы переключим тему. Мы назовем наш плагин “Extend Comment.”

Откройте предпочитаемый текстовый редактор (Notepad, Notepad, BlueFish и т.д.), и создайте новый файл, extendcomment.php. Убедитесь в том, что вы сохранили его в папку с таким же названием, ExtendComment, в целях поддержания простой организации файлов. В качестве первого шага в процессе кодирования, давайте добавим заголовки для нашего WordPress плагина. Заголовки достаточно понятны без всяких объяснений:

<?php
/*
Plugin Name: Extend Comment
Version: 1.0
Plugin URI: http://smartwebworker.com
Description: A plugin to add fields to the comment form.
Author: Specky Geek
Author URI: http://www.speckygeek.com
*/

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

// Добавляем кастомные мета (рейтинг) поля к стандартной форме комментирования
// Стандартная форма комментирования включает имя, адрес электронной почты и URL сайта
// Стандартные элементы формы комментирования скрыты, когда пользователь авторизован

add_filter('comment_form_default_fields', 'custom_fields');
function custom_fields($fields) {

		$commenter = wp_get_current_commenter();
		$req = get_option( 'require_name_email' );
		$aria_req = ( $req ? " aria-required='true'" : '' );

		$fields[ 'author' ] = '<p class="comment-form-author">'.
			'<label for="author">' . __( 'Name' ) . '</label>'.
			( $req ? '<span class="required">*</span>' : '' ).
			'<input id="author" name="author" type="text" value="'. esc_attr( $commenter['comment_author'] ) .
			'" size="30" tabindex="1"' . $aria_req . ' /></p>';

		$fields[ 'email' ] = '<p class="comment-form-email">'.
			'<label for="email">' . __( 'Email' ) . '</label>'.
			( $req ? '<span class="required">*</span>' : '' ).
			'<input id="email" name="email" type="text" value="'. esc_attr( $commenter['comment_author_email'] ) .
			'" size="30"  tabindex="2"' . $aria_req . ' /></p>';

		$fields[ 'url' ] = '<p class="comment-form-url">'.
			'<label for="url">' . __( 'Website' ) . '</label>'.
			'<input id="url" name="url" type="text" value="'. esc_attr( $commenter['comment_author_url'] ) .
			'" size="30"  tabindex="3" /></p>';

		$fields[ 'phone' ] = '<p class="comment-form-phone">'.
			'<label for="phone">' . __( 'Phone' ) . '</label>'.
			'<input id="phone" name="phone" type="text" size="30"  tabindex="4" /></p>';

	return $fields;
}

В следующем шаге мы должны добавить текстовое поле для заголовка комментария и переключатель для рейтинга статьи. Эти поля не могут быть добавлены к стандартным полям информации об авторе, упомянутым выше, потому что даже зарегистрированные пользователи должны вводить эту информацию. На этот раз мы не фильтруем какие-либо стандартные функции, а добавляем новые действия целиком. Действие comment_form_logged_in_after добавляет поле ввода ниже статусного сообщения, которое отображается зарегистрированным пользователям, как раз над полем ввода комментария. Оно не будет активировано, для не авторизованных пользователей. Чтобы показать, поля ввода, не зарегистрированным пользователям, мы добавили действие comment_form_after_fields, которое отображает поля ниже стандартных полей информации об авторе. Мы пометили поле с оценкой как required (обязательное), о котором мы позаботимся позже. Вместо того, чтобы использовать чистый HTML для радио кнопок, мы использовали простой код, который запускает цикл и отрисовывает поля ввода с соответствующими значениями, пока их пять.

// Добавляем поля после стандартных полей над полем ввода комментария, всегда видимы
add_action( 'comment_form_logged_in_after', 'additional_fields' );
add_action( 'comment_form_after_fields', 'additional_fields' );

function additional_fields () {
	echo '<p class="comment-form-title">'.
	'<label for="title">' . __( 'Comment Title' ) . '</label>'.
	'<input id="title" name="title" type="text" size="30"  tabindex="5" /></p>';

	echo '<p class="comment-form-rating">'.
	'<label for="rating">'. __('Rating') . '<span class="required">*</span></label>
	<span class="commentratingbox">';

		//Текущий диапазон оценки от 1 до 5. Если вы хотите, чтоб диапазон был от 1 до 10, тогда присвойте переменной $i значение 10.
		for( $i=1; $i <= 5; $i++ )
		echo '<span class="commentrating"><input type="radio" name="rating" id="rating" value="'. $i .'"/>'. $i .'</span>';

	echo'</span></p>';

}

Наш форма комментирования имеет поля ввода, но они бесполезны, пока у нас нет системы для сохранения данных введенных пользователем. Добавляя действия к хуку comment_post, мы разрабатываем метод для сохранения значения мета-данных, если они не пусты. Мы должны убедиться, что пустые поля мета-данных не сохраняются, чтобы уберечь таблицу базы данных, от заполнения пустыми строками. Мы также дезинфицируем введенные данные с помощью фильтра wp_filter_nohtml_kses.

Здесь стандартное использование функции add_comment_meta:

add_comment_meta($comment_id, $meta_key, $meta_value, $unique = false)

В этом коде $comment_id стандартное ID комментария установленное WordPress. Его оставим как есть, чтобы обеспечить обработку всех комментариев. $meta_key обозначает имена полей установленные нами. В этом случае, мета-ключи это номер телефона, заголовок комментария и рейтинг. Вот как мы реализуем эту функцию в нашем плагине:

// Сохраняем мета данные комментария вместе с комментарием

add_action( 'comment_post', 'save_comment_meta_data' );
function save_comment_meta_data( $comment_id ) {
if ( ( isset( $_POST['phone'] ) ) && ( $_POST['phone'] != '') )
$phone = wp_filter_nohtml_kses($_POST['phone']);
add_comment_meta( $comment_id, 'phone', $phone );

if ( ( isset( $_POST['title'] ) ) && ( $_POST['title'] != '') )
$title = wp_filter_nohtml_kses($_POST['title']);
add_comment_meta( $comment_id, 'title', $title );

if ( ( isset( $_POST['rating'] ) ) && ( $_POST['rating'] != '') )
$rating = ...

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.