Création Thème Wordpress | Tutorial #10: la Sidebar: le formulaire de recherche

04 mai

Création Thème Wordpress | Tutorial #10: la Sidebar: le formulaire de recherche

tutoriels. 15 557 lectures

Ce tutoriel est le dixième d’une série articles sur la création d’un thème pour Wordpress de A à Z. Si vous prenez le train en cours, je vous conseille fortement de commencer par le premier tutoriel de la série.
Aujourd’hui, on va “attaquer” la sidebar. Alors, cette fameuse sidebar, elle a une placce particulière dans le coeur des blogueurs On aime bien la customiser, y faire apparaître différentes choses selon ses besoins. C’est vraiment un élément central du blog. De la position et du nombre de colonnes de la sidebar va en grande partie dépendre la longueur des visites. Alors, pour commencer, on ne va parler customisation. On va juste créer une sidebar simple, formée de différentes listes. Vu qu’on n’a pas encore parlé “style”, cette sidebar va logiquement venir se loger sous le contenu.

Pour commencer, on va déjà ouvrir le template index.php, où l’on va écrire une petite ligne de code qui va nous permettre de relier l’index et la sidebar. Cette ligne en PHP est, comme on l’a déjà vu précédemment, ce qu’on appelle un “template tag”. Ajoutez donc cette ligne après la fermeture de la DIV “content” et avant la fermeture de la balise BODY:

1	<?php get_sidebar(); ?>

Ensuite, ouvrez le fichier sidebar.php que vous avez créé dans un des premiers tutoriels. Pour le moment, ce fichier est vide. On va commencer par lui donner une “boîte”, une DIV pour envelopper tout le contenu de la sidebar. Ici, on va associer la DIV à une “class” et non à une “id”. En effet, on va peut-être par la suite réutiliser ces informations de style, et pour cela, il nous faut utiliser une classe. C’est également ici que l’on va créer une liste (balise UL). En fait, notre sidebar va apparaître comme une longue liste.

Ajouter donc le code suivant à votre template “sidebar”:

<div class="sidebar">
<ul>
</ul>
</div>

Tout ce que l’on va ajouter par la suite devra être compris entre ces deux balises.

1. Insertion du formulaire de recherche:

On va commencer à remplir notre sidebar avec le formulaire de recherche. On ne commence pas forcément avec le plus simple, mais bon, c’est le genre d’outil qui peut être utile et donc ce sera toujours mieux de le placer dans les premières places de la sidebar pour être facilement accessible.

Pour afficher le formulaire de recherche, il va déjà falloir le créer. Alors, chaque créateur de thème voit ce formulaire de manière quelque peu différente. Pour notre exemple, on va prendre le formulaire de base, celui du thème par défaut de Wordpress. Il vous faut donc créer un nouveau fichier, searchform.php et y ajouter les lignes de code suivantes:

<form method="get" id="searchform" action="<?php bloginfo('home'); ?>/">
	<div>
		<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="Chercher" />
	</div>
</form>

Ici, on crée une “form”. Pour faire simple, cette forme va nous permettre d’aller chercher dans le blog les articles en relation avec notre recherche. Les deux lignes “input” correspondent à l’espace laissé pour la saisie des mots de recherche et à la création du bouton “chercher”. Précisons en passant que le fait que “déclencher” la recherche va entraîner une requête dans la base pour faire apparaître les articles correspondants. Si vous souhaitez que le bouton apparaisse sous le formulaire, ajoutez <br /> à la fin de la première ligne “input”.

Enregistrez ce nouveau template et fermez-le. On n’y touchera plus !!

Maintenant qu’on a créé notre template searchform.php, on va le relier à la sidebar dans notre template sidebar.php. Pour cela, on va ajouter une ligne à cette liste (balise LI) que l’on a créé tout à l’heure et on va lui ajouter un peu de code pour aller chercher les infos dans le template “searchform”. Enfin, on va donner une ID à ce formulaire pour pouvoir y faire des modifications de style par la suite:

1	<li id="search"><?php include(TEMPLATEPATH . '/searchform.php'); ?></li>

Ici, TEMPLATEPATH va nous donner le chemin direct vers le template searchform. Sauvegardez votre template sidebar. Ouvrez votre navigateur pour afficher le blog en construction. Sous les articles, vous voyez apparaître le formulaire de recherche, premier point de notre sidebar. D’ailleurs, en parlant de “point”, ne vous inquiétez pas si vous n’aimez pas le point à gauche du formulaire, on le retirera par la suite dans la feuille de style !!

Voilà, c’est tout pour aujourd’hui !! Ca fait pas grand chose me direz-vous mais je ne veux toujours pas faire des billets à ralonge et rien que ça vient de me prendre 1h20 à rédiger…;-)

Bon week-end et à la semaine prochaine pour la suite !!

Tutoriel n°11: “la sidebar, 2ème partie”

Fran6

24 Commentaires pour “Création Thème Wordpress | Tutorial #10: la Sidebar: le formulaire de recherche”

Flux commentaires de ce billet Adresse du trackback

1

encore un tuto très clair et bien pensé.
merci fran6 pour ce boulot qui doit te prendre du temps….

Cyril , le 4 mai 2007 à 17:30
2

Pas de soucis Cyril !! Cette semaine a été un peu chaude parce que je commence une expo. J’ai accroché hier et j’ai dû y retourner aujourd’hui… Et puis, tous ces ponts n’arrangent rien !!! Bon week-end !! Et encore merci pour ton soutien !

fran6art , le 4 mai 2007 à 18:17
3

Merci Francis, à force je vais finir par me lancer et faire mon propre théme “from scratch” Vivement la suite…
Le bouquin en vente sur Amazon c’est pour quand ?

Nicolargo , le 4 mai 2007 à 20:51
4

Merci pour ce super tuto qui montre bien toute les étapes une par une, sans trop stresser

Seb , le 15 mai 2007 à 0:14
5

Merci
Encore je dirais mettre en gras les fichiers que l’on va ouvrir, index.php en premier, puis sidebar.php

Précisez dans “Tout ce que l�??on va ajouter par la suite devra être compris entre ces deux balises.” que ce sont les balises ul

[...]

daria dit bouleto , le 17 juin 2007 à 15:57
6

salut Fran6,
petite question : je souhaite intégrer la case de recherche dans le Header et non plus dans la Sidebar. Est-ce qu’il suffit de transposer ce tuto en remplaçant sidebar par header, ou est-ce que c’est plus compliqué ?
merci d’avance,
Lomig

lomig , le 22 juin 2007 à 14:45
7

j’ai ma réponse : j’ai testé ça marche…!
merci pour ce tuto bien efficace…:)
sinon question subsidiaire au maître : il m’affiche un point avant le formulaire (normal li c’est un point). Donc je suis allé dans ma feuille de style CSS : et j’ai ajouté #header ul li { list-type : none;} … et ça ne marche pas ! tu vois d’où ça peut venir ?
merci d’avance, et encore bravo pour cette série que je reviens consulter récemment !

lomig , le 22 juin 2007 à 15:04
8

Visiblement, t’as trouvé la réponse à la première question et pour le point je mettrais plutôt list-style-type: none;
Essaies voir avec ça, ça devrait fonctionner !

Francis , le 22 juin 2007 à 15:16
9

Bonsoir ! j’ai un soucis avec mon fichier searchform.php

Quand j’affiche ma page, il me dit que la fonction the_search_query() n’existe pas.

Pouvez vous m’aider merci

Inno , le 6 juil 2007 à 17:54
10

Inno > il doit y avoir une erreur de saisie quelque part…

Francis , le 6 juil 2007 à 18:10
11

En changeant the_search_query() pour (thème par défaut de WP), ça marche… ça viendrait pas de mon easyphp au cas où ? (non parce que j’ai laissé mon thème en cours chez mon petit frère et comme je veux bosser dessus j’ai du en refaire un, et chez lui ça marchait)

Inno , le 6 juil 2007 à 18:46
12

Salut,

Pour quoi utiliser “include(TEMPLATEPATH . ‘/searchform.php’);” et pas un “get_searchform.php” ?

seb , le 3 août 2007 à 18:44
13

Salut Seb,

On a ici l’URL du template searchform.php donc c’est pour ça que l’on utilise cette forme. On utiliserait “get_searchform” si le template s’appelait comme ça, c’est tout. Ce n’est pas un template tag, mais un “lien” vers une URL.

Francis , le 6 août 2007 à 9:53
14

Salut,

Encore merci pour ces jolis tutoriaux.

Je voudrai te demander, que veu tu dire par :

”Ici, TEMPLATEPATH va nous donner le chemin direct vers le template searchform.”

Le chemin direct ? je n’ai pas compris

Merci ^^

vymDiesel , le 22 août 2007 à 14:29
15

vymDiesel > En fait, ça veut dire que WP va suivre le chemin des templates pour aller chercher celui de la recherche. Pas besoin ici d’URL… Je ne sais pas trop comment expliquer différemment….

Francis , le 22 août 2007 à 15:05
16

Oui, je crois avoir compris, je n’avais pas saisit CHEMIN dans ce sens la ^^

Merci

vymDiesel , le 22 août 2007 à 15:20
17

Bonjour, Francis

Merci pour tout ce travail que tu fourni. Sacré boulot, clair et net :p
Cela dit, j’ai un petit problème, ma slide barre s’affiche en bas du blog, non sur le coté. Je viens de relire tout le tuto 3fois, au cas où je sois passé à coté, mais je ne vois pas…
j’ai essayée de déplcaer le code, du coup la barre mange la moitié de mes billets.
Une petite réponse svp

Merci d’avance

kiss kiss bang bang

wag , le 6 mar 2008 à 14:29
18

Bonjour,
j’aimerais savoir comment intégrer les widgets plutot qu’une sidebar programmée

Merci d’avance

j’ai trouvé ceci sur le forum
(dans sidebar.php)

// …. le reste du code existant dans sidebar.php
// ….

et dans fichier functions.php

// …. le reste du code existant dans sidebar.php
// ….

c’est comptatible ici?

Merci d’avance

marin , le 17 avr 2008 à 9:52
19

salut francis

un TOUT GRAND MERCI pour tutoriels !! ils m’ont vraiment aide a (commencer a) comprendre comment tout cela fonctionne.

mon theme fonctionne, mais j’aimerais le customiser un peu plus, notamment en rajoutant une 3eme colonne, pour en avoir une a gauche et une a droite du contenu principal. et la, quoique je fasse, ca ne marche pas :-(((

j’en vois des themes qui utilisent :

d’autres qui utilisent :

parfois dans le div du contenu, parfois en dehors, parfois meme avec leur propre div :

parfois une combinaison de div et de get_sidebar

bref, je ne comprends plus rien !!! avec ce tres joli theme que tu nous as aide a realise, quel serait la meilleure methode pour rajouter une colonne a gauche ?

merci encore !

tina , le 4 mai 2008 à 19:19
20

Bonjour,

Vous dites :

”Ajoutez donc cette ligne après la fermeture de la DIV “content” et avant la fermeture de la balise BODY:”

C’est pas plutôt :

”Ajoutez donc cette ligne après la fermeture de la DIV “content” et avant la fermeture de la DIV “page”:”

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

Anthony , le 7 avr 2009 à 13:17
21

Bonjour,

Grace à ton tutoriel vraiment très performant, je suis parvenu jusqu’à l’étape de validation du code html (après avoir tout recommencé depuis le début, puis quelque rectifications tout de même): la fenêtre verte validant le code confirme donc que celui-ci est acceptable.

Or, dès que j’ai commencé, via le fichier CSS qui est bien dans le dossier du site, à introduire le code css, cela n’a eu aucun effet sur l’agencement du blog: rien n’a bougé.
Y aurait-il une explication simple? Un oubli de ma part?

Merci par avance de tes lumières,
cordialement,

Kamigamo , le 9 juin 2009 à 8:37
22

Tu as dû oublier de mettre la ligne concernant la feuille de style dans l’entête du fichier header.php, non ?

Francis , le 9 juin 2009 à 8:53
23

Bonjour je suis ton tutoriel, on me l’a conseillé, je suis sous Mac et débutante en internet et blog et tout, tout est nouveau même les mails pour moi…
Je dois faire tout un tas de bêtises.
Enfin, la sidebar doit elle être à droite ?
Car moi tout le long du tutoriel elle se trouve en dessous des articles et du coup quand j’arrive au tuto pour valider eh bien je n’ai pas du tout la même chose que tu proposes en copie d’écran !

Je ne sais pas comment la faire se positionner à droite cette sidebar !
Aurais tu une explication pour moi, qui n’ai pas du voir les choses correctement ?

Léa , le 9 juin 2009 à 12:59