web-dev-qa-db-fra.com

La bonne façon d'inclure JavaScript et CSS dans mes thèmes WordPress

J'essaie de créer mon propre thème Wordpress en utilisant les méthodes correctes. Mais...

Le premier problème que j'ai trouvé a été comment ajouter css et js "en utilisant la bonne manière".

J'ai trouvé plusieurs tutoriels pour le faire. ex: http://code.tutsplus.com/tutorials/loading-css-into-wordpress-the-right-way--cms-20402(ceci est du "30 juin 2014" ")et celui-ci http://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins--wp -24321(ceci est du "14 février 2012")Ils expliquent la même chose.

J'ai aussi jeté un coup d'oeil sur le thème "vingt-quinze" et a une autre manière différente.

Laissez-moi l'expliquer avec le code:

Si je suis les deux tutoriels de "tutsplus", mon code pour ajouter css et js ressemble à ceci:

<?php

function scripts() {
    wp_register_style(
        'bootstrap', 
        get_template_directory_uri() . '/css/bootstrap.min.css',
        '3.3.1',
    );
    wp_enqueue_style( 'bootstrap' );
}

function mytheme_enqueue_style() {
    wp_enqueue_style( 'bootstrap', get_stylesheet_uri() ); 
    }
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_style' );

?>

Si je suis comme dans le thème "vingt-quinze", mon code ressemble à ceci:

<?php
function scripts() {

    // Load bootstrap.
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', '3.3.1' );

add_action( 'wp_enqueue_scripts', 'scripts' );
?>

J'aime ce dernier parce que c'est moins de code et plus clair mais je ne sais pas si "la bonne façon".

Bien sûr, j'ai lu le CODEX, mais pour moi ce n'est pas clair, car il existe des exemples dans les deux sens. Et aussi j'ai trouvé des questions similaires mais ne réponds pas à ma question. Y compris correctement les fichiers jQuery et JavaScript et Quelle est la bonne façon d'inclure des fichiers dans le thème Wordpress TwentyTen avec ses propres scripts jquery et css?

J'espère qu'un expert ou non expert sur WP pourra m'aider.

Je vous remercie! :)

csswp-enqueue-stylewp-register-style
2
andresgl

Réponse assez simple est les deux sont la bonne. Dans la première méthode, vous décomposez le processus en deux étapes. Cela est nécessaire si vous souhaitez enregistrer certains scripts mais que vous souhaitez les charger conditionnellement ultérieurement. Par exemple, vous souhaiterez peut-être charger un script uniquement lorsqu'un second script requiert ce premier script. Dans ce cas, vous pouvez simplement enregistrer votre premier script et lors de la mise en file d'attente du second script, vous pouvez spécifier le descripteur de votre premier script en tant que dépendance.

Une façon plus claire d’expliquer ceci est de penser jquery. Wordpress l'enregistre par défaut pour vous. Si vous souhaitez utiliser jquery sur votre site, vous pouvez soit le mettre en file d'attente, soit mettre en file d'attente un autre script dépendant de jQuery.

Si vous voulez tout de suite utiliser vos scripts, l’autre méthode est relativement courte et propre.

2
Varun Kumar

J'ai développé mon propre thème à des fins de projet. Il est préférable d’utiliser un fichier séparé pour appeler tous les fichiers js et css nécessaires à la zone administrative uniquement et non aux écrans frontaux.

Dans vos thèmes function.php, donnez comme

require get_template_directory() . '/inc/adminscripts.php';

Dans le dossier Theme, créez un dossier "inc" et incluez le fichier "adminscripts.php" ici.

// adminscripts.php //

function theme_admin_scripts() {

global $typenow;
    if( $typenow == 'post' ) {
        wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/inc/css/bootstrap.min.css' );
    }  // to include a style in posts only
 wp_enqueue_script( 'custom_script_includes', get_template_directory_uri() . '/inc/js/custom_javascript_file.js', array(), '1.0.0', true );
}

add_action('admin_enqueue_scripts', 'theme_admin_scripts');

créer deux dossiers comme css et js dans inc folder et télécharger les fichiers ici

0
Asha Krishna