Скрипты /стили оформления (Enqueue Scripts /Styles) при наличии короткого кода

Какова идея создания /вставки скриптов и /или стилей для использования в плагинах?

Недавно я создал плагин простой плагин , чтобы добавить аватар пользователя /gravatar с помощью короткого кода. У меня разные параметры стиля для отображения аватара (квадрат, круглый и т. Д.), И я решил поместить css непосредственно в самый короткий код.

Однако, я понимаю, что это не очень хороший подход, так как он будет повторять css каждый раз, когда используется короткий код на странице. Я видел несколько других подходов на этом сайте, и у wp codex есть два примера, поэтому трудно понять, какой подход наиболее последователен и быстр.

Вот методы, о которых я сейчас знаю:

Метод 1: Включить непосредственно в короткий код - Это то, что я сейчас делаю в плагине, но не кажется хорошим, поскольку он повторяет код.

class My_Shortcode {
function handle_shortcode( $atts, $content="" ) {
/* simply enqueue or print the scripts/styles in the shortcode itself */
?>
<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;
        // shortcode handling here
    }
    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');
42 голоса | спросил Bryan Willis 18 +04002014-10-18T11:07:40+04:00312014bEurope/MoscowSat, 18 Oct 2014 11:07:40 +0400 2014, 11:07:40

5 ответов


27

Я нашел другой способ, который хорошо работает для меня:

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

Использование (id по умолчанию для текущего пользователя):

[get_avatar id="" size="32" default="mystery" alt="Profile Photo" class="round"]

function wpse_165754_avatar_shortcode_wp_enqueue_scripts() {
    wp_register_style( 'get-avatar-style', plugins_url( '/css/style.css', __FILE__ ), array(), '1.0.0', 'all' );
}

add_action( 'wp_enqueue_scripts', 'wpse_165754_avatar_shortcode_wp_enqueue_scripts' );
if ( function_exists( 'get_avatar' ) ) {
    function wpse_165754_user_avatar_shortcode( $attributes ) {

        global $current_user;
        get_currentuserinfo();

        extract( shortcode_atts(
                     array(
                         "id"      => $current_user->ID,
                         "size"    => 32,
                         "default" => 'mystery',
                         "alt"     => '',
                         "class"   => '',
                     ), $attributes, 'get_avatar' ) );

        $get_avatar = get_avatar( $id, $size, $default, $alt );

        wp_enqueue_style( 'get-avatar-style' );

        return '<span class="get_avatar ' . $class . '">' . $get_avatar . '</span>';
    }

    add_shortcode( 'get_avatar', wpse_165754_user_avatar_shortcode' );
}
ответил jblanche 15 J0000006Europe/Moscow 2015, 15:28:58
24

Прежде чем начать ответ, я должен сказать, что в отношении этого раздела css и js не совпадают.

Причина проста: добавление js в тело страницы (в нижнем колонтитуле) является обычным и допустимым способом, css необходимо поместить в раздел <head> страница: даже если большинство браузеров могут правильно отобразить css в теле страницы, это недействительный HTML-код.

Когда короткий код отображается, раздел <head> уже был напечатан, это означает, что js можно добавить без каких-либо проблем на нижнем колонтитуле, но css необходимо добавить до отображается короткий код.

Сценарии

Если вашему короткому коду нужны только js, вам повезло и может просто использовать wp_enqueue_script в теле обратного вызова короткого кода:

add_shortcode( 'myshortcode', 'my_handle_shortcode' );

function my_handle_shortcode() {
  wp_enqueue_script( 'myshortcodejs', '/path/to/js/file.js' );
  // rest of code here...
}

Выполнение этого сценария добавляется в нижний колонтитул и только один раз, даже если короткий код используется более одного раза на странице.

Стили

Если код нуждается в стилях, тогда вам нужно действовать до , на самом деле отображается короткий код.

Существуют разные способы сделать это:

  1. просмотрите все сообщения в текущем запросе и при необходимости добавьте стили короткого кода. Это то, что вы делаете в обоих методах # 3 и # 4 в OP. На самом деле оба метода выполняют одно и то же, но has_shortcode был добавлен в WP 3.6, а has_shortcode доступен с версии 2.5, поэтому используйте get_shortcode_regex только если вы хотите сделать ваш плагин совместимым со старыми версиями.

  2. всегда добавляйте стиль короткого кода на всех страницах

Вопросы

Проблема с # 1 - это производительность. Regex - довольно медленные операции, и запуск регулярного выражения в цикле всех сообщений может замедлить работу страницы. Более того, довольно частая задача в темах показывать только выдержки из архива и показывать полный контент с помощью коротких кодов только в сингулярных представлениях. Если это произойдет, когда будет показан архив, ваш плагин запустит сопоставление регулярных выражений в цикле с целью добавить стиль, который никогда не будет использоваться: ненужное двойное влияние производительности: замедление создания страницы + дополнительный ненужный HTTP-запрос

Проблема с # 2 - это производительность, опять же. Добавление стиля ко всем страницам означает добавление дополнительного HTTP-запроса для всех страниц, даже если это не требуется. Даже если время генерации страницы на стороне сервера не влияет, общее время рендеринга страницы будет и для всех страниц сайта.

Итак, что должен делать разработчик плагина?

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

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

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

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

Что следует учитывать «высоко» в этом отношении, следует использовать некоторые тесты производительности или, как альтернатива, добавить еще один вариант и дать выбор пользователям.

ответил gmazzap 18 +04002014-10-18T12:49:56+04:00312014bEurope/MoscowSat, 18 Oct 2014 12:49:56 +0400 2014, 12:49:56
4

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

function abcd_load_my_shorcode_resources() {
       global $post, $wpdb;

       // determine whether this page contains "my_shortcode" shortcode
       $shortcode_found = false;
       if ( has_shortcode($post->post_content, 'my_shortcode') ) {
          $shortcode_found = true;
       } else if ( isset($post->ID) ) {
          $result = $wpdb->get_var( $wpdb->prepare(
            "SELECT count(*) FROM $wpdb->postmeta " .
            "WHERE post_id = %d and meta_value LIKE '%%my_shortcode%%'", $post->ID ) );
          $shortcode_found = ! empty( $result );
       }

       if ( $shortcode_found ) {
          wp_enqueue_script(...);
          wp_enqueue_style(...);
       }
}
add_action( 'wp_enqueue_scripts', 'abcd_load_my_shorcode_resources' );
ответил zdenekca 6 52015vEurope/Moscow11bEurope/MoscowFri, 06 Nov 2015 03:18:02 +0300 2015, 03:18:02
2

Я делаю так:

class My_Shortcode {

    function __construct() {
        do_action('my_start_shortcode'); // call
....

и зацепить другие функции (или другие плагины):

function wpse_3232_load_script(){
    wp_enqueue_script('js-myjs');
}
add_action('my_start_shortcode','wpse_3232_load_script',10);
ответил Wladimir Druzhaev 8 PM000000120000002031 2017, 12:51:20
0

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

function check_shortcode($text) {

  $pattern = get_shortcode_regex();

   if (   preg_match_all( '/'. $pattern .'/s', $text, $matches )
        && array_key_exists( 2, $matches )
        && in_array( 'myshortcode', $matches[2] ) )
    {
        // myshortcode is being used

        // enque my css and js
        /****** Enqueu RFNB  ******/
        wp_enqueue_style('css-mycss');
        wp_enqueue_script('js-myjs');

        // OPTIONAL ALLOW SHORTCODE TO WORK IN TEXT WIDGET
        add_filter( 'widget_text', 'shortcode_unautop');
        add_filter( 'widget_text', 'do_shortcode'); 

    }

  return $text;

}
add_filter('widget_text', 'check_shortcode');
ответил Gino 21 WedEurope/Moscow2016-12-21T19:33:31+03:00Europe/Moscow12bEurope/MoscowWed, 21 Dec 2016 19:33:31 +0300 2016, 19:33:31

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132