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.
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.
2. Ajoutez le fichier pour la zone de widget WordPress (dans le pied de page ou là où vous préférez)
É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 ChildTheme URI: http://example.com/twenty-fifteen-child/Description: Twenty Fifteen Child ThemeAuthor: John DoeAuthor URI: http://example.comTemplate: twentyfifteenVersion: 1.0.0License: GNU General Public License v2 or laterLicense URI: http://www.gnu.org/licenses/gpl-2.0.htmlTags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-readyText 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.
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é.
Votre widget de pied de page WordPress est terminé!
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.
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.
et beaucoup plus ...