Brug Google Custom Search Engine i GeneratePress WordPress-temaet

Der er to grunde til, at du måske ønsker at skifte standard WordPress-søgning til Google Custom Search Engine i GeneratePress-temaet.

• Du har brug for en klientside-løsning til et statisk WordPress-websted.
• Du ønsker at forbedre søgeoplevelsen ved at vise yderst relevante resultater.
  

Skridt til tilføjelse af Google Custom Search

• Tilføj en ny side med titlen “Søgeresultater” og permalinket “search” i din WordPress.
• Noindex Search Results page following instructions from your SEO plugin.

• tilføj nedenstående CSE-kode i teksttilstand for at vise søgefeltet og resultaterne.

<gcse:search enablehistory="false"></gcse:search>

• Log ind på CSE website
• Tilføj en ny søgemaskine

• Angiv webadressen til webstedet i wildcard-formatet for at vise den i søgeresultaterne
• Pas på www eller ikke-www i henhold til din canonical 😉

• Tillykke med det! Du har oprettet din brugerdefinerede søgemaskine med succes.
• Gå til Kontrolpanel

• Gå til “Look and Feel“
• Vælg layout for to sider
• 💾 Gem & Få kode

Konfigurer søge-URL-parametre

• I Detaljer om søgeresultater skal du indstille URL til søgeresultatsiden og forespørgselsparameteren.

• Klik på knappen Gem og få kode. Du vil se koden for søgeresultater.  Ignorer Div-delen, som vi allerede har tilføjet i første trin. Du skal blot kopiere JavaScript. Vi skal bruge det med Hook.

Opsætning af kode i WordPress

• Aktiver Elements-modulet, som er tilgængeligt i GeneratePress Premium.

• Opret en ny Hook

• Navngiv den “Custom Search Engine (English)”, og indsæt den JS, som du kopierede i trin 7.

• Placer den JS-kode, som du kopierede i trin 9. fra Google Custom Search Engine. Jeg har selv tilføjet preload-delen for at indlæse JS hurtigt i browseren. Sørg for at erstatte udgiver-id’et.

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

• Brug wp_head hook med højeste prioritet værdi 0 for at sikre, at scriptet bliver placeret i den øverste sektion af head i HTML.
• Med hensyn til ydeevne kan vi indstille Display Rules til kun at indlæse denne JS på WordPress-søgeresultatsiden, hvor det faktisk er påkrævet, og ikke på andre sider.

Skjul reklame i Googles tilpassede søgeresultater

• På samme måde kan du ved hjælp af en ny Hook tilføje nedenstående inline CSS for at opnå et godt design af siden med søgeresultater. Det vil skjule irriterende advt også i den gratis version.

<style>
/* Søgeresultater fra Google */
.gs-webResult {
border: 0px solid #eee;
padding: 1em;
}
/* Vis ikke antallet af søgeresultater */
.gsc-result-info {
display: none;
}
/* Skjul Googles branding i søgeresultaterne */
.gcsc-branding {
display: none;
}
/* Skjul miniaturebillederne i søgeresultaterne */
.gsc-thumbnail {
display: none;
}
/* Skjul snippets i Googles søgeresultater */
.gs-snippet {
font-size: 16px;
}
/* Ændre skriftstørrelsen på titlen på søgeresultaterne */
.gs-title a {
font-size: 18px !important;
text-decoration: none !important;
}
.gs-webResult div.gs-visibleUrl-long {
font-size: 16px !important;
}
/* Ændre skriftstørrelsen for uddrag i søgeresultater */
.gs-title b, .gs-snippet b {
font-weight: normal;
}
/* Fremhæv knapperne til paginering nederst i søgeresultaterne */
.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 {
/* dette giver dig brug af hele blokken, i modsætning til de 69 %, som google giver*/
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>

Vi ved, at WordPress viser søgeresultater på https://www.gulshankumar.net/dk/?s=query

Derfor er det vigtigt at ændre handlingsstien for søgefeltet, og Yoast har tilføjet JSON-LD-markup til Site Search. Du bør placere nedenstående uddrag ved hjælp af Code Snippet plugin.

// Ændre søgesti i GeneratePress-temaet
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

Korrekt JSON-sti

// Til 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' );

// Til 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' );

Vis sidens titel og overskrift som pr. søgeforespørgsel

Tak til James Hibbard, som har givet mig nedenstående uddrag, som er baseret på URLSearchParams. Dette skulle fungere for alle moderne browsere.

Sørg for at placere scriptet med wp_footer hook ved hjælp af GeneratePress Elements specifikt for siden “Søgeresultater”, som vi oprettede i første trin.

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

Nu kan du se søgeforespørgsel i titel og overskrift.

FAQs

Tak for din læsning.