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.

• 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

• 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 😉

• Herzlichen Glückwunsch! Sie haben erfolgreich Ihre Custom search engine.
• Gehe zu Control Panel

• Gehe zu „Look and Feel“
• Wählen Sie Two Pages layout
• 💾 Save & Get code

Konfigurieren Sie Search URL Parameters

• In Search Results Details, Einstellen Search Results page URL and Query parameter.

• 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.

Code in WordPress einrichten

• Aktivieren Sie Elements Modul, das in der GeneratePress Premium.

• Erstellen Sie eine neue Hook

• Nennen Sie es ‚Custom Search Engine (English)‘ und fügen Sie das JS ein, das Sie in Schritt 7.

• 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.

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.

FAQs

Vielen Dank für die Lektüre.