skip to Main Content

Comment ajouter un moteur de recherche en plein écran sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Des sites populaires comme Wired utilisent des moteurs de recherche en plein écran. Lorsqu’un utilisateur clique sur l’icône de recherche, le moteur de recherche s’ouvre et couvre la totalité de l’écran, ce qui peut améliorer l’expérience utilisateur sur les appareils mobiles. Dans cet article, nous allons vous montrer comment ajouter un moteur de recherche en plein écran sur WordPress.

fullscreensearch

Le moteur de recherche en plein écran est en train de devenir une tendance, car il améliore considérablement l’expérience de recherche pour les utilisateurs mobiles. Puisque les écrans mobiles sont très petits, en offrant une superposition de plein écran, il est plus facile pour les utilisateurs d’écrire et de faire des recherches sur votre site.

La mise en pratique du processus de création d’un moteur en plein écran peut être un peu compliquée, car cela requiert certains codes. C’est pourquoi le processus a été simplifiée à travers un simple plugin.

Ajout d’un moteur de recherche en plein écran sur WordPress

La première chose à faire c’est d’installer et activer le plugin WordPress Full Screen Search Overlay. Le plugin WordPress Full Screen Searh Overlay fonctionne sans configuration, et il ne dispose pas de paramètres de configuration. Vous devez simplement visiter votre site et cliquer sur la zone de recherche pour voir le plugin en action.

fullscreensearchoverlay

Il est important de noter que ce plugin est compatible avec les fonctions de recherche par défaut de WordPress. Il fonctionne également très bien avec SearchWP, qui est un plugin premium qui améliore la recherche par défaut de WordPress.

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Malheureusement, ce plugin ne fonctionne pas avec Google Custom Search.

La personnalisation du moteur de recherche en plein écran

Le plugin WordPress Full Screen Search Overlay est proposé avec sa propre feuille de style. Pour modifier l’apparence du moteur de recherche, vous devrez modifier le fichier CSS du plugin ou utiliser !important dans le langage CSS.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Tout d’abord, vous devrez vous connecter à votre site Web en utilisant un client FTP. Une fois que vous êtes connecté, vous devez localiser le dossier de CSS du plugin. Vous le trouverez à travers le chemin suivant:

http://votresite.com/wp-content/plugins/full-screen-search-overlay/assets/css/

Vous trouverez un fichier full-screen-search.css à l’intérieur du dossier de « css« . Ensuite, téléchargez le fichier sur votre ordinateur.

Après avoir ouvert le fichier, et vous pouvez y faire des modifications. Par exemple, nous voulions changer l’arrière-plan et la police pour notre site 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 juste modifié la couleur de l’arrière-plan à la ligne 62, et ajouté la couleur de police à la ligne 150. Si vous êtes bon avec le langage CSS, alors sentez-vous libre de changer d’autres réglages à votre convenance.

Une fois que vous avez terminé, vous pouvez télécharger le fichier du dossier de CSS via FTP. Vous pouvez maintenant voir les modifications en visitant votre site Web.

fullscreensearchwp

Note importante:

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Si vous utilisez dans votre propre thème, alors il est préférable d’utiliser les balises !important de sorte que les mises à jour du plugin n’annulent pas les modifications.

D’après les développeurs et les consultants, vous pouvez aussi renommer le plugin et le considérer comme une partie de votre thème.

C’est tout ! Nous espérons que cette article vous aidera à ajouter un moteur de recherche en plein écran sur votre site WordPress. Vous êtes prié de laisser vos commentaires et suggestions dans la zone dédiée.

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
2 Partages
Partagez2
Tweetez
Enregistrer