Comment ajouter une superposition de recherche plein écran dans WordPress

Récemment, l'un de nos lecteurs nous a demandé si nous pouvions écrire un tutoriel sur la façon d'ajouter une superposition de recherche plein écran dans WordPress. Vous l'avez probablement vu sur des sites populaires comme Wired. Lorsque l'utilisateur clique sur l'icône de recherche, la boîte de recherche s'ouvre et couvre tout l'écran, ce qui peut améliorer l'expérience utilisateur sur les appareils mobiles. Dans cet article, nous vous montrerons comment ajouter une superposition de recherche plein écran dans WordPress.

La recherche plein écran devient lentement une tendance car elle améliore considérablement l'expérience de recherche pour les utilisateurs mobiles. Les écrans mobiles étant très petits, en offrant une superposition plein écran, vous facilitez la saisie et la recherche sur votre site Web.

Lorsque nous avons reçu cette demande de tutoriel pour la première fois, nous savions que cela nécessiterait du code. Notre objectif chez WPBeginner est de rendre les choses aussi simples que possible.

Une fois que nous avons terminé la rédaction du tutoriel, nous avons réalisé que le processus était trop compliqué et qu'il devrait plutôt être intégré dans un plugin simple.

Pour vous faciliter la tâche, nous avons créé un tutoriel vidéo sur la façon d'ajouter une superposition de recherche plein écran que vous pouvez regarder ci-dessous.

Cependant, si vous souhaitez simplement suivre des instructions textuelles, vous pouvez suivre notre tutoriel étape par étape sur la façon d'ajouter une superposition de recherche plein écran dans WordPress.

Ajout d'une superposition de recherche plein écran dans WordPress

La première chose à faire est d'installer et d'activer le plugin WordPress Full Screen Search Overlay. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Le plugin WordPress Full Screen Overlay Search fonctionne immédiatement, et il n'y a aucun réglage à configurer.

Vous pouvez simplement visiter votre site Web et cliquer sur la barre de recherche pour voir le plugin en action.

Veuillez noter que le plugin fonctionne avec la fonctionnalité de recherche par défaut de WordPress. Il fonctionne également très bien avec SearchWP, qui est un plugin premium qui améliore considérablement la recherche par défaut de WordPress.

Malheureusement, ce plugin ne fonctionne pas avec la recherche personnalisée Google.

Personnalisation de l'overlay de recherche plein écran

Le plugin WordPress Full Screen Search Overlay est livré avec sa propre feuille de style. Pour modifier l'apparence de l'overlay de recherche, vous devrez modifier le fichier CSS du plugin ou utiliser !important en CSS.

Vous devrez d'abord vous connecter à votre site Web à l'aide d'un client FTP. Si vous débutez avec FTP, consultez notre guide sur comment télécharger des fichiers sur WordPress en utilisant FTP.

Une fois connecté, vous devez localiser le dossier CSS du plugin. Vous le trouverez sous le chemin suivant :

yourwebsite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Vous trouverez un fichier full-screen-search.css dans le dossier css. Vous devez télécharger ce fichier sur votre ordinateur.

Ouvrez le fichier que vous venez de télécharger dans un éditeur de texte brut comme le Bloc-notes. Vous pouvez apporter des modifications à ce fichier. Par exemple, nous avons voulu changer la couleur d'arrière-plan et la couleur de la police pour qu'elles correspondent à notre site Web de démonstration.

/**
* Reset
* - Prevents Themes and other Plugins from applying their own styles to our full screen search
*/
#full-screen-search,
#full-screen-search button,
#full-screen-search button.close,
#full-screen-search form,
#full-screen-search form div,
#full-screen-search form div input,
#full-screen-search form div input.search {
    font-family: Arial, sans-serif;
    background:none;
    border:0 none;
    border-radius:0;
    -webkit-border-radius:0;
    -moz-border-radius:0;
    float:none;
    font-size:100%;
    height:auto;
    letter-spacing:normal;
    list-style:none;
    outline:none;
    position:static;
    text-decoration:none;
    text-indent:0;
    text-shadow:none;
    text-transform:none;
    width:auto;
    visibility:visible;
    overflow:visible;
    margin:0;
    padding:0;
    line-height:1;
    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    -ms-box-shadow:none;
    -o-box-shadow:none;
    box-shadow:none;
    -webkit-appearance:none;
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
}

/**
* Background
*/
#full-screen-search {
    visibility: hidden;
    opacity: 0;
    z-index: 999998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1bc69e;

    /**
    * Add some CSS3 transitions for showing the Full Screen Search
    */
    transition: opacity 0.5s linear;
}

/**
* Display Full Screen Search when Open
*/
#full-screen-search.open {
    /**
    * Because we're using visibility and opacity for CSS transition support,
    * we define position: fixed; here so that the Full Screen Search doesn't block
    * the underlying HTML elements when not open
    */
    position: fixed;
    visibility: visible;
    opacity: 1;
}

/**
* Search Form
*/
#full-screen-search form {
    position: relative;
    width: 100%;
    height: 100%;
}

/**
* Close Button
*/
#full-screen-search button.close {
    position: absolute;
    z-index: 999999;
    top: 20px;
    right: 20px;
    font-size: 30px;
    font-weight: 300;
    color: #999;
    cursor: pointer;
}

/**
* Search Form Div
*/
#full-screen-search form div {
    position: absolute;
    width: 50%;
    height: 100px;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -25%;
}

/**
* Search Form Input Placeholder Color
*/
#full-screen-search form div input::-webkit-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input::-moz-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}
#full-screen-search form div input:-ms-input-placeholder { 
    font-family: Arial, sans-serif;
    color: #ccc;
}

/**
* Search Form Input
*/
#full-screen-search form div input {
    width: 100%;
    height: 100px;
    background: #eee;
    padding: 20px;
    font-size: 40px;
    line-height: 60px;
    /* We have added our own font color here */
    color:#50B0A6; 
}

Dans ce code, nous avons seulement changé la couleur d'arrière-plan à la ligne 62 et ajouté la couleur de la police à la ligne 150. Si vous êtes à l'aise avec CSS, n'hésitez pas à modifier d'autres règles de style.

Une fois que vous avez terminé, vous pouvez re-télécharger ce fichier dans le dossier CSS du plugin en utilisant FTP. Vous pouvez maintenant voir vos modifications en visitant votre site Web.

Note importante :

Si vous l'utilisez dans votre propre thème, il est préférable d'utiliser les balises !important afin que les mises à jour du plugin ne remplacent aucune modification.

Pour les développeurs et les consultants, vous pouvez également simplement renommer le plugin et l'intégrer dans votre thème ou vos services.

Nous n'avons créé ce plugin que parce que toutes les autres méthodes d'écriture de ce tutoriel auraient été trop compliquées pour les utilisateurs débutants.

Nous espérons que cet article vous a aidé à ajouter une recherche plein écran à votre site WordPress. Vous voudrez peut-être aussi consulter notre guide sur comment ajouter un effet de bascule de recherche dans WordPress

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.