Italiano
Español
RomânăПодключение скриптов и стилей при наличии шорткода
Какой оптимальный способ регистрации/подключения скриптов и/или стилей для использования в плагинах?
Недавно я создал простой плагин для добавления аватара пользователя/граватара с помощью шорткода. У меня есть различные варианты стилей для отображения аватара (квадратный, круглый и т.д.), и я решил поместить CSS непосредственно в сам шорткод.
Однако теперь я понимаю, что это не лучший подход, так как CSS будет повторяться каждый раз, когда шорткод используется на странице. Я видел несколько других подходов на этом сайте, и даже в документации WordPress есть два собственных примера, поэтому трудно понять, какой подход наиболее последовательный и быстрый.
Вот методы, о которых мне известно:
Метод 1: Включение напрямую в шорткод - Это то, что я сейчас использую в плагине, но кажется неоптимальным, так как код повторяется.
class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* просто подключаем или выводим скрипты/стили прямо в шорткоде */
?>
<style type="text/css">
</style>
<?php
return "$content";
}
}
add_shortcode( 'myshortcode', array( 'My_Shortcode', 'handle_shortcode' ) );
Метод 2: Использование класса для условного подключения скриптов или стилей
class My_Shortcode {
static $add_script;
static function init() {
add_shortcode('myshortcode', array(__CLASS__, 'handle_shortcode'));
add_action('init', array(__CLASS__, 'register_script'));
add_action('wp_footer', array(__CLASS__, 'print_script'));
}
static function handle_shortcode($atts) {
self::$add_script = true;
// обработка шорткода здесь
}
static function register_script() {
wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}
static function print_script() {
if ( ! self::$add_script )
return;
wp_print_scripts('my-script');
}
}
My_Shortcode::init();
Метод 3: Использование get_shortcode_regex();
function your_prefix_detect_shortcode() {
global $wp_query;
$posts = $wp_query->posts;
$pattern = get_shortcode_regex();
foreach ($posts as $post){
if ( preg_match_all( '/'. $pattern .'/s', $post->post_content, $matches )
&& array_key_exists( 2, $matches )
&& in_array( 'myshortcode', $matches[2] ) )
{
// css/js
break;
}
}
}
add_action( 'wp', 'your_prefix_detect_shortcode' );
Метод 4: Использование has_shortcode();
function custom_shortcode_scripts() {
global $post;
if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'myshortcode') ) {
wp_enqueue_script( 'my-script');
}
}
add_action( 'wp_enqueue_scripts', 'custom_shortcode_scripts');
Забыл, что задавал этот вопрос в прошлом году, но я тоже во многих случаях начал делать именно так. Это что-то вроде комбинации первого и второго методов.
Bryan Willis
Этот метод загружает CSS в подвале, что наверняка имеет ограничения?
Jacob Raccuia
Это абсолютно правильный способ. Используйте этот метод всякий раз, когда вам нужно условно загрузить скрипт или таблицу стилей после того, как хук wp_enqueue_scripts уже произошел. (Шорткоды обрабатываются во время the_content, который является частью хука the_post, а значит, подключение во время их обработки будет слишком поздним, если вы уже не зарегистрировали скрипт заранее)
JRad the Bad
Это не полезно, так как создает FOUT (мигание нестилизованного текста), когда стиль загружается в функции шорткода. Лучше использовать метод has_shortcode.
Adeel Raza
Стоит отметить, что теги <style> в теле документа теперь считаются валидными согласно спецификации W3C. https://www.w3.org/TR/html52/document-metadata.html#the-style-element
Isaac Lubow
@IsaacLubow На текущий момент (2023): Контексты, в которых может использоваться этот элемент: Внутри элемента noscript, который является дочерним для элемента head. Проверил валидность <style> внутри <body> на https://validator.w3.org/nu/#textarea, но результат - Ошибка: Элемент style не допускается как дочерний для элемента body в данном контексте.
vee
Однако <link> внутри <body> проходит валидацию.
vee
Этот метод загружает стили ниже футера. Обычно лучше размещать их в head.
leclaeli