L’inspiration pour ce tutoriel vient d’un tweet que j’ai reçu avec des commentaires sur le prochain thème RS12.
Bien que le pied de page widgetisé n’ait finalement pas été intégré à la version du thème RS12, j’ai décidé d’écrire ce didacticiel pour montrer aux gens exactement comment ajouter un pied de page widgetisé à leur thème. Dans ce guide, vous apprendrez :
- Le code HTML et CSS nécessaire pour produire le pied de page widgetisé.
- Comment ajouter des balises de modèle WordPress couramment utilisées en tant qu’espaces réservés
- Comment widgetiser le pied de page et placer des widgets à l’intérieur
Il y aura beaucoup de code dans ce post, donc si vous êtes partant, lisez la suite…
J’utiliserai le thème WordPress Green Rays comme exemple dans ce tutoriel. Pour le moment, le pied de page n’a qu’un message standard de “copyright” et des crédits.
le HTML
La première étape consiste à ajouter le balisage HTML. Disons que nous allons avoir trois sections différentes dans le pied de page avec des widgets répertoriant les derniers messages, les archives mensuelles et les archives quotidiennes. Nous placerons ce code HTML au-dessus de la ligne “copyright” actuelle.
Fondamentalement, ce code place chaque “widget” dans une div. À l’intérieur de chaque widget se trouvent un en-tête et une liste non ordonnée avec des liens. Oui, je sais que les liens ne vont 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 n’a pas l’air aussi bien sans style CSS. Ajoutez le code suivant à votre feuille de style.
.footer-item {
flotteur gauche ;
largeur : 33 % ;
arrière-plan rembourré : 10px ;
}
.footer-item ul {
rembourrage à gauche : 15 px ;
}
Ce que fait ce code est de faire flotter chaque élément de pied de page vers la gauche, ce qui signifie essentiellement qu’ils peuvent être côte à côte. La largeur est définie sur 33 %, ce qui laisse suffisamment de place pour trois éléments de pied de page sur une seule ligne. Un peu de rembourrage est également ajouté sous chaque élément de pied de page. La deuxième pièce consiste simplement à remplir les listes de 15 pixels vers la gauche.
Vous pouvez maintenant voir que HTML et CSS commencent à se rejoindre. Voici ce que vous devriez avoir jusqu’à présent :
Code WordPress
Pour le moment, nous avons un tas de liens HTML vides, sans code WordPress réel. Remplaçons les listes dans les publications récentes, les archives mensuelles et les archives quotidiennes par les balises de modèle WordPress équivalentes. Remplacez ce que vous avez actuellement par ce qui suit :
Les paramètres devraient être assez explicites, mais si vous n’êtes pas sûr de l’un d’entre 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 échangerons avec d’autres widgets WordPress plus tard, après avoir ajouté le pied de page.
Widgetiser
Pour cette section du didacticiel, j’emprunterai des parties de mon précédent didacticiel sur le thème du widget.
La première étape consiste à enregistrer les “barres latérales”. Pour ce faire, remplacez simplement le contenu actuel du fichier functions.php par ce qui suit :
if(function_exists(‘register_sidebar’))
register_sidebar(tableau(
‘nom’ => ‘Barre latérale’,
‘avant_widget’ => ‘
‘,
‘before_title’ => ‘
‘,
‘after_title’ => ‘
‘,
));
if(function_exists(‘register_sidebar’))
register_sidebar(tableau(
‘nom’ => ‘Pied de page’,
‘avant_widget’ => ‘
‘,
‘before_title’ => ‘
‘,
‘after_title’ => ‘
‘,
));
?>
Nous allons maintenant aller sur sidebar.php et remplacer la balise conditionnelle actuelle de la barre latérale dynamique par ceci :
Avec ça:
Nous allons maintenant entrer dans notre fichier footer.php et envelopper les éléments de pied de page dans leur propre balise conditionnelle de barre latérale respective. Juste avant le premier div “élément de barre latérale”, ajoutez ce qui suit.
Juste après la dernière div “footer-item” de fermeture (et au-dessus de la div “clear” que nous avons ajoutée plus tôt), nous ajouterons ce qui suit :
Ok, maintenant le pied de page de la barre latérale devrait avoir un widget. Testons-le en ajoutant des widgets dans le pied de page. Je vais ajouter un widget Blogroll, un widget Commentaires récents et un widget Texte. Voici à quoi cela devrait ressembler :
conclusion
Eh bien, c’est la base de l’ajout d’un pied de page widget à votre thème. Vous pouvez ajouter des règles de style distinctes pour d’autres types de widgets, tels que le calendrier ou le champ 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 veut par hasard le thème Green Rays mis à jour, il peut le télécharger ici. De cette façon, vous pouvez voir exactement où j’ai ajouté le code. Vous pouvez également le comparer au thème original.
J’espère que vous avez aimé le tutoriel. Ajouterez-vous un pied de page widgetisé à votre thème ? Y a-t-il quelque chose dans le code que j’ai utilisé ci-dessus que je ferais différemment? Les questions, commentaires, suggestions et critiques sont les bienvenus, alors n’hésitez pas à vous exprimer dans les commentaires.
