WordPress: Javascript wird nur dort geladen, wo der Shortcode erscheint

habe ein interessantes Rätsel. Ich muss ungefähr 8 Javascript-Dateien und die gleiche Anzahl von Stilen für mein Plugin laden. Diese werden nur dort benötigt, wo auch immer mein Shortcode ausgeführt wird.

Ich habe versucht, sie mit print_styles und print_scripts zu laden, aber sie werden nicht richtig gerendert, außerdem unterbricht dies die xhtml-Validierung. Im Moment laden sie also auf jeder Seite und aufgrund der Anzahl der benötigten Dateien ist es nicht möglich, sie so zu belassen.

Bei einem anderen Projekt habe ich eine Funktion in die index.php-Datei meines Plugins geschrieben, die die aktuelle Seite nimmt, sie nach meinem Shortcode durchsucht und nur dann die Skripte druckt, wenn sie gefunden wird, aber das ist ein hässlicher Hack.

Hat jemand Vorschläge oder Lösungen? Jede Hilfe wäre willkommen, Grüße, Daithi

Um meine eigene Frage zu beantworten … Ich hatte es das erste Mal schreiben. Sie müssen jede Seite durchsuchen, um zu überprüfen, ob Ihr Shortcode verwendet wird. Dies muss erfolgen, wenn Seitendaten geladen werden und bevor die Seite angezeigt wird. Für mich ist es totaler Overkill auf dem System, aber leider ist es so wie es ist. Diese Informationen habe ich von:
get_shortcode_regex
und
alter Nabel

So zuerst:

add_action('template_redirect','wp_my_shortcode_head');

dann:

function wp_my_shortcode_head(){
  global $posts;
  $pattern = get_shortcode_regex(); 
  preg_match("https://stackoverflow.com/".$pattern.'/s', $posts[0]->post_content, $matches); 
  if (is_array($matches) && $matches[2] == 'YOURSHORTCODE') { 
        //shortcode is being used 
  }
}

Ersetzen Sie ‘YOURSHORTCODE’ durch den Namen Ihres Shortcodes und fügen Sie Ihre wp_enqueue_scripts dort hinzu, wo es heißt, //Shortcode wird verwendet.

Ich habe hier eine Lösung gelesen: http://scribu.net/wordpress/conditional-script-loading-revisited.html
Wenn Sie WordPress 3.3 verwenden, können Sie Ihre Skripte grundsätzlich in Ihre Kurzcodefunktion einreihen.

function my_shortcode($atts){
    wp_enqueue_script( 'my-script', plugins_url( 'plugin_name/js/script.js' ), array('jquery'), NULL, true);

    // if you add a css it will be added to the footer
//wp_enqueue_style( 'my-css', plugins_url( 'plugin_name/css/style.css' ) );

    //the rest of shortcode functionality
}

Dynamisches Laden von Skripten und Stilen pro Seite mithilfe eines Shortcodes

Vorteile

• Durchsucht nicht bei jedem Aufruf des Shortcodes alle Posts.
• Stile und Skripte können nur dann dynamisch hinzugefügt werden, wenn sich der Shortcode auf der Seite befindet.
• Verwendet keine regulären Ausdrücke, da sie in der Regel langsamer sind als strstr() oder strpos(). Wenn Sie Argumente abholen müssen, sollten Sie die oben erwähnte Shortcode-Regex verwenden.
• Reduziert Dateiaufrufe

Erläuterung des Codes

1. Findet die Shortcodes auf der Seite mit dem save_post Haken Sie nur ein, wenn der Beitrag keine Revision ist und mit den angegebenen übereinstimmt post_type.

2. Speichert die gefundenen Beitrags-IDs als Array mit add_option() mit autoload auf yes gesetzt, es sei denn, der Eintrag ist bereits vorhanden. Dann wird es verwendet update_option().

3. Verwendet Haken wp_enqueue_scripts unsere anzurufen add_scripts_and_styles() Funktion.

4. Diese Funktion ruft dann auf get_option() um unser Array von Seiten-IDs abzurufen. Wenn der Strom $page_id ist in dem $option_id_array dann fügt es die Skripte und Stile hinzu.

Bitte beachten Sie: Ich habe den Code aus OOP Namespaced-Klassen konvertiert, sodass ich möglicherweise etwas übersehen habe. Lass es mich in den Kommentaren wissen, wenn ich es getan habe.

Code-Beispiel: Finden von Shortcode-Vorkommen

function find_shortcode_occurences($shortcode, $post_type="page")
{
    $found_ids = array();
    $args         = array(
        'post_type'   => $post_type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );
    $query_result = new WP_Query($args);
    foreach ($query_result->posts as $post) {
        if (false !== strpos($post->post_content, $shortcode)) {
            $found_ids[] = $post->ID;
        }
    }
    return $found_ids;
}

function save_option_shortcode_post_id_array( $post_id ) 
{
    if ( wp_is_post_revision( $post_id ) OR 'page' != get_post_type( $post_id )) {
        return;
    }
    $option_name="yourprefix-yourshortcode";
    $id_array = find_shortcode_occurences($option_name);
    $autoload = 'yes';
    if (false == add_option($option_name, $id_array, '', $autoload)) update_option($option_name, $id_array);
}

add_action('save_post', 'save_option_shortcode_id_array' );

Codebeispiel: Shortcode Skripte und Stile dynamisch einschließen

function yourshortcode_add_scripts_and_styles() {
    $page_id = get_the_ID();
    $option_id_array = get_option('yourprefix-yourshortcode');
    if (in_array($page_id, $option_id_array)) {
        wp_enqueue_script( $handle, $src, $deps, $ver, $footer = true );
        wp_enqueue_style( $handle, $src , $deps);
    }
}

add_action('wp_enqueue_scripts', 'yourshortcode_add_scripts_and_styles');

Lesen Sie einfach dieses Tutorial hier: http://scribu.net/wordpress/optimal-script-loading.html

Scheint der beste Weg zu sein.

add_action('init', 'register_my_script');
add_action('wp_footer', 'print_my_script');

function register_my_script() {
    wp_register_script('my-script', plugins_url('my-script.js', __FILE__), array('jquery'), '1.0', true);
}

function print_my_script() {
    global $add_my_script;

    if ( ! $add_my_script )
        return;

    wp_print_scripts('my-script');
}

In diesem Fall wird das Skript nur dann in die Warteschlange eingereiht, wenn das globale $add_my_script irgendwann während der Darstellung der Seite gesetzt wurde.

add_shortcode('myshortcode', 'my_shortcode_handler');

function my_shortcode_handler($atts) {
    global $add_my_script;

    $add_my_script = true;

    // actual shortcode handling here
}

Das Skript wird also hinzugefügt, wenn [myshortcode …] wurde in einem der Beiträge auf der aktuellen Seite gefunden.

Skripte und Stile laden, wenn Beitrag/Seite Kurzcode hat

Die beste Lösung besteht darin, die Dateien nur dann in den Seitenkopf zu laden, wenn der aktuelle Beitrag oder die aktuelle Seite den Kurzcode in seinem Inhalt enthält. Und genau das macht die folgende Funktion:

function flip_register_frontend_assets() 
{

//Registrieren Sie Ihre Skripte und Stile hier

wp_register_style('pp_font','plugin_styles.css', null, null, 'all');

global $post;  

//überprüfen Sie, ob Ihr Inhalt einen Shortcode hat

if(isset($post->post_content) && has_shortcode( $post->post_content, 'your-
shortcode')){  

//Stellen Sie Ihre Skripte und Stile hier in die Warteschlange

 wp_enqueue_style( 'pp_font');

 }
 }

Platzieren Sie diese Funktion einfach in einer Ihrer Plugin-Dateien und Sie können loslegen. Sie müssen ersetzen [your-shortcode] mit dem Funktionscode, nach dem Sie suchen möchten, und Sie müssen außerdem plugin_styles.css durch Ihren Stylesheet-Namen ersetzen.

Sie können diesen Code einfach verwenden, um zu überprüfen, ob der Shortcode im Seiteninhalt oder in Seitenleisten-Widgets implementiert ist.

<?php

if ( shortcode_exists( 'gallery' ) ) {
    // The  short code exists.
}

?>

Ich verwende WordPress Version 5.4 mit Code im OOP-Stil. Ich weiß nicht, ob dies einen Einfluss darauf hat, warum keine der oben genannten Lösungen für mich nicht funktioniert hat, also habe ich diese Lösung entwickelt:

public function enqueue_scripts() {
 global $post;
 //error_log( print_r( $post, true ) );
 //error_log( print_r(  $post->post_content, true ) );
 //error_log( print_r(  strpos($post->post_content, '[YOUR_SHORTCODE]'),true));

 if ( is_a( $post, 'WP_Post' ) && strpos($post->post_content, '[YOUR_SHORTCODE]') ) 
 {
     wp_register_style('my-css', $_css_url);
     wp_register_script('my-js', $_js_url);
 }
}

Hoffe, das hilft jemandem.