15 Fév 2016
mini tuto ajouter un champ recherche à votre menu sur votre site wordpress

#miniTuto Ajouter un champ Recherche dans votre barre de menu WordPress #4

Google+ Commentaires Newsletter

Bienvenue dans ce 4ème #miniTuto : Vous avez un site WordPress bien rempli et votre thème n’a pas de bouton Recherche ? Au lieu de vous prendre la tête à chercher un plugin qui s’affichera mal et ajoutera des fichiers CSS et JS supplémentaires, pourquoi ne pas l’intégrer vous même ?

Ce tutoriel va vous permettre d’insérer un joli bouton + champ de recherche bien placé en header de votre site. Il utilisera la fonction recherche par défaut de WordPress, qui ne demande aucun travail de votre part ! En bonus, le bouton sera stylisé en material design affichant une simple icône discrète mais visible. Pour l’intégration sur votre site (couleurs, taille..) ça sera à vous de l’adapter par contre ????…

 

Avant tout…

Sachez que WordPress propose d’ajouter un widget de recherche. L’inconvénient c’est qu’il s’affichera au niveau des menu latéraux de vos pages et articles (sidebar). Pour l’ajouter, direction l’administration WordPress > Apparence > Widgets.

Vous trouverez l’élément « Recherche » dans la liste des widgets, que vous glisserez-déposez à droite sur une des sidebar existante :

Ajout widget recherche dans une barre laterale site wordpress

 

Mais ici on veut pas ça, on veut un joli bouton  qui se transforme en champ de recherche sur notre menu ! Vous voulez un exemple ? Testez celui du site !

minituto-04-recherche-toolbar-material-design-jquery-css3

 

Pré-requis

  • Avoir un site.. WordPress (ceci dit c’est du code intégrable partout ailleurs, restera à faire la partie affichage des résultats)
  • Notions d’intégration Web (code HTML, JS et CSS)

 

Partie PHP/HTML

Pour être plus précis, les thèmes WordPress génèrent votre menu à l’aide de la fonction wp_nav_menu() dans un fichier template souvent appelé wp-content/themes/<votre_theme>/header.php. Recherchez ce terme sans les parenthèses dans ce fichier (ou ailleurs si ce n’est pas le cas) et ajoutez ce code de recherche au même niveau de div que celui ci. (Vous pouvez vous aider d’une console Web ou de firebug depuis la barre de recherche sur mon site pour vous aider).

Dans votre fichier header.php (ou équivalent), repérez wp_nav_menu :


1
2
3
4
<div class="menu clearfix"><?php wp_nav_menu(  
    array(  /* elements propres à votre theme */
    )
); ?></div>

Coller après le formulaire de recherche :


1
2
3
4
5
<div class="srch clearfix">
    <form method="GET" action="<?php echo get_site_url(); ?>">
        <div class="container cbd"><input max-length="120" autocomplete="off" placeholder="Rechercher..." value="<?php the_search_query(); ?>" name="s" id="q"><button type="submit" title="Rechercher sur le site"><i class="fa fa-search"></i></button></div>
    </form>
</div>

Cette barre de recherche va donc lancer une recherche depuis l’url de base du site générée par get_site_url + méthode GET du champ « s » qui donnera : https://www.monsitewordpress.fr/?s=. La valeur de recherche sera conservée dans le champ recherche sur la page des résultats grâce à la fonction the_search_query.

C’est terminé pour la partie PHP/HTML, maintenant il reste le Javascript, le CSS et l’import du bouton font-awesome (pour la loupe)…

 

Partie CSS/JavaScript

Commençons par le CSS. Vous devrez éditer ce dernier en fonction du style de votre page, je vous donne le code source brut de mon site. Donc j’imagine que la font, les tailles et les positions seront à réadapter :

Ajouter ces règles dans la feuille de style principale de votre template, sinon importez-les dans un fichier et indiquez-le manuellement dans header.php :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
.clearfix::after {
    clear: both;
    content: "";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
.srch{
    float:right;
    height:100%;
    position:relative
}
.srch form{
    display:inline-block;
    height:100% !important;
    margin:0 0 0 22px;
    position:relative;
    vertical-align:top
}
.srch form .container{
    display:inline-block;
    margin:33px 0 30px;
    position:relative;
    vertical-align:top;
    -o-transition:all 200ms linear 0s;
    -moz-transition:all 200ms linear 0s;
    -webkit-transition:all 200ms linear 0s;
    -o-transition:all 200ms linear 0s;
    transition:all 200ms linear 0s
}
.smallheader .srch form .container{
    margin:13px 0 10px
}
.srch form .container input{
    background:#1A1A1A;
    border:0 none;
    border-bottom:2px solid transparent;
    box-sizing:border-box;
    color:#fff;
    display:inline-block;
    font-size:1em;
    font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    letter-spacing:0.02em;
    line-height:32px;
    opacity:0;
    overflow:hidden;
    padding:0 32px 0 10px;
    position:absolute;
    right:0;
    vertical-align:top;
    width:0;
    z-index:100;
    -o-transition:all .5s;
    -moz-transition:all .5s;
    -webkit-transition:all .5s;
    -o-transition:all .5s;
    transition:all .5s
}
.srch form:hover .container input, .srch form.selected .container input{
    border-color:#df3741;
    opacity:1;
    width:244px
}
.srch form .container button{
    background-color:transparent !important;
    border:medium none;
    color:#7a7a7a;
    cursor:pointer;
    display:inline-block;
    font-size:1.3em;
    line-height:32px;
    margin:0;
    padding:0;
    position:relative;
    text-align:center;
    vertical-align:top;
    width:32px;
    z-index:101
}
.srch form:hover .container button, .srch form.selected .container button{
    color:#DF3741
}
.srch form .container button i{
    background-color:transparent;
    position:relative;
    top:0px;
    top:-moz-calc(-2px);
    -o-transition:all .2s;
    -moz-transition:all .2s;
    -webkit-transition:all .2s;
    -o-transition:all .2s;
    transition:all .2s
}
@media only screen and (max-width:1023px){.srch form{margin:0}
    .srch form .container{margin:13px 0 10px}
    .srch form .container button{color:#fff}
}

J’importe le fichier Font-Awesome pour l’icône  <i class= »fa fa-search »></i>, que j’utilise partout sur le site. Si vous l’avez déjà, vous n’avez rien à faire, sinon importez-le, mais ça risque de faire beaucoup de chose à charger (quelques ko..) pour une simple icône…


1
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

Si vous ne souhaitez pas font-Awesome mais avoir une jolie icône de recherche, vous pouvez la charger en SVG directement dans votre css : voici le code css à remplacer :


1
2
3
4
5
6
7
8
9
.srch form .container button i{
    background: transparent url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xMjE2IDgzMnEwLTE4NS0xMzEuNS0zMTYuNXQtMzE2LjUtMTMxLjUtMzE2LjUgMTMxLjUtMTMxLjUgMzE2LjUgMTMxLjUgMzE2LjUgMzE2LjUgMTMxLjUgMzE2LjUtMTMxLjUgMTMxLjUtMzE2LjV6bTUxMiA4MzJxMCA1Mi0zOCA5MHQtOTAgMzhxLTU0IDAtOTAtMzhsLTM0My0zNDJxLTE3OSAxMjQtMzk5IDEyNC0xNDMgMC0yNzMuNS01NS41dC0yMjUtMTUwLTE1MC0yMjUtNTUuNS0yNzMuNSA1NS41LTI3My41IDE1MC0yMjUgMjI1LTE1MCAyNzMuNS01NS41IDI3My41IDU1LjUgMjI1IDE1MCAxNTAgMjI1IDU1LjUgMjczLjVxMCAyMjAtMTI0IDM5OWwzNDMgMzQzcTM3IDM3IDM3IDkweiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==") no-repeat scroll 0 0;
    background-size:contain;
    display: block;
    height: 18px;
    margin: 6px 0 0 2px;
    position: relative;
    width: 18px;
}

Il ne reste plus que le JavaScript. J’utilise JQuery et je me doute que votre site WordPress aussi donc mettez ce code dans le fichier footer.php (bas du site, avant la balise de fin html) :


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>jQuery(document).ready(function(){
    /*search box*/
    jQuery('#q').focus(function(){
        jQuery('form.search').addClass('selected');
    });
    jQuery('#q').blur(function(){
        jQuery('form.search').removeClass('selected');
    });
    jQuery('html').click(function(e){
        if(jQuery(e.target).is('#q')){}else if(jQuery('.srch form').hasClass('selected')){jQuery('.srch form').removeClass('selected');}
    });
    jQuery('.srch form button[type="submit"]').click(function(e){
        if(jQuery('.srch form').hasClass('selected') && (jQuery('#q').val().length != 0)){}else{
            e.preventDefault();
            e.stopPropagation();
            jQuery('.srch form').addClass('selected');
            if(jQuery('#q').val().length != 0){}else{jQuery('#q').focus();}
        }
    });
});</script>

Vous pourrez remplacer jQuery par $. Pour expliquer, ces actions sont lancées pour détecter les évènement clic sur le bouton > ouverture et focus sur le champ de recherche, clic une seconde fois > lancement de la recherche si une valeur est entrée et rien sinon, et clic ailleurs sur la page > fermeture du champ de recherche.

 

Et voilà, vous avez maintenant un joli bouton de recherche sur votre site ????. Plus qu’à adapter le CSS !

Continuez sur le site...

Restez informés des Actus, Tutos et Bons-Plans en suivant BXNXG :

Tags