Încărcarea condiționată a JavaScript/CSS pentru shortcode-uri

Răspund târziu la această întrebare, dar deoarece Ian a inițiat acest fir de discuție pe lista wp-hackers astăzi, m-am gândit că merită să răspund, mai ales având în vedere că am planificat să adaug o astfel de funcționalitate la unele pluginuri la care lucrez.

O abordare de luat în considerare este să verifici la prima încărcare a paginii dacă shortcode-ul este folosit efectiv și apoi să salvezi starea utilizării shortcode-ului într-o cheie de meta pentru post. Iată cum:

Ghid Pas cu Pas

1. Setează un flag $shortcode_used la 'no'.
2. În funcția shortcode-ului însuși, setează flagul $shortcode_used la 'yes'.
3. Setează un hook 'the_content' cu prioritatea 12 (după ce WordPress a procesat shortcode-urile) și verifică meta pentru post pentru o valoare '' folosind cheia "_has_{$shortcode_name}_shortcode". (O valoare '' este returnată când o cheie de meta pentru post nu există pentru ID-ul postului.)
4. Folosește un hook 'save_post' pentru a șterge meta-ul postului, eliminând flagul persistent pentru acel post în cazul în care utilizatorul modifică utilizarea shortcode-ului.
5. De asemenea, în hook-ul 'save_post', folosește wp_remote_request() pentru a trimite un HTTP GET non-blocant către permalink-ul propriu al postului pentru a declanșa prima încărcare a paginii și setarea flagului persistent.
6. În final, setează un hook 'wp_print_styles' și verifică meta-ul postului pentru o valoare de 'yes', 'no' sau '' folosind cheia "_has_{$shortcode_name}_shortcode". Dacă valoarea este 'no', nu încărca fișierul extern. Dacă valoarea este 'yes' sau '', încarcă fișierul extern.

Și asta ar trebui să fie suficient. Am scris și testat un plugin exemplu pentru a arăta cum funcționează toate acestea.

Cod Exemplu pentru Plugin

Pluginul se activează la un shortcode [trigger-css] care setează elementele <h2> ale paginii pe alb pe roșu, astfel încât să poți vedea ușor că funcționează. Se presupune un subdirector css care conține un fișier style.css cu următorul CSS:

/*
 * Nume fișier: css/style.css
 */
h2 {
  color: white;
  background: red;
}

Și mai jos este codul într-un plugin funcțional:

<?php
/**
 * Plugin Name: CSS pe Shortcode
 * Description: Arată cum să încarci condiționat 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 deoarece get_post_meta() returnează '' pentru false și pentru chei inexistente.
   */
  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 ); // DUPĂ do_shortcode() din 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 ) {
    /**
     * Dacă acest shortcode este folosit, captează valoarea pentru a o salva în post_meta în filtrul 'the_content'.
     */
    $this->shortcode_used = 'yes';
    return '<h2>ACEST POST VA ADAUGA CSS PENTRU A FACE ELEMENTELE H2 ALBE PE ROȘU</h2>';
  }

  /**
   * Șterge valoarea meta 'has_shortcode' pentru a putea fi regenerată
   * la prima încărcare a paginii, în cazul în care utilizarea shortcode-ului s-a schimbat.
   *
   * @param int $post_id
   */
  function save_post( $post_id ) {
    delete_post_meta( $post_id, $this->HAS_SHORTCODE_KEY );
    /**
     * Acum încarcă postul asincron prin HTTP pentru a pre-set valoarea meta pentru $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 ) ) {
      /**
       * Doar ocolește dacă este setat la 'no', deoarece '' este necunoscut.
       */
      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 ) ) {
      /**
       * Aceasta este prima dată când shortcode-ul este văzut pentru acest post.
       * Salvează o cheie post_meta pentru ca data viitoare să știm că acest post folosește acest shortcode.
       */
      update_post_meta( $post->ID, $this->HAS_SHORTCODE_KEY, $this->shortcode_used );
    }
    /**
     * Elimină acest filtru acum. Nu avem nevoie de el pentru acest post din nou.
     */
    remove_filter( 'the_content', array( $this, 'the_content' ), 12 );
    return $content;
  }

}
new CSS_On_Shortcode();

Capturi de Ecran Exemplu

Iată o serie de capturi de ecran

Editor de Post de Bază, Fără Conținut

Afișare Post, Fără Conținut

Editor de Post de Bază cu Shortcode [trigger-css]

Afișare Post cu Shortcode [trigger-css]

Nu Sunt Sigur că e 100%

Cred că cele de mai sus ar trebui să funcționeze în aproape toate cazurile, dar cum tocmai am scris acest cod, nu pot fi 100% sigur. Dacă găsești situații în care nu funcționează, aș dori să știu pentru a putea repara codul în unele pluginuri la care tocmai am adăugat această funcționalitate. Mulțumesc anticipat.

Căutând pe Google am găsit un posibil răspuns. Spun "posibil" pentru că pare bun, ar trebui să funcționeze, dar nu sunt 100% convins că este cea mai bună metodă:

add_action( 'wp_print_styles', 'yourplugin_include_css' );
function yourplugin_include_css() {
    // Verifică dacă shortcode-ul există în conținutul paginii sau postării
    global $post;

    // Am eliminat ' ] ' de la final... pentru a accepta argumente.
    if ( strstr( $post->post_content, '[yourshortcode ' ) ) {
        echo $csslink;
    }
}

Această soluție ar trebui să verifice dacă postarea curentă utilizează un shortcode și să adauge o foaie de stil în elementul <head> în mod corespunzător. Dar nu cred că va funcționa pentru o pagină de index (adică mai multe postări în buclă)... De asemenea, provine de la un post de blog vechi de 2 ani, așa că nu sunt sigur că va funcționa cu WP 3.1.X.

Folosind o combinație între răspunsul lui TheDeadMedic și documentația get_shortcode_regex() (care de fapt nu a găsit shortcode-urile mele), am creat o funcție simplă folosită pentru a încărca scripturile pentru multiple shortcode-uri. Deoarece wp_enqueue_script() în shortcode-uri adaugă doar în footer, aceasta poate fi utilă deoarece poate gestiona atât scripturile din header cât și din 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 ) ) {
                // încarcă css și/sau 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' );

În sfârșit am găsit o soluție pentru încărcarea condiționată a CSS-ului care funcționează pentru plugin-ul meu www.mapsmarker.com și aș dori să o împărtășesc cu voi. Aceasta verifică dacă shortcode-ul meu este folosit în fișierul template curent și în header.php/footer.php, iar dacă da, încarcă fișierul de stil necesar în 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' );

Pentru plugin-ul meu am descoperit că uneori utilizatorii au un constructor de teme care stochează shortcode-uri în metadatele postării. Iată ce folosesc pentru a detecta dacă shortcode-ul meu este prezent în postarea curentă sau în metadatele postării:

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

       // determină dacă această pagină conține shortcode-ul "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' );

deoarece CSS ar trebui declarat în interiorul <head>

Pentru fișierele CSS le puteți încărca în interiorul output-ului shortcode-ului:

<style type="text/css">
  @import "calea/către/fișierul-tău.css"; 
</style>

Setați o constantă sau ceva similar după aceasta, cum ar fi MY_CSS_LOADED (includeți CSS-ul doar dacă constanta nu este setată).

Ambele metode propuse de tine sunt mai lente decât această abordare.

Pentru fișierele JS puteți face la fel dacă scriptul pe care îl încărcați este unic și nu are dependințe externe. Dacă acesta nu este cazul, încărcați-l în footer, dar folosiți constanta pentru a determina dacă trebuie încărcat sau nu...