Použití vlastního vyhledávače Google v tématu GeneratePress WordPress

Existují dva důvody, proč byste mohli chtít přepnout výchozí vyhledávání ve WordPressu na Google Custom Search Engine na adrese GeneratePress Theme.

• Potřebujete řešení na straně klienta pro Static WordPress site.
• Chcete zlepšit zážitek z vyhledávání tím, že zobrazíte vysoce relevantní výsledky.

Kroky pro přidání Google Custom Search

• Přidání nové stránky s Title „Search Results“ and permalink „search“ ve vašem WordPress.
• Noindex Search Results stránku podle pokynů z vašeho SEO plugin.

• přidat below CSE code in the Text mode to display Search box and results.

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

• Sign in to CSE website
• Add a new Search Engine

• Poskytněte URL of site in the wildcard format pro zobrazení ve výsledcích vyhledávání
• Postarejte se o www or non-www as per your canonical 😉

• Gratulujeme! Úspěšně jste vytvořili svůj Custom search engine.
• Přejít na Control Panel

• Přejít na „Look and Feel“
• Select Two Pages layout
• 💾 Save & Get code

Configure Search URL Parameters

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

• Click Save & Get Code button. You will see Search Results code.  Ignore the Div part, we have already added in first step. Just copy the JavaScript. We are going to use it with Hook.

Setup code uvnitř WordPress

• Povolit modul Elements, který je k dispozici v modulu GeneratePress Premium.

• Vytvoření nového Hook

• Pojmenujte jej „Vlastní vyhledávač (česky)“ a vložte JS, který jste zkopírovali v kroku 7.

• Place the JS code that you copied in step 9. from Google Custom Search Engine. Sám jsem přidal část preload pro načítání JS quickly in the browser. Nezapomeňte vyměnit 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>

• Use wp_head hook with highest priority value 0 to ensure script get placed at the top section of head in the HTML.
• Pokud jde o výkon, můžeme nastavit Display Rules to load this JS only on WordPress Search Results page where it is actually required and non-other page.

Hide Advertisement of Google Custom Search Results

• Podobně pomocí nového Hook add below inline CSS for good design of Search Results page. It will hide annoying advt i ve verzi zdarma.

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

Víme, že WordPress zobrazuje výsledky vyhledávání na https://www.gulshankumar.net/cz/?s=query

Proto je důležité změnit cestu akce pro pole Hledat a Yoast added JSON-LD markup for the Site Search. Níže uvedený úryvek byste měli umístit pomocí 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

Correct JSON path

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

Display the Page Title and Heading as per Search Query

Díky James Hibbard který mi poskytl níže uvedený úryvek, který je založen na URLSearchParams. To by mělo fungovat ve všech moderních prohlížečích.

Ujistěte se, že jste umístili script with wp_footer hook using GeneratePress Elements specifically for ‘Search Results’ page který jsme vytvořili v prvním kroku.

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

Nyní můžete vidět Search Query in Title and Heading.

Nejčastější dotazy

Děkujeme za přečtení.