Laden Sie Styles und Skripts dynamisch aus der Theme Functions.php

Ich versuche, Stylesheets und Skripts basierend auf dem Vorlagennamen dynamisch zu laden. Wenn ich also ein Template namens page-signup.php habe, wird es die entsprechende Stylesheet- page-signup.css und page-signup.js wenn sie für diese Seite aus einem bestimmten Verzeichnis in meinem Theme-Ordner existieren.

Hier ist, was ich bisher in functions.php meines Themas habe. Derzeit werden keine Stile oder Skripts geladen, wenn die css- und js-Dateien im richtigen Verzeichnis vorhanden sind:

 /** * Auto loads scripts and styles based on the page name if they exist. */ function mytheme_bootstrap_page_resources() { if( is_page_template() ) { $page_template = basename( get_page_template(), '.php' ); $css_file_path = get_template_directory() . "/css/pages/$page_template.css"; $js_file_path = get_template_directory() . "/js/pages/$page_template.js"; $css_file_uri = get_template_directory_uri() . "/css/pages/$page_template.css"; $js_file_uri = get_template_directory_uri() . "/js/pages/$page_template.js"; if(file_exists($css_file_path)){ wp_enqueue_style($page_template, $css_file_uri); } if(file_exists($js_file_path)){ wp_enqueue_script($page_template, $js_file_uri); } } } add_action('wp_enqueue_scripts', 'mytheme_bootstrap_page_resources'); 

Solutions Collecting From Web of "Laden Sie Styles und Skripts dynamisch aus der Theme Functions.php"

Ein paar Fragen hier …

Erstens ist der init Hook zu früh für WordPress, um zu wissen, welche Seitenvorlage Sie verwenden werden. (Die function is_page_template() gibt also immer false zurück).

Gehen Sie einfach weiter und wp_enqueue_scripts Sie Ihre function an wp_enqueue_scripts (was Sie wahrscheinlich bereits für Ihr globales CSS / JavaScript tun). Und dann nach der Seitenvorlage suchen und Ihre Logik in dieser function ausführen.

Zweitens gibt get_template_directory_uri() die Web-URL Ihrer Datei zurück und PHP’s file_exists erwartet einen Verzeichnispfad auf der Festplatte (keine URL). Verwenden Sie die function get_template_directory() , um diesen Pfad abzurufen, und stellen Sie ihn mit get_template_directory_uri() .

Hier ist ein funktionierendes Beispiel, einschließlich des richtigen wp_enqueue_scripts in wp_enqueue_scripts aber Sie sollten den Inhalt von load_resources() in Ihre eigene function in Ihrem bereits load_resources() Theme verschieben.

 function load_resources() { if( is_page_template() ) { $page_template = basename( get_page_template(), '.php' ); $css_file_path = get_template_directory() . '/css/pages/' . $page_template . '.css'; $js_file_path = get_template_directory() . '/js/pages/' . $page_template . '.js'; $css_file_uri = get_template_directory_uri() . '/css/pages/' . $page_template . '.css'; $js_file_uri = get_template_directory_uri() . '/js/pages/' . $page_template . '.js'; if(file_exists($css_file_path)){ wp_enqueue_style($page_template, $css_file_uri); } if(file_exists($js_file_path)){ wp_enqueue_script($page_template, $js_file_uri); } } } add_action( 'wp_enqueue_scripts', 'load_resources' );