Использование пользовательской поисковой системы Google в теме GeneratePress WordPress

Есть две причины, по которым вы можете захотеть переключить поиск WordPress по умолчанию на Google Custom Search Engine в теме GeneratePress.

• Вам нужно решение на стороне клиента для статического сайта WordPress.
• Вы хотите улучшить опыт поиска, отображая высоко релевантные результаты.
  

Шаги для добавления пользовательского поиска Google

• Добавьте новую страницу с названием «Результаты поиска» и пермалинком «search» в вашем WordPress.
• Не индексируйте страницу Search Results, следуя инструкциям вашего SEO-плагина.

• добавьте приведенный ниже код CSE в текстовом режиме для отображения окна поиска и результатов.

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

• Войдите в CSE website
• Добавить новую поисковую систему

• Укажите URL сайта в формате подстановочного знака, чтобы отобразить его в результатах поиска
• Позаботьтесь о www или не www в соответствии с вашим каноническим 😉.

• Поздравляем! Вы успешно создали свою пользовательскую поисковую систему.
• Перейдите в Панель управления

• Перейти к «Look and Feel»
• Выберите Two Pages layout
• 💾 Сохранить и получить код

Настройка параметров URL-адреса поиска

• В разделе Детали результатов поиска задайте URL страницы результатов поиска и параметр запроса.

• Нажмите кнопку Сохранить и получить код. Вы увидите код результатов поиска. Не обращайте внимания на часть Div, которую мы уже добавили в первом шаге. Просто скопируйте JavaScript. Мы будем использовать его с помощью Hook.

Установка кода внутри WordPress

• Включите модуль Elements, который доступен в GeneratePress Premium.

• Создайте новый Hook

• Назовите его ‘Custom Search Engine (English)’ и вставьте JS, который вы скопировали в шаге 7.

• Разместите JS-код, который вы скопировали в шаге 9. из Google Custom Search Engine. Я сам добавил часть preload для быстрой загрузки JS в браузере. Не забудьте заменить 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>

• Используйте хук wp_head с наивысшим приоритетом 0, чтобы обеспечить размещение скрипта в верхней части head в HTML.
• Что касается производительности, мы можем установить правила отображения для загрузки этого JS только на странице результатов поиска WordPress, где он действительно необходим, и на других страницах.

Скрыть рекламу в результатах пользовательского поиска Google

• Аналогично, используя новый Hook, добавьте ниже встроенный CSS для хорошего дизайна страницы результатов поиска. Это также позволит скрыть раздражающие рекламные объявления в бесплатной версии.

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

Мы знаем, что WordPress отображает результаты поиска на https://www.gulshankumar.net/ru/?s=query

Поэтому важно изменить путь действия для окна поиска, и Yoast добавил разметку JSON-LD для поиска по сайту. Вы должны разместить нижеприведенный сниппет с помощью плагина Code Snippet.

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

Правильный путь JSON

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

Отображение заголовка и названия страницы в соответствии с поисковым запросом

Спасибо James Hibbard, который предоставил мне следующий сниппет, основанный на URLSearchParams. Он должен работать во всех современных браузерах.

Обязательно разместите скрипт с хуком wp_footer с помощью GeneratePress Elements специально для страницы ‘Search Results’, которую мы создали в первом шаге.

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

Теперь вы можете увидеть поисковый запрос в заголовке и заголовке.

FAQs

Спасибо за чтение.