Usar o motor de pesquisa personalizado Google em GeneratePress WordPress Theme

Há duas razões pelas quais pode querer mudar a pesquisa padrão do WordPress para Google Custom Search Engine em GeneratePress Theme.

• Necessita de uma solução do lado do cliente para um site Static WordPress.
• Pretende melhorar a experiência de pesquisa, exibindo resultados altamente relevantes.

Passos para adicionar a Pesquisa personalizada Google

• Adicione uma nova página com o título “Resultados da Pesquisa” e permalink “pesquisa” no seu WordPress.
• Noindex Página de resultados da pesquisa seguindo as instruções do seu plugin SEO.

• adicionar abaixo o código CSE no modo Texto para exibir a caixa de pesquisa e os resultados.

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

• Inicie a sessão em CSE website
• Adicionar um novo motor de busca

• Forneça o URL do sítio no formato wildcard para o exibir nos resultados da Pesquisa
• Cuide de www ou non-www, de acordo com o seu canónico 😉

• Parabéns! Criou com sucesso o seu motor de busca personalizado.
• Ir para Painel de Controlo

• Ir para “Look and Feel” (Olhar e Sentir)
• Seleccionar Disposição de duas páginas
• 💾 Guardar e obter código

Configurar parâmetros URL de pesquisa

• Em Search Results Details, definir o URL da página Search Results e o parâmetro Query.

• Clique no botão Salvar & Obter Código. Irá ver o código dos resultados da pesquisa.  Ignorar a parte Div, já adicionámos no primeiro passo. Basta copiar o JavaScript. Vamos utilizá-lo com Gancho.

Código de configuração dentro do WordPress

• Activar o módulo Elements que está disponível no GeneratePress Premium.

• Criar um novo Hook

• Dê-lhe o nome ‘Motor de Busca Personalizado (Inglês)’ e cole o JS que copiou no passo 7.

• Coloque o código JS que copiou no passo 9. do Motor de Busca Personalizado Google. Eu próprio adicionei parte de pré-carga para carregar rapidamente o JS no navegador. Certifique-se de substituir o ID da editora.

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

• Usar wp_head hook com o valor de prioridade mais alta 0 para garantir que o script seja colocado na secção superior da cabeça no HTML.
• Relativamente ao desempenho, podemos definir Regras de Visualização para carregar este JS apenas na página do WordPress Resultados de Pesquisa, onde é realmente necessário e não é outra página

Ocultar publicidade dos resultados da pesquisa personalizada do Google

• Da mesma forma, usando um novo Gancho adicionar abaixo em linha CSS para um bom design da página de Resultados de Pesquisa. Irá cobrir também o incómodo advt na versão gratuita.

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

Sabemos que o WordPress mostra os resultados da pesquisa em https://www.gulshankumar.net/pt/?s=query

Por conseguinte, é importante alterar o caminho de acção para a caixa de Pesquisa e Yoast adicionou a marcação JSON-LD para a Pesquisa do Sítio. Deve colocar abaixo do snippet usando o plugin 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

Correcto caminho do 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' );

Mostrar o título da página e o título de acordo com a consulta de pesquisa

Graças a James Hibbard que me forneceu abaixo o snippet que é baseado no URLSearchParams. Isto deve funcionar para todos os navegadores modernos.

Certifique-se de colocar o guião com o gancho wp_footer usando a página GeneratePress Elements especificamente para a página ‘Search Results’ que criámos no primeiro passo.

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

Agora pode ver Search Query em Título e Título.

FAQs

Obrigado pela leitura.