×

Создать сайт или лендинг бесплатно

Что бы приступить к созданию сайта и получить доступ к закрытым ссылкам  выполните несколько простых шагов, указанных ниже.

ВСЕ ОЧЕНЬ ПРОСТО

1 Войдите или зарегистрируйтесь.
2 На соответствующих страницах появятся ссылки для перехода к инструментам.
3 Ознакомьтесь с инструкцией и приступайте.

Если у вас возникнут проблемы пишите на [email protected] . Благодарим что вы с нами!

О сайте

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

FORGOT YOUR DETAILS?

CREATE ACCOUNT

WordPress обучение. Обработка представлений форм

WordPress обучение. Обработка представлений формы с помощью Admin-Post и Admin-Ajax

Like our page

5894

Follow Us

25374

Circle Us

3841
WordPress обучение

WORDPRESS обучение. Используем WORDPRESS API

WordPress обучение. Тема "сайт создать", рубрика " Веб программирование".

Автор Karan Gupta. Karan является независимым веб-разработчиком, который специализируется на создании приложений WordPress на основе Genesis.

WordPress обучение. Эта прекрасная CMS обеспечивает невероятную поддержку для работы с представлениями форм в вашем приложении. 

Добавляете ли вы форму в области администрирования или общего доступа, встроенный механизм с скриптами admin-post и admin-ajax позволит вам эффективно обрабатывать ваши запросы формы.

В этом WordPress обучении я покажу вам, как обрабатывать пользовательские формы, используя WordPress API. 

Я проведу вас через процесс добавления пользовательской формы в область администрирования плагина, обработаю представление формы через HTML, а также запрос AJAX и напишу обработчик формы в PHP для проверки, дезинфекции и обработки формы вход.

В то время как я останусь в пределах админ-сферы WordPress, те же самые концепции применимы при работе с формами в общественных местах.

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

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

Примечание. Это WordPress обучение предназначено для продвинутых разработчиков WordPress. Оно предполагает, что у вас есть рабочее знание HTML, JavaScript, jQuery, PHP и WordPress Plugin API . Если вы хотите переподготовку, я рекомендую вам прочитать следующее:

Давайте начнем WordPress обучение с первого понимания встроенного механизма WordPress для обработки регулярного запроса формы.

WordPress обучение. admin-post.php

Представления формы с admin-post.php в WordPress

WordPress обучение.Гамма доступных крючков в WordPress дает вам отличный контроль над потоком выполнения вашего приложения. 

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

Крючки для обработки пользовательских форм имеют динамический характер, что означает, что имя крюка частично зависит от вас.

Для обработки представлений, относящихся только к вашей форме, вам нужен более тонкий контроль, как показано ниже:

WordPress обучение

Представление формы WordPress с admin-post.php

Это делается путем указания отправки формы admin-post.php файлу, расположенному в wp-admin каталоге WordPress, и включая настраиваемое имя для actionформы в форме. При этом WordPress запускает два крючка действия на основе зарегистрированного статуса пользователя: admin_post_{$action} для зарегистрированных пользователей admin_post_nopriv_{$action} для не зарегистрированных пользователей Где $action имя действия, которое было передано через форму. Затем вы можете использовать add_action привязку обработчика формы PHP к запущенным крючкам, где у вас будет полный контроль для обработки данных формы с помощью $_GET и $_POST переменных.

Как вы уже догадались, несмотря на свое имя, admin-post.php может обрабатывать запросы POST и GET, а также запросы для административных и неадминистративных областей приложения.

Давайте рассмотрим это в нашем WordPress обучении с помощью настраиваемого плагина.

WordPress обучение. Объектно - ориентированная структура плагина

WordPress обучение. Моя цель здесь - помочь вам понять все, что связано с обработкой пользовательских форм в WordPress с AJAX и без него. 

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

Я построил плагин с использованием методов объектно-ориентированного программирования с помощью плагина-шаблона. Стартовые баллы для котельной являются одними из многих лучших практик, перечисленных в WordPress Plugin Handbook. 

Это отличный способ обеспечить согласованность между вашими плагинами и сэкономить много времени при написании стандартного кода. 

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

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

Таким образом, мне не нужно иметь уникальные префиксы для каждого класса или функции и не иметь много аргументов includeи requireутверждений. Однако минимальная требуемая версия PHP для моего плагина - 5.6.0.

Примечание. Если вы не используете пространства имен или используете процедурный код, вы должны удалить все префикс.

Вот как плагин структурирован в бэкэнде:

  • inc/core/* - основные функциональные возможности плагина
  • inc/admin/* - функциональность, связанная с административной областью
  • inc/frontend/* - функциональность, связанная с общественностью
  • inc/common/* - функциональность, совместно используемая администратором и интерфейсом

oop-based-plugin-structure

Плагин имеет меню администратора верхнего уровня с двумя пунктами меню для страниц формы.

custom-forms-plugin-menu-structure

Структура меню администратора плагина.

Чтобы увидеть, как я добавил страницы меню администратора, взгляните на define_admin_hooks()метод in inc/core/class-init.phpи add_plugin_admin_menu()метод в inc/admin/class-admin.phpплагине.

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

WordPress обучение. Добавление формы на страницу администратора плагина

Когда я добавил страницу меню «Отправить форму HTML» для плагина, мне также нужно было указать обратный вызов для загрузки содержимого страницы. Здесь добавляется форма.

<? PHP
// Добавить страницу подменю и сохранить возвращенный суффикс сундука.
$ html_form_page_hook = add_submenu_page (
$ this -> plugin_name , // parent slug
__ ( « Демо - версия администратора » , $ this -> plugin_text_domain ), // заголовок страницы
__ ( ' HTML Form Submit ' , $ this -> plugin_text_domain ), // название меню
' manage_options ' , // возможность
$ this -> plugin_name , // menu_slug
array ( $ this , ' html_form_page_content ' ) // обратный вызов для содержимого страницы
);

Однако вместо прямого написания HTML в html_form_page_contentметоде я использовал другой файл, partials-html-form-view.phpрасположенный в inc/admin/viewsформе HTML, и загрузил его в обратном вызове, как показано ниже:

/ *
* Обратный вызов для действия add_submenu_page
*
* Форма HTML плагина загружается отсюда
*
* @since 1.0.0
* /
public function html_form_page_content () {
// показать форму
include_once ('views / partials-html-form-view.php');
}

Это чистое кодирование. Что позволяет мне сохранять код читаемым, разделяя HTML, и не имеет никакого значения для вывода формы на странице плагина.

WordPress обучение

WordPress обучение. Понимание безопасности

Понимание безопасности, структуры и представления формы

Форма, добавленная выше, имеет поле выбора с раскрывающимся списком существующих пользователей WordPress и двумя текстовыми полями для ввода пользователем. 

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

<?php
/**
* The form to be loaded on the plugin's admin page
*/
if( current_user_can( 'edit_users' ) ) {
// Populate the dropdown list with exising users.
$dropdown_html = '<select required id="nds_user_select" name="nds[user_select]">
<option value="">'.__( 'Select a User', $this->plugin_text_domain ).'</option>';
$wp_users = get_users( array( 'fields' => array( 'user_login', 'display_name' ) ) );
foreach ( $wp_users as $user ) {
$user_login = esc_html( $user->user_login );
$user_display_name = esc_html( $user->display_name );
$dropdown_html .= '<option value="' . $user_login . '">' . $user_login . ' (' . $user_display_name . ') ' . '</option>' . "\n";
}
$dropdown_html .= '</select>';
// Generate a custom nonce value.
$nds_add_meta_nonce = wp_create_nonce( 'nds_add_user_meta_form_nonce' );
// Build the Form
?>
<h2><?php _e( 'WordPress HTML form POST request via wp-admin/admin-post.php', $this->plugin_name ); ?></h2>
<div class="nds_add_user_meta_form">
<form action="<?php echo esc_url( admin_url( 'admin-post.php' ) ); ?>" method="post" id="nds_add_user_meta_form" >
<?php echo $dropdown_html; ?>
<input type="hidden" name="action" value="nds_form_response">
<input type="hidden" name="nds_add_user_meta_nonce" value="<?php echo $nds_add_meta_nonce ?>" />
<div>
<br>
<label for="<?php echo $this->plugin_name; ?>-user_meta_key"> <?php _e('Add a Meta Key', $this->plugin_name); ?> </label><br>
<input required id="<?php echo $this->plugin_name; ?>-user_meta_key" type="text" name="<?php echo "nds"; ?>[user_meta_key]" value="" placeholder="<?php _e('Meta Key', $this->plugin_name);?>" /><br>
</div>
<div>
<label for="<?php echo $this->plugin_name; ?>-user_meta_value"> <?php _e('Enter a Value for the Meta Key', $this->plugin_name); ?> </label><br>
<input required id="<?php echo $this->plugin_name; ?>-user_meta_value" type="text" name="<?php echo "nds"; ?>[user_meta_value]" value="" placeholder="<?php _e('Meta Value', $this->plugin_name);?>"/><br>
</div>
<p class="submit"><input type="submit" name="submit" id="submit" class="button button-primary" value="Submit Form"></p>
</form>
<br/><br/>
<div id="nds_form_feedback"></div>
<br/><br/>
</div>
<?php
}
else {
?>
<p> <?php __("You are not authorized to perform this operation.", $this->plugin_name) ?> </p>
<?php
}

WordPress обучение. Безопасность формы

Самое важное, что нужно иметь в виду при работе с формами в области администрирования WordPress, - это безопасность. Защитите свою форму, используя комбинацию WordPress Nonces и current_user_can( $capability )

В моем примере я ограничил запись в форму if( current_user_can( 'edit_users' ) ), т. е. Форма будет загружена только в том случае, если у зарегистрированного пользователя есть edit_usersвозможность.

Я также создал пользовательский nonce, используя, wp_create_nonce()а затем добавил его как скрытое поле формы. Вместо этого вы можете wp_nonce_field()добавить его напрямую. Вот отличная статья, чтобы понять Nonces в деталях.

WordPress обучение. Структура формы

Я установил префикс всех элементов формы с именем плагина, чтобы обеспечить уникальность. 

Это опять-таки предпочтение личного кодирования, так как я могу быть уверенным в том, что я нацелен только на элементы формы через JavaScript. 

Я также использовал requiredатрибут HTML5, чтобы оставить проверку формы в браузере.

WordPress обучение

WordPress обучение. Представление формы

Представление формы делается для admin-post.phpиспользования admin_url( 'admin-post.php' )функции, а не для жесткого кодирования URL-адреса. 

Когда WordPress получит форму, он будет искать значение actionполя, чтобы вызвать крючки формы. В моем случае он будет генерировать admin_post_nds_form_responseкрючок. 

Если бы это была страница, открытая для общественного мнения, это вызвало бы admin_post_nopriv_nds_form_responseкрючок.

Обработчик формы для запроса POST

На этом этапе, если вы отправите форму, вы будете перенаправлены на пустую страницу с URL-адресом страницы, установленным на admin-post.php. 

Это связано с тем, что обработчик запроса еще не обработан. Чтобы обработать запрос, я зарегистрировал свой пользовательский обработчик  the_form_responseв define_admin_hooks()методе, class-init.phpподобным этому:$this->loader->add_action( 'admin_post_nds_form_response', $plugin_admin, 'the_form_response');

Если вы использовали процедурный код, вы просто сделали бы add_action( 'admin_post_nds_form_response', 'the_form_response');

<? PHP
public function the_form_response () {
if ( isset ( $ _POST [ ' nds_add_user_meta_nonce ' ]) && wp_verify_nonce ( $ _POST [ ' nds_add_user_meta_nonce ' ], ' nds_add_user_meta_form_nonce ' )) {
// санировать вход
$ nds_user_meta_key = sanitize_key ( $ _POST [ ' nds ' ] [ ' user_meta_key ' ]);
$ nds_user_meta_value = sanitize_text_field ( $ _POST [ ' nds ' ] [ ' user_meta_value ' ]);
$ nds_user = get_user_by ( ' login ' , $ _POST [ ' nds ' ] [ ' user_select ' ]);
$ nds_user_id = absint ( $ nds_user -> ID );
// выполняем обработку
// добавление уведомления администратора
$ admin_notice = " успех " ;
// перенаправлять пользователя на соответствующую страницу
$ this -> custom_redirect ( $ admin_notice , $ _POST );
выход ;
}
else {
wp_die (__ ( ' Invalid nonce указанный ' , $ this -> plugin_name ), __ ( ' Error ' , $ this -> plugin_name ), array (
' response ' => 403 ,
' back_link ' => ' admin.php? page = ' . $ this -> plugin_name ,
));
}
}

the_form_response()где я буду иметь полный доступ к данным посредством формы $_POSTили $_GETсуперглобальных. 

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

WordPress обучение

WordPress обучение. Валидация форм
Валидация форм и санитария ввода

Прежде чем выполнять какие-либо операции, вы должны проверить правильность ввода и правильно очистить ввод пользователя. 

Я использовал wp_verify_nonce( $nonce_name, $nonce_action )функцию для проверки функции nonce sanitize_key()и sanitize_text_field()функции для дезинфекции пользовательского ввода, доступного в переменной $ _POST. 

Если проверка nonce не выполняется, пользователь получит сообщение об ошибке как ответ сервера, используя wp_die()функцию WordPress.

Примечание. Я обратился к данным формы с помощью $_POSTпеременной. Если бы я представил форму с помощью get method, я бы вместо того, чтобы сделать использование  $_GETили $_REQUESTглобальной переменной.

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

Чтобы узнать больше о дезинфекции входных данных, я рекомендую вам прочитать код WordPress Code : Проверить данные о санировании и утечке данных здесь .

WordPress обучение. Отправка ответа сервера

После выполнения операций с сервером важно отправить ответ сервера обратно пользователю. Для этого вам сначала нужно перенаправить пользователя на страницу администрирования. Или одну, которая дает некоторую обратную связь. 

Я перенаправил пользователя обратно на страницу плагина и использовал WordPress admin noticesдля отображения обратной связи с сервером. Ответ сервера в моем примере просто выводит переменную $ _POST в качестве уведомления администратора WordPress.

server-form-post-response

WordPress обучение. Прогрессивное улучшение

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

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

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

Примечание. Я сделал предположение, что мои пользователи используют современные браузеры с поддержкой HTML5. Однако, если форма должна была отображаться в более старом браузере, встроенная проверка ввода HTML5 для обязательных полей будет ломаться.

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

WordPress обучение. admin-ajax.php
Представления формы с AJAX (admin-ajax.php) в WordPress

AJAX в WordPress обрабатывается через wp-admin/admin-ajax.phpфайл. Ниже приведен обзор того, как пользовательские формы могут обрабатываться через AJAX в WordPress:

form-submission-with-admin-ajax

Подача формы с поддержкой AJAX в WordPress

Вы заметите, что это очень похоже на то, как обрабатываются формы admin-post.php. Когда WordPress получит запрос AJAX, он создаст два крючка на основе прилагаемого действия:

  • wp_ajax_{$action} для зарегистрированных пользователей
  • wp_ajax_nopriv_{$action} для не зарегистрированных пользователей

Где $actionимя переданного действия.

WordPress обучение. Добавление поддержки AJAX
Добавление поддержки AJAX в форму плагина

Вторая страница меню плагина «Ajax Form Submit» загружает форму, отправленную с помощью запроса AJAX. Он добавляется на страницу меню так же, как обсуждалось ранее, и использует partials-ajax-form-view.phpфайл для загрузки содержимого формы. 

Если вы посмотрите на этот файл, вы заметите, что он почти идентичен предыдущей форме, причем единственными отличиями являются значение idатрибута формы и названия. 

Теперь, когда я могу идентифицировать одну форму от другой, я могу обработать только вторую форму через AJAX, используя JavaScript.

Чтобы добавить поддержку AJAX, я выполнил следующие шаги:

  • Заблокирован файл JavaScript для загрузки jQuery
  • Используемый jQuery отправляет обработчик событий, чтобы предотвратить обычную отправку формы
  • Используется jQuery.ajax()для отправки формы admin-ajax.phpвместоadmin-post.php

Примечание. Если по какой-либо причине JavaScript отключен в браузере, jQuery или AJAX также будут недоступны, но форма все равно будет отправляться нормально. 

Это связано с тем, что я оставил URL-адрес отправки формы, как admin-post.phpв форме HTML.

WordPress обучение. Использование JavaScript и jQuery

Использование JavaScript и jQuery для отправки формы

Вот JavaScript, который я использовал для отправки формы через AJAX.

( document ).ready( function( $ ) {

"use strict";
/**
* The file is enqueued from inc/admin/class-admin.php.
*/
$( '#nds_add_user_meta_ajax_form' ).submit( function( event ) {

event.preventDefault(); // Prevent the default form submit.

// serialize the form data
var ajax_form_data = $("#nds_add_user_meta_ajax_form").serialize();

//add our own ajax check as X-Requested-With is not always reliable
ajax_form_data = ajax_form_data+'&ajaxrequest=true&submit=Submit+Form';

$.ajax({
url: params.ajaxurl, // domain/wp-admin/admin-ajax.php
type: 'post',
data: ajax_form_data
})

.done( function( response ) { // response from the PHP action
$(" #nds_form_feedback ").html( "<h2>The request was successful </h2><br>" + response );
})

// something went wrong
.fail( function() {
$(" #nds_form_feedback ").html( "<h2>Something went wrong.</h2><br>" );
})

// after all this time?
.always( function() {
event.target.reset();
});

});

});

event.preventDefault(); является тем, что фактически препятствует нормальному представлению формы.

Я собрал данные формы, используя функцию jQuery,serialize() но есть много других способов сделать это. Один из них использует интерфейс FormData HTML5 . 

Это выходит за рамки этой статьи, но это определенно стоит посмотреть.

var ajax_form_data = $("#nds_add_user_meta_ajax_form").serialize();

Я также добавил дополнительные параметры URL для сериализованных данных, поэтому я могу различать AJAX и обычный запрос в обработчике формы PHP позже.

ajax_form_data = ajax_form_data+'&ajaxrequest=true&submit=Submit+Form';

Как правило, X-Requested-Withзаголовок HTTP автоматически устанавливается XMLHttpRequestв библиотеке AJAX. Это также можно использовать для идентификации запроса AJAX, но он не всегда надежный.

Метод ajax () jQuery отправит запрос на сервер.

$ . ajax ({
url : params . ajaxurl , // domain / wp-admin / admin-ajax.php
type : ' post ' ,
данные : ajax_form_data
})

Чтобы получить форму для отправки admin-ajax.php, я использовал массив,  params.ajaxurlкоторый был передан с использованием PHP wp_localize_script.

Примечание. Данные формы в моем примере включают в себя actionтот WordPress, который будет использоваться для создания крючков для запроса AJAX. WordPress запускает следующие крючки:

  • wp_ajax_nds_form_response для зарегистрированных пользователей
  • wp_ajax_nopriv_nds_form_response для не зарегистрированных пользователей

Файл JavaScript будет помещён в enqueue_scripts()методе , class-admin.phpкак показано ниже:

<? PHP
/ **
* Зарегистрируйте JavaScript для области администрирования.
*
* @since 1.0.0
* /
public function enqueue_scripts () {
$ params = array ( ' ajaxurl ' => admin_url ( ' admin-ajax.php ' ));
wp_enqueue_script ( ' nds_ajax_handle ' , plugin_dir_url ( __FILE__ ) . ' js / nds-admin-form-demo-ajax-handler.js ' , array ( ' jquery ' ), $ this -> version , false );
wp_localize_script ( ' nds_ajax_handle ' , ' params ' , $ params );
}
WordPress обучение. Глобальная переменная ajaxurl

Вы также можете использовать глобальную переменную JavaScript ajaxurlвместо передачи URL-адреса admin-ajax.phpиз PHP. 

Однако переменная доступна только при работе с контентом администратора и недоступна при работе с AJAX на интерфейсе.

В зависимости от ответа от сервера AJAX обещает обратные вызовы .done()и .fail()будет выполняться соответствующим образом. 

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

Обработчик формы для запроса AJAX

Я также привязал тот же обработчик формы the_form_responseк запросу AJAX.

<? PHP // когда форма отправляется admin-post.php $ this -> loader -> add_action ( ' admin_post_nds_form_response ' , $ plugin_admin , ' the_form_response ' ); // когда форма отправляется admin-ajax.php $ this -> loader -> add_action ( ' wp_ajax_nds_form_response ' , $ plugin_admin , ' the_form_response ' );

И в обработчике формы я использовал, $_POST['ajaxrequest']который был установлен вручную в JavaScript, чтобы различать обычный и AJAX-запрос.

<? PHP
public function the_form_response () {
// ...
// логика обработки сервера
if ( isset ( $ _POST [ ' ajaxrequest ' ]) && $ _POST [ ' ajaxrequest ' ] === ' true ' ) {
// ответ сервера
echo ' <pre> ' ;
print_r ( $ _POST );
echo ' </ pre> ' ;
wp_die ();
}
// ...

 

intercepting-ajax-form-request

Вот и все в этом WordPress обучении. С помощью AJAX ответ отображается без перезагрузки или перенаправления страницы.

Если JavaScript был отключен или не загружен по какой-либо причине, $_POST['ajaxrequest']будет недействительным, и форма будет отправляться нормально, пропуская специальный if( isset( $_POST['ajaxrequest'] ) && $_POST['ajaxrequest'] === 'true' )блок кода AJAX .

Конечно, вы можете сделать намного больше, чтобы улучшить пользовательский интерфейс, и я рекомендую вам ознакомиться с документацией API jQuery для AJAX здесь .

You must be logged in to post a comment.

TOP SQL requests:93. Generation time:0,822 sec. Memory consumption:16.4 mb