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.
noindex search results page
Can’t find? Re-setup RankMath with Advanced mode
  • přidat below CSE code in the Text mode to display Search box and results.
<gcse:search enablehistory="false"></gcse:search>
Adding new Google Custom 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 😉
sites to search
Například, Přeji si zobrazit Search result from https://www.gulshankumar.net/cz/* path
  • Gratulujeme! Úspěšně jste vytvořili svůj Custom search engine.
  • Přejít na Control Panel
CSE created
  • Přejít na „Look and Feel
  • Select Two Pages layout
  • 💾 Save & Get code
Two Page Layout
Two Page Layout

Configure Search URL Parameters

  • In Search Results Details, set Search Results page URL and Query parameter.
setup search param urls
  • 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.
Copy CSE JS

Setup code uvnitř WordPress

Elements
  • Vytvoření nového Hook
Hook
  • Pojmenujte jej „Vlastní vyhledávač (česky)“ a vložte JS, který jste zkopírovali v kroku 7.
cse script
  • 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.
Hook Page Rule

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.

Search Query

Nejčastější dotazy

Jak vynutit otevření odkazu na výsledek hledání na stejné kartě?

Set Link Target to _self

Jak převést Widget Search Box nebo Manually to the CSE version?

Nahrazení názvu a parametru akce podle nastavení CSE prostřednictvím modulu Real Time Find and Replace Plugin.

Děkujeme za přečtení.

Chcete víc? 
Buďte první, kdo obdrží nejnovější příspěvek na blogu přímo do své e-mailové schránky. 🙂

Napsat komentář

37 komentářů u „Použití vlastního vyhledávače Google v tématu GeneratePress WordPress“

    • May I know please what specific thing you wish to modify? Is it Search Results slug /search/ or what? Please elaborate.
      Thank you.

      Odpovědět
  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.

    Odpovědět
  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.

    Odpovědět
  3. The awesome tutorial I have integrated Custom search results on my site, what you have shown is entirely unique. Thanks for this tutorial.

    Odpovědět
  4. 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?

    Odpovědět
  5. 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?

    Odpovědět
    • 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.

      Odpovědět
      • 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 ..

        Odpovědět