Personnaliser les fonctionnalités de WordPress avec functions.php

Nous voici donc à la huitième et dernière tranche de notre quête pour entrer dans la peau d'un site Web WordPress. J'espère que maintenant vous vous sentirez beaucoup plus à l'aise avec vos propres sites. L'une des grandes choses que j'ai constatées sur WordPress est le nombre impressionnant de choses que vous pouvez faire avec..

Dans le tutoriel d'aujourd'hui, nous allons aborder le dernier fichier mystérieux de notre thème, que vous verrez souvent mentionné autour des pièges. celui sur lequel vous avez peut-être déjà collé des fragments de code sans vraiment savoir pourquoi ni pourquoi. Aujourd’hui, nous allons jouer avec le modèle de fonctions (functions.php).

Pour une discussion approfondie sur ce document mystérieux, vous ne pouvez pas aller au-delà de ce qui est discuté dans le Codex, mais en bref, le fichier Fonctions est le moyen par lequel nous pouvons modifier les fonctionnalités par défaut de certains de nos sites. En utilisant ce fichier, nous pouvons également étendre davantage les fonctionnalités du site. C'est assez puissant, et aujourd'hui, nous ne verrons que deux façons de l'utiliser pour étendre notre site Web de test..


Avant de commencer

Tu auras besoin:

  • Accès FTP à votre site
  • Votre logiciel d'édition de texte
  • Une image favicon 32x32px enregistrée au format .ico, nommée favicon.ico

Ce que nous ferons

  • Ajout de code de suivi Google Analytics (vous pouvez utiliser un plugin pour le faire, mais nous l'utilisons à titre d'exemple)
  • Ajouter un favicon à votre site

Avant de poursuivre, nous devrions aborder un peu le comportement du fichier de fonctions dans le contexte de votre thème enfant. C'est un peu différent des autres modèles avec lesquels nous travaillons.

Dans un thème enfant, plutôt que de remplacer la fonctionnalité du fichier correspondant dans le thème parent comme nous l’avions fait dans notre dernier tutoriel, functions.php ajoute ou étend la fonctionnalité du parent. Il ne le remplace pas, ce qui est, si vous vous en souvenez, le comportement des autres modèles dans un thème enfant..

Ainsi, lorsque notre page est appelée et que le serveur exécute sa magie en rassemblant tous les modèles, il recherche les fonctions dans le thème enfant, les exécute, puis regarde le parent et exécute ces fonctions également..

Deuxièmement, le fichier de fonctions est aussi un fichier PHP, et les fonctions que nous collons / écrivons incluront du code PHP ainsi que potentiellement du HTML. Ils nous aident donc à améliorer notre crédibilité en geek! (high fives tout autour!)

Entrons dedans.


Ajout de code de suivi Google Analytics

Je devrais dire dès le départ, il n’ya rien de mal à ajouter du code d’analyse à l’aide d’un plugin. En fait, la plupart des plugins offrant cette fonctionnalité ne diffèrent pas beaucoup (essentiellement) de ce processus, ils ne font que ranger le code dans un fichier de plugin. Cela dit, c’est une illustration utile et pas trop difficile pour les besoins de cet exercice. Alors jetons un coup d'oeil.

1.Créer notre fichier de fonctions

Étape 1. Ouvrez votre client FTP et accédez à votre thème enfant annuaire.

Étape 2. Dans la liste des fichiers sur votre serveur distant, cliquez avec le bouton droit de la souris et sélectionnez Créer un nouveau fichier.


Étape 3. Entrez le nom de votre fichier de fonctions en tant que functions.php et frapper D'accord.


Étape 4. Ouvrez votre nouveau functions.php fichier dans votre éditeur de texte.

Étape 5. À ce stade, nous devons configurer le fichier pour que notre serveur le reconnaisse comme un fichier PHP. Alors ajoutez une balise PHP d'ouverture, comme celle-ci , au début de votre dossier.


Étape 6. Nous sommes maintenant prêts à coller du code dans notre functions.php.

Voici le code que nous allons coller, et ci-dessous une explication de ce que nous examinons:

  

Ok, décomposons-le.

// Insertion du code Google Analytics dans le pied de page

Sur la ligne 1, nous avons une phrase commençant par deux // des notes. Ceci est un commentaire, qui ne fait rien par programme, et est juste là pour l'information de la personne qui édite le fichier. Le formater avec les marques de barre oblique est un moyen rapide de commenter une une seule ligne de code PHP. Si nous commentons un bloc entier qui traverse plus d’une ligne, nous utiliserons l’habituel / * commentez ici * / marques que nous utilisons également en CSS. Il est recommandé d’ajouter des commentaires sous forme de notes lorsque vous codez afin de savoir où vous en êtes et ce que vous avez fait..

add_action ('wp_footer', 'mytheme_add_googleanalytics');

Sur la ligne 4, nous avons un code d'aspect légèrement compliqué commençant par add_action.

add_action est une fonction PHP qui connecte les actions à des emplacements dans le code appelés hooks. Nous pouvons trouver sur le Web une multitude d'extraits de code qui sont en réalité des fonctions PHP permettant d'ajouter ou de supprimer des fonctionnalités à différents hooks de notre code. Dans ce cas, nous utilisons ceci ajouter une action ajouter le mytheme_add_google_analytics fonction à la wp_footer crochet.

fonction mytheme_add_googleanalytics () 

La ligne 5 définit et ouvre en fait le mytheme_add_google_analytics une fonction:

et à partir de la ligne 7, qui suit, se trouve la partie qui soulève de lourdes charges et qui fournit les fonctionnalités. Pour le moment, il s’agit d’un commentaire HTML (<-- comment here -->), nous allons y remédier sous peu.

Enfin, sur la ligne 9, nous fermons la fonction avec les accolades (remarquez comment nous avons dû reformuler étiquette. Cela est dû au fait que le code que nous collons est en fait HTML et que les deux langages travaillent en tandem plutôt que de les réduire en purée. Nous avons donc dû fermer la balise PHP avec le ?> après le Entre parenthèses sur la ligne 5, puis collez notre code (nous le ferons à l'étape suivante), puis rouvrez le tag PHP sur la ligne 8 avant d'écrire d'autres fonctions dans notre fichier..

 

Étape 7. Il est maintenant temps de vous connecter à votre compte Google Analytics et de récupérer votre code intégré. J'attendrai ici pendant que tu fais ça…

Étape 8. Maintenant, allez-y et collez-le à la ligne 7 au-dessus de notre commentaire HTML..


Étape 9. Maintenant, sauvegardez votre fichier et téléchargez-le sur votre serveur.

Vous devriez être capable d’inspecter le code de votre page et de voir le code qui se trouve volontiers au bas de votre code source:



Ajouter un favicon à votre site

Vous savez ce qu'est un favicon, non? Si vous avez besoin d'un rappel, rendez-vous au Codex pour plus d'informations. Mais en bref, c’est la petite icône que vous voyez souvent affichant un logo ou une image personnalisée dans les onglets de votre navigateur, ou lorsqu'un lien vers votre site est enregistré en tant que signet..

Étape 1. Crée ton favicon.ico dans votre logiciel de retouche d'images préféré.

Étape 2. Téléchargez votre favicon dans votre répertoire de thèmes (votre thème enfant) via FTP.

Étape 3. Collez le code suivant dans votre functions.php fichier:

// Ajout d'un favicon au site add_action ('wp_head', 'mytheme_add_favicon'); fonction mytheme_add_favicon () echo ''; 

Étape 4. Enregistrez le fichier et renvoyez-le sur votre serveur.

Après avoir décrit ce qui se passe dans une fonction WordPress plus tôt, vous devriez trouver assez simple de comprendre ce qui se passe dans cette fonction suivante. Tout d'abord, regardons le code…

Pour commencer, à la ligne 4, nous pouvons voir que nous créons un autre add_action une fonction. Le crochet sur lequel nous mettons notre code est wp_head (Ainsi, contrairement au point précédent, nous l’ajoutons à l’en-tête de notre site plutôt qu’au pied de page) et le nom de notre fonction est mytheme_add_favicon.

Une note sur les fonctions de nommage:

Vous avez peut-être remarqué que, dans ces deux cas, j'ai nommé les fonctions en commençant par notre nom de thème personnalisé. mon thème_ et en terminant avec une description de ce que notre fonction fait par exemple. add_favicon. La raison derrière ceci est double:

  1. Il est facile de voir en un coup d’œil ce que notre code est censé accomplir, et…
  2. Cela élimine le risque d'utiliser des noms de fonction qui existent déjà dans notre thème parent, ou dans WordPress même, et réduit ainsi le risque que notre thème soit cassé..

Quoi qu'il en soit, en supposant que vous avez un favicon.ico fichier dans votre répertoire de thème, le code ci-dessus devrait fonctionner immédiatement, mais à titre d’explication:

  1. Sur la ligne 8, nous disons à notre thème d’insérer une chaîne de code HTML dans le tête de notre site web. Ceci indique au navigateur où trouver le favicon.ico.
  2. Le petit peu de PHP dans cette chaîne (get_stylesheet_directory_uri () insère le chemin d'accès à notre fichier dans le répertoire du thème.

En supposant que tout le code soit correct et que le fichier se trouve dans le répertoire du thème, le navigateur affiche à son tour cette icône pour notre site dans le coin de nos onglets et à d'autres endroits de ce type, un favicon est généralement affiché..


Vous avez peut-être remarqué que, dans cet exemple, nous n’avions pas à fermer et rouvrir le PHP comme nous l’avons fait aux étapes 7 et 8 de l’exemple précédent. En effet, dans ce deuxième exemple, le code que nous avons utilisé est PHP de bout en bout. Bien qu'il inclue des éléments HTML, il ne s'agit pas de HTML autonome, car PHP crée une partie de la chaîne d'URL. Au fur et à mesure que vous vous familiariserez avec de telles fonctions et que vous apprendrez à les construire vous-même, vous vous rendrez compte de la différence, mais cette idée sert à vous faire savoir que le code est correct, juste au cas où vous souhaiteriez ajouter dans et / ou ?> balises dans cet exemple autour des accolades aussi!


Conclusion

Une fois que vous commencez à comprendre le pouvoir du functions.php fichier que vous serez imparable, c’est le moyen de faire toutes sortes de choses et d’ajouter des fonctionnalités intéressantes et puissantes à votre site. Ainsi, la prochaine fois qu'un tutoriel que vous suivez ou un extrait que vous avez trouvé doit être ajouté à votre functions.php fichier, vous devriez maintenant pouvoir ajouter et prendre en toute confiance le contrôle de toutes les zones de votre site.!

Rappelles toi! Avant de modifier votre fichier, enregistrez une copie sur votre bureau pour la sauvegarde avant de télécharger de nouvelles modifications. Se tromper de code dans functions.php Des problèmes peuvent survenir. Par conséquent, si une version fonctionnelle est enregistrée sur votre bureau, vous pourrez tout simplement télécharger votre fichier de sécurité et recommencer à nouveau en cas de problème.