Como adicionar pesquisa Ajax ao vivo ao seu WordPress sem um plug-in

Procurando uma maneira de adicionar uma pesquisa Ajax ao vivo ao seu site WordPress sem um plug-in?

Ele permitirá que você forneça instantaneamente resultados de pesquisa para seus visitantes e melhore a experiência do usuário.

Neste guia, falaremos sobre como você pode adicionar pesquisa ao vivo ao seu site sem um plug-in e as desvantagens desse método.

Aqui está um índice para ajudá-lo a navegar:

• Por que adicionar pesquisa ao vivo ao seu site
• Desvantagens de adicionar pesquisa Ajax ao vivo sem um plug-in
• Método mais fácil de adicionar pesquisa Ajax ao vivo ao seu site
• Como adicionar pesquisa Ajax ao vivo ao seu WordPress sem um plug-in

Vamos começar!

Por que adicionar pesquisa ao vivo ao seu site

Adicionar pesquisa ao vivo ao seu site é útil por vários motivos.

Primeiro, é muito mais conveniente para seus visitantes obter resultados de pesquisa instantâneos em vez de vê-los em uma nova página separada onde o WordPress os mostra por padrão.

Isso permite que eles economizem tempo e descubram mais rapidamente se o conteúdo que estão procurando está no seu site ou não.

Em segundo lugar, ajuda a aumentar suas visualizações de página, pois os visitantes que tiveram uma experiência de pesquisa positiva em seu site têm maior probabilidade de usá-lo novamente.

Também é uma ótima maneira de atrair mais tráfego dos mecanismos de pesquisa, pois o Google presta muita atenção à duração média da sessão em um site.

Mas, adicionar uma pesquisa ao vivo sem um plug-in pode ser uma meta desafiadora. Vamos dar uma olhada em por que esta não é a melhor opção.

Desvantagens de adicionar pesquisa Ajax ao vivo sem um plug-in

O principal problema em adicionar pesquisa ao vivo ao seu site sem um plug-in é que isso envolve a edição do código do seu tema.

Essa abordagem tem algumas desvantagens sérias das quais você deve estar ciente:

• Requer habilidades de codificação . Você deve ter experiência em codificação e um profundo entendimento de como o WordPress funciona para editar o código do seu tema com sucesso.
• Leva mais tempo . Ao contrário de usar um plug-in, editar o código do seu tema leva bastante tempo para descobrir quais alterações você precisa fazer e onde colocá-las.
• Não é confiável . Você pode facilmente perder todas as suas personalizações de código se atualizar seu tema ou versão do WordPress.
• Não é conveniente . Um plug-in oferece muito mais flexibilidade, pois você pode ativar e desativar rapidamente os recursos necessários de acordo com suas necessidades.

Portanto, se você não é um usuário experiente do WordPress ou desenvolvedor web, é melhor usar outra maneira de adicionar pesquisa ao vivo ao seu site.

Depois de resolvermos isso, vamos ver como você pode adicionar pesquisa ao vivo ao seu site sem editar seus arquivos de tema usando um plug-in.

Método mais fácil de adicionar pesquisa Ajax ao vivo ao seu site

A maneira mais fácil de adicionar uma pesquisa Ajax ao seu site é usar um plug-in como o SearchWP.

SearchWP é o melhor plugin de pesquisa do WordPress no mercado, com mais de 30.000 instalações ativas.

Com ele, você pode ativar e desativar a pesquisa ao vivo em seu site com apenas alguns cliques, sem necessidade de codificação.

E esse é apenas um dos muitos outros recursos do SearchWP. O principal objetivo deste plugin é dar a você controle total sobre a pesquisa em seu site.

Por exemplo, usando-o, você pode alterar a ordem dos resultados da pesquisa, tornar tags de postagem, categorias e campos personalizados pesquisáveis, criar formulários de pesquisa personalizados e muito mais.

Aqui estão alguns outros recursos do SearchWP que ajudarão a expandir seus negócios:

• Ative a pesquisa difusa . Dessa forma, seus visitantes podem encontrar os resultados de pesquisa corretos, mesmo se cometerem um erro de digitação em uma consulta de pesquisa.
• Acompanhe as pesquisas de seus visitantes . Reúna dados abrangentes sobre a atividade de pesquisa em seu site, incluindo as pesquisas mais populares, o número de cliques e muito mais.
• Exclua páginas específicas dos resultados de pesquisa . Oculte páginas desnecessárias dos resultados de pesquisa em seu site para ajudar os visitantes a encontrar o conteúdo que procuram mais rapidamente.
• Inclua arquivos PDF nos resultados da pesquisa . Permita que seus visitantes encontrem PDFs e documentos do Office usando a barra de pesquisa em seu site.

Com isso, vamos ver como você pode habilitar a pesquisa ao vivo em seu site usando o SearchWP.

Etapa 1: instale e ative o SearchWP em seu site

Para começar, você precisará obter sua cópia do SearchWP.

Uma vez feito, vá ao seu painel SearchWP e clique em Downloads .

Em seguida, pressione o botão Download SearchWP e salve o arquivo ZIP do plugin em seu computador.

Após o download, copie sua chave de licença do SearchWP na mesma página. Você precisará dele ainda mais para ativar o plug-in em seu site.

Agora você precisará fazer o upload do arquivo ZIP SearchWP para o seu site e instalar o plugin. Confira o tutorial de como instalar um plugin do WordPress se precisar de um lembrete sobre como fazer isso,

Após a instalação do SearchWP, você precisará ativar a cópia do seu plugin com sua chave de licença.

Para fazer isso, aponte o cursor sobre o botão SearchWP no painel superior do painel do WordPress e clique em Ativar licença .

Depois de acessar a página Licença , cole sua chave de licença SearchWP no campo Licença e clique em Ativar .

Depois de ativar sua licença, você estará pronto para passar para a próxima etapa e instalar a extensão do Live Search.

Etapa 2: instalar a extensão SearchWP Live Search

A instalação desta extensão SearchWP permite que você ative a pesquisa Ajax ao vivo em seu site com apenas alguns cliques sem escrever uma única linha de código.

Para começar, navegue até SearchWP »Extensões no lado esquerdo do seu painel do WordPress.

Em seguida, encontre a extensão do Live Search e clique em Instalar em sua seção.

É isso. Você acabou de adicionar com sucesso uma pesquisa Ajax ao vivo ao seu site.

Vamos ver como isso funciona.

Etapa 3: teste sua nova pesquisa

Para fazer isso, vá ao seu site e faça uma pesquisa.

Por exemplo, veja como é uma pesquisa ativa do SearchWP Ajax em nosso site de teste:

Agora, vamos ver como você pode adicionar uma pesquisa ao vivo ao seu site sem um plug-in.

Como adicionar pesquisa Ajax ao vivo ao seu WordPress sem um plug-in

Para adicionar uma pesquisa Ajax ao vivo ao seu site sem usar um plug-in, você precisará fazer alterações em seus arquivos de tema.

Para começar, crie um tema filho do seu tema atual que você usa em seu site.

Isso permitirá que você alterne rapidamente para o tema pai se fizer algo errado e travar seu site.

Também é uma boa prática fazer backup do seu site antes de começar a editar, por precaução.

Você pode conferir este tutorial sobre como criar um tema filho do WordPress se precisar de ajuda com isso.

Depois de criar um tema filho, vá para o painel do WordPress e navegue até Appearance » Theme File Editor .

Em seguida, encontre o arquivo functions.php e clique nele para abri-lo no editor de arquivos.

Em seguida, cole o seguinte código em seu arquivo functions.php :

<?php 
/*
 ==================
 Ajax Search
======================	 
*/
// add the ajax fetch js
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() {
?>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0Afunction%20fetch()%7B%0A%0A%20%20%20%20jQuery.ajax(%7B%0A%20%20%20%20%20%20%20%20url%3A%20'%3C%3Fphp%20echo%20admin_url('admin-ajax.php')%3B%20%3F%3E'%2C%0A%20%20%20%20%20%20%20%20type%3A%20'post'%2C%0A%20%20%20%20%20%20%20%20data%3A%20%7B%20action%3A%20'data_fetch'%2C%20keyword%3A%20jQuery('%23keyword').val()%20%7D%2C%0A%20%20%20%20%20%20%20%20success%3A%20function(data)%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20jQuery('%23datafetch').html(%20data%20)%3B%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%7D)%3B%0A%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

<?php
}

// the ajax function
add_action('wp_ajax_data_fetch' , 'data_fetch');
add_action('wp_ajax_nopriv_data_fetch','data_fetch');
function data_fetch(){

    $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => array('page','post') ) );
    if( $the_query->have_posts() ) :
        echo '<ul>';
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <li><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></li>

        <?php endwhile;
       echo '</ul>';
        wp_reset_postdata();  
    endif;

    die();
}

Quando terminar, pressione Atualizar arquivo para salvar suas alterações.

É isso. Você adicionou com sucesso a pesquisa Ajax ao vivo ao seu site WordPress sem um plug-in.

Isso permitirá que seus visitantes obtenham resultados de pesquisa instantaneamente e aumentem o número de visualizações de página.

Deseja adicionar pesquisa ao vivo ao seu site em apenas alguns cliques sem codificação? Você pode começar com o SearchWP aqui.

Quer saber como habilitar a pesquisa por tags de postagem? Confira nosso tutorial detalhado sobre como pesquisar postagens por tags no WordPress.

Deseja ocultar algumas categorias de postagem da pesquisa? Siga o guia de pesquisa de como excluir categoria do WordPress.