Advertisement
  1. Code
  2. WordPress

Démarrer avec WordPress : Personnalisez les fonctionnalités de notre site à l’aide de functions.php

Scroll to top
Read Time: 9 min
This post is part of a series called Beginning With WordPress.
Beginning With WordPress: Editing the Structure of Your Site

French (Français) translation by Henri Lotin (you can also view the original English article)

Donc, ici, nous sommes à la huitième et dernière partie de notre quête pour aller sous le capot d’un site WordPress. J’espère que maintenant vous vous sentez beaucoup plus à l’aise de jouer avec vos propres sites. Une des grandes choses que j’ai trouvée​ sur WordPress est la quantité de choses que vous pouvez faire avec lui une fois que vous commencez à vous familiariser avec la manière dont les choses s’imbriquent.

Dans le tutoriel d’aujourd'hui nous allons aborder ce dernier fichier mystérieux dans notre thème que vous verrez souvent mentionné dans les pièges ; celui à qui vous pouvez bien ont collé des snippets de code avant sans vraiment savoir pourquoi ou pour quelle raison. Aujourd'hui, nous allons jouer avec le template de fonctions (functions.php).

Pour une discussion en profondeur sur ce document mystérieux, vous ne pouvez pas passer ce qui est discuté sur le Codex, mais en bref, le fichier de fonctions est le moyen par lequel nous pouvons changer certaines des fonctionnalité par défaut de notre site. En utilisant ce fichier nous pouvons étendre également les fonctionnalités du site plus loin. Il est assez puissant, et aujourd'hui nous irons à travers par un couple des moyens que nous pouvons utiliser pour étendre notre site web test.


Avant de commencer

Vous aurez besoin :

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

Ce que nous allons faire

  • Ajouter dans Google Analytics le code de suivi (vous pourriez utiliser un plugin pour faire cela, mais nous utilisons cela comme exemple)
  • Ajouter un favicon pour votre site

Avant de poursuivre plus loin, nous devons couvrir juste un peu sur le comportement du fichier de fonctions dans le cadre du de votre thème enfant. C’est un peu différent par rapport aux autres templates, avec lesquels nous avons travaillé.

Dans un thème enfant, plutôt que de remplacer la fonctionnalité du fichier correspondant dans le thème parent, comme nous l’avons fait dans notre dernier tutoriel, functions.php ajoute ou étend les fonctionnalités du parent. Il ne le remplace pas, si vous vous souvenez, c'est comment les autres templates se comportent dans un thème enfant.

Ainsi, lorsque notre page est appelée​, et le serveur fait sa magie rassemblant tous les modèles, il cherche les fonctions dans le thème enfant, les exécute, cherche au parent et exécute ces fonctions aussi bien.

Deuxièmement, le fichier de fonctions est également un fichier PHP et les fonctions que nous copions/collons inclueront le code PHP, mais aussi potentiellement du HTML. Donc ils nous aident à engranger nos crédits​ de geek ! (high fives tout autour !)

Nous allons y entrer.


Ajouter le code de suivi Google Analytics

Je dois dire tout d’abord, il n’y a rien de mal avec l’ajout de code analytique à l’aide d’un plugin. En fait, la plupart des plugins qui offrent cette fonctionnalité (dans l'essentiel) ne diffèreront pas beaucoup de ce processus, ils rentrent juste le code dans un fichier de plugin. Cela dit, c’est une illustration utile et pas trop difficile pour les besoins de cet exercice. Donc, nous allons jeter un coup d’oeil.

1. Création de notre fichier de fonctions

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

Étape 2. Dans la liste de fichiers sur votre serveur distant, faites un clic droit et sélectionnez Créer un nouveau fichier.

1-bwwp_8-create-new-file1-bwwp_8-create-new-file1-bwwp_8-create-new-file

Étape 3. Entrez le nom de votre fichier de fonctions comme functions.php et appuyez sur OK.

2-bwwp_8-create-new-file-b2-bwwp_8-create-new-file-b2-bwwp_8-create-new-file-b

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

Étape 5. À ce stade, nous avons besoin de configurer le fichier afin que notre serveur le reconnaisse comme fichier PHP. Donc ajoutez une balise PHP ouvrante, comme celle-ci <?php, au début de votre fichier.

3-bwwp_8-create-new-file-c3-bwwp_8-create-new-file-c3-bwwp_8-create-new-file-c

Étape 6. Maintenant, nous sommes prêts à coller du code dans notre functions.php.

Voici le code que nous allons coller, et en dessous c’est une explication de ce que nous cherchons :

OK, nous allons le décomposer.

Sur la ligne 1, nous avons une phrase commençant par deux // marques. Il s’agit d’un commentaire, ce qui ne fait rien dans le programme et est juste là pour fournir des informations à ceux qui modifient le fichier. Le formater avec les barres obliques est un moyen rapide de commenter sur une seule ligne de code PHP. Si nous commentons un bloc entier qui traverse plusieurs lignes nous utiliserions les /* commentaire ici */ marques habituelles que nous utilisons également en CSS. Il est conseillé d’ajouter des commentaires comme notes chaque fois que vous utilisez le codage, ainsi vous pouvez suivre où vous êtes et ce que vous avez fait.

À la ligne 4, nous avons un code à l'apparence un peu compliquée commençant par add_action.

add_action est une fonction PHP qui relie les actions avec les endroits dans le code appelé hooks. Nous pouvons trouver tout un tas d’extraits de code sur le web qui sont effectivement des fonctions PHP pour ajouter ou supprimer des fonctionnalités aux différents hooks dans notre code. Dans ce cas nous utilisons cela add_action pour ajouter la fonction mytheme_add_google_analytics au hook wp_footer.

En fait, la ligne 5 définit et ouvre la fonction mytheme_add_google_analytics :

et à partir de la ligne 7, qui suit, est la partie la plus difficile qui est en fait où nous allons fournir les fonctionnalités. Pour l’instant c’est juste un commentaire HTML (<--commentaire ici-->), nous allons corriger cela dans peu de temps.

Enfin, sur la ligne 9, nous fermons la fonction avec les accolades (Remarquez comment il fallait réaffirmer la balise <?php. C’est parce que le code que nous allons coller est en effet du HTML et les deux langages travaillent en tandem plutôt qu'amalgamées ensemble. Ainsi, nous avons dû fermer la balise PHP avec le ?> après le { entre parenthèses sur la ligne 5, puis coller notre code (nous ferons cela à l’étape suivante) et puis rouvrez la balise PHP sur la ligne 8, avant d'écrire plus de fonctions à notre fichier.

Étape 7. Maintenant il est temps de vous connecter à votre compte Google Analytics et de saisir votre code embed. Je vais attendre ici alors que vous faites ça...

...

Étape 8. Maintenant, allez à l'en-tête et collez à la ligne 7 sur le dessus de notre commentaire HTML.

4-bwwp_8-paste-g-analytics4-bwwp_8-paste-g-analytics4-bwwp_8-paste-g-analytics

Étape 9. Maintenant, enregistrez votre fichier et transférez-le sur votre serveur.

Vous devriez être en mesure d’inspecter le code de votre page et voir le code assis joyeusement dans le fond de votre code source :

5-bwwp_8-paste-g-analytics-b5-bwwp_8-paste-g-analytics-b5-bwwp_8-paste-g-analytics-b

Ajouter un favicon à votre site

Vous savez ce qu’est un favicon, non ? Si vous avez besoin de vous rafraîchir la mémoire, rendez-vous au Codex pour plus d’informations. Mais 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é comme signet.

Étape 1. Créez votre favicon.ico dans votre logiciel de retouche d’image préféré.

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

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

Étape 4. Enregistrez le fichier et transférez-le sur votre serveur.

Après avoir décrit ce qui se passe plus tôt dans une fonction de WordPress, vous devriez trouver assez simple de comprendre ce qui se passe dans cette fonction suivante. Tout d’abord, nous allons jeter un coup d’oeil au code...

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

Une note sur la dénomination des fonctions :

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

  1. Il est facile de voir en un coup d'œil ce que notre code est censé faire, et...
  2. Il élimine le risque d’utiliser des noms de fonctions qui existent déjà dans notre thème parent ou dans WordPress lui-même et réduit ainsi le risque de notre thème casser des choses.

En tout cas, supposons que vous disposez d’un fichier favicon.ico dans votre répertoire de thème, le code ci-dessus devrait fonctionner hors de la boîte, mais en guise d’explication :

  1. Sur la ligne 8 nous allons dire à notre thème d'insérer une chaîne de code HTML dans le head de notre site Web. Cela indique au navigateur où se trouve le favicon.ico.
  2. Le peu de PHP dans cette chaîne (get_stylesheet_directory_uri() insère le rôle principal de notre URL devant le chemin vers notre fichier dans le répertoire du thème.

En supposant que tout le code est correct et le fichier se trouve dans le répertoire du thème, le navigateur, à son tour, affiche cette icône pour notre site dans le coin de nos onglets et autres lieux qu'un favicon est habituellement vu.

6-bwwp_8-paste-g-analytics-c

Vous avez peut-être remarqué que dans cet exemple, nous n’avions pas à fermer et à rouvrir les balises PHP comme nous l’avons fait dans les étapes 7 et 8 de l’exemple précédent. C’est parce que dans ce second exemple, le code que nous avons utilisé est PHP d’un bout à l’autre, et il ne comporte pas de bouts de HTML, il n’est pas autonome HTML car il n’y a pas de PHP dans la construction de la chaîne d’URL. Comme vous vous familiarisez avec les fonctions comme ça, et comme vous apprenez à construire des fonctions vous-même, vous y verrez plus clair sur la différence, mais cette pensée sert juste à vous faire savoir que le code est correct, juste au cas où vous cherchiez à ajouter des balises <?php et/ou ?> dans cet exemple autour des accolades aussi !


Conclusion

Une fois que vous commencez à avoir une compréhension de la puissance du fichier functions.php, vous serez irrésistible, c’est le moyen d’obtenir toutes sortes de choses et d’ajouter certaines grandse et puissantes fonctionnalités à votre site. Alors la prochaine fois que vous suivez un tutoriel ou vous avez trouvé un extrait de code est nécessaire pour être ajouté à votre fichier functions.php, vous devriez maintenant être en mesure d’ajouter et de prendre le contrôle de toutes les zones de votre site en toute confiance !

N’oubliez pas ! Avant que vous fassiez de nouvelles modifications à votre fichier, enregistrez une copie sur votre bureau pour plus de sécurité, avant de télécharger de nouveaux changements. Avoir un code erroné dans functions.php peut causer des problèmes, alors avoir une version de travail enregistrée sur votre bureau qui signifie que si les choses vont mal, vous pouvez simplement télécharger votre fichier de sécurité et recommencer.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.