L'inspiration pour ce tutoriel vient d'un tweet que j'ai reçu avec des commentaires pour le thème RS12 bientôt disponible.
Bien que le pied de page avec widgets n'ait finalement pas été inclus dans la sortie du thème RS12, j'ai décidé d'écrire ce tutoriel pour montrer comment ajouter exactement un pied de page avec widgets dans votre thème. Dans ce guide, vous apprendrez :
- Le code HTML et CSS nécessaire pour produire le pied de page avec widgets
- Comment ajouter des balises de modèle WordPress couramment utilisées comme espaces réservés
- Comment rendre le pied de page avec widgets et y placer des widgets
Il y aura beaucoup de code dans ce post, donc si vous êtes prêt, lisez la suite...
J'utiliserai le thème WordPress Green Rays comme exemple dans ce tutoriel. Pour le moment, le pied de page contient juste un message standard de « copyright » et des crédits.
Le HTML
La première étape consiste à ajouter le balisage HTML. Supposons que nous ayons trois sections différentes dans le pied de page widgetisé avec des listes des articles les plus récents, des archives mensuelles et des archives quotidiennes. Nous placerons ce code HTML au-dessus de la ligne actuelle « copyright ».
<div class="footer-item">
<h3>Articles récents</h3>
<ul>
<li><a href='#' title='Article en vedette'>Article en vedette</a></li>
<li><a href='#' title='Citations'>Citations</a></li>
<li><a href='#' title='Comment fonctionne la balise « more »'>Comment fonctionne la balise « more »</a></li>
<li><a href='#' title='Ordonner ou désordonner'>Ordonner ou désordonner</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archives mensuelles</h3>
<ul>
<li><a href='#' title='Mars 2008'>Mars 2008</a></li>
<li><a href='#' title='Février 2008'>Février 2008</a></li>
<li><a href='#' title='Janvier 2008'>Janvier 2008</a></li>
<li><a href='#' title='Décembre 2007'>Décembre 2007</a></li>
</ul>
</div>
<div class="footer-item">
<h3>Archives quotidiennes</h3>
<ul>
<li><a href='#' title='7 mars 2008'>7 mars 2008</a></li>
<li><a href='#' title='9 février 2008'>9 février 2008</a></li>
<li><a href='#' title='4 janvier 2008'>4 janvier 2008</a></li>
<li><a href='#' title='22 décembre 2007'>22 décembre 2007</a></li>
</ul>
</div>
<div class="clear"></div>
Essentiellement, ce code place chaque « widget » dans une div. À l'intérieur de chaque widget se trouve un titre et une liste non ordonnée avec des liens. Oui, je sais que les liens ne mènent nulle part. Nous remplacerons cela plus tard par des balises de modèle WordPress. Voici ce que nous avons jusqu'à présent :
Le CSS
Comme vous pouvez le voir, cela ne ressemble pas à grand-chose sans aucun style CSS. Ajoutez le code suivant à votre feuille de style.
.footer-item {
float: left;
width: 33%;
padding-bottom: 10px;
}
.footer-item ul {
padding-left: 15px;
}
Ce code permet de faire flotter chaque élément du pied de page vers la gauche, ce qui signifie essentiellement qu'ils peuvent être côte à côte. La largeur est définie à 33 %, ce qui laisse suffisamment de place pour trois éléments de pied de page dans une seule rangée. Il y a également un peu de rembourrage ajouté sous chaque élément de pied de page. Le deuxième élément n'est qu'un rembourrage des listes de 15 pixels vers la gauche.
Maintenant, vous pouvez voir que le HTML et le CSS commencent à se rapprocher. Voici ce que vous devriez avoir jusqu'à présent :
Code WordPress
Pour le moment, nous avons un tas de liens HTML vides, sans aucun code WordPress réel. Remplaçons les listes sous Articles récents, Archives mensuelles et Archives quotidiennes par les équivalents des balises de modèle WordPress. Remplacez ce que vous avez actuellement par ce qui suit :
Les paramètres devraient être assez explicites, mais si vous n'êtes sûr de l'un d'eux, essayez de rechercher wp_get_archives dans l'outil de recherche de balises de modèle WordPress. N'oubliez pas que j'utilise simplement les balises de modèle wp_get_archives() comme espace réservé. Nous les remplacerons par d'autres widgets WordPress plus tard, après avoir ajouté des widgets au pied de page.
Ajouter des widgets
Pour cette section du tutoriel, j'emprunterai des parties de mon précédent tutoriel sur la création de widgets pour thèmes.
La première étape consiste à enregistrer les « barres latérales ». Pour ce faire, remplacez simplement le contenu actuel du fichier functions.php par le suivant :
'Barre latérale',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Pied de page',
'before_widget' => '',
'before_title' => '',
'after_title' => '
',
));
?>
Maintenant, nous allons aller dans sidebar.php et remplacer la balise conditionnelle de barre latérale dynamique actuelle par ceci :
Par ceci :
Maintenant, nous allons aller dans notre fichier footer.php et envelopper les éléments du pied de page dans leur propre balise conditionnelle de barre latérale respective. Juste avant le premier div « sidebar-item », ajoutez ce qui suit.
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Pied de page") ) : ?>
Juste après la dernière balise fermante « footer-item » div (et avant la balise « clear » que nous avons ajoutée précédemment), nous allons ajouter ce qui suit :
D'accord, maintenant notre barre latérale *et* notre pied de page devraient être widgetisés. Testons cela en ajoutant quelques widgets dans le pied de page. J'ajouterai un widget Blogroll, un widget Commentaires récents et un widget texte. Voici à quoi cela devrait ressembler :
Conclusion
Eh bien, ce sont les bases de l'ajout d'un pied de page widgetisé à votre thème. Vous voudrez peut-être ajouter des règles de style distinctes pour d'autres types de widgets tels que le calendrier ou la boîte de recherche. Cela ne fonctionnera probablement pas avec tous les thèmes, comme le thème RS12 par exemple, car il avait un pied de page non extensible.
Si quelqu'un souhaite le thème Green Rays mis à jour par hasard, vous pouvez le télécharger ici. De cette façon, vous pourrez voir où j'ai ajouté le code exactement. Vous pouvez également le comparer avec le thème original.
J'espère que le tutoriel vous a plu. Allez-vous ajouter un pied de page avec des widgets à votre thème ? Y a-t-il quelque chose dans le code que j'ai utilisé ci-dessus que vous feriez différemment ? Les questions, commentaires, suggestions et critiques sont les bienvenus, alors n'hésitez pas à vous exprimer dans les commentaires.
Leland,
Voici le lien pastebin pour mon fichier functions.php. Je l'ai posté sans votre modification. Votre aide est appréciée.
http://pastebin.com/m40073591
« J'essaie aussi de rendre mon pied de page personnalisable en utilisant votre étape, mais lorsque j'ajoute le code à functions.php, j'obtiens toujours le même message d'erreur :
Erreur d'analyse : erreur de syntaxe, '}' inattendue dans /home/………..redacted………/functions.php à la ligne 230
Je suis sûr que cela signifie qu'il me manque juste un '}' mal placé, mais le supprimer ne semble pas fonctionner. Aide ? »
Je rencontre les mêmes problèmes. Pourriez-vous donner quelques conseils ?
Merci,
Dave
as-tu finalement trouvé une solution ? J'ai le même problème mais il est apparu lorsque j'ai modifié le code de mon sidebar.php.
comment l'as-tu résolu ?
J'utilise 2 barres latérales, donc j'ai 2 fichiers sidebar.php. J'ai essayé de rétablir le code à son état d'origine mais sans succès. Je suppose que je devrai téléverser mon fichier php de sauvegarde, mais cela ne résoudra pas le problème, cela me permettra seulement de continuer à travailler sur mon site.
S'il y a des conseils, je les apprécierais.
merci
Je suis tombé sur ceci par hasard – excellent tutoriel tant par son contenu que par son style d'écriture – bien joué.
Ce tutoriel change ma vie ! Je n'ai jamais vu une explication aussi approfondie sur la façon de faire cela. Je suis en train de créer un nouveau look pour mon blog et wow… c'est exactement ce dont j'avais besoin. Merci beaucoup !!
[…] Ajouter un pied de page personnalisable à votre thème WordPress | Theme Lab (tags: wordpress tutoriel pied de page CSS) […]
@Lance : Cela dépendrait du thème, mais ce serait quelque part dans la div « footer » (quel que soit son nom).
Il semble que le pied de page de votre site ait une hauteur fixe, vous devriez donc probablement la corriger avant d'utiliser ce code.
Salut – Merci pour ce tutoriel mais je suis confus. Où dois-je mettre le code HTML que vous avez au début ?
J'ai les fichiers css et footer et je sais que je peux y mettre le code. Mais où va le code HTML réel ?
[…] boîte, des modèles d’archives et de recherche personnalisés, une page d’options et quatre zones de widgets (y compris un pied de page avec widgets). Ces fonctionnalités seront abordées […]
@Terri : Pas de problème ! Joli pied de page avec widgets, d’ailleurs. 🙂
ouuui ! Merci !
@Hannah : Oui, c'est ce que cela signifie. Bien qu'il me soit difficile de diagnostiquer le problème si je ne peux pas voir le code exact. Pourriez-vous éventuellement coller le code de votre fichier functions.php actuel sur une sorte de pastebin ? Quelque chose comme http://pastebin.com – merci !
Super tutoriel ! J’essaie de rendre mon pied de page avec widgets en utilisant votre étape, mais lorsque j’ajoute le code au functions.php, je reçois continuellement le message d’erreur :
Erreur d'analyse : erreur de syntaxe, '}' inattendue dans /home/………..redacted………/functions.php à la ligne 230
Je suis sûr que cela signifie que j’ai juste un ‘}’ mal placé, mais le supprimer ne semble pas fonctionner. Aide ?
[…] trouvé un bon tutoriel sur la façon d’ajouter des widgets au pied de page d’un thème. Les widgets ne sont pas seulement pour la barre latérale […]
@ezg : Ah… eh bien, je suis content que cela ait fonctionné pour vous.
@Jeffro : Merci, j’apprécie le partage, et je suis content que vous ayez aimé le tutoriel.
J’attendais un article comme celui-ci depuis longtemps. Je l’ai trouvé par moi-même, mais c’est toujours agréable d’avoir une référence sur laquelle s’appuyer. J’ai soumis ce truc à StumbleUpon 🙂
[…] Ajouter un pied de page avec widgets à votre thème WordPress | Theme Lab (tags : wordpress) […]
[…] domaine ), j'ai téléchargé le nouveau thème et j'ai commencé à y apporter mes modifications. La plus grande chose que j'ai faite a été d'ajouter un pied de page volumineux avec des widgets. Vous pouvez faire de même en utilisant le tutoriel lié de Leland chez Theme Lab. Principalement, je voulais faire […]
[…] Ajouter un pied de page avec des widgets à votre thème WordPress – qui a dit que les widgets ne servaient qu'aux barres latérales ? Je les ai vus utilisés dans de nombreux autres endroits, y compris les pieds de page, ce que vous apprendrez exactement à faire dans ce tutoriel. [Lien] […]
[...] http://www.themelab.com/2009/04/25/add-a-widgetized-footer-to-your-wordpress-theme/ [...]
Vous ne l'avez pas vu, car je ne l'utilise pas maintenant. Mais quand je l'ai activé, ça avait vraiment l'air génial. Plus tard, quand je réfléchirai aux widgets à utiliser, je l'activerai.
@ezg : Bien ! Je me demande juste, sur quel blog l'avez-vous utilisé ? J'ai vérifié l'URL que vous avez utilisée pour commenter ici, mais je n'ai pas vu le pied de page avec des widgets.
J'ai utilisé votre tutoriel sur mon blog. Ça a l'air vraiment cool.
Merci pour votre leçon. 🙂
@sriganesh : Ça marche, faites-moi savoir comment ça se passe pour vous.
merci. j'utilise maintenant elegant theme. que j'ai gagné dans un concours. regardez mon pied de page de thème.. merci beaucoup. , j'ai un petit problème-j'ai ajouté mes photos flickr. mais elles sont disposées de manière irrégulière. comme d'autres sites professionnels avec une bordure, je ne peux pas les aligner. pouvez-vous m'aider avec ça. j'ai essayé par moi-même pendant trois mois et j'ai ajouté des codes mais rien ne s'est passé.
[…] HTML ou pour un système de gestion de contenu (CMS) ? Selon vos compétences Ajoutez un pied de page avec des widgets à votre thème WordPress – themelab.com 04/25/2009 L'inspiration pour ce tutoriel vient d'un tweet que j'ai reçu avec […]
joli tutoriel, je vais essayer ça, car j'ai besoin de quelque chose comme ça. visitez mon site. j'aimerais avoir la même chose que ce qui est mentionné ici.
Ne vous méprenez pas, j'adore le tutoriel et tout... mais pour être tout à fait honnête, j'ai l'impression que vous nous avez un peu arnaqués... comme si nous voulions savoir comment VOUS avez fait VOTRE en-tête, vous savez ? Ce n'est pas une attaque personnelle, mais j'ai l'impression d'avoir été un peu floué en recevant un pied de page textuel fade et ennuyeux....
Si vous pouviez, s'il vous plaît, nous dire comment vous avez fait le VÔTRE, ce serait génial. Et ne vous contentez pas de dire « mettez votre image derrière... » Je veux dire comment vous l'avez fait pour de vrai. Merci....
J'ai fait tout ce que vous avez dit et je ne sais pas comment « faire glisser » les widgets... ? Je ne vois nulle part où les faire glisser....
Vous faites cela dans votre panneau d'administration WordPress sur la page des widgets. Par « faire glisser », j'entends simplement placer les widgets dans les différentes zones de widgets.
Désolé que vous vous sentiez « arnaqué », mais je voulais écrire un tutoriel qui puisse s'appliquer à presque tous les types de thèmes.
Pour information, je n'utilise même aucun widget WordPress dans le pied de page et l'en-tête de ce site, ils sont codés en dur.
Je ne suis pas sûr à quel point il aurait pu être plus détaillé. Si vous êtes un concepteur web et que vous avez une idée de ce qu'est WordPress, alors vous saurez comment accomplir le reste. Son tutoriel était parfait.