web-dev-qa-db-ja.com

Ajaxの検索結果を取得するためのテンプレートの問題

私は検索結果をajaxでdivに入れようとしています。問題は、検索テンプレートにアクセスしたときにundefined function have_posts()というエラーが表示されることです。それはsearch-results.phpにあるget_header()でも問題を起こしましたが、私はそれを取り出しました。これが私の設定です。

  <div id="my_search">
   <form role="search" method="get" id="searchform" action="http://myurl.com/" >
    <input type="text" value="" name="s" id="s" />
    <input type="submit" id="searchsubmit" value="Search" />
   </form>
  </div>
  <div id="results"></div>
  <script type="text/javascript">
    $(document).ready(function(){
    $("#searchsubmit").click(function(e){
     e.preventDefault();
     var search_val=$("#s").val(); 
     $.post('http://mysite.com/wp-content/themes/beta/search-results.php',{search_string:search_val},function(data){
        if(data.length>0){
            $("#results").html(data);
        }
     });
    });   
   });
  </script>

そしてこれがsearch-results.phpテンプレートです。検索結果をテンプレートに渡していないのではないかと思います。

<ul>
 <?php if (have_posts()) : while (have_posts()) : the_post();  ?>
  <li><a title="Permalink to this post" href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></li>

 <?php endwhile; endif; ?>
 <?php if (!have_posts()) { echo('<li>No results to show.</li>'); } ?>
</ul>
searchtemplatesajax
6
Pollux Khafra

この方法でテンプレートファイルを直接読み込む場合、WordPress環境を読み込んでいないため、WordPress関数は使用できません。

2つのオプションは、フロントエンドで検索ページを読み込むか、結果をフィルターすることです：

$('#results').load('http://mysite.com/?s=searchterm ul#target');

または、WordPressが提供するAJAX機能を使用して検索機能を構築します。 AJAX in Plugins を参照してください。

編集

以下に、AJAXを介して追加の投稿を読み込む方法の例を示します。これは、必要に応じて検索機能を作成するように調整できます。

まず、functions.phpで、JavaScriptをキューに入れ、スクリプトをローカライズして、リクエストを処理するAJAX URLを渡します。 WordPress AJAXはadmin-ajax.phpを使用して、フロントエンドまたはバックエンドのすべてのAJAXリクエストを処理します。

add_action( 'wp_enqueue_scripts', 'wpa56343_scripts', 100 );

function wpa56343_scripts() {
    wp_enqueue_script(
        'wpa56343_script',
        get_template_directory_uri() . '/js/scripts.js?ver=1.0',
        array( 'jquery' ),
        null,
        false
    );
    wp_localize_script(
        'wpa56343_script',
        'WPaAjax',
        array(
            'ajaxurl' => admin_url( 'admin-ajax.php' )
        )
    );
}

scripts.jsでは、AJAXアクションを呼び出し、postoffset varを渡すJavaScriptが、クエリに渡すことができるようにしています。 WPaAjax.ajaxurlを使用して、このリクエストを処理するURLを渡すことにも注意してください。

jQuery(document).ready(function($){

    $('#blog-more').click(function(e){ // <- added
        e.preventDefault(); // <- added to prevent normal form submission
        var postoffset = $('.post').length;
        $.post(
            WPaAjax.ajaxurl,
            {
                action : 'wpa56343_more',
                postoffset : postoffset
            },
            function( response ) {
                $('#container').append( response );
            }
        );
    });

});

functions.phpでは、AJAXリクエストを処理する関数が、上記のJavaScriptで渡したアクションにマッピングされています。削除されたWordPressのバージョンはブートストラップされるため、ほとんどのWordPress関数にアクセスできます。

add_action('wp_ajax_wpa56343_more', 'wpa56343_more');
add_action('wp_ajax_nopriv_wpa56343_more', 'wpa56343_more');

function wpa56343_more(){
    global $wp_query;

    $offset = $_POST['postoffset'];
    $args = array(
        'offset' => $offset,
        'posts_per_page' => 10
    );
    $wp_query = new WP_Query( $args );

    get_template_part( 'post-template' );

    exit;
}
12
Milo