Сегодняшний пост продолжает серию записей, посвященную созданию WooCommerce расширений. Мы начали серию с обсуждения того, как фильтры могут изменить контент вашего сайта, а в этом посте будет рассказано все об экшенах (actions) и их создании.
Экшены и фильтры – это базовые элементы, позволяющие расширить возможности тем и плагинов, так как с помощью них можно изменять или добавлять код в WordPress, темы или плагины. WooCommerce – это не исключение, так что существует множество хуков или крючков, которые вы можете использовать в своих собственных плагинах.
WooCommerce-экшены позволяют нам добавлять или удалять код в ядре плагина и являются основополагающей частью WooCommerce-расширения для вашего сайта. Вы можете использовать экшены, чтоб поместить на вашу страницу оформления заказа конверсионный скрипт, добавить информацию на страницы магазина или товаров, поля для заказов или применить их в качестве триггеров для определенных событий.
Что такое экшен в WordPress?
Кодекс WordPress дает нам следующее определение, которое, вероятно, не особо полезно:
Языком WordPress; экшен – это PHP-функция, которая срабатывает определенным образом, используя WordPress-ядро.
Русским языком: если представить, что страница загружается подобно полотну широкого шоссе, то экшен в данной аналогии подобен въезду на автомагистраль. Пока ваша страница движется из точки А (нулевая загрузка) в точку В (полная загрузка) по этому шоссе, на вашей странице есть определенные места, которые вы можете «поглотить» и включить в собственный код, а экшены позволяют это сделать.
Но в чем тут отличие от фильтров? Технически, его нет. Но не хотелось бы сейчас взрывать ваш мозг
Фильтры используются, когда необходимо изменить определенное значение (будь это переменная, текст или что-то другое). В общем, фильтры нужны для того, чтоб заменить данные или контент на странице. Экшены не внедряются в значение, чтоб изменить или заменить его: они просто дают возможность прицепить код к чему-то или добавить его в определенный момент загрузки на страницу, так что они позволяют добавлять или удалять что-то со страницы.
Распознаем экшены
Экшены создаются посредством функции do_action, так что если вы видите команду do_action в плагине или теме, то это значит, что можно сделать въезду на автомагистраль, захватив с собой желаемый код.
Базовые экшены обычно имеют такую структуру:
“Тэг” – это имя экшена, позволяющее вам использовать его для добавления в страницу собственной функции. Но экшены могут быть внедрены и в «аргументы». Принцип работы аргументов похож на то, как работает переменная в фильтре: аргументы предоставляют информацию, которую вы можете использовать в вашем коде. Например, экшен, позволяющий управлять WooCommerce-товаром, должен давать доступ к любому товару с применением моей собственной функции (позволяя мне, например, только применить код к определенным товарам ).
Экшены могут иметь любое число необходимых аргументов, которые могут быть использованы для того, чтоб «поддеть» какой-либо код в этом экшене.
Использование экшена
Для добавления код в страницу с применением одного из этих экшенов, используется функция add_action. Вот какая структура должна быть всегда:
Данная структура не изменится, даже при наличии аргументов, которые были внедрены или могут быть внедрены в код.
Руководствуясь тем же принципом, мы добавляем код и с помощью экшена
Если экшен содержит аргументы, которые мне необходимо использовать, я внедряю их в свою функцию, также, как я бы делал это с фильтром:
function my_order_changing_function( $order ) { some code to change the $order or add stuff to it; } add_action( 'woocommerce_order_special_action', 'my_order_changing_function' );
Пример 1: изменяем блоговый шаблон Storefront
Давайте взглянем на ядро блогового шаблона Storefront:
Я собираюсь изменить расположение метаданных записи по левому краю, перенеся их под запись и отобразить их во всю ширину, вместо текущего варианта. Пример длинноват, но он очень доходчивый, так как тут здесь мы используем простые экшены.
К счастью, тему Storefront очень просто изменить, так как вся структура записи «сцеплена» с помощью файла hooks.php. Мы видим, что можем удалить экшен, отвечающий за добавление метаданных на страницу.
Вот нужный нам код:
Чтоб избавиться от этого (а затем добавить по новой самостоятельно), нам нужно удалить этот экшен в нашем кастомном плагине /сниппете кода:
Заметка: когда удаляете какой-либо экшен, вы должны придерживаться существующего приоритета
Давайте поговорим о том, как можно добавить удаленное заново, используя экшен. Просмотрев файл hooks.php, мы решили использовать экшен storefront_single_post_after. Мы могли бы перенести метаданные записи в единичной записи, но я предпочитаю использовать для переноса экшен. Мы выведем данные под записью, но выше выше навигации по записям (ссылки на следующую и предыдущую записи).
Этот код нашелся в шаблоне single.php:
Это говорит мне, что я могу добавить мои метаданные, используя этот экшен. Я дополню структуру моей команды add_action этим именем экшена и установлю чуть более высокий приоритет, чем обычном, чтоб быть уверенным в том, что мои метаданные будут добавлены перед линками навигации.
Мне не нужно прописывать здесь собственную функцию, так как я использую уже существующую: storefront_post_meta function.
Это позволит перенести мои метаданные записи вниз, вместо левого края (хотя нам все еще нужно подправить наш CSS, чтоб завершить процесс)
И вот она причина, почему я выбрал именно эту тему. Нам нужен завершающий экшен, который послужит оболочкой для все того, что мы сделали.
Вы можете добавить немного CSS для коррекции ширины, чтоб завершить наш блоговый макет, но у нас не получится просто добавить корректировки в дочернюю тему. Классы, которые используются в единичном посте, совпадают с классами архивов блога, так что нам нужно обозначить нашу цель. Притом и то, и другое расположено в одном месте, так что мы не можем использовать чистый корневой CSS. В этом случае нам просто нужно добавить этот CSS к единичным записям, но не блоговым архивам.
Мы можем делать то же самое и с некоторыми PHP-файлами, и есть очень полезный экшен, который позволяет добавлять CSS и javascript в футер сайта (добавляет наш CSS таким образом, что он переписывает дефолтный CSS):
wp_print_footer_scripts.
Мы используем этот экшен с нашей функцией, чтоб добавить наши новые стили блоговых записей:
Теперь трансформация блога завершена
Пример 2: Добавление скрипта конверсии Google Analytics
Теперь давайте взглянем на экшен с аргументом. Начнем мы с экшена woocommerce_thankyou, который использует id заказа в качестве аргумента:
Вы можете использовать id заказа для любого кода, который «зацеплен» в этом экшене (это значит, что вы можете использовать объект заказа целиком, воспользовавшись id). Может быть применен для отображения пользовательского сообщения, если товар заказали, показа измененного сообщения с использованием имени клиента или для того, чтоб отблагодарить определенных клиентов в зависимости от выполняемых ими ролей (например, если у вас есть подписчики или ваши собственные роли).
Самый распространенный пример широкого применения этого экшена (и самый простой в нашем случае) – это использование его для отслеживания конверсии. Давайте добавим отслеживающий скрипт для стороннего сервиса, используя пиксель отслеживания (можно использовать для аффилированных программ или Google Analytics).
Предполагается, что пиксель отслеживания выглядит так:
Давайте внедрим это в страницу, добавив количество заказов и числовое значение
Все это будет добавлено на все «спасибо»-страницы, которые выводятся в моем магазине, и будет содержать свежую информацию о заказе.
Первая часть здесь
Источник
Экшены и фильтры – это базовые элементы, позволяющие расширить возможности тем и плагинов, так как с помощью них можно изменять или добавлять код в WordPress, темы или плагины. WooCommerce – это не исключение, так что существует множество хуков или крючков, которые вы можете использовать в своих собственных плагинах.
WooCommerce-экшены позволяют нам добавлять или удалять код в ядре плагина и являются основополагающей частью WooCommerce-расширения для вашего сайта. Вы можете использовать экшены, чтоб поместить на вашу страницу оформления заказа конверсионный скрипт, добавить информацию на страницы магазина или товаров, поля для заказов или применить их в качестве триггеров для определенных событий.
Что такое экшен в WordPress?
Кодекс WordPress дает нам следующее определение, которое, вероятно, не особо полезно:
Языком WordPress; экшен – это PHP-функция, которая срабатывает определенным образом, используя WordPress-ядро.
Русским языком: если представить, что страница загружается подобно полотну широкого шоссе, то экшен в данной аналогии подобен въезду на автомагистраль. Пока ваша страница движется из точки А (нулевая загрузка) в точку В (полная загрузка) по этому шоссе, на вашей странице есть определенные места, которые вы можете «поглотить» и включить в собственный код, а экшены позволяют это сделать.
Но в чем тут отличие от фильтров? Технически, его нет. Но не хотелось бы сейчас взрывать ваш мозг
Фильтры используются, когда необходимо изменить определенное значение (будь это переменная, текст или что-то другое). В общем, фильтры нужны для того, чтоб заменить данные или контент на странице. Экшены не внедряются в значение, чтоб изменить или заменить его: они просто дают возможность прицепить код к чему-то или добавить его в определенный момент загрузки на страницу, так что они позволяют добавлять или удалять что-то со страницы.
Распознаем экшены
Экшены создаются посредством функции do_action, так что если вы видите команду do_action в плагине или теме, то это значит, что можно сделать въезду на автомагистраль, захватив с собой желаемый код.
Базовые экшены обычно имеют такую структуру:
Код:
do_action( 'tag' );“Тэг” – это имя экшена, позволяющее вам использовать его для добавления в страницу собственной функции. Но экшены могут быть внедрены и в «аргументы». Принцип работы аргументов похож на то, как работает переменная в фильтре: аргументы предоставляют информацию, которую вы можете использовать в вашем коде. Например, экшен, позволяющий управлять WooCommerce-товаром, должен давать доступ к любому товару с применением моей собственной функции (позволяя мне, например, только применить код к определенным товарам ).
Код:
do_action( 'tag', $arg_1, $arg_2 );Экшены могут иметь любое число необходимых аргументов, которые могут быть использованы для того, чтоб «поддеть» какой-либо код в этом экшене.
Использование экшена
Для добавления код в страницу с применением одного из этих экшенов, используется функция add_action. Вот какая структура должна быть всегда:
Код:
add_action( 'action_tag', 'my_function', priority);Данная структура не изменится, даже при наличии аргументов, которые были внедрены или могут быть внедрены в код.
Руководствуясь тем же принципом, мы добавляем код и с помощью экшена
Код:
function my_function_does_stuff() {
here is the code that does the magic;
}
add_action( 'the_woocommerce_action', 'my_function_does_stuff' );Если экшен содержит аргументы, которые мне необходимо использовать, я внедряю их в свою функцию, также, как я бы делал это с фильтром:
function my_order_changing_function( $order ) { some code to change the $order or add stuff to it; } add_action( 'woocommerce_order_special_action', 'my_order_changing_function' );
Пример 1: изменяем блоговый шаблон Storefront
Давайте взглянем на ядро блогового шаблона Storefront:
Я собираюсь изменить расположение метаданных записи по левому краю, перенеся их под запись и отобразить их во всю ширину, вместо текущего варианта. Пример длинноват, но он очень доходчивый, так как тут здесь мы используем простые экшены.
К счастью, тему Storefront очень просто изменить, так как вся структура записи «сцеплена» с помощью файла hooks.php. Мы видим, что можем удалить экшен, отвечающий за добавление метаданных на страницу.
Вот нужный нам код:
Код:
add_action( 'storefront_single_post', 'storefront_post_meta', 20 );Чтоб избавиться от этого (а затем добавить по новой самостоятельно), нам нужно удалить этот экшен в нашем кастомном плагине /сниппете кода:
Код:
remove_action( 'storefront_single_post', 'storefront_post_meta', 20 );Заметка: когда удаляете какой-либо экшен, вы должны придерживаться существующего приоритета
Давайте поговорим о том, как можно добавить удаленное заново, используя экшен. Просмотрев файл hooks.php, мы решили использовать экшен storefront_single_post_after. Мы могли бы перенести метаданные записи в единичной записи, но я предпочитаю использовать для переноса экшен. Мы выведем данные под записью, но выше выше навигации по записям (ссылки на следующую и предыдущую записи).
Этот код нашелся в шаблоне single.php:
Код:
do_action( 'storefront_single_post_after' );Это говорит мне, что я могу добавить мои метаданные, используя этот экшен. Я дополню структуру моей команды add_action этим именем экшена и установлю чуть более высокий приоритет, чем обычном, чтоб быть уверенным в том, что мои метаданные будут добавлены перед линками навигации.
Код:
add_action( 'storefront_single_post_after', 'storefront_post_meta', 9 );Мне не нужно прописывать здесь собственную функцию, так как я использую уже существующую: storefront_post_meta function.
Это позволит перенести мои метаданные записи вниз, вместо левого края (хотя нам все еще нужно подправить наш CSS, чтоб завершить процесс)
И вот она причина, почему я выбрал именно эту тему. Нам нужен завершающий экшен, который послужит оболочкой для все того, что мы сделали.
Вы можете добавить немного CSS для коррекции ширины, чтоб завершить наш блоговый макет, но у нас не получится просто добавить корректировки в дочернюю тему. Классы, которые используются в единичном посте, совпадают с классами архивов блога, так что нам нужно обозначить нашу цель. Притом и то, и другое расположено в одном месте, так что мы не можем использовать чистый корневой CSS. В этом случае нам просто нужно добавить этот CSS к единичным записям, но не блоговым архивам.
Мы можем делать то же самое и с некоторыми PHP-файлами, и есть очень полезный экшен, который позволяет добавлять CSS и javascript в футер сайта (добавляет наш CSS таким образом, что он переписывает дефолтный CSS):
wp_print_footer_scripts.
Мы используем этот экшен с нашей функцией, чтоб добавить наши новые стили блоговых записей:
Код:
function sv_modify_storefront_blog_styles() {
if ( is_singular( 'post' ) ) {
?><style>
.hentry.type-post .entry-content { width: 100%; }
.hentry { padding-bottom: 2em; margin-bottom: 2em; }
.cat-links, .tags-links, .comments-link, .edit-link { display: inline-block; margin: 0 2em 1em 0; }
</style><?php
}
}
add_action( 'wp_print_footer_scripts', 'sv_modify_storefront_blog_styles' );Теперь трансформация блога завершена
Пример 2: Добавление скрипта конверсии Google Analytics
Теперь давайте взглянем на экшен с аргументом. Начнем мы с экшена woocommerce_thankyou, который использует id заказа в качестве аргумента:
Код:
do_action( 'woocommerce_thankyou', $order->id );Вы можете использовать id заказа для любого кода, который «зацеплен» в этом экшене (это значит, что вы можете использовать объект заказа целиком, воспользовавшись id). Может быть применен для отображения пользовательского сообщения, если товар заказали, показа измененного сообщения с использованием имени клиента или для того, чтоб отблагодарить определенных клиентов в зависимости от выполняемых ими ролей (например, если у вас есть подписчики или ваши собственные роли).
Самый распространенный пример широкого применения этого экшена (и самый простой в нашем случае) – это использование его для отслеживания конверсии. Давайте добавим отслеживающий скрипт для стороннего сервиса, используя пиксель отслеживания (можно использовать для аффилированных программ или Google Analytics).
Предполагается, что пиксель отслеживания выглядит так:
Код:
<img src="https://tracking.com/sale?amount=<AMOUNT>&ordernum=<ORDER_NUMBER>" height="1" width="1" border="0" />Давайте внедрим это в страницу, добавив количество заказов и числовое значение
Код:
function sv_tracking_script( $order_id ) {
// Get the order from the id & the info we need
$order = wc_get_order( $order_id );
$order_number = $order->get_order_number();
$order_total = $order->get_order_total();
// Output the tracking pixel with our order info
printf( '<img src="https://tracking.com/sale?amount=%s&ordernum=%s" height="1" width="1" border="0">', esc_url( $order_total ), esc_url( $order_number ) );
}
add_action( 'woocommerce_thankyou', 'sv_tracking_script' );Все это будет добавлено на все «спасибо»-страницы, которые выводятся в моем магазине, и будет содержать свежую информацию о заказе.
Первая часть здесь
Источник