Ajoutez correctement des scripts et des styles Java personnalisés aux pages de WordPress • WPShout

By | mai 21, 2019

Cours WordPress en ligne

Cet article explique comment inclure des fichiers JavaScript et CSS personnalisés dans WordPress, qu'il a emprunté à notre excellent cours WordPress. Opérationnel. Si vous essayez de devenir un développeur WordPress averti, nous sommes convaincus que Opérationnel vous aidera à y arriver. Allez voir si ça vous intéresse. Si non, lisez la suite

La meilleure façon d'apprendre le développement WordPress

Opérationnel est notre cours complet "apprendre le développement WordPress". Maintenant dans sa troisième édition mise à jour et étendue, il a aidé des centaines d'acheteurs heureux à apprendre le développement WordPress de manière rapide, intelligente et complète.

Voici ce que l'un d'entre eux avait à dire:

"Je pense que toute personne intéressée par le développement de WordPress A BESOIN de ce cours. Regarder les vidéos était comme un groupe de lumières allumées." -Jason, développeur WordPress


Points à retenir:

  • La méthode appropriée pour inclure des fichiers JavaScript et des feuilles de style CSS dans WordPress est de mettre en file d'attenteles ingérer. Cela permet une certaine souplesse et une possibilité de personnalisation, contrairement à l'ajout de ces fichiers directement dans l'en-tête de votre site.
  • La fonction à mettre en file d'attente une feuille de style s'appelle wp_enqueue_style (). La fonction à mettre en file d'attente un fichier JavaScript s'appelle wp_enqueue_script (). Les deux fonctions sont généralement reliées à un crochet d’action WordPress appelé wp_enqueue_scripts.
  • Correctement mettre en file d'attenteLes scripts et les styles – ainsi que les liens vers les ressources de thèmes et de plug-ins en général – nécessitent une connaissance appropriée des fonctions de liens URL de WordPress, décrites dans ce chapitre.

Dans ce chapitre, nous aborderons l’un des ensembles de fonctions WordPress les plus couramment utilisés: les fonctions mettre en file d'attente fichiers à inclure dans un site WordPress.

Il y a deux types de mettre en file d'attente-able fichiers à discuter:

  1. Fichiers JavaScript: Ceux-ci ajoutent des fonctionnalités personnalisées au site WordPress une fois qu'il est livré au navigateur de l'utilisateur. JavaScript est très couramment utilisé pour créer des effets visuels dynamiques tels que des curseurs d'images interactifs, une grille flexible de style Pinterest ou des dispositions de «maçonnerie», etc. Il a également de nombreuses autres utilisations.
  2. Feuilles de style CSS: Les feuilles de style CSS indiquent à un site Web comment regarder. Chaque thème WordPress a un style.css, et beaucoup ont des feuilles de style supplémentaires. De nombreux plug-ins ont également une ou plusieurs de leurs propres feuilles de style CSS qui décrivent les éléments spécifiques ajoutés par les plug-ins sur le site.

Les fichiers CSS sont absolument essentiels à tout site Web décent, tout comme les fichiers JS. Ce chapitre traite de l’ajout de JS ou de CSS personnalisés à votre site WordPress.

Ne pas ajouter de CSS et JavaScript directement à votre en-tête

Tout d’abord: n’ajoutez pas de code CSS et JavaScript directement au thème de votre thème. header.php fichier – ou d'autres fichiers de modèle, d'ailleurs. Nous sommes sur le point de trouver le bon chemin pourles scripts dd vers la tête WordPress (et les feuilles de style également), et il ne faut pas les insérer directement dans ces fichiers.






Pourquoi pas? Parce que l'ajout de styles et de scripts JavaScript aux pages WordPress «à la manière de WordPress» vous permet de faire beaucoup de choses utiles par la suite. Par exemple, supposons que vous souhaitiez ajouter une nouvelle feuille de style, seulement sur les pages. C’est assez facile à faire dans WordPress, avec le wp_enqueue_ () fonctions que nous allons couvrir dans ce chapitre plus un peu de magie conditionnelle.

Cependant, si vous avez l’habitude de simplement déposer vos feuilles de style directement dans l’en-tête de votre thème, WordPress ne peut pas «parler» à ces feuilles de style. Ils sont complètement en dehors du processus «usine» de WordPress – ils restent assis inertes. Il n’ya donc aucun moyen de communiquer la logique «Chargez cette feuille de style uniquement pour les pages», et votre objectif d’une feuille de style conditionnelle devient beaucoup plus difficile.

Il existe de nombreuses autres façons d’expliquer pourquoi le collage de fichiers JS et CSS directement dans header.php C’est une mauvaise idée, mais la vraie chose à retenir est: ne le faites pas.

La bonne façon de créer des liens vers des ressources thématiques et plugins

Ne supposez rien sur les chemins de fichiers dans WordPress, ne codez pas les URL.

Disons que nous avons une feuille de style spéciale, nouveau.css, enregistré dans le répertoire racine de notre thème. Comment pouvons-nous nous y connecter? En d'autres termes, comment indiquer à WordPress où se trouve la feuille de style dans la structure de répertoires? Cette question se pose tout de suite en utilisant wp_enqueue_ () fonctions, mais connaître la réponse est également très utile dans d’autres situations.

La première chose à savoir est la suivante: n’assumez rien des chemins de fichiers dans WordPress. En d'autres termes, ne codez pas les URL en dur. Ne jamais écrire manuellement des répertoires comme http://votredomaine.com/wp-content/themes/my-theme/new.css– que vous utilisiez ou non correctement wp_enqueue_ () les fonctions.

La raison est que tout pourrait changer. Votre site pourrait un jour ne plus être à votredomaine.com—Ou quelqu'un d'autre pourrait un jour utiliser votre thème sur sa site avec un nom de domaine différent. De même, le wp-content, des thèmes, et mon thème Les noms de répertoire sont tous susceptibles de changer – et si quelque chose se produit, vos liens codés en dur seront brisés.

Utiliser les fonctions WordPress

WordPress a des fonctions magiques pour chaque élément d'URL sauf le nom de fichier.

Dans l'URL ci-dessus, seul le nom du fichier lui-même, nouveau.css, est relativement stable. Heureusement, WordPress dispose de fonctions magiques à utiliser pour chaque autre élément des URL que vous écrivez. Maîtrisez-les et vous ne ferez même jamais vouloir pour écrire à nouveau les URL à la main.

Comment créer un lien vers des ressources thématiques

Pour créer un lien vers une ressource qui fait partie d’un thème, l’important est d’accéder au dossier racine ou au répertoire racine du thème:

Pour ce faire, vous utiliserez une fonction WordPress appelée get_stylesheet_directory_uri (), qui renvoie l'URL absolue correcte pour l'environnement WordPress actif et le thème en cours d'exécution.







<img src = "http://wpshout.com//photo.jpg ">


<img src = "/images/photo.jpg ">

Les deux liens d'image résultants du code ci-dessus ressembleront à ceci:

get_stylesheet_directory_uri () pointera sur le thème actif, peu importe quoi. Cela signifie qu’il s’agira du thème en cours («parent») s’il n’ya pas de thème enfant et du thème en cours. enfant thème s'il y en a un. C’est généralement ce que vous voulez, car si vous travaillez dans un thème enfant, c’est généralement ce que vous voulez changer.

Cependant, lorsque vous souhaitez référencer des fichiers de thème dans le répertoire thème parent spécifiquement, vous pouvez utiliser une fonction appelée get_template_directory_uri (). Il se comporte presque exactement comme get_stylesheet_directory_uri (), mais toujours lié à la racine du thème parent, qu’il existe ou non un thème enfant en cours d’exécution.

Une nouvelle façon de faire des liens avec des ressources thématiques: get_theme_file_uri ()

Depuis WordPress 4.7, get_theme_file_uri () permet aux thèmes enfants de remplacer les actifs du thème parent de manière beaucoup plus simple.

Depuis WordPress 4.7, une nouvelle fonction permet de permettre aux thèmes enfants de remplacer la version de thème parent de tout élément de thème: get_theme_file_uri (). Voici un exemple d'utilisation:

<img src = "http://wpshout.com/">

Et voici comment cela se comporte:

  1. Il cherche d'abord le enfant thème pour la ressource référencée. Dans cet exemple, il faudrait rechercher dans le images dossier du thème de l'enfant pour photo.jpg. S'il trouve ce qu'il cherche, l'URI qu'il renvoie est renvoyé.
  2. Si elle ne trouve pas ce qu’elle cherche, elle puis vérifie le thème parent pour la même ressource, en regardant dans la liste des thèmes. images dossier pour photo.jpg.

get_theme_file_uri () est génial pour les thèmes parents! Cela signifie: «Je mets cela ici, mais mon enfant pourra facilement l’ignorer», ce qui est précisément l’intérêt des thèmes relatifs aux enfants.

L’utilisation généralisée de cette fonction peut sauver les personnes qui développent votre thème avec un thème pour enfant déballerressources CSS et JS qu’elles doivent modifier et qu’elles ne peuvent pas écraser par défaut. Nous utiliserons cette fonction très pratique à quelques reprises dans le chapitre suivant.

Récapitulatif des fonctions liées aux ressources thématiques

Soyons clairs: voici une brève récapitulation des trois fonctions que nous avons nommées pour lier des ressources de thème et leur comportement:

  1. get_stylesheet_directory_uri (): Renvoie toujours l’URL racine du thème enfant s’il en existe une. (Renvoie l’URL racine du thème parent s’il n’ya pas de thème enfant.) Utile pour pointer vers les ressources du thème enfant.
  2. get_template_directory_uri (): Renvoie toujours l’URL racine du thème parent, qu’un thème enfant soit en cours d’exécution ou non. Utile pour construire des morceaux d’un thème parent que vous ne voulez pas que le thème enfant remplace facilement.
  3. get_theme_file_uri (): Liens vers le fichier de thème parent et, s’il existe un fichier de nom identique dans le thème enfant, crée automatiquement un lien vers celui-ci. Introduit dans WordPress 4.7. Très utile pour créer un héritage facile par thèmes enfants.

Tous ces éléments sont utiles lorsque vous souhaitez ajouter du CSS ou du JavaScript à WordPress. functions.php ou d'autres moyens de créer des liens. Mais je saute un peu le revolver.

Comment créer un lien vers des ressources de plug-in

Si vous écrivez un plugin et souhaitez créer un lien vers quelque chose à l'intérieur, vous utiliserez une fonction WordPress appelée plugin_dir_url (). Cette fonction résultats le répertoire racine du plugin à partir duquel il est appelé. La syntaxe est un peu inhabituelle, mais vous allez vous y habituer:







<img src = "http://wpshout.com/">


<img src = "http://wpshout.com/">

Les deux liens d'image résultants du code ci-dessus ressembleront à ceci:

Vous pouvez utiliser cette syntaxe comme indiqué ci-dessus chaque fois que vous souhaitez créer un lien vers une autre ressource au sein du même plug-in que vous écrivez.

Comment charger des feuilles de style et des fichiers de script dans WordPress: Présentation du wp_enqueue_ () Les fonctions

Maintenant que nous savons comment relier des ressources de thème et de plug-in, nous allons aborder l'ajout de scripts et de styles de la bonne manière. L'ajout de ces scripts et styles s'appelle mise en file d'attente leur. Cela fonctionne comme suit:

  1. Chaque processus de mise en file d'attente de scripts ou de styles utilise le wp_enqueue_scripts crochet d'action.
  2. La fonction pour mettre en file d'attente un fichier JavaScript s'appelle wp_enqueue_script ().
  3. La fonction pour mettre en file d'attente une feuille de style CSS est appelée wp_enqueue_style ().

Cela deviendra plus clair avec des exemples, ci-dessous.

Premier exemple: mettre un thème en attente style.css de son functions.php

Le script PHP ci-dessous met en attente le thème style.css. Sans ce code, un thème n'aura pas de style!

/ * Environnement: nous sommes dans functions.php * /

fonction wpshout_theme_script_and_style_includer () 
    wp_enqueue_style (
    'wpshout-style',
    get_stylesheet_uri ()
    )

add_action ('wp_enqueue_scripts', 'wpshout_theme_script_and_style_includer');

Voici ce qui se passe:

fonction wpshout_theme_script_and_style_includer ()

Nous devons choisir nos noms de fonction, et celui-ci que nous nommons wpshout_theme_script_and_style_includer. Il n'y a pas d'argument, donc le () sont vides.

wp_enqueue_style ();

Nous allons diviser cette ligne en plusieurs morceaux. Tout d’abord, sachez que nous appelons le wp_enqueue_style () fonction, avec deux arguments.

'wpshout-style'

C'est le premier de wp_enqueue_style ()«Deux arguments. C’est un texte limace– un surnom – que nous avons choisi pour cette feuille de style, que le reste de WordPress peut utiliser pour faire référence à la feuille de style.

get_stylesheet_uri ()

C'est le deuxième de wp_enqueue_style ()«Deux arguments. C’est très important: c’est ainsi que nous indiquons à WordPress où trouver la feuille de style que nous voulons mettre en file d'attente. Pour cette situation, nous utilisons une fonction WordPress très spécialisée, get_stylesheet_uri (), dont seulement but est de retourner l'URL pour la style.css du thème actuel.

add_action ('wp_enqueue_scripts', 'wpshout_theme_script_and_style_includer');

Cette section est notre syntaxe standard de hook d’action de Crochets, actions et filtres WordPress: ce qu'ils font et comment ils fonctionnent. N'importe quand wp_enqueue_scripts () fonctionne (puisque l'en-tête de la page se construit), wpshout_theme_script_and_style_includer () fonctionne aussi, et c’est ainsi que notre style.css le fichier obtient mettre en file d'attented et tiré dans notre HTML.

Le résultat final

Voir? Sur la page d’accueil de WPShout, notre thème style.css passe, à cause du code ci-dessus dans functions.php.

Cet exemple n'est nécessaire que pour les thèmes parents

Ce script n’est pas nécessaire sur les thèmes enfants, dont style.css obtient mettre en file d'attented automatiquement. Nous aborderons les thèmes des enfants plus tard (dans Comprendre et utiliser les thèmes pour enfants WordPress), mais sachez que le script ci-dessus concerne uniquement les thèmes parents.

Deuxième exemple: Mise en file d'attente d'autres scripts et styles de thème à partir de functions.php

/ * Environnement: nous sommes dans functions.php * /

fonction wpshout_theme_script_and_style_includer () 
wp_enqueue_style (
'wpshout-other-style',
get_theme_file_uri ('css / wpshout-other-style.css'),
)
    wp_enqueue_script (
    'wpshout-needed-js',
    get_theme_file_uri ('js / wpshout-needed-js.js'),
    tableau ('jquery')
    )

add_action ('wp_enqueue_scripts', 'wpshout_theme_script_and_style_includer');

Si vous avez compris le premier exemple plus tôt, il n’ya que peu de choses à apprendre dans celui-ci:

  1. Cette fois, nous avons utilisé get_theme_file_uri () pour aller à la racine du thème. Cela fera un lien vers le fichier dans notre thème parent, ou s’il existe un fichier du même nom dans le thème enfant, il sera automatiquement lié à celui-ci, ce qui facilitera son remplacement par le thème enfant.
  2. Cette fois, nous ajoutons également dans un fichier JS, wpshout-needed-js.js. Remarquez comment nous pouvons faire mettre en file d'attentes de plusieurs scripts et styles dans une seule fonction – nous devons seulement nous assurer de rappeler quand appeler wp_enqueue_style () et quand appeler wp_enqueue_script ().
  3. Cette fois, notre script et notre style sont en sous-répertoires dans notre thème: notre feuille de style CSS est dans un / css / dossier, et notre fichier JS est à l'intérieur d'un / js / dossier. Notez à quel point il est facile de pointer sur ces sous-répertoires, en les ajoutant simplement dans le chemin que nous spécifions en tant qu’argument unique de get_theme_file_uri ().

Troisième exemple: mettre en file d'attenteScripts et styles à partir d'un fichier de plug-in

Voici à quoi ressemble le chargement d’une feuille de style CSS et de deux fichiers JavaScript, à partir d’un fichier PHP inséré dans un plugin:

/ * Environnement: nous sommes dans un fichier PHP dans un plugin * /

fonction wpshout_plugin_script_and_style_includer () 
/ * Styles et scripts dans le répertoire racine du plugin * /
    wp_enqueue_style (
    'notre-plugin-exemple-style',
    plugin_dir_url (__FILE__). 'notre-plugin-exemple-style.css'
    )
    wp_enqueue_script (
    'notre-plugin-exemple-js',
    plugin_dir_url (__FILE__). 'notre-plugin-exemple-js.js',
    tableau ('jquery')
    )
    
    / * Un script dans un sous-répertoire * /
    wp_enqueue_script (
    'our-plugin-more-js',
    plugin_dir_url (__FILE__). 'js / our-plugin-more-js.js',
    tableau ('jquery')
    )

add_action ('wp_enqueue_scripts', 'wpshout_plugin_script_and_style_includer');

La seule chose nouvelle à apprendre ici est le fonctionnement de la plugin_dir_url () une fonction. Si vous n’obtenez pas le code PHP __FICHIER__ Constante magique, nous vous conseillons de ne pas trop y penser et de savoir que cela va fonctionner.

mettre en file d'attenteing avec des dépendances

Une chose que nous n’avons pas encore expliquée est le troisième argument de la plupart de nos scripts JavaScript. mettre en file d'attentes: tableau ('jquery'). Qu'est-ce que ça veut dire?

Cela signifie que nous déclarons jQuery en tant que dépendance: quelque chose que notre propre fichier JavaScript doit utiliser pour fonctionner correctement. Les dépendances comptent dans deux situations:

  1. Si vous voulez qu'une feuille de style soit chargée après une autre feuille de style, puisque les styles ultérieurs remplacent les précédents.
  2. Si votre fichier JavaScript s'appuie sur un autre fichier JS pour fonctionner correctement, en particulier sur jQuery.

Ce deuxième cas est le plus courant et c’est la raison pour laquelle nous évoquons des dépendances. Si vos fichiers JavaScript utilisent la syntaxe de jQuery, il est préférable de déclarer jQuery en tant que dépendance, comme suit:

wp_enqueue_script (
'exemple-js',
get_theme_file_uri ('example-js.js'),
tableau ('jquery')
)

Ici, nous avons rempli wp_enqueue_script ()Le troisième argument: sa les dépendances. Cet argument doit obligatoirement être un tableau. Il s’agit d’un tableau de «slugs» (pseudonymes) des fichiers JavaScript dont dépend notre nouveau fichier.

Dans notre cas, le tableau ne contient qu'une chose: 'jquery', la limace pour le jQuery.js fichier que WordPress charge automatiquement.

Encore une fois, vous pouvez également faire la même chose pour les feuilles de style dans wp_enqueue_style (), avec un tableau de slugs CSS comme dépendances. La raison principale est de vous assurer que votre feuille de style se charge plus tard que (et donc remplace) ces autres fichiers CSS. La plupart du temps, cependant, vous n’aurez pas à vous en préoccuper, car les feuilles de style de thème pour enfants remplacent généralement ce qu’elles sont supposées faire par défaut.

Ce que nous avons appris

le mettre en file d'attente les fonctions sont parmi les plus utilisables et utiles de WordPress. Avec cette connaissance verrouillée, vous pouvez en toute confiance Ajoutez du JavaScript aux en-têtes de page WordPress, modifiez et complétez CSS, et bien plus encore. Le simple fait de savoir utiliser ces fonctions plutôt que de coller des scripts et des styles dans l'en-tête WordPress améliorera considérablement la qualité de votre travail dans WordPress.

Résumé Limerick

Si vous savez réellement ce que vous faites,
Ensuite, vous ajouterez des scripts et des styles par mettre en file d'attenteing.
Ils seront tirés à la lettre,
Vers l'en-tête (pied de page ou)
De chaque page consultée par vos utilisateurs.

Temps Quiz!

  1. Vous ne devez pas ajouter de scripts et de styles directement à l'en-tête de votre site, car:
    1. Il supprime ces scripts et styles de la flexibilité et de la personnalisation de la «fabrique» de WordPress.
    2. Cela ne fonctionnera pas sur les anciens navigateurs
    3. La page se charge plus lentement que wp_enqueue_ ()
  2. Accéder au fichier plugin-example-style.css dans le répertoire racine d'un plugin, utilisez:
    1. get_stylesheet_directory_uri (). '/plugin-example-style.css'
    2. plugin_dir_url (__FILE__). 'plugin-example-style.css'
    3. plugin_dir_url (__FILE__). '/plugin-example-style.css'
  3. Accéder wpshout-needed-js.js dossier intérieur / js / dans le répertoire racine du thème actif, utilisez:
    1. get_stylesheet_directory_uri (). '/js/wpshout-needed-js.js'
    2. get_template_directory_uri (). '/js/wpshout-needed-js.js'
    3. get_template_directory_uri (). 'js / wpshout-needed-js.js'

Réponses et explications

  1. UNE. Le collage manuel dans les scripts et les styles empêche WordPress, par exemple, déballerces scripts et styles, leur chargement conditionnel ou le déplacement programmé des scripts vers le pied de page pour réduire les temps de chargement.
  2. B. plugin_dir_url est la fonction correcte, et il ne prend pas un leader /.
  3. UNE. get_stylesheet_directory_uri () pointe toujours vers le répertoire de thèmes actif, même s’il s’agit d’un thème enfant; get_template_directory_uri () pointe vers le parent répertoire de thèmes si le thème actuel est un thème enfant. Notez la nécessité d'un leader / avant js.

Crédit d'image: StartBloggingOnline.com