Comment créer un widget personnalisé dans WordPress à l'aide du thème Genesis Child
Publié: 2018-02-15
Genesis est l'un des frameworks WordPress les plus largement utilisés pour le style des mises en page de sites Web. Il est populaire parmi les développeurs en raison de son architecture de thème parent-enfant. Il leur permet de personnaliser les thèmes enfants selon leurs besoins sans affecter les fonctionnalités de base du thème parent.
Dans cet article, je vais montrer à quel point il est facile de personnaliser le thème enfant Genesis en créant 4 zones de widgets dans le thème Genesis Sample fourni gratuitement avec Genesis Framework.
1. Configuration de l'environnement de développement
Pour installer Genesis Framework, vous devez avoir une installation WordPress, soit localement, soit sur un serveur. Je suppose que vous avez déjà installé WordPress sur votre serveur et sinon, lancez votre WordPress à l'aide de la plateforme Cloudways.
Téléchargez maintenant la copie de Genesis Framework et le thème Sample à partir de StudioPress et activez le framework sur votre site WordPress.
Remarque : pour la personnalisation du thème Genesis, j'utilise Sublime Text 3 comme éditeur de texte. Cependant, vous avez le choix de choisir n'importe quel autre éditeur de texte.
2. Personnalisation du thème enfant
Ouvrez le thème Sample Genesis dans votre éditeur de texte et créez un nouveau fichier front-page.php dans le répertoire racine .
Ouvrez maintenant front-page.php et ajoutez l'extrait suivant.
<?php genèse();
Cela initialisera Genesis Framework.
L'exemple de thème n'est pas fourni avec front-page.php , par conséquent, je dois explicitement créer cette page pour enregistrer nos zones de widgets.
Zones de widgets personnalisés
Je vais commencer à ajouter des widgets en modifiant le fichier function.php du thème, mais avant de commencer à écrire du code, laissez-moi vous expliquer la logique du back-end.
Ici, je déclare une fonction qui prend un tableau de paramètres :
- id – pour identifier notre code.
- nom – est ce que nous verrons dans notre tableau de bord WordPress.
- description – cela s'affichera également dans le tableau de bord WordPress.
Remarque : « id » et le « nom » de la fonction doivent être uniques.
Ouvrez maintenant function.php et ajoutez les extraits de code suivants à la fin du fichier.
Pour curseur Widget
genesis_register_sidebar( array(
'id' => 'front-page-1',
'name' => __( 'Homepage Slider Widget', 'genesis-sample' ),
'description' => __( 'Ceci est un widget qui va sur la page d'accueil.', 'genesis-sample' ),
) );Pour le widget de contenu 1
genesis_register_sidebar( array( 'name' => __( 'Home Content Top Left', 'genesis-sample' ), 'id' => 'content-1', 'description' => __( 'Top Left Home', 'genesis-sample' ), ) );
Pour le widget de contenu 2
genesis_register_sidebar( array( 'name' => __( 'Home Content Top Middle', 'genesis-sample' ), 'id' => 'content-2', 'description' => __( 'Top Middle Home', 'genesis-sample' ), ) );
Pour le widget de contenu 3
genesis_register_sidebar( array( 'name' => __( 'Home Content Top Right', 'genesis-sample' ), 'id' => 'content-3', 'description' => __( 'Top Right Home', 'genesis-sample' ), ) );
Comme on le voit ci-dessous, j'ai réussi à créer 3 widgets différents. Maintenant, allons de l'avant et téléchargeons le thème personnalisé dans le tableau de bord WordPress.
Notez que les widgets sont visibles dans l'onglet Widgets. Cependant, les activer n'aura aucun effet sur le front-end de notre thème. C'est parce que je n'ai pas ajouté le balisage pour afficher ces widgets dans notre fichier front-page.php .
Afin d'ajouter un balisage pour afficher les widgets, je déclare une fonction personnalisée dans le fichier front-page.php . Dans cette fonction, j'appelle le widget à partir de son "id", qui a été précédemment créé dans le fichier function.php avec du balisage HTML.
Bien que l'ajout de cette fonction ne fasse toujours rien car nous n'avons encore attaché cette fonction à aucune action.
Pour cela, je déclare une action qui contient un hook 'genesis-meta' et en cela, j'appelle une fonction 'my_homepage_setup' . Dans cette fonction, je vérifie que la zone de widget est active ou non. Si oui, je dois accrocher ce widget à un emplacement spécifié, puis appeler cette fonction de widget pour afficher le balisage du widget.
Maintenant, je vais ajouter l'extrait de code suivant dans le fichier front-page.php .
Curseur Widget
add_action( 'genesis_meta', 'my_homepage_setup' );
fonction my_homepage_setup() {
if ( is_active_sidebar( 'front-page-1' ) ) {
//* Ajout d'un widget curseur
add_action( 'genesis_after_header', 'display_front_page_1_widget' );
}
}
// Ajout d'un balisage pour afficher les widgets de curseur.
fonction display_front_page_1_widget() {
genesis_widget_area( 'front-page-1', array(
'before' => '<div class="front-page-1-widget"><div class="wrap">',
'après' => '</div></div>',
) );
}Widgets de contenu (1, 2 et 3)
add_action( 'genesis_before_content', 'ng_home_page_widgets' );
//* Ajouter les widgets d'accueil en place
fonction ng_home_page_widgets() {
if ( is_front_page('') )
genesis_widget_area ('content-1', array(
'before' => '<div class="un tiers premier hometopcol toplefthome">',
'après' => '</div>',));
if ( is_front_page('') )
genesis_widget_area ('content-2', array(
'before' => '<div class="un tiers hometopcol topmiddlehome">',
'après' => '</div>',));
if ( is_front_page('') )
genesis_widget_area ('content-3', array(
'before' => '<div class="un tiers hometopcol toprighthome">',
'après' => '</div>',));
}Enfin du style CSS dans votre fichier style.css
J'ajoute du CSS aux zones de style des widgets. Cependant, vous pouvez styliser comme vous le souhaitez.
Par souci de simplicité, je ne définis que la taille et le remplissage des widgets de contenu : la bordure et la couleur d'arrière-plan pour le conteneur du site Web.
.first {marge-gauche:0px;}
.site-container {background: #fff;}
.site-inner {padding-top:0px;}
contenu d'accueil {
couleur : #7e7467 ;
taille de la police : 16px ;
hauteur de ligne : 1.3 ;
box-shadow:1px 2px 5px 0px rgba (0, 0, 0, 1);
marge supérieure : 25px ;
position : relative ;}
.textwidget {remplissage : 12% ;text-align : center ;}
.hometopcol {
marge supérieure : 0px ;
hauteur : 280 px ;
bordure : 4px solide rgb(255,69,0) ;}
.Titre du Widget {
couleur : #c4421b ;
remplissage : 15px 0px 0px 15px ;
bordure inférieure : 4px rgba solide (162, 152, 135, 1);
marge inférieure : 10 px ;
transformation de texte : aucune ;
taille de la police : 16px ;}
.widgettitle:après {
teneur: " ";
position : absolue ;
haut : 43px ;
gauche : 5px ;
à droite : 5 pixels ;
bordure : 1px rgba solide (162, 152, 135, 1);}Revenons au site WordPress et voyons les changements. Pour Slider Widget, j'utiliserai Smart Slider 3. Vous pouvez utiliser n'importe quel widget slider de votre choix. Pour les widgets de contenu, je vais simplement utiliser du texte.
Aspect final
À la fin de cet article, je suis capable de créer 4 widgets personnalisés pour le thème enfant Genesis Sample. Par défaut, le thème Genesis ne contient aucun widget d'en-tête, mais j'ai maintenant mon propre widget personnalisé qui peut être utilisé pour un curseur ou pour afficher toute autre information. Les 3 autres widgets de contenu peuvent être utilisés pour mettre en évidence des produits ou services ou toute autre fonctionnalité.
Après avoir activé tous les widgets, la page d'accueil devrait ressembler à ceci :
Sommaire
Au début de cet article, nous savions uniquement comment utiliser le thème Genesis WordPress comme exemple de thème enfant, mais au fur et à mesure que nous avancions, nous avons appris comment créer des zones de widgets personnalisées dans le thème WordPress Genesis Sample et comment les positionner dans la conception de la page d'accueil.
Je suis sûr que cet article vous a donné suffisamment de confiance pour personnaliser ou créer vous-même votre propre thème enfant Genesis. Pour les meilleures pratiques, il est recommandé de consulter la documentation officielle de Genesis et WordPress.