Comment inclure le moteur de recherche personnalisé Google (CSE) dans un site WordPress sans plugin (deux approches différentes)

Publié: 2016-03-16

Recherche personnalisée Google pour le site WordPress

Importance de la fonctionnalité de recherche et pourquoi devrions-nous utiliser la recherche personnalisée Google sur WordPress ?

Google ou Bing ? Aucun doute là dessus. Google est le meilleur moteur de recherche et pionnier de la recherche au monde. Il n'y a aucune raison pour que vous n'utilisiez pas la recherche personnalisée Google sur votre blog WordPress. Cela donnera également la meilleure expérience de recherche aux lecteurs de votre blog. Dans ce didacticiel, nous passerons en revue des étapes simples pour que la recherche personnalisée soit disponible pour votre site WordPress.

Sous l'égide de l'Alphabet ( https://abc.xyz ), Google est une société de recherche autonome. Alors, qu'est-ce que cela signifie pour tous les consommateurs ? Eh bien, je crois que rien ne va changer pour nous, sauf que la structure de rapport a été modifiée et certainement le nom de l'action NYSE.

Pourquoi avons-nous besoin de CSE (moteur de recherche personnalisé) ?

Il est très important de fournir une meilleure fonctionnalité de recherche sur le site. Habituellement, la page principale contient moins de 10 articles, mais dans la plupart des cas, les utilisateurs de votre blog peuvent obtenir les meilleurs articles connexes à partir de la recherche uniquement.

De plus, un résultat de recherche beaucoup plus rapide que la recherche WordPress par défaut + bon pour le référencement de votre site car Google connaît cette liste de résultats à partir de la requête de recherche et ne l'ajoute pas à la liste de contenu en double.

Vous pouvez configurer la recherche personnalisée Google de two ways :

  1. Depuis la console Google Adsense (sur Crunchify, nous utilisons this approach )
  2. À partir du panneau de recherche personnalisée de Google

Configuration Approach-1. Depuis la console Google Adsense

Étape 1

  • Aller sur Adsense
  • Cliquez sur l'onglet My ads
  • Cliquez sur Search -> Custom search engines
  • Cliquez sur New Custom Search engine

Créer un nouveau moteur de recherche personnalisé - Google Adsense

Étape 2

  • Indiquez le Name . C'est du texte libre
  • Sélectionnez Only sites I select
  • Spécifiez le nom de votre site Web

Google Adsense - CSE - Paramètre de base

Étape 3

Modifiez les options ci-dessous selon vos besoins

  • Canal personnalisé
  • Style de zone de recherche
  • Style CSS de l'annonce

Étape 4

Sous l'option Résultats de la recherche, assurez-vous que les paramètres ci-dessous sont corrects

  • Résultats de la recherche : on my website
  • URL où les résultats de la recherche seront affichés : la search page de votre blog

Crunchify Conseils sur la configuration du moteur de recherche personnalisé Google

Étape-5

Cliquez sur enregistrer et obtenez les deux codes

  • Box Code recherche
  • Result Code recherche

Résultat de recherche Adsense et code du champ de recherche

Étape-6

Accédez à votre site et créez une page /search

WordPress Créer une page de recherche

Étape-7

Sous la section HTML , collez le search result code et cliquez sur Enregistrer.

Étape-8

Accédez à la section Appearance -> Widgets , collez search box code et cliquez sur Enregistrer. Modifiez le CSS du champ de recherche selon vos besoins. Voici un CSS personnalisé que j'utilise sur Crunchify.

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - search {
     width : 76 % ! important ;
     padding : 9px 6px 7px 6px ! important ;
     max - width : 275px ;
     margin : 10px 0px 0px 0px ! important ;
}
 
input [ type = "submit" ] {
     background - color : #dd7127;
     border : none ;
     box - shadow : none ;
     color : #fff;
     cursor : pointer ;
     font - family : 'Oswald' , sans - serif ;
     font - size : 14px ;
     font - weight : 400 ;
     letter - spacing : 1px ;
     padding : 6px 10px ;
     width : auto ;
    - webkit - font - smoothing : antialiased ;
     border - radius : 3px ;
}

Et vous êtes prêt. Essayez de rechercher des mots-clés et vous devriez voir le résultat de la recherche Google sur la page /search .

Configuration Approach-2 . À partir du panneau de recherche personnalisée de Google

Étape 1

  • Allez sur https://cse.google.com/cse/all
  • Cliquez sur Add un moteur de recherche

Ajouter-Custom-Search-Crunchify-Tips

Étape 2

  • Indiquez l'URL de votre site
  • Cliquez sur Ajouter

Crunchify-Google-Custom-Search-Engine-Setup

Étape 3

  • Cliquez sur votre moteur de recherche nouvellement créé
  • Aller à la section Look and feel
  • Aller à l'onglet Mise en Layout
  • Sélectionnez Two Page
  • Cliquez sur Save and Get Code

Étape 4

  • Obtenir le code du champ de recherche
    • Mettez-le dans la barre latérale
  • Obtenir le code pour le résultat de la recherche
    • Créer une page http://<votreblog.com>/recherche
    • Mettre le code dans cette page

Étape-5

Essayez de rechercher un mot-clé comme Google Apps et vous devriez voir un résultat comme celui-ci.

Google-Custom-Search-Result-Crunchify

Panneau de résultats :

Google-CSE-Search-Result-Crunchify

Étape-6

Il y a quelque temps sur Crunchify , nous avons modifié le résultat avec le CSS personnalisé ci-dessous :

Stylish Google Custom Search - Custom CSS
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
/* Change Search Button Code  */
input . gsc - search - button {
     padding : 10px ! important ;
     height : 35px ! important ;
     border - color : #c12129 !important;
     background - color : #c12129 !important;
     color : #fff !important;
}
 
/* Change Search Button Hover Color */
input . gsc - search - button : hover {
     border - color : #444 !important;
     background - color : #444 !important;
}
 
/* Change Bottom Margin after each result */
. gsc - control - cse . gsc - table - result {
     margin - bottom : 10px ! important ;
}
 
/* Hide URL from search result */
. gsc - url - top , . gsc - url - bottom {
     display : none ! important ;
}
 
/* Change input field look and feel */
input . gsc - input {
     padding : 10px ! important ;
     margin - left : 0px ;
     background - position : right center ! important ;
     background - repeat : no - repeat ! important ;
}
 
/* Hide number of result count */
. gsc - result - info {
     display : none ;
}
. gs - webResult : hover {
     background - color : #eee;
}
 
/* Change mouse hover result background change */
. gsc - cursor - page {
     font - size : 1.1em ;
     padding : 3px 7px ;
     border : 2px solid #eee;
     background - color : #eee !important;
}
 
/* Change search result heading font size change */
. gsc - result . gs - title {
     height : 2.0em ! important ;
     font - size : 16px ! important ;
}
 
. gs - result . gs - snippet {
     line - height : 19px ! important ;
}
 
/* Remove Clear cross image and CSS adjustment - below 3 CSS prop changes */
div . gsc - clear - button {
     display : none ! important ;
}
td . gsc - clear - button {
     width : 0px ! important ;
}
td . gsc - input {
     padding - right : 1px ! important ;
}

Examinons maintenant les deux requêtes :

Approach-1 :

  • search/?cx=

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps (cela ne fonctionnera pas car nous avons mis en place la règle .htaccess)

Comme vous le voyez ci-dessus, les deux approches ont different query parameters .

Et ensuite ?

Assurez-vous de mettre à jour l'URL du JSON-LD Schema de la zone de recherche de liens annexes de Google.

Valider WordPress Sitelinks Search Box JSON-LD Schema.org Markup URL