Caricamento Condizionale di JavaScript/CSS per Shortcode

Rispondo in ritardo a questa domanda ma dato che Ian ha avviato questa discussione sulla mailing list wp-hackers oggi, mi ha fatto pensare che valesse la pena rispondere, soprattutto considerando che stavo pianificando di aggiungere una funzionalità simile ad alcuni plugin su cui sto lavorando.

Un approccio da considerare è verificare al primo caricamento della pagina se lo shortcode è effettivamente utilizzato e poi salvare lo stato di utilizzo dello shortcode in una meta chiave del post. Ecco come fare:

Procedura Passo-Passo

1. Imposta un flag $shortcode_used a 'no'.
2. Nella funzione dello shortcode stesso, imposta il flag $shortcode_used a 'yes'.
3. Imposta un hook 'the_content' con priorità 12 (dopo che WordPress ha processato gli shortcode) e controlla i meta del post per un valore vuoto '' usando la chiave "_has_{$shortcode_name}_shortcode". (Un valore '' viene restituito quando una meta chiave non esiste per l'ID del post.)
4. Usa un hook 'save_post' per eliminare la meta del post, cancellando il flag persistente per quel post nel caso l'utente modifichi l'utilizzo dello shortcode.
5. Anche nell'hook 'save_post' usa wp_remote_request() per inviare una richiesta HTTP GET non bloccante al permalink del post stesso, per attivare il primo caricamento della pagina e l'impostazione del flag persistente.
6. Infine imposta un hook 'wp_print_styles' e controlla i meta del post per un valore 'yes', 'no' o '' usando la chiave "_has_{$shortcode_name}_shortcode". Se il valore è 'no', non servire il file esterno. Se il valore è 'yes' o '', procedi a servire il file esterno.

E questo dovrebbe essere tutto. Ho scritto e testato un plugin di esempio per mostrare come funziona.

Codice del Plugin di Esempio

Il plugin si attiva con uno shortcode [trigger-css] che imposta gli elementi <h2> della pagina con testo bianco su sfondo rosso, così puoi vedere facilmente che funziona. Assume una sottodirectory css contenente un file style.css con questo CSS:

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

Ecco il codice funzionante del plugin:

<?php
/**
 * Plugin Name: CSS on Shortcode
 * Description: Mostra come caricare condizionalmente uno shortcode
 * Author: Mike Schinkel <mike@newclarity.net>
 */
class CSS_On_Shortcode {

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

  /**
   * @var string 'yes'/'no' invece di true/false poiché get_post_meta() restituisce '' per false o chiave non trovata.
   */
  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 ); // DOPO il do_shortcode() di 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 ) {
    /**
     * Se questo shortcode è utilizzato, cattura il valore così possiamo salvarlo nei post_meta nel filtro 'the_content'.
     */
    $this->shortcode_used = 'yes';
    return '<h2>QUESTO POST AGGIUNGERÀ CSS PER RENDERE I TAG H2 BIANCO SU ROSSO</h2>';
  }

  /**
   * Elimina il meta 'has_shortcode' così che possa essere rigenerato
   * al primo caricamento della pagina nel caso l'uso dello shortcode sia cambiato.
   *
   * @param int $post_id
   */
  function save_post( $post_id ) {
    delete_post_meta( $post_id, $this->HAS_SHORTCODE_KEY );
    /**
     * Ora carica il post in modo asincrono via HTTP per preimpostare il meta value per $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 ) ) {
      /**
       * Salta solo se impostato su 'no' poiché '' è sconosciuto.
       */
      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 ) ) {
      /**
       * Questa è la prima volta che questo shortcode viene visto per questo post.
       * Salva una meta chiave così che la prossima volta sapremo che questo post usa questo shortcode
       */
      update_post_meta( $post->ID, $this->HAS_SHORTCODE_KEY, $this->shortcode_used );
    }
    /**
     * Rimuovi questo filtro ora. Non ci serve più per questo post.
     */
    remove_filter( 'the_content', array( $this, 'the_content' ), 12 );
    return $content;
  }

}
new CSS_On_Shortcode();

Screenshot di Esempio

Ecco una serie di screenshot

Editor di Post Base, Senza Contenuto

Visualizzazione Post, Senza Contenuto

Editor di Post Base con Shortcode [trigger-css]

Visualizzazione Post con Shortcode [trigger-css]

Non Sono Sicuro al 100%

Credo che quanto sopra dovrebbe funzionare in quasi tutti i casi, ma avendo appena scritto questo codice non posso esserne certo al 100%. Se trovi situazioni in cui non funziona, mi piacerebbe saperlo così posso correggere il codice in alcuni plugin a cui ho appena aggiunto questa funzionalità. Grazie in anticipo.

Cercando su Google ho trovato una potenziale risposta. Dico "potenziale" perché sembra valida, dovrebbe funzionare, ma non sono sicuro al 100% che sia il modo migliore per farlo:

add_action( 'wp_print_styles', 'yourplugin_include_css' );
function yourplugin_include_css() {
    // Verifica se lo shortcode è presente nel contenuto della pagina o del post
    global $post;

    // Ho rimosso la chiusura ' ] '... così può accettare argomenti.
    if ( strstr( $post->post_content, '[yourshortcode ' ) ) {
        echo $csslink;
    }
}

Questo codice dovrebbe verificare se il post corrente utilizza uno shortcode e aggiungere un foglio di stile all'elemento <head> in modo appropriato. Tuttavia, non credo che funzioni per una pagina indice (ad esempio, più post nel loop)... Inoltre, proviene da un post di blog di 2 anni fa, quindi non sono nemmeno sicuro che funzioni con WP 3.1.X.

Utilizzando una combinazione della risposta di TheDeadMedic e della documentazione di get_shortcode_regex() (documentazione) (che in realtà non trovava i miei shortcode), ho creato una semplice funzione per caricare gli script per più shortcode. Dato che wp_enqueue_script() negli shortcode aggiunge solo nel footer, questo può essere utile perché gestisce sia gli script per l'header che per il 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 ) ) {
                // carica css e/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 ho trovato anche una soluzione per il caricamento condizionale del CSS che funziona per il mio plugin www.mapsmarker.com e vorrei condividerla con voi. Controlla se il mio shortcode è utilizzato all'interno del file template corrente e in header.php/footer.php e, in caso affermativo, carica il foglio di stile necessario nell'header:

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

Per il mio plugin ho scoperto che a volte gli utenti hanno un theme builder che memorizza gli shortcode nei metadati del post. Ecco cosa sto usando per rilevare se lo shortcode del mio plugin è presente nell'attuale post o nei metadati del post:

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

       // determina se questa pagina contiene lo 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' );

perché il CSS dovrebbe essere dichiarato all'interno di <head>

Per i file CSS puoi caricarli all'interno dell'output del tuo shortcode:

<style type="text/css">
  @import "percorso/del/tuo.css"; 
</style>

Imposta una costante o qualcosa di simile dopo questo, come MY_CSS_LOADED (includi il CSS solo se la costante non è impostata).

Entrambi i tuoi metodi sono più lenti rispetto a questo approccio.

Per i file JS puoi fare lo stesso se lo script che stai caricando è unico e non ha dipendenze esterne. Se non è questo il caso, caricalo nel footer, ma usa la costante per determinare se deve essere caricato o meno...