[Comment] Ajouter une zone de widget à n'importe quel thème WordPress (2024)

Le thème WordPress par défaut en 2014 était Vingt-quinze, un modèle avec une barre latérale fixe à gauche qui se transforme en en-tête en vue mobile, une zone de pied de page minimale, une excellente typographie et une belle zone d'image en vedette. Depuis lors, nous avons vu la sortie de TwentySixteen, TwentySeventeen, TwentyEighteen, TwentyNineteen et le thème gratuit actuel. Vingt-vingt.

Ces thèmes sont géniaux, ils passent par tout un processus pour être choisis comme thème WordPress par défaut, cependant, nous pouvons comprendre que les utilisateurs veulent toujours le personnaliser et le personnaliser. 

Étant donné que ces thèmes offrent généralement certaines limitations telles qu'une barre latérale unique (appelée zone prête pour les widgets dans WordPress), nous vous montrerons comment ajouter un widget au pied de page ou comment modifier le code de n'importe quel thème pour ajouter plus de zones de widget à un thème. 

L'ajout d'une zone de widgets au pied de page TwentyFifteen à TwentyTwenty n'est pas différent de l'ajout d'une zone de widgets dans la plupart des thèmes WordPress.

Si vous êtes intéressé par d'autres thèmes WordPress, nous vous recommandons de regarder d'autres thèmes populaires tels que Divi de Elegant Themes. Consultez notre critique complète ici.

Table des matières[Afficher]

Pied de page de la zone de widget wordpress et autres positions

Créer un thème enfant WordPress

Lors de la personnalisation des fichiers de modèle d'un thème WordPress pour créer une zone de widget, il est recommandé de créer un thème enfant.

Le concept d'un thème enfant est assez simple - nous ne voulons pas interrompre la possibilité de mettre à niveau le thème vers des versions nouvellement publiées.

Lors de la création de personnalisations sur un thème enfant, vos modifications seront ajoutées au thème enfant plutôt qu'au thème d'origine. Lorsqu'une version mise à jour du thème d'origine est sortie, vous pourrez mettre à jour votre copie du thème d'origine et laisser vos modifications intactes dans le thème enfant.

Si vous cherchez à en savoir plus sur les trucs et astuces liés à WordPress, visitez le reste de la section sur CollectiveRay.

1. Créez le répertoire et les fichiers du thème enfant 

Dans un premier temps, créez un dossier dans le wp-content> thèmes dossier. Appelez le dossier vingt-quinze-enfant, vingt-vingt-enfant. Il est cependant important que le thème enfant suive la convention de dénomination du parent.

Donc si le parent est appelé vingt-quinze, l'enfant doit être appelé vingt-quinze-enfant. De même, si le thème que vous personnalisez est appelé vingt-vingt, le thème enfant doit être appelé tgoytwenty-child.

Une fois que vous avez créé le thème enfant, vous devez créer deux fichiers supplémentaires.

Le fichier qui sera utilisé pour effectuer des changements dans les styles CSS doit être appelé style.css. Nous avons également besoin du  functions.php fichier pour le thème enfant, où nous pouvons ajouter certaines fonctionnalités requises.

Ces deux fichiers vont dans le dossier vingt-quinze enfants ou dans le dossier respectif que vous avez créé pour le thème enfant.

structure du répertoire du thème enfant wordpress

Étant donné que la zone de widget doit être ajoutée au pied de page du thème, vous devez disposer d'un fichier pour le code de pied de page.

Le moyen le plus sûr de coder un fichier de modèle WordPress est de commencer à partir d'un modèle prêt à l'emploi, puis d'ajouter ce que vous voulez et / ou de supprimer ce que vous ne voulez pas.

Dans ce cas, prenez le footer.php à partir du thème Twenty Fifteen, ou du thème Twenty Twenty ou quel que soit le thème que vous personnalisez est appelé et collez-le dans votre thème enfant.

3. Ajoutez du code aux fichiers du thème enfant pour créer le widget

Pour le moment, nous n'avons que des fichiers vides, donc tel quel, le thème enfant ne peut rien faire.

Pour que nous puissions effectuer des changements, un thème enfant qui travaille a besoin de quelques commentaires en haut de style.css. Ouvert style.css dans votre éditeur de code préféré et ajoutez ce morceau de code. 

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyfifteenchild
*/

La partie vraiment importante ici est dans le Modèle donc dans l'exemple ci-dessus, c'est Modèle: vingt-quinze. Ceci indique à WordPress le nom du thème parent.

Assurez-vous que le nom est exactement le même que le nom du dossier du thème parent (la casse ou les espaces, tirets, traits de soulignement, etc. sont importants: tout doit correspondre exactement au nom du dossier du thème parent).

Ensuite, ouvrez functions.php  et ajoutez le bit de code suivant.

 

Bien que cette étape ne soit pas strictement obligatoire, elle est fortement recommandée car avec ce code, le thème enfant héritera de l'apparence de son parent.

Alors écrivons une fonction qui se raccorde au hook d'action wp_enqueue_scripts (). À l'intérieur de la fonction vous Enqueue la feuille de style du thème parent à l'aide du Fonction wp_enqueue_style ()

Cela garantit que le thème enfant hérite des styles de son parent tout en remplaçant toute règle de style spécifique dans sa propre style.css fichier.

 

<?php
//Importez les styles parents de la bonne manière et ajoutez d'autres feuilles de style si nécessaire.
fonction vingt_quinze_child_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
add_action( 'wp_enqueue_scripts', 'twenty_fifteen_child_styles' );

Votre thème enfant est en grande partie terminé!

Accéder au Themes panneau dans votre installation WordPress et vous devriez voir votre thème Twenty Fifteen Child prêt à être utilisé. Cliquez sur Activer et visitez votre site. Il doit avoir exactement le même aspect que le thème parent.

Ajout de la zone de widget

Nous devons maintenant ajouter le code pour définir la zone de widget de pied de page. Voici l'extrait qui entre dans functions.php

/ ** * Enregistrer la zone de widget de pied de page. * * @since Twenty Fifteen Child 1.0 * * @link https://codex.wordpress.org/Function_Reference/register_sidebar * / function vingtfifteen_child_widgets_init () {register_sidebar (array ('name' => __ ('Footer Widgets', 'vingt -fifteen-child '),' id '=>' sidebar-2 ',' description '=> __ (' Ajoutez des widgets ici pour apparaître dans votre zone de pied de page. ',' vingt-quinze-child '),' before_widget ' => ' ',' after_widget '=>' ',' before_title '=>' ',' after_title '=>' ',)); } add_action ('widgets_init', 'vingtfifteen_child_widgets_init');

Le code ci-dessus ajoute une fonction qui enregistre une barre latérale avec l'ID de sidebar-2 (le thème Twenty Fifteen a déjà une barre latérale avec l'ID de sidebar-1), puis accroche cette fonction dans le hook d'action widgets_init ().

Ensuite, allons-y et ajoutons la nouvelle barre latérale au pied de page. Ouvert footer.php dans un éditeur de code et entrez cet extrait juste en dessous de cette ligne de code: <footer id="colophon" class="site-footer" role="contentinfo">.


 
 
  
 
 
 

Le code ci-dessus vérifie d'abord si la sidebar-2 a des widgets, si c'est le cas, il affiche la barre latérale à l'intérieur d'un div avec la classe "widget-area". 

La prochaine chose que vous devez faire est de vous rendre dans le panneau Widgets de votre back-end WordPress, de localiser la barre latérale Footer Widgets et d'y ajouter des widgets. Enregistrez les widgets au fur et à mesure que vous les ajoutez et vérifiez le résultat.

Widget de pied de page Wordpress
Widgets de pied de page dans le thème Twenty Fifteen

Ce qui précède montre quelques widgets dans la barre latérale du pied de page Twenty Fifteen Child et vous pouvez voir que le texte était trop proche du haut du conteneur et que la marge inférieure des widgets était trop élevée. Ce petit extrait de style.css améliorera considérablement l'apparence. 

.site-footer .widget {margin: 0; rembourrage: 10% 20% 0; } .site-footer .widget: last-child {margin-bottom: 10%; }	

Voici un autre exemple d'ajout d'une autre barre latérale:

if (is_active_sidebar ('sidebar-2') 
|| is_active_sidebar ('sidebar-3')):
?>
">

if (is_active_sidebar ('sidebar-2')) {?>


<?php }
if (is_active_sidebar ('sidebar-3')) {?>


</div>



Le code que vous devez utiliser dépendra du thème que vous utilisez en réalité.

Dans cet article, nous avons vu comment ajouter une nouvelle zone de widgets au pied de page du thème Twenty Fifteen WordPress. Bien que nous ayons placé la zone de widget dans le pied de page du thème, vous pouvez utiliser cette logique pour ajouter des zones de widget à peu près partout dans un thème en suivant des étapes similaires.

Téléchargez la liste des 101 astuces WordPress que tout blogueur devrait connaître

101 astuces WordPress

Cliquez ici pour télécharger maintenant

À propos de l’auteur
David Attar
David travaille dans ou autour de l'industrie en ligne et numérique depuis 21 ans. Il possède une vaste expérience dans les secteurs des logiciels et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. Il a travaillé avec des agences de développement de logiciels, des éditeurs de logiciels internationaux, des agences de marketing locales et est désormais responsable des opérations marketing chez Aphex Media, une agence de référencement. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plateformes numériques disponibles aujourd'hui. Son mélange d'expertise technologique combiné à un fort sens des affaires confère un avantage concurrentiel à ses écrits.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Veuillez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...