arsus

Еще больше советов для лучшей работы при разработке сайтов на WordPress

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

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

Как и когда следует включить мои скрипты / стили

Как правильно выполнять Ajax запросы

Фильтры и действия, которые предоставят пользователям свободу

Хватай редактор кода и будь готов играть с WordPress!

Как и когда я должен включить мои сценарии (My Scripts)?

Первое, что вы должны иметь в виду – в WordPress есть две замечательные функции (wp_enqueue_script и wp_enqueue_style), которые могут включить ваши скрипты и стили. Для этого, пожалуйста, не добавляйте их вручную в заголовки или с помощью команды wp_head.

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

#Неправильно:

add_action( 'wp_head' , 'my_custom_scripts' );
function my_custom_scripts() {
  echo '';
}
#Правильно:

add_action( 'wp_enqueue_scripts', 'my_customs_scripts' );

function my_customs_scripts(){
  wp_enqueue_script( 'script-handler', get_template_directory_uri() . '/js/my.js', array('jquery'), '1.0.0', true );
}

 

 

Я не дам вам полный учебник по тому, как использовать wp_enqueue_xxxx, поскольку многие из них доступны (и лучший из них – Codex!).Я просто попытаюсь рассказать вам, как вам следует добавлять скрипты в ваши темы или плагины.

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

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

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

1. Никогда не включайте Front End Files в the Backend и наоборот.

// FRONT END ONLY
add_action( 'wp_enqueue_scripts', 'my_front_customs_scripts' );
function my_customs_scripts(){
  wp_enqueue_script( 'script-handler', get_template_directory_uri() . '/js/my.js', array('jquery'), '1.0.0', true );
}

// BACKEND ONLY
add_action( 'admin_enqueue_scripts', 'my_back_customs_scripts' );
function my_customs_scripts(){
  wp_enqueue_script( 'script-handler', get_template_directory_uri() . '/js/my.js', array('jquery'), '1.0.0', true );
}

 

Но подождите! Давайте пойдем на шаг вперед и включим только те скрипты на страницах, где это действительно необходимо. Отличный метод – регистрировать их впервые, а затем ставить в очередь на необходимых страницах.

2. Включайте файлы только на необходимых страницах

//FRONT END ONLY
add_action( 'wp_enqueue_scripts', 'my_front_customs_scripts' );
function my_customs_scripts() {

  wp_register_script( 'script-handler', get_template_directory_uri() . '/js/my.js', array('jquery'), '1.0.0', true );

  if( is_page('my-page') ) {
    wp_enqueue_script( 'script-handler' );
  }
  // Be creative to include files only when needed
  // if( is_single() )
  // if( is_home() )
  // if( 'cpt-name' == get_post_type() )
}

//BACKENDEND ONLY
add_action( 'admin_enqueue_scripts', 'my_back_customs_scripts' );
function my_customs_scripts( $hook ){

  wp_register_script( 'script-handler', get_template_directory_uri() . '/js/my.js', array('jquery'), '1.0.0', true );

  //To include it only when editing a post
  if( 'edit.php' == $hook ) {
    wp_enqueue_script( 'script-handler' );
  }

  // If you added an options page like this
  // $plugin_screen_id = add_options_page(...)
  // you can do
  $screen = get_current_screen();
  if ( $plugin_screen_id == $screen->id ) {
    wp_enqueue_script( 'script-handler' );
  }

}
/* Another way to use screen id */
add_action( 'admin_print_styles-' . $plugin_screen_id, 'my_back_customs_scripts' );

 

3. Вы поставили в очередь скрипты, которые используются с Shortcode?

//FRONT END ONLY
add_action( 'wp_enqueue_scripts', 'my_front_customs_scripts' );
function my_customs_scripts(){

wp_register_script( 'script-handler', get_template_directory_uri() . '/js/my.js', array('jquery'), '1.0.0', true );

// if you need a script to be included for a shortcode
// Don't add it everywhere
// Instead you can include it only when needed
global $post;

if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-shortcode') ) {
wp_enqueue_script( 'script-handler');
}

}

 

4.Включите стили с условиями.

//FRONT END ONLY
add_action( 'wp_enqueue_scripts', 'my_front_customs_styles' );
function my_front_customs_styles(){

wp_register_style( 'my-plugin-css', plugins_url( 'my-plugin/css/plugin.css' ) );

// Let's include this css only for old (and crappy) browsers
wp_enqueue_style( 'my-plugin-css' );
global $wp_styles;
$wp_styles->add_data('my-plugin-css', 'conditional', 'lte IE 9');

}

 

В то время как другие фрагменты кода обращаются как к стилям, так и к скриптам, следующие будут работать только с wp_enqueue_style (по крайней мере, сейчас).

Вы можете посмотреть еще несколько примеров в Кодексе. Еще один прекрасный пример того, как вы можете начать работать с плагинами – плагин WordPress Boilerplate. Взгляните на код, и вы увидите, как в него включены скрипты и стили. Отличный пример того, как можно создать плагин для серверной части WordPress – плагин Wpfavs (основанный на плагине WordPress Boilerplate).

2.Как правильно выполнить Ajax запросы

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

Ajax запросы не должны быть направленны напрямую в файл

Ajax запросы должны использовать нонса-значение

Проверьте при необходимости разрешения пользователей

Браузером JavaScript переменные должны быть включены с wp_localize_script

Я знаю, JQuery делает из Ajax запросов лакомый кусочек, и мы можем просто создавать файлы под названием ajax.php, includewp-load.php на нем и работать там с нашим Ajax. Но это не «путь WordPress » – это неперспективно. Тем более, что это менее безопасно, и вы потеряете много функциональности WordPress.

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

Обратите внимание, что «my_action» должен быть изменен для вашего имени действия. Мы увидим, как это работает в данный момент.

Давайте рассмотрим все это на простом примере с небольшим количеством кода и воображением. Давайте представим, что мы хотим отобразить 5 сообщений, когда любой пользователь (авторизованный или нет) нажимает на кнопку. Мы собираемся назвать эту акцию как cool_ajax_example, так что давайте начнем добавлять функции обратного вызова Ajax, который будет возвращать данные.

Вы можете включить этот код на вашем functions.php или внутри вашего плагина.

//First we add the actions hooks
add_action('wp_ajax_cool_ajax_example', 'cool_ajax_example_callback' );
add_action('wp_ajax_nopriv_cool_ajax_example', 'cool_ajax_example_callback' );

function cool_ajax_example_callback() {
...
}

 

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

Очень важно писать везде имя действия правильно – иначе оно вообще может не сработать.

Прежде чем мы работу с функцией обратного вызова, давайте перейдем к JQuery, необходимому для запросов Ajax. Сценарий JQuery будет работать, когда мы нажмем простую кнопку HTML, и нам надо направить этот запрос в файл админ-ajax.php – тот самый скрипт, который обрабатывать все запросы AJAX в WordPress. Также нам нужно добавить случайное слово, как мы уже говорили, потому что мы хотим сделать его безопасным, поэтому тут вступает в действие функция wp_localize_script.

Если вы правильно включили этот скрипт – именно так, как было описано в начале этой статьи, у вас уже есть имя обработчика скрипта (в наших примерах выше – «скрипт-обработчик»), так что давайте будем использовать его. Чтобы придать нашему javascript файлу качеств PHP. Вы можете включить этот фрагмент кода после того, как wp_enqueue_function включит JavaScript.

wp_localize_script(
'script-handler',
'MyVarName',
array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'return_posts' )
)
);

 

Как вы можете видеть, wp_localize_script является довольно простым способ передать любую переменную PHP нашим файлам JavaScript, и он выдаст действительный XHTML благодаря тегам <[CDATA. Код выше будет печататься в заголовке, если файл JavaScript в качестве скрипта-обработчика будет в имени, и будет выглядеть примерно так:

/* */

Теперь пришло время для создания нашего Javascript файла, назовем его my.js. Это будет выглядеть примерно так:

(function( $ ) {
$(function() {

$('#button').click(function(e){
e.preventDefault();

$.ajax({
url: myVarName.ajax_url,
data: {
action: 'cool_ajax_example',
nonce : myVarName.nonce },
success: function( response ) {
$('#response-container').html( response );
},
type: "POST",
});

});

});
})( jQuery );

 

Пожалуйста, обратите внимание, как мы используем случайное слово и ajax_url, и что мы прошли с wp_localize_script. Также проверьте, что мы передаем значение, называемое «действие», соответствующее имени действий, которые мы использовали в wp_ajax запросах.

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

function cool_ajax_example_callback() {

$nonce = $_POST['nonce'];
//The first thing we do is check the nonce and kill the script if wrong
if ( ! wp_verify_nonce( $nonce, 'return_posts' ) )
die ( 'Wrong nonce!');

$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
);
// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
echo '

';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '
' . get_the_title() . '

';
}
echo '

';
} else {
echo 'Posts not found';
}
/* Restore original Post Data */
wp_reset_postdata();

// don't forget this
// We are doing a simple call we don't want anything else to run
die();
}

 

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

if( current_user_can( 'administrator' ) ) {
  wp_delete_post( $postid, $force_delete );
}

 

Со всеми советами, которые мы упомянули, вы можете стать мастером в WordPress Ajax и выполнять любые действия, которые вы хотите. Попробуйте поиграть с ними и настроить его под свои нужды. Лично мне нравится использовать тип данныхJSON, и я делаю эхо json_encode () вместо простого эхо на мои скрипты, но это уже другой вопрос.

3. Фильтры и действия

Цель этого раздела – не учить вас, как работают фильтры и действия, есть отличные учебники по этой тематике, которые объясняют все в мельчайших подробностях. Я собираюсь объяснить вам здесь, почему вы должны добавить фильтры и действия в ваши плагины, и показать вам некоторые примеры для облегчения понимания.

Но сначала давайте сделаем введение в эти концепции:

Запросы: запрос действия добавляется в определенный момент вашего плагина, как правило, рядом с важными мероприятиями (например: перед содержанием, после содержания). Любой пользователь может воспользоваться его функциями, чтобы упорядочить свой код, выполняемый в этой точке. Когда это начинает работать, все функции, связанные с ними, или «зацепленные» тоже начинают работать.

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

Проверьте Plugin API для получения дополнительной информации о действий крючков и фильтров.

Почему я должен настроить мой Plugin Extensible?

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

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

Звучит красиво, но где я могу добавить их в мой плагин?

Не сходите с ума и не добавляйте действия и фильтры повсюду. Вначале вам покажется это несколько сложно или раздражающе, поэтому постарайтесь представить, что вы – другой разработчик, смотрите на новый плагин и спрашиваете себя: «Где тут мне необходим крючок действий?». Огромная доля действий и фильтров будет добавлена по требованию – тогда, когда вы будете получать запросы в службу поддержки (да-да, вы всегда будете получать их), или через обратную связь для пользователей.

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

Несколько рекомендаций о том, где включают фильтры:

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

Когда объекты данных могут быть сконфигурированы, происходит то же самое. Вы можете позволить пользователям изменять объект, прежде чем он будет использоваться.

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

Давайте используем функцию обратной связи, использованную в этой статье, чтобы на примере увидеть рекомендации, озвученные выше. Для создания фильтруемой перемены мы можем использовать apply_filters ().

function cool_ajax_example_callback() {

$nonce = $_POST['nonce'];
//The first thing we do is check the nonce and kill the script if wrong
if ( ! wp_verify_nonce( $nonce, 'return_posts' ) ) {
die ( 'Wrong nonce!' );
}

$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
);
// The Query
$the_query = new WP_Query( apply_filters( 'cool_ajax_query', $args ) );

// The Loop
if ( $the_query->have_posts() ) {
echo '

';
while ( $the_query->have_posts() ) {
$the_query->the_post();
echo '
' . get_the_title() . '

';
}
echo '

';
} else {
echo 'Posts not found';
}
/* Restore original Post Data */
wp_reset_postdata();

// don't forget this
// We are doing a simple call we don't want anything else to run
die();
}

 

Как вы видите, я добавил фильтр для переменной $ args, которая начнет работать прямо перед тем, WP_Query выполнит запрос. С помощью простого фильтра любой пользователь может изменить, например, количество сообщений, которые возвращаются.

function wpt_alter_coolajax_query( $args ) {
$args['posts_per_page'] = 10;
return $args;
}
add_filter( 'cool_ajax_query', 'wpt_alter_coolajax_query' );

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

<link rel="stylesheet" href="WPB_VERSION, __FILE__ ));?>" type="text/css" media="all">

 

Или, том случае, если плагин рассылает письма, я даю возможность изменить From email на плагин «по электронной почте», из-за чего wp_mail () еще будут конфликтовать.

function get_from_email() {

if ( isset( $this->_user_data ) ) {
return apply_filters( 'wsi_from_email', $this->_user_data->user_email );
}

return apply_filters( 'wsi_from_email', get_bloginfo( 'admin_email' ) );

}

 

Когда дело доходит до действий, эти изменения значат немного. Мы хотели добавить крючки действий в следующие сприпты (не ограничено):

— перед тем, как задача будет выполняться;

— после того, как задача будет выполнена;

— в вечернее время, в которое отрабатывают учебную разметку.

Для создания этих функций мы использовали, чтобы связать функцию do_action ().Давайте применим их в нашем примере.

function cool_ajax_example_callback() {

$nonce = $_POST['nonce'];
//The first thing we do is check the nonce and kill the script if wrong
if ( ! wp_verify_nonce( $nonce, 'return_posts' ) )
die ( 'Wrong nonce!');

$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 5,
);
// The Query
$the_query = new WP_Query( apply_filters( 'cool_ajax_query', $args ) );

// The Loop
if ( $the_query->have_posts() ) {

// we run the hook before the loop is proccesed
do_action( 'cool_ajax_before_loop', get_the_ID() );

echo '

';
while ( $the_query->have_posts() ) {

$the_query->the_post();

// we run the hook before the title is printed
do_action( 'cool_ajax_before_title', get_the_ID() );

echo '

' . get_the_title() . '

';

// we run the hook after the title is printed
do_action( 'cool_ajax_after_title', get_the_ID() );
}

echo '

';

// we run the hook after the loop is proccesed
do_action( 'cool_ajax_after_loop', get_the_ID() );

} else {
echo 'Posts not found';
}
/* Restore original Post Data */
wp_reset_postdata();

// don't forget this
// We are doing a simple call we don't want anything else to run
die();
}

 

Как вы можете видеть, Im проходит один аргумент, чтобы зацепиться за get_the_ID (). Любая функция, которая захватывается этим крючком действий, может использовать этот аргумент.

Давайте рассмотрим несколько примеров:

 

Также вы можете использовать do_action () крючки для запуска других действия, а не добавлять новую разметку как в примере выше. Например, у меня в WordPress Social Invitations есть крючок действий, который срабатывает каждый раз при отправке сообщений. Затем, используя плагин myCRED, я могу подключить действие или дать очки тому пользователю, который только что отправил сообщение.

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

Заключение

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

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

По материалам: tutsplus.com.


Последняя редакция 18 июня, 2016 в 10:06