web-dev-qa-db-de.com

Laden Sie Stile und Skripte dynamisch aus Theme Functions.php

Ich versuche, Stylesheets und Skripte basierend auf dem Vorlagennamen dynamisch zu laden. Wenn ich also eine Vorlage mit dem Namen page-signup.php habe, werden die entsprechenden Stylesheets page-signup.css und page-signup.js geladen, sofern sie für diese Seite in einem bestimmten Verzeichnis in meinem Themenordner vorhanden sind.

Hier ist, was ich bisher in functions.php meines Themas habe. Derzeit werden keine Stile oder Skripte geladen, wenn sich die CSS- und JS-Dateien im richtigen Verzeichnis befinden:

/**
 * 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');
pagespage-templatewp-enqueue-scriptwp-enqueue-style
3
Adam

Ein paar Probleme hier ...

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

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

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

Hier ist ein funktionierendes Beispiel, einschließlich des richtigen Hooks in wp_enqueue_scripts, aber Sie möchten den Inhalt von load_resources() in Ihre eigene Funktion in Ihrem Theme verschieben, die bereits einen Hook hat.

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' );
2
Jared Cobb