Условная загрузка JavaScript и CSS для шорткодов в WordPress

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

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

Пошаговое руководство

1. Установите флаг $shortcode_used в значение 'no'.
2. В самой функции шорткода установите флаг $shortcode_used в значение 'yes'.
3. Установите хук для 'the_content' с приоритетом 12 (после того, как WordPress обработает шорткоды) и проверьте метаданные записи на наличие пустого значения '' с ключом "_has_{$shortcode_name}_shortcode". (Значение '' возвращается, если мета-ключ не существует для ID записи.)
4. Используйте хук 'save_post' для удаления метаданных записи, сбрасывая флаг на случай, если пользователь изменит использование шорткода.
5. Также в хуке 'save_post' используйте wp_remote_request() для отправки неблокирующего HTTP GET запроса на постоянную ссылку записи, чтобы активировать первую загрузку страницы и установку флага.
6. Наконец, установите хук 'wp_print_styles' и проверьте метаданные записи на значения 'yes', 'no' или '' с ключом "_has_{$shortcode_name}_shortcode". Если значение 'no' — не загружайте внешние ресурсы. Если значение 'yes' или '' — загружайте их.

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

Пример кода плагина

Плагин активируется при использовании шорткода [trigger-css], который устанавливает стиль элементов <h2> на странице как белый текст на красном фоне, чтобы было легко увидеть его работу. Он предполагает наличие подкаталога css с файлом style.css, содержащим следующий CSS:

/*
 * Filename: css/style.css
 */
h2 {
  color: white;
  background: red;
}

А ниже приведен код работающего плагина:

<?php
/**
 * Plugin Name: CSS on Shortcode
 * Description: Shows how to conditionally load a shortcode
 * Author: Mike Schinkel <mike@newclarity.net>
 */
class CSS_On_Shortcode {

  /**
   * @var CSS_On_Shortcode
   */
  private static $_this;

  /**
   * @var string 'yes'/'no' vs. true/false as get_post_meta() returns '' for false and not found.
   */
  var $shortcode_used = 'no';

  /**
   * @var string
   */
  var $HAS_SHORTCODE_KEY = '_has_trigger-css_shortcode';
  /**
   *
   */
  function __construct() {
    self::$_this = $this;
    add_shortcode( 'trigger-css', array( $this, 'do_shortcode' ) );
    add_filter( 'the_content', array( $this, 'the_content' ), 12 ); // AFTER WordPress' do_shortcode()
    add_action( 'save_post', array( $this, 'save_post' ) );
    add_action( 'wp_print_styles', array( $this, 'wp_print_styles' ) );
  }

  /**
   * @return CSS_On_Shortcode
   */
  function this() {
    return self::$_this;
  }

  /**
   * @param array $arguments
   * @param string $content
   * @return string
   */
  function do_shortcode( $arguments, $content ) {
    /**
     * If this shortcode is being used, capture the value so we can save to post_meta in the 'the_content' filter.
     */
    $this->shortcode_used = 'yes';
    return '<h2>THIS POST WILL ADD CSS TO MAKE H2 TAGS WHITE ON RED</h2>';
  }

  /**
   * Delete the 'has_shortcode' meta value so that it can be regenerated
   * on first page load in case shortcode use has changed.
   *
   * @param int $post_id
   */
  function save_post( $post_id ) {
    delete_post_meta( $post_id, $this->HAS_SHORTCODE_KEY );
    /**
     * Now load the post asynchronously via HTTP to pre-set the meta value for $this->HAS_SHORTCODE_KEY.
     */
    wp_remote_request( get_permalink( $post_id ), array( 'blocking' => false ) );
  }

  /**
   * @param array $args
   *
   * @return array
   */
  function wp_print_styles( $args ) {
    global $post;
    if ( 'no' != get_post_meta( $post->ID, $this->HAS_SHORTCODE_KEY, true ) ) {
      /**
       * Only bypass if set to 'no' as '' is unknown.
       */
      wp_enqueue_style( 'css-on-shortcode', plugins_url( 'css/style.css', __FILE__ ) );
    }
   }

  /**
   * @param string $content
   * @return string
   */
  function the_content( $content ) {
    global $post;
    if ( '' === get_post_meta( $post->ID, $this->HAS_SHORTCODE_KEY, true ) ) {
      /**
       * This is the first time the shortcode has ever been seen for this post.
       * Save a post_meta key so that next time we'll know this post uses this shortcode
       */
      update_post_meta( $post->ID, $this->HAS_SHORTCODE_KEY, $this->shortcode_used );
    }
    /**
     * Remove this filter now. We don't need it for this post again.
     */
    remove_filter( 'the_content', array( $this, 'the_content' ), 12 );
    return $content;
  }

}
new CSS_On_Shortcode();

Примеры скриншотов

Вот серия скриншотов:

Базовый редактор записи, без контента

Отображение записи без контента

Базовый редактор записи с шорткодом [trigger-css]

Отображение записи с шорткодом [trigger-css]

Не уверен на 100%

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

Поиск в Google подсказал мне потенциальный ответ. Я говорю "потенциальный", потому что он выглядит рабочим, но я не на 100% уверен, что это лучший способ:

add_action( 'wp_print_styles', 'yourplugin_include_css' );
function yourplugin_include_css() {
    // Проверяем, есть ли шорткод в контенте страницы или записи
    global $post;

    // Убрал закрывающую скобку ' ] '... чтобы можно было передавать аргументы.
    if ( strstr( $post->post_content, '[yourshortcode ' ) ) {
        echo $csslink;
    }
}

Этот код должен проверять, использует ли текущая запись шорткод, и соответственно добавлять таблицу стилей в элемент <head>. Но я не думаю, что он будет работать на страницах архива (где выводится несколько записей в цикле)... Также этот код из двухлетней записи в блоге, так что я не уверен, будет ли он работать с WP 3.1.X.

Используя комбинацию ответа TheDeadMedic и документации по get_shortcode_regex() (которая, кстати, не нашла мои шорткоды), я создал простую функцию для подключения скриптов для нескольких шорткодов. Поскольку wp_enqueue_script() в шорткодах добавляет скрипты только в подвал, эта функция может быть полезна, так как позволяет обрабатывать скрипты как для заголовка, так и для подвала.

function add_shortcode_scripts() {
    global $wp_query;   
    $posts = $wp_query->posts;
    $scripts = array(
        array(
            'handle' => 'map',
            'src' => 'http://maps.googleapis.com/maps/api/js?sensor=false',
            'deps' => '',
            'ver' => '3.0',
            'footer' => false
        ),
        array(
            'handle' => 'contact-form',
            'src' => get_template_directory_uri() . '/library/js/jquery.validate.min.js',
            'deps' => array( 'jquery' ),
            'ver' => '1.11.1',
            'footer' => true
        )   
    );

    foreach ( $posts as $post ) {
        foreach ( $scripts as $script ) {
            if ( preg_match( '#\[ *' . $script['handle'] . '([^\]])*\]#i', $post->post_content ) ) {
                // подключаем css и/или js
                if ( wp_script_is( $script['handle'], 'registered' ) ) {
                    return;
                } else {
                    wp_register_script( $script['handle'], $script['src'], $script['deps'], $script['ver'], $script['footer'] );
                    wp_enqueue_script( $script['handle'] );
                }
            }
        }
    }
}
add_action( 'wp', 'add_shortcode_scripts' );

Наконец я нашел решение для условной загрузки CSS, которое работает для моего плагина www.mapsmarker.com, и хочу поделиться им с вами. Оно проверяет, используется ли мой шорткод в текущем файле шаблона и в header.php/footer.php, и если да, подключает необходимую таблицу стилей в заголовке:

  function prefix_template_check_shortcode( $template ) {
    $searchterm = '[mapsmarker';
    $files = array( $template, get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'header.php', get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'footer.php' );
    foreach( $files as $file ) {
        if( file_exists($file) ) {
            $contents = file_get_contents($file);
            if( strpos( $contents, $searchterm )  ) {
                wp_enqueue_style('
leafletmapsmarker', LEAFLET_PLUGIN_URL . 'leaflet-dist/leaflet.css');
                  break; 
            }
        }
    }
  return $template;
  }  
  add_action('template_include','prefix_template_check_shortcode' );

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

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

       // определяем, содержит ли страница шорткод "my_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' );

потому что CSS должен объявляться внутри <head>

Для CSS файлов вы можете загружать их прямо в выводе шорткода:

<style type="text/css">
  @import "путь/к/вашему.css"; 
</style>

Установите константу или что-то подобное после этого, например MY_CSS_LOADED (включать CSS только если константа не установлена).

Оба ваших метода медленнее, чем этот подход.

Для JS файлов вы можете сделать то же самое, если загружаемый скрипт уникален и не имеет внешних зависимостей. Если это не так, загружайте его в подвале (футере), но используйте константу для определения необходимости загрузки...