Options Theme : comment widgetiser votre footer

Options theme widget footerLe thème Options utilisé pour faire ce site a été conçu par Justin Tadlock. Il n’est plus en développement et on ne peut plus le télécharger sur le site de Justin : l’auteur se consacre à d’autres projets axés sur son thème Hybrid. « Options Theme » est donc périmé, mais il a de beaux restes ! Il est toujours compatible avec WordPress version 2.8, ou presque.

Pour ceux que cela intéresse je mets à disposition la traduction que j’en ai faite, très imparfaite : options theme 1.3.1_fr-FR

Venons-en au sujet principal de ce billet : comment widgetiser le footer de ce joli thème ? En français : comment créer une zone pour afficher des trucs dans le pied de page ? La solution est donnée ici, j’en ai fait une adaptation en français.

Tout d’abord, il faut modifier le fichier options/library/functions/widgets.php en ajoutant __(‘Footer’,’options’) juste après $op_sidebar_name = array

de façon à obtenir :

1
2
3
4
5
6
7
8
9
10
11
12
13
$op_sidebar_name = array(
		__('Sidebar Home','options'),
		__('Sidebar Single','options'),
		__('Sidebar Archive','options'),
		__('Sidebar Attachment','options'),
		__('Sidebar Page','options'),
		__('Sidebar Category','options'),
		__('Sidebar Tag','options'),
		__('Sidebar Search','options'),
		__('Sidebar Author','options'),
		__('Sidebar 404','options'),
		__('Footer','options'),
	);

Maintenant, vous devez widgetiser le footer.

Ouvrez pour cela le fichier options/footer.php et ajoutez :

1
2
3
4
5
6
7
8
9
10
11
12
<div id="footerwidgets">
  <?php $op_sidebar_id = __('Footer','options'); ?>
  	<?php
		if(dynamic_sidebar($op_sidebar_id)) :
		else :
			if(dynamic_sidebar(__('Footer','options'))) :
			else :
				_e('Add content to your footer through the widget control panel.','options');
			endif;
		endif;
	?>
</div>

Donc options/footer.php ressemble maintenant à ça :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
</div>
 
		<?php get_sidebar(); ?>
<div id="footerwidgets">
  <?php $op_sidebar_id = __('Footer','options'); ?>
  	<?php
		if(dynamic_sidebar($op_sidebar_id)) :
		else :
			if(dynamic_sidebar(__('Footer','options'))) :
			else :
				_e('Add content to your footer through the widget control panel.','options');
			endif;
		endif;
	?>
</div>
</div>
<div id="footer">
		<?php op_footer(); // Footer hook ?>
		<?php wp_footer(); // WP footer hook ?>
	</div>
</div>
</div>
 
</body></html>

Enfin, vous devez définir le style des widgets de votre footer dans le fichier style.css de votre thème.

Par exemple, dans mon thème si je veux définir 3 colonnes de widgets je rajoute dans mon fichier style.css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Footer widget styling */
#footerwidgets { clear: both; background-color: #342020; }
#footerwidgets .menu { width: 32%; float: left; background-color: #342020; margin: 6px; }
#footerwidgets .menu .post { margin-bottom: 2px; }
#footerwidgets .section-header {
	color: #BDDE4E;
	background: #3D2A24;
	border: 1px solid #222;
	padding: 3px 5px;
	margin: 0 0 10px 0;
}
#footerwidgets ul { padding-left: 5px; }
#footerwidgets ul { padding-right: 5px; }
#footerwidgets ul li { list-style-type: none; }
#footerwidgets ol { padding-left: 15px; }

Si je veux définir 4 colonnes de widgets je rajoute dans mon fichier style.css :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* Footer widget styling */
#footerwidgets { clear: both; background-color: #342020; }
#footerwidgets .menu { width: 23%; float: left; background-color: #342020; margin: 9px; }
#footerwidgets .menu .post { margin-bottom: 2px; }
#footerwidgets .section-header {
	color: #BDDE4E;
	background: #3D2A24;
	border: 1px solid #222;
	padding: 3px 5px;
	margin: 0 0 10px 0;
}
#footerwidgets ul { padding-left: 5px; }
#footerwidgets ul { padding-right: 5px; }
#footerwidgets ul li { list-style-type: none; }
#footerwidgets ol { padding-left: 15px; }

Rendez-vous ensuite dans l’interface d’administration des widgets pour remplir votre footer, de façon à obtenir au final ceci :

Options Theme  comment widgetiser votre footer

Le code est bien sûr à adapter en fonction des couleurs, des dimensions et de la disposition de votre thème. Et vous pouvez procéder de la même façon avec n’importe quel thème.

« Hope this helps anyone wanting to do the same. »


Partager cet article :

  • Facebook
  • Twitter
  • LinkedIn
  • Viadeo
  • MySpace
  • FriendFeed
  • Digg
  • del.icio.us
  • StumbleUpon
  • Technorati
  • Scoopeo
  • Yahoo! Bookmarks

Poursuivre votre lecture

A propos de l'auteur

Conseiller en recrutement, il travaille en particulier dans le secteur des industries graphiques, la régie de personnel informatique, et pour de grands projets de construction industriels pour le compte des sociétés Vale, Hatch et Technip.

8 Réponses à “Options Theme : comment widgetiser votre footer”


  1. Bonsoir,
    Merci pour ce partage, c’est vrai que c’est un très beau thème. En ce qui me concerne, je préfère rester avec mon thème actuel mais celui-ci va probablement en intéressé plus d’un !

  2. Bonjour Maos,

    Merci pour le commentaire. En fait le thème Options est discontinué : il n’est plus mis à jour par l’auteur. Donc il finira par devenir incompatible avec WordPress, sauf si on fait soi-même les modifs pour conserver sa compatibilité (mais faut s’y connaître).

    Là par exemple, je suis embêté parce que si je mets mon site en mode Php5 ça plante l’interface d’administration des widgets. Et je n’ai pas trouvé ce qui cloche : sûrement un problème de compatibilité entre plugins. Or les m.à.j. des plugins nécessitent de plus en plus Php5 : donc ça me limite.

    Le thème actuel de Justin Tadlock, Hybrid, permet de faire beaucoup de choses aussi et j’essaierai de l’adapter à mon site pour avoir un thème de rechange. Le thème que tu utilises, iNove, est excellent : bien fait, simple à adapter, esthétique. J’aime bien aussi le thème Typographie, ou encore Atahualpa.

  3. Je te souhaite bon courage alors pour tous ces projets. ;)

  4. Joli tutorial, et j’avoue que le rendu final est excellent !
    Bonne continuation !

  5. Super tutorial, merci beaucoup pour le partage, je pensais justement widgetiser le pied de page de mon blog !

  6. bon tutoriel, bien écrit et présenté. J’ai pu mettre en place un beau footer et je vous en remercie :)

  7. Merci pour ce tuto, je cherchais un moyen de le faire sur un nouveau blog que je vais lancer !

  8. Merci pour cette astuce Fabien ! Je comptais justement le mettre en place sur le nouveau blog que je suis en train de préparer ! J’aime bien l’image que tu as choisi en illustration ;)
     


Laisser un commentaire

:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: