it-swarm.com.de

Wie füge ich Stylesheets nur zu Seiten mit einem bestimmten Shortcode hinzu?

Ich führe eine Funktion auf Seiten aus, auf denen der Shortcode [make-me-a-map] verwendet wird. Dadurch wird Javascript in die Seite eingereiht und eine Karte erstellt. Dieser Teil funktioniert einwandfrei (woot!), Aber ich habe Probleme damit, die Stylesheets nur auf diese Seiten auf ähnliche Weise hinzuzufügen.

functions.php (Aktuell)

add_shortcode("make-me-a-map", "create_new_map");
add_action("wp_head", "style_my_new_map");

function create_new_map () {
    global $new_map_called_for;
    $map_called_for = true;

    wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true);
    wp_enqueue_script('make-a-new-map');
    }

function style_my_new_map() {
    global $new_map_called_for;
    if ($new_map_called_for == true) {
        $tDir = get_template_directory_uri();

        // Echo stylesheets because wp_register_style & wp_enqueue_style don't work atm
        // And add_action('wp_enqueue_script', 'style_my_new_maps') with those functions would add style to all pages
        // Not just the ones with [make-me-a-map] shortcode
        echo "<link rel='stylesheet' href='", $tDir, "/css/new-map.css' />", PHP_EOL;

        // Echo Javascript straight to page (couldn't do it with wp_enqueue_script) to let js code know the template directory
        echo '<script type="text/javascript">var templateDir = "', get_template_directory_uri(), '";</script>', PHP_EOL;
        $map_called_for = false;
    }
}

Das scheint leider nicht zu funktionieren. Die Stile werden allen Seiten hinzugefügt.

Ich habe wp_register_style & wp_enqueue_style nicht verwendet, weil dieser Fehler der Fußzeile von diesen Funktionen noch <Link />-Tags hinzufügt.

Ich hätte add_action("wp_enqueue_scripts", "style_my_new_map") anstelle von add_action('wp-head', "style_my_new_map") verwenden können, aber soweit ich sehen und überprüfen kann, gibt es keinen Unterschied? Fügt die Stylesheets trotzdem allen Seiten hinzu.

Also meine Frage besteht eigentlich aus zwei Teilen: :)

  1. Warum funktioniert die aktuelle functions.php nicht und fügt allen Seiten Stile hinzu? Ich bin nicht sicher, ob es der Aufruf von global oder die Anweisung von if ist ...
  2. Wie füge ich die Stylesheets am besten in die Kopfzeile der Seiten ein, auf denen der obige Shortcode verwendet wird, sofern ich die Seiten-IDs usw. nicht kenne?

Danke im Voraus! P

7
Padraic

2 Fragen also 2 Antworten :)

Warum funktioniert die aktuelle functions.php nicht und fügt allen Seiten Stile hinzu? Ich bin mir nicht sicher, ob es der globale Aufruf oder die if-Anweisung ist ...

Es funktioniert nicht aufgrund der Reihenfolge, in der diese Funktionen aufgerufen werden. Ihr Shortcode-Rückruf wird beim Rendern von Post-Inhalten aufgerufen (höchstwahrscheinlich the_content Funktionsaufruf).

Sowohl wp_enqueue_scripts als auch wp_head werden viel früher aufgerufen: wp_head irgendwo in Ihrer Themendatei header.php und wp_enqueue_scripts während des Aufrufs von wp_head.

Wie füge ich die Stylesheets am besten in die Kopfzeile der Seiten ein, auf denen der obige Shortcode verwendet wird, sofern ich die Seiten-IDs usw. nicht kenne?

Ich glaube nicht, dass es so einen "besten" Weg gibt. Das ist überhaupt keine gute Idee. Browser zwischenspeichern CSS-Dateien. Wenn Sie also auf allen Seiten dasselbe CSS haben, wird es nur einmal vom Browser abgerufen. Wenn es viele CSS-Dateien für verschiedene Seiten gibt, muss der Browser alle abrufen. Ich würde es also überhaupt nicht tun und diese CSS-Stile in die globale CSS-Datei aufnehmen.

Obwohl, wenn Sie es nur auf Seiten einfügen müssen, die diesen Shortcode verwenden, dann (2 Lösungen, die Wahl, die besser ist, liegt bei Ihnen; ich denke, die zweite ist besser) ...

  1. Sie können diese Stile als Inline-Stile hinzufügen. Seien Sie einfach vorsichtig, um sie nicht oft einzuschließen. Geben Sie sie daher mit Ihrem Shortcode aus und stellen Sie sicher, dass sie nur einmal gedruckt werden.
  2. Da Beiträge bereits ausgewählt sind, können Sie beim Aufrufen von wp_head/wp_enqueue_scripts diesem Hook eine Funktion hinzufügen, ausgewählte Beiträge durchlaufen, prüfen, ob sie Ihren Shortcode enthalten, und Ihr CSS bei Bedarf einreihen. (Natürlich wird es nicht sehr effizient sein).
1

Dynamisches Laden von Skripten und Stilen mit Shortcode

Vorteile

  • Durchsucht nicht alle Beiträge jedes Mal, wenn der Shortcode aufgerufen wird.
  • Kann nur Stile und Skripte dynamisch hinzufügen, wenn sich ein Shortcode auf der Seite befindet.
  • Verwendet keine regulären Ausdrücke, da sie in der Regel langsamer sind als strstr() oder strpos(). Sie können zu regulären Ausdrücken wechseln, wenn Sie Argumente akzeptieren müssen.
  • Reduziert Dateiaufrufe

Erklärung des Codes

  1. Findet die Shortcodes auf der Seite mithilfe des Hooks save_post nur, wenn der Beitrag keine Revision ist und mit dem angegebenen post_type übereinstimmt.

  2. Speichert die gefundenen Post-IDs unter Verwendung von add_option() als Array, wobei Autoload auf yes gesetzt ist, sofern der Eintrag nicht bereits vorhanden ist. Dann wird update_option() verwendet.

  3. Verwendet hook wp_enqueue_scripts, um unsere Funktion add_scripts_and_styles() aufzurufen.

  4. Diese Funktion ruft dann get_option() auf, um unser Array von Seiten-IDs abzurufen. Befindet sich der aktuelle $page_id im $option_id_array, werden die Skripte und Stile hinzugefügt.

Bitte beachten Sie: Ich habe den Code von OOP Klassen mit Namespace konvertiert, sodass ich möglicherweise etwas verpasst habe. Lass es mich in den Kommentaren wissen, wenn ich es getan habe.

Codebeispiel: Suchen nach 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, '', 'yes')) update_option($option_name, $id_array);
}

add_action('save_post', 'save_option_shortcode_id_array' );

Codebeispiel: Shortcode, der Skripte und Stile dynamisch einschließt

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

Das funktioniert bei mir:

function register_my_css () {
    wp_register_style('my-style', plugins_url('styles.css', __FILE__));
}

function register_my_scripts () {
    wp_register_script('my-script', plugins_url('scripts.js', __FILE__));
}

// only enqueue the scripts / styles when the short code is called
function do_my_shortcode () {
    wp_enqueue_style('my-style');
    wp_enqueue_script('my-script');

    // do short code stuff...
}

// register css
add_action('wp_enqueue_scripts', 'register_my_css');

// register javascript
add_action('wp_enqueue_scripts', 'register_my_scripts');

// register shortcode
add_shortcode('my-shortcode', 'do_my_shortcode');

Weitere Infos hier: http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/

2
benedict_w

Sie können sich nach Ausführung der Hauptabfrage in eine Aktion einklinken und feststellen, ob Sie Ihre Stile und Skripte laden müssen.

add_action('template_include', 'custom_template_include');
function custom_template_include($template) {
    if (is_single() || is_page()) {
          global $post;
          if (has_shortcode($post->post_content, 'your_short_code')) {
              add_action('wp_enqueue_scripts, 'custom_enqueue_scripts');
          }
    } 
}

function custom_enqueue_scripts() {
    //Enqueue your stuff here. 
}
1
Lucas Stark

Dynamisches Laden von Skripten und Stilen mit Shortcode

Dies ist ein erweiterter Code für die von Commandz oben bereitgestellte Lösung.

Ich fand seine Methode am besten und praktikabler, da die Datenbankoption an fast allen Hooks verfügbar ist.

Es wurde geändert, um das Auftreten von Kurzwahlen only für den aktuellen Beitragsinhalt zu ermitteln, anstatt alle Beiträge durchzugehen. Dies kann langsamer sein, wenn die Anzahl der Beiträge groß ist.

Wird hier in zwei Zeilen geändert, nachdem eine weitere Variable $ post_id von der Aktion save_post an die Funktion find_shortcode_occurences () übergeben wurde

if( !empty($post_id) ) {
    $args['posts__in'] = $post_id; 
}

Code für beide Funktionen geändert

function find_shortcode_occurences($shortcode, $post_id='', $post_type = 'page') {
    $found_ids = array();
    $args         = array(
        'post_type'   => $post_type,
        'post_status' => 'publish',
        'posts_per_page' => -1,
    );

    if( !empty($post_id) ) {
        $args['posts__in'] = $post_id; 
    }

    $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;
}

add_action('save_post', 'save_option_for_sppro_pages' );
function save_option_for_sppro_pages( $post_id ) {
    if ( wp_is_post_revision( $post_id ) ) {
        return;
    }
    $option_name = 'database-option';
    $shortcode = 'shortcode-name';
    $id_array = find_shortcode_occurences($shortcode, $post_id);
    $autoload = 'yes';
    if (false == add_option($option_name, $id_array, '', 'yes')) {
        $current_value = get_option($option_name);
        $new_value = array_merge($current_value, $id_array);
        update_option($option_name, $id_array);
    }
}

Es wurde auch eine andere Variable hinzugefügt, sodass Sie für die Datenbankoption und den Shortcode-Namen unterschiedliche Namen festlegen können.

0
OmAk
add_action( 'wp_enqueue_scripts', 'enqueue_shortcode_styles', 1 );
function enqueue_shortcode_styles() {

    global $post;

    if ( isset($post->post_content) && is_singular(array( 'post','page' ) ) && ! has_shortcode( $post->post_content, '$tag' ) ) {

    wp_enqueue_style( 'shortcode-styles', get_stylesheet_directory_uri() . '/style.css' );

    }

}

Ich würde has_shortcode verwenden, um den Inhalt von $ post zu überprüfen und die Skripte mit wp_enqueue_scripts zu laden, aber es hängt davon ab, wo Ihre Shortcodes eingebettet sind.

Tauschen Sie $ tag mit Ihrem Shortcode-Tag im obigen Code aus.

Fügen Sie die Funktionsdatei Ihres untergeordneten Themes hinzu und ändern Sie die Bedingungen, falls erforderlich.

0
Dev

Eine viel einfachere Lösung, die für mich funktioniert hat, war, das Skript außerhalb der Shortcode-Funktion zu registrieren und dann das Skript innerhalb der Funktion in eine Warteschlange zu stellen. Dann lädt es das Skript nur auf Seiten, die Ihren Shortcode verwenden.

wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true);
wp_register_style('make-a-new-map-style', get_template_directory_uri() . '/css/new-map.css');

add_shortcode("make-me-a-map", "create_new_map");
add_action("wp_head", "style_my_new_map");

function create_new_map () {
   wp_enqueue_script('make-a-new-map');
   wp_enqueue_style('make-a-new-map-style');

   global $new_map_called_for;
   $map_called_for = true;
}

Eine Beschreibung dieser Methode finden Sie hier: http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/

Beachten Sie, dass dadurch das CSS in die Fußzeile geladen wird, was möglicherweise nicht wünschenswert oder W3C-gültig ist. In meinem Fall war das kein Problem.

0
stellarcowboy

Sie können es einfach so machen:

// shortcode hook
add_shortcode("make-me-a-map", "create_new_map");

// shortcode callback
function style_my_new_map() {
    global $new_map_called_for;
    if ($new_map_called_for == true) {
  wp_register_script('make-a-new-map', get_template_directory_uri() . '/js/new-map.js', array('jquery'), '0.1', true);
  wp_enqueue_script('make-a-new-map');

// the rest of your codes
    }
}

Es funktioniert auch für Stylesheets. Um Ihr Stylesheet zuletzt zu laden, fügen Sie Ihrem Shortcode-Hook wie folgt Zahlen hinzu:

add_shortcode("make-me-a-map", "create_new_map", 9999);

Ich habe es getestet und es funktioniert.

0
KeepMove