Как использовать Ajax в WordPress — пример из реального мира

 function __construct() { parent::__construct( 'rml_widget', // Base ID __( 'Read Me Later', 'text_domain' ), // Name array( 'classname' => 'rml_widgt', 'description' => __( 'Read Me Later widget for displaying saved posts', 'text_domain' ), ) // Args ); } 

Здесь мы установили имя и описание для виджета, который будет отображаться в разделе виджетов на панели мониторинга.

Внутренняя форма виджета будет создана методом form() , например так:

 public function form( $instance ) { if ( isset( $instance['title'] ) ) { $title = $instance['title']; } else { $title = __( 'Read Me Later Posts', 'text_domain' ); } ?> <p> <label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php _e( 'Title:' ); ?></label> <input class="widefat" id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" type="text" value="<?php echo esc_attr( $title ); ?>"> </p> <?php } 

Как видите, наша форма состоит из текстового поля, которое содержит заголовок виджета. Мы назначаем наш заголовок в переменной $title . get_field_id() и get_field_name() дают нашему текстовому полю уникальный идентификатор и имя соответственно.

Метод update() отвечает за санитарную обработку и обновление значения пользовательского ввода.

 public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = ( ! empty( $new_instance['title'] ) ) ? strip_tags( $new_instance['title'] ) : ''; return $instance; } 

Требуется два параметра:

1. $new_instance содержит значение, введенное пользователем с помощью внутренней формы, которую мы создали методом form() .
2. $old_instance противоположен, он содержит предыдущее значение.

Теперь мы создадим метод widget() который будет отображать сообщения «Read Me Later» во внешнем интерфейсе.

 public function widget( $args, $instance ) { $title = apply_filters( 'widget_title', $instance['title'] ); echo $args['before_widget']; if ( ! empty( $title ) ) { echo $args['before_title'] . $title . $args['after_title']; } echo '<div class="rml_contents">'; $ids = get_user_meta( wp_get_current_user()->ID, 'rml_post_ids', true ); $args = array( 'post_type' => 'post', 'orderby' => 'DESC', 'posts_per_page' => -1, 'numberposts' => -1, 'post__in' => $ids ); $rmlposts = get_posts( $args ); if( $ids ) : global $post; foreach ( $rmlposts as $post ) : setup_postdata( $post ); $img = wp_get_attachment_image_src( get_post_thumbnail_id() ); ?> <div class="rml_posts"> <div class="rml_post_content"> <h4><a href="<?php echo get_the_permalink(); ?>"><?php the_title(); ?></a></h4> <p><?php the_excerpt; ?></p> </div> <img src="<?php echo $img[0]; ?>" alt="<?php echo get_the_title(); ?>" class="rml_img"> </div> <?php endforeach; wp_reset_postdata(); else : echo '<p>You have no saved posts now.</p>'; endif; echo '</div>'; echo $args['after_widget']; } 

Здесь мы используем get_posts() для отображения сообщений. Практически так же, как метод read_me_later() .

Не забудьте включить файл widget.php , добавив следующий код в read-me-later.php файла read-me-later.php :

 require(plugin_dir_path( __FILE__ ).'widget.php'); 

Обеспечение безопасности ваших вызовов Ajax

Работая с Ajax, вы должны предпринять необходимые шаги для обеспечения безопасности своего кода. Если вы собираетесь получать какие-либо данные от пользователя, очистите их перед сохранением в базе данных. Используйте nonce чтобы проверить, поступил ли запрос из правильного местоположения и был выполнен аутентифицированным пользователем. Здесь я собираюсь показать вам, как использовать nonce WordPress в вызове Ajax.

Сначала мы создадим одноразовый номер с помощью wp_create_nonce() и передадим его из JavaScript. Для этого используйте код из enqueue_rml_scripts() :

 wp_localize_script( 'read-me-later', 'readmelater_ajax', array( 'ajax_url' => admin_url('admin-ajax.php') ) ); 

И замените его следующим кодом:

 wp_localize_script( 'read-me-later', 'readmelater_ajax', array( 'ajax_url' => admin_url('admin-ajax.php'), 'check_nonce' => wp_create_nonce('rml-nonce') ) ); 

Теперь мы можем получить доступ к значению nonce из нашего JavaScript, используя readmelater_ajax.check_nonce . Добавьте свойство безопасности в метод jQuery.ajax() в вашем файле JavaScript, как jQuery.ajax() ниже:

 security : readmelater_ajax.check_nonce 

Наш финальный JavaScript будет выглядеть так:

 jQuery(document).ready( function(){ jQuery('#content').on('click', 'a.rml_bttn', function(e) { e.preventDefault(); var rml_post_id = jQuery(this).data( 'id' ); jQuery.ajax({ url : readmelater_ajax.ajax_url, type : 'post', data : { action : 'read_me_later', security : readmelater_ajax.check_nonce, post_id : rml_post_id }, success : function( response ) { jQuery('.rml_contents').html(response); } }); jQuery(this).hide(); }); }); 

Наконец, нам нужно проверить одноразовый номер в нашем обратном вызове Ajax. Для этого мы будем использовать check_ajax_referer() . Добавьте следующий код в начало метода read_me_later() который мы создали ранее:

 check_ajax_referer( 'rml-nonce', 'security' ); 

Это принимает два аргумента. Первый — это ключ, который мы создали с помощью wp_create_nonce() . Второе — это свойство security мы передали из JavaScript.

Если одноразовый номер неверен или не установлен, вызов Ajax прекратится. Таким образом, наш скрипт заблокирует недопустимые запросы Ajax.

Вывод

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

Как видите, Ajax легко использовать в WordPress. Это может быть пугающе в первый раз, но как только вы поймете, как это сделать, это работает и выглядит великолепно. Крючки WordPress есть везде, и они делают вашу жизнь проще. Я надеюсь, что вы выбрали некоторые полезные приемы из этого урока, теперь играйте с Ajax и делайте то, что вам нравится!