Сегодня мы начнем мини-сериал о том, как вставлять посты через интерфейс. В этом уроке мы рассмотрим различные аспекты, начиная с проверки формы и вставки постов. Итак, давайте подготовимся и начнем!
Вступление
Наша цель после завершения этого мини-сериала — позволить пользователю отправлять посты через интерфейс, а также редактировать и отправлять пост в корзину; все без присутствия в панели управления WordPress. Эти методы могут быть использованы либо в теме, либо в плагине и могут быть легко адаптированы для получения очень сложных и сложных представлений.
Демонстрационная версия и загружаемые файлы являются урезанной темой, которая была создана только для целей этого урока.
Так что откройте ваш любимый текстовый редактор и начнем!
Шаг 1 Создание формы
Мы начнем с создания формы, которая позволит пользователю вводить детали в отношении создания сообщения. Поскольку мы встраиваем это в тему, давайте начнем с создания нового шаблона страницы и назовем его template-insert-posts.php . Затем мы начнем создавать нашу форму и вставлять некоторые метки и поля ввода для заголовка записи и текстовой области для тела:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
|
<form action=»» id=»primaryPostForm» method=»POST»>
<fieldset>
<label for=»postTitle»><?php _e(‘Post Title:’, ‘framework’) ?></label>
<input type=»text» name=»postTitle» id=»postTitle» class=»required» />
</fieldset>
<fieldset>
<label for=»postContent»><?php _e(‘Post Content:’, ‘framework’) ?></label>
<textarea name=»postContent» id=»postContent» rows=»8″ cols=»30″ class=»required»></textarea>
</fieldset>
<fieldset>
<input type=»hidden» name=»submitted» id=»submitted» value=»true» />
<button type=»submit»><?php _e(‘Add Post’, ‘framework’) ?></button>
</fieldset>
</form>
|
Мы только что создали очень простую форму, в которой пользователь может ввести текст для ввода заголовка и текстовую область для содержимого сообщения.
Теперь, когда у нас установлены основные принципы, нам нужно будет выполнить некоторую проверку формы, чтобы убедиться, что мы получаем правильный контент и не совершаем злонамеренных атак на наши материалы.
Шаг 2 Проверка формы
Мы будем использовать две разные формы проверки. Мы будем использовать плагин проверки jQuery вместе с традиционной проверкой PHP. Давайте начнем со стороны проверки jQuery и инициализируем наш скрипт проверки. Мы гарантируем, что мы зарегистрируем и поставим в очередь скрипты в нашем файле functions.php . Наряду с этим мы создадим пустой файл JavaScript, где будем обрабатывать все наши пользовательские jQuery; не забудьте зарегистрировать и поставить этот файл в очередь для инициализации. Это должно выглядеть примерно так:
|
1
2
3
4
5
6
7
|
// custom jquery
wp_register_script( ‘custom_js’, get_template_directory_uri() . ‘/js/jquery.custom.js’, array( ‘jquery’ ), ‘1.0’, TRUE );
wp_enqueue_script( ‘custom_js’ );
// validation
wp_register_script( ‘validation’, ‘http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js’, array( ‘jquery’ ) );
wp_enqueue_script( ‘validation’ );
|
Отлично, мы зарегистрировали и поставили в очередь все наши необходимые скрипты. Теперь мы откроем наш пользовательский файл jQuery и начнем инициализацию нашего плагина проверки jQuery; мы откроем наш пустой файл JavaScript и напишем следующую строку кода для создания нашей проверки jQuery:
|
1
2
3
4
5
|
jQuery(document).ready(function() {
jQuery(«#primaryPostForm»).validate();
});
|
Все, что мы здесь сделали, — это получили идентификатор нашей формы и применили к нему метод validate . Теперь, когда у нас это есть, мы вернемся к нашему файлу template-insert-posts.php и убедимся, что мы поместили required класс в обязательные поля ввода.
Вся проверка jQuery на месте, давайте перейдем к проверке PHP.
Наша проверка должна гарантировать, что мы вводим заголовок, и если проверка jQuery завершится неудачей, она вернется к проверке PHP. Мы делаем это, сначала создавая переменную PHP для хранения сообщения об ошибке, а затем создаем некоторые условные тесты.
Сначала мы проверяем, отправил ли пользователь форму, а затем проверяем, является ли наша переменная сообщения об ошибке PHP пустой. Нам нужно вставить следующий код, который делает это чуть выше нашего <?php get_header(); ?> <?php get_header(); ?> :
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
|
<?php
$postTitleError = »;
if ( isset( $_POST[‘submitted’] ) ) {
if ( trim( $_POST[‘postTitle’] ) === » ) {
$postTitleError = ‘Please enter a title.’;
$hasError = true;
}
}
?>
|
Наша проверка PHP на месте, мы собираемся убедиться, что отправляемое нами значение совпадает со значением, введенным пользователем, и мы делаем это, вставляя следующий код в postTitle ввода postTitle :
|
1
|
value=»<?php if ( isset( $_POST[‘postTitle’] ) ) echo $_POST[‘postTitle’]; ?>»
|
Мы также должны сделать то же самое для нашей текстовой области, но она работает немного по-другому; вместо установки значения мы вставляем следующий код в наши теги postContent textarea:
|
1
|
<?php if ( isset( $_POST[‘postContent’] ) ) { if ( function_exists( ‘stripslashes’ ) ) { echo stripslashes( $_POST[‘postContent’] );
|
Наконец, нам нужно убедиться, что мы выводим наше сообщение об ошибке, и мы делаем это, проверяя, является ли наша переменная сообщения об ошибке пустой. Если наша переменная не пуста, выведите сообщение, иначе ничего не выведите. Следующий код достигает этого:
|
1
2
3
4
|
<?php if ( $postTitleError != » ) { ?>
<span class=»error»><?php echo $postTitleError;
<div class=»clearfix»></div>
<?php } ?>
|
Теперь, когда мы настроили нашу форму с проверкой, мы можем перейти к вставке содержимого в сообщение. Давайте двигаться дальше…
Шаг 3 Отправка сообщения
Теперь мы отправим данные нашей формы в фактическое сообщение. Мы делаем это с помощью функции WordPress wp_insert_post . Эта функция позволяет нам вставлять сообщения, поэтому мы будем использовать это в наших интересах.
Сначала мы создадим переменную, которая будет содержать все наши различные элементы. Вы можете определить целую кучу различных элементов, и вы можете прочитать об этом в Кодексе WordPress . Вставьте следующий код чуть ниже кода проверки формы:
|
1
2
3
4
5
6
7
8
|
$post_information = array(
‘post_title’ => wp_strip_all_tags( $_POST[‘postTitle’] ),
‘post_content’ => $_POST[‘postContent’],
‘post_type’ => ‘post’,
‘post_status’ => ‘pending’
);
wp_insert_post( $post_information );
|
Код, который мы только что вставили, создает массив и присваивает значения различным элементам. Для элемента post_title мы postTitle POST наше значение postTitle и postContent наш postContent в наш элемент post_content .
Мы также установили для нашего типа записи значение « post , так как мы будем отправлять тип сообщения по умолчанию, но вы можете передать любой пользовательский тип сообщения в это поле. Наконец, мы устанавливаем статус сообщения, ожидающего рассмотрения, чтобы администратор мог подтвердить сообщение перед его публикацией.
Затем мы запускаем функцию wp_insert_post и передаем наш массив со всеми нашими элементами и назначенными им данными.
Это оно! Теперь мы можем добавлять сообщения через интерфейс, но мы еще не закончили. У нас есть некоторые проблемы безопасности, которые мы должны компенсировать. Мы начинаем со вставки wp_nonce_field . Если вы не знаете, что такое nonce-поле, Кодекс WordPress объяснит это отлично:
Поле nonce используется для проверки того, что содержимое формы пришло из местоположения на текущем сайте, а не из другого места.
Это поможет нам против любых проблем безопасности и предотвратит любые злонамеренные атаки. Все, что нам нужно сделать, это вставить следующий код перед нашей кнопкой отправки:
|
1
|
<?php wp_nonce_field( ‘post_nonce’, ‘post_nonce_field’ );
|
Наряду с этим мы отредактируем нашу форму проверки, чтобы гарантировать, что мы отправляем контент только после того, как в поле nonce было подтверждено, что мы отправляем контент с веб-сайта, мы делаем это путем замены нашего условного утверждения проверки. Ваш окончательный код с проверкой и отправкой данных должен быть следующим:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
|
if ( isset( $_POST[‘submitted’] ) && isset( $_POST[‘post_nonce_field’] ) && wp_verify_nonce( $_POST[‘post_nonce_field’], ‘post_nonce’ ) ) {
if ( trim( $_POST[‘postTitle’] ) === » ) {
$postTitleError = ‘Please enter a title.’;
$hasError = true;
}
$post_information = array(
‘post_title’ => wp_strip_all_tags( $_POST[‘postTitle’] ),
‘post_content’ => $_POST[‘postContent’],
‘post_type’ => ‘post’,
‘post_status’ => ‘pending’
);
wp_insert_post( $post_information );
}
|
Наконец, просто для дополнительной цели мы установим перенаправление после того, как пользователь отправил информацию, чтобы пользователи не могли нажимать кнопку отправки несколько раз и продолжать вводить одни и те же данные в наши сообщения. Мы сделаем это на самом базовом уровне.
Поскольку wp_insert_post возвращает идентификатор, мы будем использовать его в своих интересах и возвращать идентификатор в переменную, которую мы будем использовать, чтобы гарантировать, что мы не будем перенаправлять, если сообщение не было создано.
Мы сделаем это, назначив нашу функцию wp_insert_post переменной следующим образом:
|
1
|
$post_id = wp_insert_post( $post_information );
|
Затем мы запустим условный оператор для перенаправления, только если у нас есть идентификатор записи, затем воспользуемся функцией redirect WordPress и передаем ей home_url . Код, который вы вставите, выглядит следующим образом:
|
1
2
3
4
|
if ( $post_id ) {
wp_redirect( home_url() );
exit;
}
|
Все сделано…
Вывод
Это основы и основы того, как вставлять сообщения через интерфейс. Мы многое рассмотрели, сначала создав форму, проверив форму и отправив наши данные в ожидающий пост!
В следующей части мы немного углубимся в редактирование и удаление сообщений через интерфейс, что немного сложнее, но может оказаться очень полезным!
Я хотел бы сказать ОГРОМНОЕ спасибо за то, что потратили время на чтение моего урока, надеюсь, это помогло. Пожалуйста, не стесняйтесь оставлять комментарии, и я сделаю все возможное, чтобы помочь и ответить на них, если нет, вы всегда можете связаться со мной напрямую через мой сайт: www.VinnySingh.co или Twitter @VinnySinghUK
Оставайтесь с нами для части 2!