web-dev-qa-db-ja.com

Ajaxを介して単一の投稿を読み込むための適切な方法は？

私は自分のインデックスページで設定したdivにAjaxを介して単一の投稿をロードしています。これに関してはすべてうまくいっています。ユーザーがアドレスバーにexample.com/my-postを入力した場合、それはすでにdivにロードされている投稿でインデックスページをロードするので、私は状態をプッシュ/ポップするためにhistory.jsを使用したいです。それが問題があるところです。

これは私が使っている機能を単純化したものです（実際にはスライドも含まれています）： 

function my_load_ajax_content () {

    $args = array(
        'p' => $_POST['post_id'],
        'post_type' => 'projects'
        );

    $post_query = new WP_Query( $args );
    while( $post_query->have_posts() ) : $post_query->the_post(); ?>

    <div class="post-container">
        <div id="project-content">
            <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
            <?php the_content(); ?>
        </div>
    </div><!-- .post-container -->

    <?php
    endwhile;
    wp_die();
}

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

これが私の呼称です。 

$('.post-link').on('click', function(e) {
    e.preventDefault();

    var post_id = $(this).data('id'), // data-id attribute for .post-link
        projectTitle = $(this).data('title'), // data-title attribute for .post-link
        projectSlug = $(this).data('slug'), // data-slug attribute for .post-link
        ajaxURL = site.ajaxurl; // Ajax URL localized from functions.php

    $.ajax({
        type: 'POST',
        url: ajaxURL,
        context: this,
        data: {'action': 'load-content', post_id: post_id },
        success: function(response) {
            $('#project-container').html(response);
            return false;
        }
    });
});

これがループです 

<?php $home_query = new WP_Query('post_type=projects');

while($home_query->have_posts()) : $home_query->the_post(); ?>

    <article class="project">
        <?php the_post_thumbnail( 'home-thumb' ); ?>
        <div class="overlay">
            <a class="post-link expand" href="<?php the_permalink(); ?>" data-id="<?php the_ID(); ?>" data-title="<?php the_title(); ?>" data-slug="<?php global $post; echo $post->post_name; ?>">+</a>
        </div>
    </article>

<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>

私はこれについて間違ったやり方をしているのだろうかと思います。私は混乱していて、私の一部は、すべてのHTMLをsingleテンプレートに入れて、それをAjax関数から呼び出すべきだと考えています。しかしそれがどのように機能するのか、私は正確にはわかりません。ユーザーがブラウザにexample.com/my-postを入力した場合、インデックスページにすべてのHTMLが表示されずに単一の投稿のみが読み込まれるためです。私はこれを正しく説明していることを願っています。誰かがそれがどのように行われたかを私に見せることができますか？

jqueryajaxsingle
1
j85

これが私の見解です： /あなたのsingle.phpの中にそれをロードしてくださいグーグルはこれを見ることができない（ほとんどのクローラを使って）。

いずれにせよ - これがデータを返す正しい方法です...
get_postまたはwp_queryを使用できることに注意してください。アップTPあなた。

JSパート： 

   jQuery(document).ready(function($) {
    $.post(ajax_object.ajaxurl, {
        action: 'my_load_ajax_content ',            
        post_id: post_id  // << should grab this from input...

    }, function(data) {

        var $response   =   $(data);
        var postdata    =   $response.filter('#postdata').html();

        $('.TARGETDIV').html(postdata);
    });
});

PHPパーツ： 

function my_load_ajax_content () {

    $pid        = intval($_POST['post_id']);
    $the_query  = new WP_Query(array('p' => $pid));

    if ($the_query->have_posts()) {
        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            $data = '
            <div class="post-container">
                <div id="project-content">
                    <h1 class="entry-title">'.get_the_title().'</h1>
                    <div class="entry-content">'.get_the_content().'</div>
                </div>
            </div>  
            ';

        }
    } 
    else {
        echo '<div id="postdata">'.__('Didnt find anything', THEME_NAME).'</div>';
    }
    wp_reset_postdata();


    echo '<div id="postdata">'.$data.'</div>';
}

add_action ( 'wp_ajax_nopriv_load-content', 'my_load_ajax_content' );
add_action ( 'wp_ajax_load-content', 'my_load_ajax_content' );

お役に立てれば。
もう一度言いますが、そうすることはお勧めしませんが...これでうまくいくはずです。

クリックでGET POSTの改訂

最初：ボタン/リンク - のようなものであるべきです

<button class="get_project" data-postid="POSTID HERE!">PROJECT NAME</button>

2番目：クリックを聞いているjsコード：

jQuery(function($){

    $('.get_project').click(function() {

        var postid = $(this).attr('data-postid');

        $.post(ajax_object.ajaxurl, {
            action: 'my_load_ajax_content ',            
            postid: postid
        }, function(data) {
            var $response   =   $(data);
            var postdata    =   $response.filter('#postdata').html();
            $('.TARGETDIV').html(postdata);
        });

    })

});

PHPコードは変更する必要はありません - 必要なデータを設定するだけです。

1
Sagive SEO