Verwenden Sie Google Custom Search Engine in GeneratePress WordPress Theme

Es gibt zwei Gründe, warum Sie die Standardsuche von WordPress auf Benutzerdefinierte Suchmaschine von Google in GeneratePress Theme.

  • Sie benötigen eine client-seitige Lösung für eine Static WordPress site.
  • Sie wollen das Sucherlebnis verbessern, indem Sie hochrelevante Ergebnisse anzeigen.

Schritte zum Hinzufügen der benutzerdefinierten Google-Suche

  • Eine neue Seite mit Titel hinzufügen „Search Results“ und permalink „search“ in Ihrem WordPress.
  • Noindex Search Results page nach den Anweisungen Ihres SEO plugin.
noindex search results page
Can’t find? Re-setup RankMath with Advanced mode
  • unten hinzufügen CSE code im Textmodus zur Anzeige Search box and results.
<gcse:search enablehistory="false"></gcse:search>
  • Sign in to CSE website
  • Hinzufügen einer neuen Search Engine
Adding new Google Custom Search Engine
  • Geben Sie die URL der Website im Platzhalterformat an, um sie in der Search results
  • Kümmern Sie sich um www or non-www gemäß Ihrer canonical 😉
sites to search
Zum Beispiel,Ich möchte die Suchergebnisse von https://www.gulshankumar.net/de/* path
  • Herzlichen Glückwunsch! Sie haben erfolgreich Ihre Custom search engine.
  • Gehe zu Control Panel
CSE created
  • Gehe zu „Look and Feel
  • Wählen Sie Two Pages layout
  • 💾 Save & Get code
Two Page Layout
Two Page Layout

Konfigurieren Sie Search URL Parameters

  • In Search Results Details, Einstellen Search Results page URL and Query parameter.
setup search param urls
  • Click Save & Get Code button. You will see Search Results code.  Ignorieren Sie die Div part, haben wir bereits im ersten Schritt hinzugefügt. Just copy the JavaScript. Wir werden es verwenden with Hook.
Copy CSE JS

Code in WordPress einrichten

Elements
  • Erstellen Sie eine neue Hook
Hook
  • Nennen Sie es ‚Custom Search Engine (English)‘ und fügen Sie das JS ein, das Sie in Schritt 7.
cse script
  • Platzieren Sie den JS-Code, den Sie in Schritt 9 kopiert haben von Google Custom Search Engine. Ich habe selbst einen Preload-Teil zum Laden hinzugefügt JS quickly in the browser. Stellen Sie sicher, dass Sie die publisher ID.
<link rel="preload" href="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY" as="script">
<script async src="https://cse.google.com/cse.js?cx=partner-pub-XXXXXXXXXXX:YYYYYYYY"></script>
  • Verwenden Sie wp_head hook mit höchstem Prioritätswert 0 um sicherzustellen, dass das Skript im oberen Bereich des Kopfes in der HTML.
  • Concerning performance, können wir die Anzeigeregeln so einstellen, dass diese geladen werden JS nur bei WordPress Search Results page wo es tatsächlich erforderlich ist und non-other page.
Hook Page Rule

Anzeige Advertisment von Google Custom Search Results

  • In ähnlicher Weise können Sie mit einem neuen Hook unten Inline-CSS für ein gutes Design der Suchergebnisseite hinzufügen. Es wird auch in der kostenlosen Version lästige Werbung ausblenden.
<style>
/* Google search results */
.gs-webResult {
border: 0px solid #eee;
padding: 1em;
}
/* Do no display the count of search results */
.gsc-result-info {
display: none;
}
/* Hide the Google branding in search results */
.gcsc-branding {
display: none;
}
/* Hide the thumbnail images in search results */
.gsc-thumbnail {
display: none;
}
/* Hide the snippets in Google search results */
.gs-snippet {
font-size: 16px;
}
/* Change the font size of the title of search results */
.gs-title a {
font-size: 18px !important;
text-decoration: none !important;
}
.gs-webResult div.gs-visibleUrl-long {
font-size: 16px !important;
}
/* Change the font size of snippets inside search results */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Highlight the pagination buttons at the bottom of search results */
.gsc-cursor-page {
font-size: 1.3em;
padding: 4px 8px;
border: 2px solid #ccc;
}
.gsc-adBlockVertical, .gsc-adBlock {
/* this hides both the top and right ad blocks*/
display: none !important;
}
.gsc-thinWrapper {
/* this gives you use of the whole block, as opposed to 69% google gives*/
width: 100%;
}
.gsc-result-info-container {
display: none;
}
td.gsc-twiddleRegionCell.gsc-twiddle-opened {
display: none;
}
td.gsc-configLabelCell {
display: none;
}
.gsc-above-wrapper-area {
border-bottom: 0px solid #E9E9E9!important;
padding: 0px!important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive table {
margin-bottom: 0px !important;
}
.gsc-resultsRoot.gsc-tabData.gsc-tabdActive tbody {
border-bottom: 0px solid #ddd !important;
}
.gsc-result .gs-title {
height: 1.5em !important;
}
.gs-webResult.gs-result a.gs-title:link, .gs-webResult.gs-result a.gs-title:link b, .gs-imageResult a.gs-title:link, .gs-imageResult a.gs-title:link b {
border-bottom: 0px solid #4199FB;
}
.gs-webResult {
border: 0px solid #eee !important;
padding: 0em !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
margin-top: 18px !important;
}
div.gcsc-branding {
display: none;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding-top: 0 !important;
padding-bottom: 30px !important;
}
.gsc-webResult .gsc-result {
padding: 0px 0 10px 0 !important;
}
table.gsc-search-box td {
border: 0px !important;
}
.gsc-input-box table {
margin: 0px ;
}
.gcsc-find-more-on-google {
display: none !important;
}
.gsib_a {
padding: 9px 9px 9px 9px !important;
}
.cse .gsc-search-button-v2, .gsc-search-button-v2 {
border-color: #da0000 !important;
background-color: #da0000 !important;
padding: 10px 19px 10px 19px !important;
}
button.gsc-search-button.gsc-search-button-v2 svg {
width: 18px;
height: 13px;
}
.gsc-input-box {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
.cse .gsc-control-cse, .gsc-control-cse {
padding: inherit !important;
}
</style>

Wir wissen, dass WordPress die Suchergebnisse unter https://www.gulshankumar.net/de/?s=query

Daher ist es wichtig, den Aktionspfad für Search box and Yoast added JSON-LD markup for the Site Search. Sie sollten das folgende Snippet mit Code Snippet plugin.

// Change Search path in the GeneratePress Theme
add_filter( 'generate_navigation_search_output', function() {
printf( 
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder=" Search" class="search-field" value="%2$s" name="q" title="%3$s" />
</form>', 
esc_url( home_url( '/search/' ) ), 
esc_attr( get_search_query() ), 
esc_attr_x( 'Search', 'label', 'generatepress' ) 
); 
} );
// Other theme? Use Real Time Find and Replace Plugin

Korrekter JSON-Pfad

// For Yoast SEO
function yst_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'wpseo_json_ld_search_url', 'yst_change_json_ld_search_url' );
// For Rankmath
function gk_change_json_ld_search_url() {
return trailingslashit( home_url() ) . 'search/?q={search_term_string}';
}
add_filter( 'rank_math/json_ld/search_url', 'gk_change_json_ld_search_url' );

Anzeige des Seitentitels und der Überschrift gemäß der Suchabfrage

Dank an James Hibbard der mir den folgenden Ausschnitt zur Verfügung gestellt hat, der sich auf URLSearchParams. Dies sollte bei allen modernen Browsern funktionieren.

Stellen Sie sicher, dass Sie das Skript mit dem wp_footer-Haken platzieren, indem Sie GeneratePress Elements speziell für die Seite „Suchergebnisse“ verwenden, die wir im ersten Schritt erstellt haben.

<script>
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const searchTerm = urlParams.get('q');
if (searchTerm) {
    const heading = document.querySelector('h1');
    const title = document.querySelector('title');
    heading.textContent = `Search Results for ${searchTerm}`;
    title.textContent = `Search Results for ${searchTerm}`;
}
</script>

Jetzt können Sie sehen Search Query in Title und Heading.

Search Query

FAQs

Wie kann man erzwingen, dass der Search Result in der gleichen Registerkarte zu öffnen?

Set Link Target to _self

Wie konvertiert man Widget Search Box oder manuell in die CSE-Version?

Ersetzen Sie den Namen und aktionsparameter gemäß der CSE Einrichtung über Real Time Find und Replace Plugin.

Vielen Dank für die Lektüre.

Sie wollen mehr?
Stell dir vor, du bekommst jeden Tag Tutorials! DAS ist FREAKING AWESOME. Jetzt abonnieren. 

Schreibe einen Kommentar

37 Gedanken zu „Verwenden Sie Google Custom Search Engine in GeneratePress WordPress Theme“

  1. add_filter( ‚generate_navigation_search_output‘, function()
    I believe this takes search input and displays the result in /search/ page. This is not working with genesis.

    Antworten
  2. Thank you for writing an awesome tutorial.
    I have a few questions
    1. How to include the search box above the result page like yours? ==> https://i.imgur.com/gAvg84e.png
    2. When someone types the wrong URL and then it will get redirected to the 404 pages. There is a search box and that search box is using WordPress default search. so, how to convert that search box too into CSE?
    Thank You.

    Antworten
  3. Thank you for the great article, Gulshan! I am actually using the Rank Math plugin. Can you show me how to change the searchAction target from /?s= to /search/?q=

    I can change it by directly editing the plugin file, which is located at includes > modules > schema > snippets > class-website.php file, but in that case, the change will again be restored in case there’s a new update to the plugin.

    Is there a permanent solution?

    Antworten
  4. Hi Gulshan, Thanks for this post. It’s worked and I loved the method. I wanna ask how can I hide the page which we have created in the beginning for search results.

    What did you do with the page? I can‘ find it on your website.

    can I delete that „search page“ from my site?

    Antworten
    • Hi Mahi, Yeah, same snippet can be added in Theme functions.php last line but it’s a poor idea. When theme will update, that will be lost. That’s a reason, I have recommended Code Snippets plugin way. It’s a reputed plugin with decent support from author. Use it with confidence.

      Antworten
      • Thank you for your prompt response. I have successfully setup it by watching your tutorial. But sometimes it doesn’t work in mobile view. Sometimes I open the search page directly but the search box doesn’t show ..

        Antworten