Francis Chouquet Graphiste Lettering

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

0

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 »:

1 2 3 4 
<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:

1 2 3 4 5 6 
<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 »

Et si ça vous intéresse, avec des amis, on a créé notre boutique de ventes de thèmes WordPress, Peaxl. Venez jetez un oeil ! 😉

Fran6

49 Commentaires

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

  • 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 !

  • 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 ? 😉

  • Seb

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

  • 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

    […]

  • 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

  • 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 !

  • 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 ! 😉

  • Inno

    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 > il doit y avoir une erreur de saisie quelque part…

  • Inno

    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)

  • seb

    Salut,

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

  • 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.

  • 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 > 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…. :mrgreen:

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

    Merci

  • wag

    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

  • 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

  • tina

    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 !

  • 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”: »

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

  • 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,

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

  • Léa

    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 ?

  • Stéphane

    Bonjour Francis
    Bonjour à tous,

    Excellent tuto. Je me régale.

    Une question: l’emploi d’une balise li est-elle la mieux appropriée? La liste de ce qui est créé étant « hétérogène », des boites DIV ne seraient-elles pas mieux adaptées CSSment parlant?

  • Merci ! très clair ! Je suis débutante et tu m’apportes une aide précieuse. Bravo !

  • Bonjour,

    Merci de mettre ton savoir à la portée de tous.
    Je suis en train de refaire le site de l’association pour laquelle je travaille.
    Je me suis renseignée sur un maximum de choses, et je bute dès le début.
    En fait, tout fonctionne bien sauf que mon header refuse de s’afficher.
    En gros, mes billets s’affichent, ma sidebar également, mais le head, et le header n’apparaissent pas.
    J’ai bien copié tout ce que tu avais mis, j’ai également essayé en mettant changeant l’encodage …
    Bref, ça n’apparait pas.
    Peux-tu me dire pourquoi s’il te plaît?
    As-tu besoin de plus d’éléments pour me répondre? Je pense que si ça ne s’affiche pas du tout l’erreur doit être évidente.

    Merci encore beaucoup.
    Bonne journée

  • Désolée pour le dérangement, je me suis rendue compte seule de mon erreur.

    Merci encore.

  • salut Francis,
    j’ai un petit souci avec le php. J’ai terminé la partie encodage php mais la fonction recherche ne fonctionne pas. j’ai le bouton « chercher » au dessus duquel est inscrit « form method= »get » id= »searchform » action= »http://www.sneakers-actus.fr/ »>  » sur la page de mon nouveau site… Merci ‘avance pour ton aide.

  • hatfab

    Le format et le rythme des billets est parfait. Bravo !

  • Merci pour le tuto, on est quasi en 2011, et ce tuto est toujours d’actualités.

    Normalement j’utilise Joomla (on en est quasi à la 1.6), mais WordPress est très séduisant !

    joyeuses fêtes à tous !

  • PatDoc

    Très clair ! Merci beaucoup pour ton dévouement !!

  • Pier-Luc

    salut a toi Fran6…jai un petit probleme, je n’arrive plus a retrouver le centre de config de wordpress, quand j’écrit http:/localhost/wordpress on me ramenne a mes article de blogg…suis-je si nul! lol

  • onegalsen

    slt Francis
    je suis pas à pas ton tuto
    arriver à cette partie du tuto … j’ai toujous rien d’afficher sur ma page en construction
    Est ce normal??
    merci pour les explications

    je suis sous windows xp

  • onegalsen

    j’ai ceci dans le code source de la page

    <a href="

    Fatal error: Call to undefined function blodinfo() in C:\xampp\htdocs\wordpress\wp-content\themes\mon_theme_wordpress\header.php on line 28

    pourtant j’ai bien mis

    <a href="

    en dessous de

    dans le header.php

  • ’ai un petit souci avec le php. J’ai terminé la partie encodage php mais la fonction recherche ne fonctionne pas. j’ai le bouton “chercher” au dessus duquel est inscrit “form method=”get” id=”searchform” action=”http://www.sneakers-actus.fr/”> ” sur la page de mon nouveau site… Merci ‘avance pour ton aide.

  • lowess

    Bonjour,
    j’ai eu à ajouter :
    __
    dans mon fichier sidebar.php j’ai pu apercevoir le formulaire, de même
    __
    j’ai aussi eu la présence du formulaire, j’aimerais alors savoir quelle est la différence et l’utilité de ces différentes syntaxe et quel pourrait être la conséquence d’utiliser la deuxiéme au lieu de la première comme le veux le tutoriel.

    Merci par avance d’éclairer ma lanterne.

    Cordialement

  • lowess

    Salut
    Je remarque après mon poste que les élément php suivant des tirets ne s’affichent pas,
    il s’agit en effet de la façon dont on lie un fichier à un autre le cas cité dans ce chapitre(la liaison du module de recherche à la sidebar: inlcure….) et le cas ou on a lié le header à l’index (get_…) j’espère que je suis assez explicite si tel n’est le cas veuillez me relancer le sujet afin que je prenne d’avantage de précaution pour formuler ma demande

  • Bonjour,

    Pourquoi ne pas utiliser la formule :
    get_template_part(‘searchform’);
    plutôt que
    include(TEMPLATEPATH . ‘/searchform.php’);

    La première solution fonctionne pourtant aussi.
    Sans doute que la seconde à des intérêts que la première n’a pas, mais lesquels ?

    Merci et bravo !!

  • noixdecoco

    Bravo!
    Peut être aurait pût t’on préciser où placer le fichier searchform créé ?
    Je continue!

  • Merci ! aussi il y a un typo dans 2e paragraphe : il y a 2  »c » à  »place ».
    Bonne journée

  • Edgar DENIS

    Bonjour, j’ai suivi le tuto depuis le début (et compte bien le suivre jusqu’à la fin, car il est très bon ! #ThanksALot).
    Cependant j’ai un soucis sur cette étape. En effet, j’ai tout fait comme il faut, mais sur mon site apparaît non seulement le module de recherche, mais également des catégories que je ne souhaite pas afficher : Pages, Archives, Catégories, Liens, Méta (avec des liens vers des sites intenets qui n’ont rien à voir avec mon WordPress…)

    Comment faire pour faire disparaître ces éléments supplémentaires ?
    J’espère que quelqu’un saura me répondre (même si on est mi-juillet et que tout le monde est en vacances au bord de la mer 😉 !)

  • Agraphe

    J’ai le même problème qu’Edgar DENIS.

    Je pense que WordPress a été mis à jour entre ce tuto et maintenant. Du coup il importe par défaut toutes ces informations avec une des commandes php inscrites dans ce tuto. (Je ne sais pas laquelle).

    Je ne suis pas certain cela dit donc si quelqu’un passe par là et souhaitait éclairer ma lanterne ce serait bien !

  • Agraphe

    Rebonjour, j’ai trouvé mon erreur. Peut être que ça peut aider Edgar DENIS également ou d’autres qui passent par là.

    En ce qui me concerne, j’avais mal nommé mon fichier php (j’avais écris siderbar.php), par conséquent WordPress est sûrement allé chercher un autre fichier par défaut qu’il garde en remplacement lorsqu’on utilise la method get_sidebar.

  • merci pour le tutoriel
    j’est utiliser

  • DimDisaster

    Hello et mer6 Franc6 ^^

    Ayant un blog en local sous WP (que j’aimerais lancer un de ces 4) j’apprécie ce tuto.
    Je bosse dans le web mais on n’a pas souvent eu l’occas de toucher à WP alors j’aimerais vraiment en faire ma « spécialisation ».

    Encore merci,c’est clair et précis!

  • fanna

    Bonjour,
    jusqu’à présent j’ai suivi ce tutoriel très bien adapté à une novice comme moi,
    cependant je bute ds cette partie,
    en effet je ne comprends pas où je dois mettre :

    est-ce entre et ?
    d’où viennent les ?
    car je n’ai rien qui s’affiche, hormis le point noir.

  • Guillaume F.

    Salut fran6, je suis ton tuto wordpress depuis hier, j’en suis à la sidebar, et j’ai rencontré quelque soucis… je ne sais pas si tu suis toujours les messages (6 ans apres la publication), mais: j’ai (normalemnt) bien suivi ton tuto et ma sidebar se retrouvait en dessous de mon titre d’article, alors j’ai déplacé le code pour l’avoir au dessus, donc ca, ca va.. et j’ai affiché le code source de mon theme en local, et j’ai vu des choses effrayante dans le code: des fin de balises H2 sans quelles soient ouvertes, et le pire je pense, des fin de body et fin de html partout dans le code..

    est ce normal ?

  • Youness

    Merci pour ce super tuto qui montre bien toute les étapes une par une, et pour tout formation.

Success, your comment is awaiting moderation.