WordPress 記事読み込みをAjaxローディングにする : Web制作の実験場・ショーケース

WordPressでページ遷移せずに記事を読み込みたい…
スマホの事も有るし、いざやってみようと難しくて食わず嫌いでしたがチャレンジしてみました。

[参照元]
http://hijiriworld.com/web/wp-ajax-loading/

このサイトのトップページがほぼそのままのコードで動いてますが、

まずは、jQuery1.11.xや2以降で動かした時に、このままでは動かなくなるのでそこをちょこっと弄ります。

jQueryの改良

jQuery1.8以降では「.live」が使えないので代替に「.on」を使います。

元のコードは下記ですが、

$(function() {
    $("#more_disp a").live("click", function() {
         
        $("#more_disp").html('<img class="ajax_loading" src="http://localhost/wordpress/wp-content/themes/ajax_loading/images/ajax_loader.gif" />');
         
        $.ajax({
            type: 'post',
            url: 'http://localhost/wordpress/wp-content/themes/ajax_loading/more-disp.php',
            data: {
                'now_post_num': now_post_num,
                'get_post_num': get_post_num
            },
            success: function(data) {
                now_post_num = now_post_num + get_post_num;
                data = JSON.parse(data);
                $("#content").append(data['html']);
                $("#more_disp").remove();
                if (!data['noDataFlg']) {
                    $("#content").append('<div id="more_disp"><a href="#">もっと表示</a></div>');
                }
            }
        });
        return false;
    });
});

$(function() {

$("#more_disp a").live("click", function() {

$("#more_disp").html('<img class="ajax_loading" src="http://localhost/wordpress/wp-content/themes/ajax_loading/images/ajax_loader.gif" />');

$.ajax({

type: 'post',

url: 'http://localhost/wordpress/wp-content/themes/ajax_loading/more-disp.php',

data: {

'now_post_num': now_post_num,

'get_post_num': get_post_num

success: function(data) {

now_post_num = now_post_num + get_post_num;

data = JSON.parse(data);

$("#content").append(data['html']);

$("#more_disp").remove();

if (!data['noDataFlg']) {

$("#content").append('<div id="more_disp"><a href="#">もっと表示</a></div>');

}

});

return false;

});

これを2行目を次のように書き換えます。

$(function() {
    $(document).on('click', '#more_disp a', function () {
         
        $("#more_disp").html('<img class="ajax_loading" src="http://localhost/wordpress/wp-content/themes/ajax_loading/images/ajax_loader.gif" />');
         
        $.ajax({
            type: 'post',
            url: 'http://localhost/wordpress/wp-content/themes/ajax_loading/more-disp.php',
            data: {
                'now_post_num': now_post_num,
                'get_post_num': get_post_num
            },
            success: function(data) {
                now_post_num = now_post_num + get_post_num;
                data = JSON.parse(data);
                $("#content").append(data['html']);
                $("#more_disp").remove();
                if (!data['noDataFlg']) {
                    $("#content").append('<div id="more_disp"><a href="#">もっと表示</a></div>');
                }
            }
        });
        return false;
    });
});

$(function() {

$(document).on('click', '#more_disp a', function () {

$("#more_disp").html('<img class="ajax_loading" src="http://localhost/wordpress/wp-content/themes/ajax_loading/images/ajax_loader.gif" />');

$.ajax({

type: 'post',

url: 'http://localhost/wordpress/wp-content/themes/ajax_loading/more-disp.php',

data: {

'now_post_num': now_post_num,

'get_post_num': get_post_num

success: function(data) {

now_post_num = now_post_num + get_post_num;

data = JSON.parse(data);

$("#content").append(data['html']);

$("#more_disp").remove();

if (!data['noDataFlg']) {

$("#content").append('<div id="more_disp"><a href="#">もっと表示</a></div>');

}

});

return false;

});

これでjQuery側はOKですね！！

でも、特定のカテゴリのみを読ませたい時ってありますよね？

more-disp.phpのSQL文を書き換えればいいんです。

more-disp.phpのSQL文の書き換え

参考元だと下記の通りですが、

$sql="SELECT
        $wpdb->posts.ID, 
        $wpdb->posts.post_title, 
        $wpdb->posts.post_excerpt 
    FROM 
        $wpdb->posts  
    WHERE 
        $wpdb->posts.post_type = 'post' AND $wpdb->posts.post_status = 'publish'
    ORDER BY 
        $wpdb->posts.post_date DESC 
    LIMIT $now_post_num, $get_post_num";

$sql="SELECT

$wpdb->posts.ID,

$wpdb->posts.post_title,

$wpdb->posts.post_excerpt

FROM

$wpdb->posts

WHERE

$wpdb->posts.post_type = 'post' AND $wpdb->posts.post_status = 'publish'

ORDER BY

$wpdb->posts.post_date DESC

LIMIT $now_post_num, $get_post_num";

この部分を次の通り書き換えます。

$sql="SELECT
        $wpdb->posts.*,$wpdb->posts.guid , $wpdb->term_relationships.* /* フィールドを指定 */
		FROM
		$wpdb->posts, $wpdb->term_relationships /* テーブルを指定 */
		WHERE
		$wpdb->posts.ID = $wpdb->term_relationships.object_id /* テーブル同士の結びつけ */
		AND $wpdb->term_relationships.term_taxonomy_id = 1 /* カテゴリーIDが1のもの */
		AND $wpdb->posts.post_status = 'publish' /* かつ公開済の記事 */
		ORDER BY
		$wpdb->posts.post_date DESC /* 新しい順に並び替え */
		LIMIT
		$now_post_num, $get_post_num";

$sql="SELECT

$wpdb->posts.*,$wpdb->posts.guid , $wpdb->term_relationships.* /* フィールドを指定 */

FROM

$wpdb->posts, $wpdb->term_relationships /* テーブルを指定 */

WHERE

$wpdb->posts.ID = $wpdb->term_relationships.object_id /* テーブル同士の結びつけ */

AND $wpdb->term_relationships.term_taxonomy_id = 1 /* カテゴリーIDが1のもの */

AND $wpdb->posts.post_status = 'publish' /* かつ公開済の記事 */

ORDER BY

$wpdb->posts.post_date DESC /* 新しい順に並び替え */

LIMIT

$now_post_num, $get_post_num";

2つ目のSQL部分も次のように書き換えます。

$sql = "SELECT
        $wpdb->posts.*,$wpdb->posts.guid , $wpdb->term_relationships.* /* フィールドを指定 */
		FROM
		$wpdb->posts, $wpdb->term_relationships /* テーブルを指定 */
		WHERE
		$wpdb->posts.ID = $wpdb->term_relationships.object_id /* テーブル同士の結びつけ */
		AND $wpdb->term_relationships.term_taxonomy_id = 1 /* カテゴリーIDが1のもの */
		AND $wpdb->posts.post_status = 'publish' /* かつ公開済の記事 */
		ORDER BY
		$wpdb->posts.post_date DESC /* 新しい順に並び替え */
		LIMIT
		$next_now_post_num, $next_get_post_num";

$sql = "SELECT

$wpdb->posts.*,$wpdb->posts.guid , $wpdb->term_relationships.* /* フィールドを指定 */

FROM

$wpdb->posts, $wpdb->term_relationships /* テーブルを指定 */

WHERE

$wpdb->posts.ID = $wpdb->term_relationships.object_id /* テーブル同士の結びつけ */

AND $wpdb->term_relationships.term_taxonomy_id = 1 /* カテゴリーIDが1のもの */

AND $wpdb->posts.post_status = 'publish' /* かつ公開済の記事 */

ORDER BY

$wpdb->posts.post_date DESC /* 新しい順に並び替え */

LIMIT

$next_now_post_num, $next_get_post_num";

以外と難しくない！！

お試しアレ(^_^)

Blog