Share
De nos jours, de nombreux thèmes WordPress ont un certain nombre de zones de widget dans le pied de page, ce qui signifie que vous pouvez créer un "pied de page épais" avec plusieurs zones de widget côte à côte. C'est quelque chose que j'utilise sur tous mes thèmes.
Mais que se passe-t-il si votre thème comporte quatre zones de widgets mais que vous ne voulez que trois widgets? Si vous ne faites pas attention, vous vous retrouverez avec un vilain vide à droite où la quatrième zone de widget vide est.
Dans ce tutoriel, je vais vous montrer comment éviter cela en utilisant une combinaison de balises conditionnelles en PHP et de certains CSS orientés objet (OOCSS), qui vérifieront le nombre de zones de widgets que vous avez remplies et les redimensionneront automatiquement afin qu'elles soient prises en charge. la bonne proportion de la largeur de la page.
Pour suivre ce tutoriel, vous aurez besoin de:
La première étape consiste à enregistrer les quatre zones de widgets dans votre pied de page. Si vous n’avez pas déjà enregistré de zone de widget, vous devez ajouter ce code à votre functions.php fichier:
Accentsconagua
function tutsplus_widgets_init () // Zone du premier widget de pied de page, située dans le pied de page. Vide par défaut. register_sidebar (array ('name' => __ ('Zone du premier footer', 'tutsplus'), 'id' => 'premier-footer-widget-area', 'description' => __ ('Le premier widget du pied de page zone ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Deuxième zone de footer, située dans le pied de page. Vide par défaut. register_sidebar (array ('name' => __ ('Zone du deuxième footer', 'tutsplus'), 'id' => 'second-footer-widget-area', 'description' => __ ('Le deuxième widget du pied de page zone ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Troisième zone de widget de pied de page, située dans le pied de page. Vide par défaut. register_sidebar (array ('name' => __ ('Zone du troisième pied de page', ')', 'id' => 'troisième zone du pied de page', 'description' => __ ('Le troisième pied de page zone ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Zone du quatrième pied de page, située dans le pied de page. Vide par défaut. register_sidebar (array ('name' => __ ('Zone de widget de quatrième pied de page', 'tutsplus'), 'id' => 'zone de quatrième pied de page', 'description' => __ ('Le widget de quatrième pied de page zone ',' tutsplus '),' before_widget '=>'',' after_widget '=>'',' before_title '=>'',' after_title '=>'
',)); // Enregistrez les barres latérales en exécutant tutsplus_widgets_init () sur le hook widgets_init. add_action ('widgets_init', 'tutsplus_widgets_init'); Cela ajoutera quatre zones de widget de pied de page à votre thème. Si vous visualisez le Widgets À l'écran, vous les verrez tous avec tous ceux que vous avez déjà enregistrés:
Si vous ajoutez des widgets à ces zones de widgets maintenant, rien ne se passera. Vous devez les ajouter au pied de page de votre thème. Je vais travailler par étapes sur le code que vous devez ajouter à votre fichier de pied de page par étapes, en ajoutant davantage de contrôles pour différents nombres de zones de widgets remplies au fur et à mesure..
Notez que vous devrez peut-être modifier certaines des classes et des éléments contenant le code de zone du widget en fonction de la structure et de la présentation de votre thème..
La première étape consiste à vérifier si aucune zone de widget n'est renseignée, auquel cas rien ne doit être généré. Ouvrez votre thème footer.php déposer et ajouter le code ci-dessous.
Ensuite, je vérifierai si toutes les zones du widget sont remplies. Si tel est le cas, le thème affichera le contenu des quatre éléments, chacun flottant côte à côte et occupant un quart de la largeur de l'écran. Je vais ajouter les classes pour cela ici, mais ajouter le CSS à ma feuille de style plus tard.
Après la lecture de la ligne revenir; mais avant le fin si; déclaration dans le code que vous venez d'ajouter, ajoutez ceci:
if (is_active_sidebar ('premier-footer-widget-area') && is_active_sidebar ('second-footer-widget-area') && is_active_sidebar ('troisième-footer-widget-area') && is_active_sidebar ('quatrième-footer-widget- zone ')):?> Cela fait ce qui suit:
si Mots clés.dynamic_sidebar () fonction, donnant à chacune de ces classes pour la mise en page.Les cours sont .quartier gauche pour la plupart des zones de widget, à l'exception du dernier qui a .à droite.
L'étape suivante consiste à ajouter le code pour générer les zones du widget si trois d'entre elles seulement sont remplies. Sous le code que vous venez d'ajouter, insérez ce qui suit:
Ceci vérifie si les trois premières zones de widgets sont remplies et si la quatrième ne l’est pas, puis affiche les trois premières en utilisant les classes appropriées en remplaçant .trimestre avec .un tiers.
Notez que lorsque vous remplissez les zones de vos widgets, vous devez toujours passer à côté du (des) dernier (s) si vous ne souhaitez pas les utiliser toutes, sinon cette vérification ne fonctionnera pas. Ne laissez pas le premier vide et remplissez les derniers.
Pour ne générer que deux zones de widgets, si elles ont été remplies et les troisième et quatrième non, ajoutez ce code sous le code que vous venez d'ajouter:
Cela fonctionne de la même manière que les deux extraits de code précédents, en utilisant le .moitié classe pour la mise en page.
La vérification finale concerne uniquement la première zone de widget en cours de remplissage. Ajoutez ceci en dessous du code que vous venez d'ajouter:
Ceci affichera le contenu de la zone de widget dans un élément de largeur totale.
Maintenant, enregistrez votre footer.php fichier.
Pour le moment, les zones de vos widgets ne fonctionneront pas correctement. En fait, si vous les remplissez, elles apparaîtront les unes sous les autres en pleine largeur. Vous devez donc ajouter des OOCSS pour que ces classes de mise en page fonctionnent. Le système OOCSS que j'ajoute est réactif. J'ai donc inclus des requêtes de média pour redimensionner les zones du widget de pied de page sur de petits écrans..
D'abord, assurons-nous que les zones de widgets flottent les unes à côté des autres.
Ouvrez votre thème style.css déposer et ajouter ce code:
/ * floats * / .quarter,. un tiers,. deux tiers, .half float: left;
Les largeurs garantiront que toutes les zones du widget occupent la proportion correcte de l'écran. J'utilise des pourcentages car cela rend le code plus flexible et réactif. Ajoutez ceci à votre feuille de style:
/ * largeurs * /. un tiers largeur: 32%; . 2/3 largeur: 65,5%; .quarter width: 23.5%; . Trois-quarts largeur: 74,5%; .half width: 48%;
Notez que les largeurs ne totalisent pas 100% car il faut laisser de la place pour les marges.
Ajoutez maintenant le style des marges à votre feuille de style:
/ * marges * /. un tiers marge: 0 0,5%; .quarter,. 2/3 marge: 0 0,5%; .left, .quarter.left, .one-third.left margin: 0 1% 0 0; float: gauche; .right, .quarter.right, .one-third.right margin: 0 0 0 1%; Flotter à droite; .half.left width: 48%; marge: 0 2% 0 0; .half.right width: 48%; marge: 0 0 0 2%; . deux tiers.faut marge: 0 1% 0 0; . deux-tierss.right marge: 0 0 0 1%; Flotter à droite;
Notez que les marges sont différentes pour les éléments qui ont également la .droite ou .la gauche les classes qui leur sont appliquées, de sorte qu’elles s’affleurent au bord de leur élément conteneur.
Les requêtes des médias feront deux choses:
.trimestre la classe aura une demi-largeur et les marges seront ajustées en conséquence.Ajoutez les requêtes multimédia au bas de votre feuille de style avec toutes les autres requêtes multimédia que vous pourriez avoir:
/ * requêtes multimédias pour les écrans plus grands, telles que les petites tablettes en mode paysage ou les grandes tablettes en mode portrait * / écran @media et (largeur maximale: 780px) / * seule la classe de mise en forme .quarter est pertinente ici - toutes les autres classes auront une largeur * / .quarter width: 48%; .quarter.left marge-droite: 2%; .quarter.right marge gauche: 2%; footer .third.quarter.widget-area clear: les deux; / * Requêtes de média pour les petits écrans en mode paysage (ou similaire) * / @media screen et (max-width: 600px) / * width dimensionnant toute la largeur dans des petits écrans * / .quarter, .one-third, , demi, deux tiers, trois quarts, largeur totale: 100%; marge: 0; / * réglages de remplissage * / .widget-area padding: 0 0 10px 0;
Maintenant, enregistrez votre feuille de style.
Il est maintenant temps de voir ce qui se passe lorsque vous remplissez vos zones de widgets.
Vous trouverez ci-dessous une capture d'écran d'un site que je gère et qui utilise ce code. Normalement, le pied de page comporte quatre zones de widget:
Si je supprime le widget de la quatrième zone, seuls trois sont affichés, avec des largeurs égales:
Et si je supprime les widgets de la troisième zone de widget, les visiteurs verront deux zones de widgets occupant chacune la moitié de la largeur:
Cette technique est utile si vous souhaitez que votre thème permette de peupler plusieurs zones de widget de pied de page, mais vous ne savez pas combien de ces zones de widget seront réellement utilisées..
Si vous créez un cadre, un thème de démarrage ou un thème que d'autres personnes utiliseront pour leurs sites, cela peut aider à rendre la disposition du pied de page plus claire et à économiser du travail supplémentaire par la suite en ajoutant une disposition CSS.
