Kullanım Google Custom Search Engine içinde GeneratePress WordPress Theme

Varsayılan WordPress aramasını değiştirmek istemenizin iki nedeni vardır Google Custom Search Engine içinde GeneratePress Theme.

• için istemci tarafında bir çözüme ihtiyacınız var Static WordPress site.
• Son derece alakalı sonuçlar görüntüleyerek arama deneyimini iyileştirmek istiyorsunuz.
  

Ekleme adımları Google Custom Search

• Başlık ile yeni bir sayfa ekleyin “Search Results” and permalink “search” senin içinde WordPress.
• Noindex Search Results sayfanızdan gelen talimatları izleyerek SEO plugin.

• aşağıya ekleyin CSE code Arama kutusunu ve sonuçlarını görüntülemek için Metin modunda.

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

• Oturum aç CSE website
• Yeni bir Search Engine

• Arama sonuçlarında görüntülemek için sitenin URL’sini joker karakter biçiminde sağlayın
• Canonical’ınıza göre www veya non-www’ye dikkat edin 😉

• Tebrikler! Özel arama motorunuzu başarıyla oluşturdunuz.
• Gitmek Control Panel

• Gitmek “Look and Feel”
• Seçiniz Two Pages layout
• 💾 Kaydet & Kod Al

Yapılandırma Search URL Parameters

• İçinde Search Results Details, set Search Results page URL and Query parameter.

• Tıklayın Save & Get Code button. Arama Sonuçları kodunu göreceksiniz.  Görmezden gel Div part, ilk adımda zaten eklemiştik. Sadece JavaScript’i kopyalayın. Bunu Hook ile kullanacağız.

İçerideki kurulum kodu WordPress

• Etkinleştir Elements module içinde mevcut olan GeneratePress Premium.

• Yeni bir Hook

• ‘Özel Arama Motoru (İngilizce)’ olarak adlandırın ve 7. adımda kopyaladığınız JS’yi yapıştırın.

• Google Custom Search Engine’den 9. adımda kopyaladığınız JS kodunu yerleştirin. JS’nin tarayıcıya hızlı yüklenmesi için preload kısmını kendim ekledim. Yayıncı kimliğini değiştirdiğinizden emin olun.

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

• Kullanım wp_head hook Kodun HTML’de başlığın en üst bölümüne yerleştirilmesini sağlamak için en yüksek öncelik değeri 0’dır.
• Performansla ilgili olarak, bu JS’yi yalnızca WordPress’e yüklemek için Görüntüleme Kurallarını ayarlayabiliriz Search Results gerçekten gerekli olduğu sayfa ve diğer sayfa olmayan.

Hide Advertisement of Google Custom Search Results

• Benzer şekilde, yeni bir Kanca kullanarak Arama Sonuçları sayfasının iyi tasarımı için satır içi CSS’nin altına ekleyin. Bu olacak hide annoying advt ücretsiz sürümde de.

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

We know WordPress display search results at https://www.gulshankumar.net/tr/?s=query

Therefore, it is important to change action path for Search box and Yoast added JSON-LD markup for the Site Search. You should place below snippet using 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' );

Sayfa Başlığını ve Başlığını Arama Sorgusuna Göre Görüntüleme

URLSearchParams’ı temel alan aşağıdaki parçacığı bana sağlayan James Hibbard’a teşekkürler. Bu tüm modern tarayıcılar için çalışmalıdır.

Komut dosyasını şununla yerleştirdiğinizden emin olun wp_footer kullanarak kanca GeneratePress Özellikle ilk adımda oluşturduğumuz ‘Arama Sonuçları’ sayfası için öğeler.

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

Artık Başlık ve Başlıkta Arama Sorgusunu görebilirsiniz.

SSS

Okuduğunuz için teşekkürler.