お疲れ様です。
あっというまに今年も残すところたったの5か月です。
早い。
最近、残りの人生が何日かを気にするようになり仮に80歳まで生きるなら
あと38年くらい。そう約14000日くらいしか時間がないのだと気づきました。
なのでおいしいものはたくさん食べるようにしています。
早速 脱線しましたが今日はまた需要があるようであるやつをまじめに書こうと思います。
PHPとajaxの組み合わせは世にたくさん出てると思いますが
本件はwordpressを使ってーというものになります。
html
まずは、html側の例です。
上記をhtmlにするとこんな感じになります。
<div id="posts">
<ul id="post-list">
<li>記事</li>
<li>記事</li>
：
</ul>
</div>
<input type="hidden" id="page_num" value="2"><!--次ページ用-->
<input type="hidden" id="show_num" value="10"><!--何件表示したいか-->
<div id="post-more">MORE</div><div id="post-more">MORE</div>
こんな状態でMOREをクリックすると次ページのデータを動的に取ってきます。
PHP
wordpressで用意されたajaxを使いますので、functions.phpに以下のような記述をします。
//------------------------------------
//カテゴリー記事の追加取得
//------------------------------------
function more_posts(){
$data = array();
$post_data = array();
$next_post = "";
$count = 1;
$page_num = intval($_POST["page_num"]);//何ページ目のデータか送られてくる
$show_num = intval($_POST["show_num"]);//何記事ずつ取得か送られてくる
//カテゴリーを指定する場合はカテゴリー情報を送る
$args = array( 'posts_per_page' => $show_num,
'post_type' => 'works',
'post_status' => 'publish',
'paged' => $page_num,
'orderby' => 'date',
'order' => 'DESC',
);
//投稿数取得
$count_posts = wp_count_posts();
$max_posts = $count_posts->publish;
query_posts( $args );
if ( have_posts() ) {
while ( have_posts() ) : the_post();
$post_id = get_the_ID();
$post_date = get_the_time('Y.m.d');
$post_title = get_the_title();
$permalink = get_the_permalink();
$post_cat = get_the_category();
//カテゴリー情報
$cat_name = $post_cat->name;
$cat_slug = $post_cat->slug;
//サムネイル
if ( has_post_thumbnail()) {
$get_image_id = get_post_thumbnail_id( $post_id);
list($thumb, $w, $h) = wp_get_attachment_image_src($get_image_id);
} else {
//サムネイルがない場合デフォルト画像を使用
$thumb = get_stylesheet_directory_uri(). "/images/no_img.jpg";
}
$post_data[] = array(
'post_date' => $post_date,
'post_title' => $post_title,
'thumb' => $thumb,
'permalink' => $permalink,
'cat_name' => $cat_name,
'cat_slug' => $cat_slug,
);
$count++;
endwhile;
//記事が1つだったとき、最大数までいったときを考慮
$count = ( $show_num < 2 ) ? 0 : $count;
$next_post = ( $max_num <= ($page_num * $show_num) + $count) ? "none" : "";
$data[] = array( 'post_data' => $post_data,//記事データ
'next_post' => $next_post,//次ページがあるか返す
'count' => $count,
'show_num' => $show_num,
'page_num' => $page_num,
'max_num' => $max_num,
);
wp_reset_query();
}
wp_send_json($data);
}
add_action("wp_ajax_more_posts", "more_posts");
add_action("wp_ajax_nopriv_more_posts", "more_posts");
詳しい内容はベタで書いているのでなんとなくわかるかと思いますが
MOREボタンをクリックしたときにajaxでどんなデータが必要か送り、そのリクエストによる結果を返すような記述になります。
jQuery
jQuery(function($){
$("#post-more").click(function(e){
var page_num = parseInt($('#page_num').val());//次ページの番号を取得
var show_num = parseInt($('#show_num').val());//何記事毎必要か取得
get_more_posts( page_num,show_num );
$('#page_num').val(page_num+1);//クリック後に次ページ番号を変更
});
function get_more_posts( page_num,show_num,home_url,term ) {
var host ="/wp/wp-admin/admin-ajax.php";//サイトに合わせてパスを変更
var t = "", post_data, next_post;
$.post(host, {action: "more_posts", page_num: page_num, show_num: show_num }, function(r){
$.each(r, function(_, i){
post_data = i.post_data;
next_post = i.next_post;
max_num = i.max_num;
for ( var key1 in post_data ){
post_date = post_data[key1]["post_date"];
post_title = post_data[key1]["post_title"];
thumb = post_data[key1]["thumb"];
permalink = post_data[key1]["permalink"];
cat_name = post_data[key1]["cat_name"];
title_en = post_data[key1]["cat_slug"];
t += '上記の変数を使って追記用のhtmlを記述する';
}
});
$("#post-list").append(t);
//最後の記事が含まれていた場合 もっと見るを除去
if ( next_post == "none" ) $('#post-more').fadeOut();
});
}
});
hostのadmin-ajax.phpへのパスは適宜ご調整ください。
こちらを使って
こちらの実装が完了になります。
カテゴリーでソートする場合は、html側に送信用のカテゴリーIDなどを置いておいて
jsで取得し、送信。
PHP側で受け取りを追加いただくと可能です。
言葉で言うのは簡単ですが、やはり実際組み込んでみて自分の力になると思うのであとはいろいろお試しください。
暑い夏がやってきますが
この夏もたくさんカレーを食べます。
それでは。
