Ajouter des widgets sur la home page

L’une des pages phare de votre site WordPress est sans nul doute la page d’accueil. Cette dernière se doit de refléter au mieux le contenu et la ligne éditoriale de votre site. Pourtant, sa structure n’est pas toujours adaptée à nos besoins. Pour corser le tout, modifier la boucle qui affiche vos articles n’est pas évident.

Le résultat, ce sont des pages d’accueil qui partent un peu dans tout les sens, au sein des quelles il est compliqué de voir comment le site s’architecture.

Organiser grâce aux Widgets

Ordonnancer son contenu en première page est important, la façon dont vous allez présenter vos articles va donner le ton de site. Il est, je crois, primordial de pouvoir identifier de quoi vous parlez. Cela passe par la mise en avant de catégories et/ou d’articles dans le but d’orienter vos visiteurs vers l’intérieur du site. Ces préceptes sont sans doute simple à comprendre, les mettre en œuvre et les traduire techniquement est une autre paire de manches. Notez qu’il faut également du temps pour trouver le bonne équilibre dans la conception de votre page.

Une des solutions possibles pour prendre la main intégralement sur votre accueil passe par les widgets. Il va donc vous falloir mettre les mains dans le code. Dans tout les cas, ce passage est obligatoire si vous souhaitez contrôler totalement les divers aspects de votre site WordPress.

Réfléchir avant d’agir

La première des choses est de bien étudier votre fichier index.php. C’est au cœur de ce fichier que vous devrez travailler. IL vous faut donc savoir quel balise div affiche quelles informations, pour pouvoir, dans un premier temps, supprimer le contenu actuel, et dans un second temps, ajouter vos sidebar.

Une connaissance des langages HTML et CSS est donc requis. Mais si vous n’y connaissez rien, que cela ne vous empêche pas de mettre en maquette en place et de vous lancer.

Les avantages des Widgets

En widgetisant totalement notre accueil, nous aurons à notre disposition un ensemble de bloc dans les quels nous viendront placer nos contenus. Ces contenus peuvent être une liste d’articles, des publicités, des liens, et ainsi de suite.Sachant qu’un grand nombre de widget peuvent être utilisés plusieurs fois sur la même page, mais avec des paramètres différents, je vous laisse imaginer les possibilités offertes.

Création des sidebars

Tout d’abord, nous devons créer nos espaces. Pour cela, nous allons faire appel à la fonction register_sidebar. Chaque espace créé est une sidebar. Pour chaque bloc, vous pouvez créer une sidebar.

Copier coller le code ci-après dans votre fichier functions.php

	register_sidebar(
		array(
			'id' => 'home-droite',
			'name' =>'accueil-droite',
			'description' => 'Accueil, colonne droite',
			'before_widget' => '<div id="home-right" class="%2$s widget-%2$s"><div class="featured-inside-droite">',
			'after_widget' => '</div></div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);

Pensez bien à adapter ce code à besoins, pour cela il vous faut ajuster les paramètres id, name, description.
Vous pouvez aussi ajuster la les noms des bloc div que sont ‘home-right’ et ‘featured-inside-droite’.
Enfin, il vous faut créer les règles CSS correspondantes dans votre feuille de style.

Modifier le fichier index.php

Nous allons désormais ajouter nos sidebars à notre fichier index.php.
Comme toujours, faites une copie de sauvegarde de ce dernier avant toutes modifications.

<div class="widfeat w4right">
	<h2 class="m4index">WordPress : A ne pas rater </h2>

                <!-- FONCTION QUI AFFICHE MA SIDEBAR -->
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("accueil-droite") ) : ?>
		<?php endif; ?>
                <!-- FONCTION QUI AFFICHE MA SIDEBAR -->

</div>

Le morceau de code ci-dessus ajoute la sidebar « accueil-droite » à ma page d’accueil. Ensuite, pour chaque sidebar créée, il me suffit désormais d’ajouter là où je souhaite afficher mes widgets dans ma page.

Il est quasiment impossible de vous donner un schéma didactique complet, chaque thème propose ses propres balises div. Aussi, il vous faudra tâtonner, tester, rater, recommencer pour trouver la formule qui convient à votre site.

URL courte : http://4h18.com/6331