-1

Tenho a seguinte estrutura no wordpress.

<input type="text" id="busca_artigo">
<button id="btn_busca_artigo">Enviar</button>

<div id="resultado_pesquisa"></div>
<button id="volta_artigo">Anterior</button>
<button id="proximo_artigo">Próximo</button>

Quero pesquisar uma palavra e com AJAX carregar o primeiro resultado na div #resultado_pesquisa.

Eu pesquisei nos tutoriais, mas, não os entendi direito, tem alguns que incluem o código todo no functions.php, outros colocam uma parte num arquivo ajax.js.

Não precisa ser uma busca no post todo, pode ser uma pesquisa apenas no título do post.

1 Resposta 1

1

O ideal é separar em arquivos não fazer tudo no functions, oque você pede em sua questão é um pouco grande pra colocar aqui mas vou tentar exemplificar bem, primeiramente você deve criar um evento com jquery ou javascript puro para esse input, eu recomendo utilizar o .on("input") (caso utilize jquery). Dentro desse evento do input você deve fazer uma requisição ajax, para isso você irá necessitar carregar um arquivo do wordpress chamado admin-ajax.php, para isso coloque no functions do seu tema as seguintes linhas de código:

    function Wps_load_scripts() {
     wp_register_script( 'my-script', get_template_directory_uri() . '/js/javascript.js');
     wp_localize_script( 'my-script', 'ajaxLoad_ajaxurl', admin_url('admin-ajax.php') );

      wp_enqueue_script( 'my-script');

    }

    add_action('wp_enqueue_scripts', 'Wps_load_scripts');

A função wp_localize_script irá permitir você utilizar este arquivo dentro do seu JS, então ali no "my-script" você coloca o nome do JS que você vai manipular.

Depois de realizado isso você vai fazer o seguinte no arquivo JS :

  $content = $(".divquedesejocolocarmeuconteudo");
      $('#meuinput').on('input', function() {
        var title_page , input;
        input = $(this);
        title_page = input.val();

        var datasend = {action: 'load_input_post', title:title_page};
        $.ajax({
          type: "GET",
          data: datasend,
          dataType: "json", //Esse retorno pode ser em HTML tbm
          url: ajaxLoad_ajaxurl, /*Isso daqui é a variavel que passamos pelo 
          localize_script dentro do functions*/
          beforeSend: function() {
                 /* geralmente onde se coloca o loader */
          },     
              success: function(data) {
               if(typeof data != "undefined" && typeof data !== null) { 
                 if(typeof data.conteudo1 != "undefined" && typeof data.conteudo1 !== null) {       
                  $content.html(data.conteudo1);
              }
             }
            }else {
                 /* remover loader */
          }
    });

A variavel "datasend" passamos 2 valores, action (que é a função que vai ser chamada pelo ajax pro php) e o title que é o titulo pesquisado.

Muito bem, assim que construido isso no seu javascript podemos partir para o functions.php

No functions.php do seu tema você vai criar uma função com o mesmo nome que você colocar no valor da action, ali no datasend (no js).

    function load_input_post(){

      $page_title = (isset($_GET['title']) ? $_GET['title'] : '' ); 
      $tipodopost = 'post';
      /* para recuperar a página pelo titulo você pode usar a função get_page_by_title ()*/
      $page = get_page_by_title($pagetitle, OBJECT, $tipodopost);

     /*Pronto, agora a variavel $page armazena todas as informações da página, use como desejar*/
      /* se você for retornar um HTML já construido você deve fazer o seguinte */
      <?php
        ob_start(); 
        $var = "teste";
        $var = "teste2";
      ?> 

      <h1>teste</h1>
      <img src="<?php echo  $var; ?>">
      <img src="<?php echo $var_2; ?>">

      <?php 
      $teste = ob_get_clean();
      /* usei o  ob_get_clean() pois é mais rapido, faça o método que desejar */

      /* para enviar o $teste de volta para seu JS para que possa colocar no conteudo retorno um JSON */

       $response = array();
       $response['conteudo1'] = $teste;
       wp_send_json($response); /*enviado de volta para o js */

    }
add_action('wp_ajax_load_input_post', 'load_input_post');
add_action('wp_ajax_nopriv_load_input_post', 'load_input_post');

/*Essas duas linhas de cima são necessárias para o wp entender que isto acima é uma função para requisição ajax, os nomes "wp-ajax" e "wp-ajax-nopriv" são prefixos, para em seguida surgir o nome da sua função, o nopriv é para usuários não logados*/

HTML exemplo:

<input type="text" id="meuinput">

<div class="divquedesejocolocarmeuconteudo"></div>

O código acima é o método que costumo usar e funciona kkkk, se tiver alguma alternativa melhor vou ficar acompanhando o post, o código foi pensado num cenário onde você não tem os posts listados e tem que busca-los na base, se o post ja estiver na página, basta fazer um filtragrem pelo js sem precisar do ajax, espero ter ajudado.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .