Ich führe eine Funktion auf Seiten aus, auf denen der Shortcode [make-me-a-map]
verwendet wird. Es fügt Javascript in die Seite ein und erstellt eine Karte. Dieser Teil funktioniert gut (woot!), Aber ich habe Probleme damit, die Stylesheets auf ähnliche Weise nur diesen Seiten 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;
}
}
Dies scheint leider nicht zu funktionieren. Die Stile werden allen Seiten hinzugefügt.
Ich habe wp_register_style & wp_enqueue_style nicht verwendet, da dieser Fehler immer noch <Link />
Tags aus diesen Funktionen zur Fußzeile hinzufügt .
Ich hätte add_action("wp_enqueue_scripts", "style_my_new_map")
stattdessen verwenden können, add_action('wp-head', "style_my_new_map")
aber soweit ich sehen und überprüfen kann, gibt es keinen Unterschied? Fügt die Stylesheets weiterhin allen Seiten hinzu.
Meine Frage besteht also eigentlich aus zwei Teilen: :)
- Warum funktioniert die aktuelle functions.php nicht und fügt allen Seiten Stile hinzu? Ich bin mir nicht sicher, ob es der
global
Anruf oder der istif
Aussage ist ... - Wie kann ich die Stylesheets am besten nur in den Header der Seiten einfügen, auf denen der obige Shortcode verwendet wird, vorausgesetzt, ich kenne die Seiten-IDs usw. nicht?
Danke im Voraus! P.
Antworten:
2 Fragen also 2 Antworten :)
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).Beide
wp_enqueue_scripts
undwp_head
werden viel früher aufgerufen:wp_head
irgendwo in Ihrer Themendateiheader.php
undwp_enqueue_scripts
während deswp_head
Anrufs.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 vom Browser nur einmal 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 bessere Wahl liegt bei Ihnen; ich denke, die zweite ist besser) ...
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 in die Warteschlange stellen. (Natürlich wird es nicht sehr effizient sein).quelle
Dynamisches Laden von Skripten und Stilen mithilfe von Shortcode
Vorteile
strstr()
oder sindstrpos()
. Sie können zu Regex wechseln, wenn Sie Argumente akzeptieren müssen.Erklärung des Codes
Findet die Shortcodes auf der Seite mit dem
save_post
Hook nur, wenn der Beitrag keine Revision ist und mit dem angegebenen übereinstimmtpost_type
.Speichert die gefundenen Post-IDs als Array,
add_option()
wobei Autoload auf yes gesetzt ist, sofern der Eintrag nicht bereits vorhanden ist. Dann wird es verwendetupdate_option()
.Verwendet Hook
wp_enqueue_scripts
, um unsereadd_scripts_and_styles()
Funktion aufzurufen .Diese Funktion ruft dann
get_option()
auf, um unser Array von Seiten-IDs abzurufen. Wenn der Strom$page_id
in der$option_id_array
ist, werden die Skripte und Stile hinzugefügt.Bitte beachten Sie: Ich habe den Code aus OOP Namespaced-Klassen konvertiert, sodass ich möglicherweise etwas verpasst habe. Lass es mich in den Kommentaren wissen, wenn ich es getan habe.
Codebeispiel: Suchen von Shortcode-Vorkommen
Codebeispiel: Shortcode Skripte und Stile dynamisch einschließen
quelle
Das funktioniert bei mir:
Weitere Informationen hier: http://mikejolley.com/2013/12/sensible-script-enqueuing-shortcodes/
quelle
Sie können sich nach dem Ausführen der Hauptabfrage an eine Aktion anschließen und feststellen, ob Sie Ihre Stile und Skripts laden müssen.
quelle
ich würde ... benutzen
has_shortcode
, 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 Ihrer untergeordneten Themenfunktionsdatei hinzu und ändern Sie die Bedingungen bei Bedarf.
quelle
Eine viel einfachere Lösung, die für mich funktioniert hat, bestand darin, das Skript außerhalb der Shortcode-Funktion zu registrieren und das Skript dann innerhalb der Funktion in die Warteschlange zu stellen. Dann lädt es das Skript nur auf Seiten mit Ihrem Shortcode.
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.
quelle
Sie können es einfach so machen:
Es funktioniert auch für Stylesheets. Um Ihr Stylesheet zuletzt zu laden, fügen Sie Ihrem Shortcode-Hook folgende Zahlen hinzu:
add_shortcode("make-me-a-map", "create_new_map", 9999);
Ich habe es getestet und es funktioniert.
quelle
Dynamisches Laden von Skripten und Stilen mithilfe von Shortcode
Dies ist erweiterter Code für die oben von Commandz bereitgestellte Lösung .
Ich habe festgestellt, dass seine Methode am besten und praktikabler ist, da die Datenbankoption an fast allen Hooks verfügbar ist.
Es wurde geändert, um das Auftreten von Shortcodes nur für den aktuellen Beitragsinhalt zu ermitteln, anstatt alle Beiträge zu durchlaufen. Dies kann langsamer sein, wenn die Anzahl der Beiträge groß ist.
Sie 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.
Code für beide Funktionen geändert
Außerdem wurde eine weitere Variable hinzugefügt, sodass Sie unterschiedliche Namen für die Datenbankoption und den Shortcode-Namen haben können.
quelle