# Comment modifier le footer WordPress

Parmi la [myriade de systèmes de gestion de contenu](https://www.ionos.fr/digitalguide/hebergement/cms/comparatif-des-meilleurs-cms/ "Comparatif des meilleurs CMS")  **WordPress constitue sans aucun doute le CMS le plus fréquemment utilisé**. Un site WordPress est constitué de plusieurs éléments :

- **Le core de WordPress** : l’installation WordPress
- **Le thème** : une structure basique pour afficher du contenu dynamique
- **Les plugins :** pour développer la fonctionnalité centrale de WordPress
- **Le contenu :** créé par le propriétaire et stocké dans la bibliothèque média

Pour créer un site WordPress couronné de succès, de petits changements se révèlent souvent indispensables. L’intégration de scripts externes constitue l’un des changements les plus courants que les utilisateurs peuvent réaliser. Souvent, ces scripts ont besoin d’être intégrés dans le footer WordPress. Nous allons vous montrer comment le processus fonctionne et à quoi il faut faire attention.

## Qu’est-ce que le footer WordPress et quels sont ses éléments ?

En général, un [footer](https://www.ionos.fr/digitalguide/sites-internet/creation-de-sites-internet/quest-ce-quun-footer/ "Qu’est-ce qu’un footer&nbsp;?") se trouve en bas d’une page. Le footer signale au visiteur qu’il est arrivé à la fin de la page. Le **footer WordPress contient deux types d’éléments,** que nous allons examiner plus en détails ci-dessous.

1. Des éléments visibles
2. Des éléments invisibles

### Les éléments visibles dans un footer WordPress

Contrairement à un [header WordPress](https://www.ionos.fr/digitalguide/hebergement/blogs/modifier-un-header-dans-wordpress/ "Modifier un header dans WordPress"), le footer WordPress contient souvent des éléments **visibles secondaires et moins mis en avant.** Ceci est cohérent dans la mesure où le header est la première chose qu’un visiteur voit en arrivant sur une page. Un header bien construit peut aussi agir comme un aimant et faire en sorte que les visiteurs restent consulter une page plus longtemps. Le footer contient en général les éléments suivants :

- Des liens vers d’autres pages telles que la politique de confidentialité, les informations de contact, etc.
- La notice de propriété intellectuelle
- Un lien pour remonter en haut de la page

---

### Conseil

Lancez-vous dans la création de votre propre site Wordpress avec l’[hébergement Wordpress](https://www.ionos.fr/hebergement/hebergement-wordpress "Hébergement pour Managed WordPress avec IONOS") professionnel de IONOS.

---

### Les éléments invisibles dans le footer WordPress

À la différence du footer WordPress, le header comprend plusieurs balises méta. La plupart de celles-ci doivent être incluses dans l’élément de tête HTML. Cependant, **les métadonnées ont tendance à être utilisées en-dehors de l’en-tête HTML**. Surtout, des éléments de script divers tendent à être utilisés. Ceux-ci sont intégrés dans le footer WordPress.

Une des caractéristiques particulières des fichiers de script externes est que lorsqu’ils sont intégrés dans l’**en-tête HTML, les fichiers script bloquent le chargement de la page.** Par conséquent, la recommandation traditionnelle était de placer les éléments script externes avant la balise de fermeture aussi souvent que possible. Dans WordPress, ceci revient à les intégrer dans le footer.

---

### Conseil

L’élément script comprend désormais les attributs modernes « async » et « defer », avec lesquels les fichiers peuvent être intégrés sans bloquer le chargement de la page.

---

Mais nous devons établir quelques distinctions lorsque nous parlons de scripts. Les scripts peuvent être chargés depuis un fichier externe, mais ils peuvent également être intégrés dans une page. De plus, les éléments scripts se voient désormais attribuer un éventail beaucoup plus large de fonctions. L’attribut « type » est utilisé pour décrire le type des données intégrées. À cet égard, les données d’application et les métadonnées peuvent être intégrées sur une page unique. Ci-dessous, vous trouverez un aperçu des éléments scripts fréquemment utilisés :

<table>
  <thead>
    <tr>
      <th>Élément script</th>
      <th>Description</th>
      <th>Attribut</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Référence à un fichier script</td>
      <td>Script externe, exécutable</td>
      <td>Attribut src avec URL</td>
    </tr>
    <tr>
      <td>Script intégré</td>
      <td>Script intégré, exécutable</td>
      <td>Attribut non src</td>
    </tr>
    <tr>
      <td>Balisage script JSON-LD</td>
      <td>Métadonnées intégrées, non-exécutables</td>
      <td>type="application/ld+json"</td>
    </tr>
    <tr>
      <td>Données JSON</td>
      <td>Données d’application intégrées, non-exécutables</td>
      <td>type="application/json"</td>
    </tr>
  </tbody>
</table>

## Comment modifier un footer dans WordPress ?

Il y a deux manières de placer du **contenu additionnel dans un footer WordPress** :

1. Utiliser un **plugin**
2. Modifier le **code thème**

Chacune de ces méthodes a des avantages et des inconvénients qui peuvent être résumés ainsi :

<table>
  <thead>
    <tr>
      <th>Méthode</th>
      <th>Avantage</th>
      <th>Inconvénient</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Utiliser un plugin</td>
      <td>Application et utilisation simple</td>
      <td>Les fragments de code sont stockés dans la base de données ; un contrôle insuffisant peut causer des problèmes de performance</td>
    </tr>
    <tr>
      <td>Modifier le thème</td>
      <td>Les fragments de code font partie de la codebase ; changements visuels possibles ; contrôle même sur les applications complexes</td>
      <td>Nécessite de modifier le code thème et des compétences en codage</td>
    </tr>
  </tbody>
</table>

## Utiliser un plugin pour modifier le footer WordPress

Un éventail de [plugins](https://www.ionos.fr/digitalguide/serveur/know-how/quest-ce-quun-plugin/ "Qu’est-ce qu’un plugin ?") est disponible au sein de l’écosystème WordPress afin de modifier le footer. Ceux-ci conviennent principalement pour **insérer des éléments invisibles dans le footer WordPress.** La plupart ne conviennent pas pour modifier les éléments visuels. Ci-dessous, vous trouverez un aperçu des plugins connus pour modifier le footer dans WordPress :

- [Head, Footer and Post Injections](https://wordpress.org/plugins/header-footer/ "Head, Footer and Post Injections sur WordPress.org")
- [Header and Footer Scripts](https://wordpress.org/plugins/header-and-footer-scripts/ "Header and Footer Scripts sur WordPress.org")
- [Header Footer Code Manager](https://wordpress.org/plugins/header-footer-code-manager/ "Header Footer Code Manager sur WordPress.org")

Nous allons vous montrer comment utiliser le plugin « **Header and Footer Scripts** » afin de placer du code additionnel dans le footer de WordPress pas-à-pas.

[![Image: Installer un nouveau plugin WordPress](https://www.ionos.fr/digitalguide/fileadmin/_processed_/6/4/csm_wordpress-plugin-install_2701be7da7.webp "Installer un nouveau plugin WordPress")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-plugin-install.png) Sélectionnez « Plugins » depuis le menu de gauche et cliquez sur « Installer ».    [![Image: Cherchez le plugin Header and Footer Scripts](https://www.ionos.fr/digitalguide/fileadmin/_processed_/3/0/csm_wordpress-search-for-header-and-footer_d6432d3ea7.webp "Cherchez le plugin Header and Footer Scripts")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-search-for-header-and-footer.png) Saisissez « Scripts Header et Footer » dans le champ de recherche à droite.    [![Image: Installer le plugin Header and Footer Scripts](https://www.ionos.fr/digitalguide/fileadmin/_processed_/2/2/csm_wordpress-install-header-and-footer-scripts-plugin_c188b1e390.webp "Installer le plugin Header and Footer Scripts")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-install-header-and-footer-scripts-plugin.png) Sélectionnez le plugin and cliquez sur « installer maintenant ».    [![Image: Activer le plugin Header and Footer Scripts](https://www.ionos.fr/digitalguide/fileadmin/_processed_/7/d/csm_wordpress-activate-header-and-footer-script-plugin_1ca34018cb.webp "Activer le plugin Header and Footer Scripts")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-activate-header-and-footer-script-plugin.png) Cliquez sur « Activer » sur le plugin sélectionné.    [![Image: Naviguez jusqu’à votre plugin Header and Footer Scripts](https://www.ionos.fr/digitalguide/fileadmin/_processed_/5/0/csm_wordpress-navigate-to-header-and-footer-plugin_194661b57a.webp "Naviguez jusqu’à votre plugin Header and Footer Scripts")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-navigate-to-header-and-footer-plugin.png) Cliquez sur « Paramètres » dans le menu de gauche et sélectionnez « Header and Footer Scripts ».    [![Image: Insérer la balise de script dans le footer WordPress](https://www.ionos.fr/digitalguide/fileadmin/_processed_/2/f/csm_wordpress-insert-skript-markup_f6de14fe9c.webp "Insérer la balise de script dans le footer WordPress")](https://www.ionos.fr/digitalguide/fileadmin/DigitalGuide/Screenshots_2022/wordpress-insert-skript-markup.png) Copiez le code que vous voulez insérer dans le footer WordPress dans la fenêtre de texte « Scripts dans footer » et cliquez sur « Enregistrer les paramètres ».       ##  Modifier le code thème pour modifier le footer WordPress

Un [thème WordPress](https://www.ionos.fr/digitalguide/hebergement/blogs/themes-wordpress-elements-et-structure/ "Thèmes WordPress : éléments et structure") constitue la structure de base pour afficher le contenu d’un site WordPress. **Modifier le thème vous assure un contrôle total sur le footer ;** des éléments visibles comme invisibles peuvent être ajoutés, supprimés et modifiés.

Ci-dessous, nous allons nous concentrer sur les éléments invisibles, compte tenu du fait que **les modifications apportées aux éléments visibles dépendent généralement du thème** que vous avez utilisé, ce qui nécessiterait l’inclusion de feuilles de style pour étayer nos explications. Il existe une exception : si vous êtes versé dans l’art du HTML et du PHP, vous pouvez aisément retirer un élément.

Lorsque vous voulez **apporter des changements à un thème,** cela vaut la peine de créer un a href="t3://page?uid=2815"&gt;thème enfant, ce qui garantit que les changements protégées contre les mises à jour et peuvent être facilement annulées si nécessaire. Les bénéfices compensent l’effort légèrement supérieur à réaliser.

Vous pouvez modifier le footer WordPress ainsi :

1. Modifier le code dans le **fichier modèle** footer.php
2. **Créez des fonctions additionnelles** dans functions.php

<table>
  <thead>
    <tr>
      <th>Méthode</th>
      <th>Avantage</th>
      <th>Inconvénient</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ajouter du code à footer.php</td>
      <td>Le principe d’action est facile à comprendre ; contrôle sur la séquence du script ; des changements visuels peuvent aussi être implémentés</td>
      <td>Les changements sont codés en dur ; de multiples changements effectués risquent d’entraîner la création d’un code confus</td>
    </tr>
    <tr>
      <td>Créer des fonctions dans functions.php</td>
      <td>Séparation nette entre présentation et fonctionnalité ; contrôle détaillé sur les balises de script intégrée</td>
      <td>Peut-être difficile saisir pour les débutants ; complexité plus élevée</td>
    </tr>
  </tbody>
</table>

Pour commencer, jetons un coup d’œil à la **structure générale d’une page HTML moderne**. De nombreux thèmes WordPress suivent cette tendance, avec quelques légères variations. Nous pointons les tendances spécifiques à WordPress dans les commentaires ;

```none
<!-- `header.php` commence ici -->
    
        <!-- Éléments invisibles dans HTML head -->
    
    
        <header></header>
            <!-- Éléments visibles dans header -->
        
        <!-- `header.php` finit ici -->
        <main></main>
            <!-- Éléments visibles dans la zone principale -->
        
        <!-- `footer.php` commence ici -->
        <footer></footer>
            <!-- Éléments visibles dans le footer -->
        
            <!-- Éléments invisibles à la fin du document -->
    
<!-- `footer.php` finit ici -->
```

Un document HTML est constitué de deux éléments &lt;head&gt; et &lt;body&gt;. Dans notre exemple, l’élément &lt;body&gt; contient les éléments &lt;header&gt;, &lt;main&gt;, et &lt;footer&gt;. Dans un **thème WordPress, cette structure d’élément est distribuée à travers plusieurs fichiers modèles.** L’immense majorité des thèmes utilisent les fichiers header.php et footer.php pour encoder le header ou le footer.

### Modifier le code dans footer.php

La **manière la plus rapide de modifier le footer WordPress** est sans doute de modifier le fichier modèle « footer.php ». Jetons un œil au [thème WordPress « TwentyTwenty »](https://themes.trac.WordPress.org/browser/twentytwenty/1.6/footer.php "Code source sur WordPress.org") pour illustrer comment un fichier footer.php typique est structuré. Veuillez noter que le code ci-dessous a été raccourci.

```none
<footer id="site-footer" role="contentinfo" class="header-footer-group"></footer>
        <!-- Les éléments visibles sont affichés ici -->
        <!-- #site-footer -->
        <!--?php wp_footer(); ?-->
        <!-- Les éléments invisibles sont affichés ici -->
```

1. Le footer.php commence avec une balise d’ouverture .
2. Celle-ci est suivie par des éléments visibles et la balise de fermeture .
3. Ensuite, le Hook WordPress wp\_footer est appelé.

Des éléments additionnels sont insérés de manière dynamique (nous verrons cela plus loin dans ce guide).

1. Enfin, les balises et suivent.

Vous vous apercevrez que le footer WordPress dans le **thème Twenty Twenty contient le texte** « **Powered by WordPress** »**.** Retirez cela du footer.php en modifiant le fichier. Il vous suffit pour cela d’utiliser le code suivant :

```none
<p class="powered-by-wordpress">
    <a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentytwenty' ) ); ?>">
        <?php _e( 'Powered by WordPress', 'twentytwenty' ); ?>
    </a>
</p><!-- .powered-by-wordpress -->
```

Une fois les **lignes de code pertinentes supprimées** et le fichier enregistré, le texte sur la page ne s’affiche plus. Mais attention ! Le footer WordPress est intégré sur chaque page. Les erreurs faites lorsque vous adaptez le code peuvent affecter la totalité de votre site. Assurez-vous d’effectuer une copie de votre fichier avant de commencer.

Souvent, il est plus facile et moins risqué d’**ajouter une ligne de CSS** au lieu de modifier le code PHP. Néanmoins, cela ne fonctionne que si le code thème est propre. En ce qui concerne le thème TwentyTwenty, vous pouvez dissimuler le texte avec le code CSS suivant :

```none
#site-footer .powered-by-WordPress {
    display: none;}
```

### Créer des fonctions dans functions.php

Le fichier functions.php constitue un fichier de thème spécial qui contient du code pour personnaliser le thème et le site WordPress. De plus, il fait office de point d’entrée pour l’**injection dynamique de code dans le footer WordPress**. Le Hook wp\_footer est lié à des fonctions définie de manière spécifique : si le Hook fonctionne, les fonctions sont exécutées. Jetons un coup d’œil à ces quelques exemples.

Pour commencer, nous intégrons un **bloc avec des** **métadonnées de balise de script** sur la [page d’accueil WordPress](https://www.ionos.fr/digitalguide/hebergement/blogs/creer-une-page-daccueil-wordpress/ "Créer une page d’accueil WordPress"). Pour ce faire, nous ajoutons le code suivant en format JSON-LD à functions.php :

```none
function load_start_page_meta() {
    // Sommes-nous sur la page d'accueil ?
    if ( is_front_page() ) {
        // Édition des éléments de script
        echo <<<'EOT'
        <script type='application/ld+json'>
        {
            "@context": "http://www.schema.org",
            "@type": "Fleuriste",
            "name": "Jolies Fleurs",
            "address": {
                 "@type": "Adresse",
                 "streetAddress": "1 rue de la Fleur",
                 "addressLocality": "Paris",
                 "postalCode": "75000"
            }
        }
        </script>
EOT; // cette ligne ne doit pas être en retrait !
    }
}
// Lier la fonction avec le Hook `wp_footer`
add_action( 'wp_footer', 'load_start_page_meta' );
```

---

### Note

Dans cet exemple, nous utilisons le « Nowdoc syntax » pour intégrer le code JSON à l’intérieur d’un élément script HTML dans PHP.

---

Dans l’exemple suivant, nous voulons ajouter un élément de script avec des données JSON uniquement sur les pages où **[les commentaires sont activés](https://www.ionos.fr/digitalguide/hebergement/blogs/desactiver-les-commentaires-sous-wordpress/ "Désactiver les commentaires sous WordPress")**. Imaginons que nous souhaitions cacher les commentaires à des utilisateurs spécifiques ou dans un cadre de temps spécifique. Nous ajoutons le nom de l’utilisateur et l’année sur les pages tels que :

```none
function load_comments_exclusion() {
    // sommes-nous sur la page des commentaires ?
    if ( is_single() && comments_open() ) {
        // Sortie des éléments de script
        echo <<<'EOT'
        <script type="application/json">
            {
                "userName": "Marc Dupond",
                "cutoffYear": "2018"
            }
        </script>
EOT; // cette ligne ne doit pas être en retrait !
    }
}
// Lier la fonction avec le Hook `wp_footer`
add_action( 'wp_footer', 'load_comments_exclusion' );
```

## Intégrer des fichiers script additionnels dans un footer WordPress

L’intégration de scripts externes constitue l’un des changements les plus courants fait à un footer WordPress. Il est rarement opportun d’exclure des fichiers scripts externes via un plugin ou en modifiant le footer.php. À la place, vous devriez utiliser la **fonctionnalité spécifique** **fournie par WordPress**. La fonction wp\_enqueue\_script () et le Hook wp\_enqueue\_script sont utilisés pour réaliser les changements dans functions.php.

Utiliser les fonctions spécifiques de WordPress pour intégrer des scripts externes présente plusieurs avantages :

- Vous pouvez définir le fait que Script A ne charge qu’une fois que Script B a chargé. Cette étape garantit le fait que les **dépendances sont atteintes**.
- Vous pouvez spécifier qu’un script **doit apparaître dans le footer WordPress.** À titre alternatif, le script se retrouvera dans l’en-tête HTML.
- Vous pouvez ajouter un **numéro de version explicite pour un script**. Celui-ci sera ajouté à l’URL du script. Si la version change, le script se verra assigner un nouvel URL. Ceci force le script à se recharger plutôt que d’utiliser l’ancienne version depuis un cache.
- Vous pouvez définir les scripts que vous voulez inclure et de quelle manière. WordPress s’occupe du reste. Il s’agit d’une **étape essentielle** **pour optimiser les performances.** Par exemple, un plugin de mise en cache peut prendre en charge la liste des scripts à intégrer et les traiter. Les techniques d’optimisation fréquemment utilisées telles que la « minification » et la « concaténation » sont basées sur ce mécanisme.

Voyons en détail comment la fonction wp\_enqueue\_script() est structurée. Voici le **script basique avec lequel appeler la fonction** avec tous ses paramètres :

```none
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
```

Ci-dessous, vous trouverez un résumé de la fonction wp\_enqueue\_script () et **des explications sur ses paramètres**, ainsi qu’un exemple :

<table>
  <thead>
    <tr>
      <th>wp\_enqueue\_script()</th>
      <th>$handle</th>
      <th>$src</th>
      <th>$deps</th>
      <th>$ver</th>
      <th>$in\_footer</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Explication</td>
      <td>Abréviation interne</td>
      <td>Chemin vers le fichier JavaScript</td>
      <td>Tableau des dépendances</td>
      <td>Version</td>
      <td>Afficher dans footer ?</td>
    </tr>
    <tr>
      <td>Exemple</td>
      <td>'main-script'</td>
      <td>'/js/main.js' in theme folder</td>
      <td>array('jquery')</td>
      <td>false</td>
      <td>true</td>
    </tr>
  </tbody>
</table>

Enfin, voici comment l’exemple dans le tableau se traduit sous forme de code. Si nous entrons le code suivant dans le fichier functions.php, notre script sera **chargé comme une dépendance sur jQuery.** Le numéro de la version de l’installation WordPress est ajouté en tant que version à l’URL du script. Le script est intégré au footer WordPress.

```none
function add_theme_scripts() {
    # Chargement du script basé sur jQuery dans le footer
    wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array('jquery'), false, true);
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
```


This is a markdown version of: [https://www.ionos.fr/digitalguide/hebergement/blogs/modifier-le-footer-wordpress/](https://www.ionos.fr/digitalguide/hebergement/blogs/modifier-le-footer-wordpress/) for AI/LLM consumption.