Carga condicional de JavaScript/CSS para shortcodes

Llego tarde respondiendo a esta pregunta, pero como Ian inició este hilo en la lista wp-hackers hoy, me hizo pensar que vale la pena responderla, especialmente considerando que he estado planeando agregar tal funcionalidad a algunos plugins en los que he estado trabajando.

Un enfoque a considerar es verificar en la primera carga de página si el shortcode se usa realmente y luego guardar el estado de uso del shortcode en una meta clave del post. Aquí está cómo:

Guía Paso a Paso

1. Establece una bandera $shortcode_used en 'no'.
2. En la propia función del shortcode, establece la bandera $shortcode_used en 'yes'.
3. Configura un hook 'the_content' con prioridad 12, que es después de que WordPress haya procesado los shortcodes, y verifica la meta del post buscando un valor '' usando la clave "_has_{$shortcode_name}_shortcode". (Un valor de '' se retorna cuando no existe una meta clave para el ID del post.)
4. Usa un hook 'save_post' para borrar la meta del post, limpiando la bandera persistente para ese post en caso de que el usuario cambie el uso del shortcode.
5. También en el hook 'save_post', usa wp_remote_request() para enviar una petición HTTP GET no bloqueante al permalink propio del post, para disparar la primera carga de página y el establecimiento de la bandera persistente.
6. Finalmente, configura un 'wp_print_styles' y verifica la meta del post para un valor de 'yes', 'no' o '' usando la clave "_has_{$shortcode_name}_shortcode". Si el valor es 'no', no sirvas el recurso externo. Si el valor es 'yes' o '', prosigue y sirve el recurso externo.

Y eso debería funcionar. He escrito y probado un plugin de ejemplo para mostrar cómo funciona todo esto.

Código del Plugin de Ejemplo

El plugin se activa con un shortcode [trigger-css] que establece los elementos <h2> de la página en blanco sobre rojo para que puedas ver fácilmente que funciona. Asume un subdirectorio css que contiene un archivo style.css con este CSS:

/*
 * Nombre del archivo: css/style.css
 */
h2 {
  color: white;
  background: red;
}

Y a continuación está el código de un plugin funcional:

<?php
/**
 * Plugin Name: CSS on Shortcode
 * Description: Muestra cómo cargar condicionalmente un 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 ya que get_post_meta() retorna '' para false y no encontrado.
   */
  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 ); // DESPUÉS de do_shortcode() de WordPress
    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 ) {
    /**
     * Si este shortcode se está usando, captura el valor para guardarlo en post_meta en el filtro 'the_content'.
     */
    $this->shortcode_used = 'yes';
    return '<h2>ESTE POST AÑADIRÁ CSS PARA HACER LAS ETIQUETAS H2 BLANCO SOBRE ROJO</h2>';
  }

  /**
   * Borra el valor meta 'has_shortcode' para que pueda ser regenerado
   * en la primera carga de página en caso de que el uso del shortcode haya cambiado.
   *
   * @param int $post_id
   */
  function save_post( $post_id ) {
    delete_post_meta( $post_id, $this->HAS_SHORTCODE_KEY );
    /**
     * Ahora carga el post asincrónicamente vía HTTP para preestablecer el valor meta para $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 ) ) {
      /**
       * Solo omitir si está establecido en 'no', ya que '' es desconocido.
       */
      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 ) ) {
      /**
       * Es la primera vez que se ve este shortcode para este post.
       * Guarda una meta clave para que la próxima vez sepamos que este post usa este shortcode.
       */
      update_post_meta( $post->ID, $this->HAS_SHORTCODE_KEY, $this->shortcode_used );
    }
    /**
     * Elimina este filtro ahora. No lo necesitamos para este post de nuevo.
     */
    remove_filter( 'the_content', array( $this, 'the_content' ), 12 );
    return $content;
  }

}
new CSS_On_Shortcode();

Capturas de Pantalla de Ejemplo

Aquí hay una serie de capturas de pantalla

Editor de Post Básico, Sin Contenido

Visualización de Post, Sin Contenido

Editor de Post Básico con Shortcode [trigger-css]

Visualización de Post con Shortcode [trigger-css]

No Estoy Seguro si es 100%

Creo que lo anterior debería funcionar en casi todos los casos, pero como acabo de escribir este código no puedo estar 100% seguro. Si puedes encontrar situaciones donde no funcione, me gustaría saberlo para poder corregir el código en algunos plugins a los que acabo de agregar esto. Gracias de antemano.

Buscando en Google encontré una posible respuesta. Digo "posible" porque parece buena, debería funcionar, pero no estoy 100% convencido de que sea la mejor manera de hacerlo:

add_action( 'wp_print_styles', 'yourplugin_include_css' );
function yourplugin_include_css() {
    // Verifica si el shortcode existe en el contenido de la página o entrada
    global $post;

    // Eliminé el ' ] ' final... para que pueda aceptar argumentos.
    if ( strstr( $post->post_content, '[yourshortcode ' ) ) {
        echo $csslink;
    }
}

Esto debería poder verificar si la entrada actual está usando un shortcode y agregar una hoja de estilos al elemento <head> de manera apropiada. Pero no creo que funcione para una página de índice (es decir, múltiples entradas en el loop)... Además, es de una publicación de blog de hace 2 años, así que ni siquiera estoy seguro de que funcione con WP 3.1.X.

Utilizando una combinación de la respuesta de TheDeadMedic y la documentación de get_shortcode_regex() documentación (que en realidad no encontró mis shortcodes), creé una función simple para encolar scripts para múltiples shortcodes. Dado que wp_enqueue_script() en shortcodes solo añade al footer, esto puede ser útil ya que maneja tanto scripts para el header como para el footer.

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 ) ) {
                // encolar css y/o 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' );

Finalmente también encontré una solución para la carga condicional de CSS que funciona para mi plugin www.mapsmarker.com y me gustaría compartirla con ustedes. Verifica si mi shortcode se utiliza dentro del archivo de plantilla actual y en header.php/footer.php, y si es así, encola la hoja de estilos necesaria en el encabezado:

  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' );

Para mi plugin, descubrí que a veces los usuarios tienen un constructor de temas que almacena shortcodes en los metadatos del post. Esto es lo que uso para detectar si el shortcode de mi plugin está presente en el post actual o en sus metadatos:

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

       // determinar si esta página contiene el shortcode "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' );

porque el CSS debe declararse dentro de <head>

Para archivos CSS puedes cargarlos dentro de la salida de tu shortcode:

<style type="text/css">
  @import "ruta/a/tu/archivo.css"; 
</style>

Establece una constante o similar después de esto, como MI_CSS_CARGADO (solo incluye el CSS si la constante no está definida).

Ambos métodos que mencionas son más lentos que este enfoque.

Para archivos JS puedes hacer lo mismo si el script que estás cargando es único y no tiene dependencias externas. Si este no es el caso, cárgalo en el footer, pero usa la constante para determinar si necesita cargarse o no...