web-dev-qa-db-fra.com

Charger dynamiquement des styles et des scripts à partir de Theme Functions.php

J'essaie de charger dynamiquement des feuilles de style et des scripts en fonction du nom du modèle. Donc, si j’ai un modèle nommé page-signup.php, il chargera les feuilles de style correspondantes page-signup.css et page-signup.js s’il existe pour cette page à partir d’un répertoire spécifique de mon dossier de thèmes.

Voici ce que j'ai jusqu'à présent dans functions.php de mon thème. Il ne charge actuellement aucun style ni aucun script lorsque les fichiers css et js sont présents dans le répertoire approprié:

/**
 * 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

Quelques problèmes ici ...

Tout d’abord, le crochet init est trop tôt pour que WordPress sache quel modèle de page vous allez utiliser. (Ainsi, la fonction is_page_template() retournera toujours false).

Lancez simplement votre fonction avec wp_enqueue_scripts (ce que vous êtes probablement déjà en train de faire pour votre code CSS/JavaScript global). Et ensuite vérifiez le modèle de page et exécutez votre logique dans cette fonction.

Deuxièmement, get_template_directory_uri() renverra l'URL Web de votre fichier et le file_exists de PHP attend un chemin de répertoire sur le disque (pas une URL). Utilisez la fonction get_template_directory() pour obtenir ce chemin et mettez-le en file d'attente avec get_template_directory_uri().

Voici un exemple de travail, incluant le raccordement approprié dans wp_enqueue_scripts, mais vous voudrez déplacer le contents de load_resources() dans votre propre fonction dans votre thème déjà accroché.

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