JavaScript登録
jQuery.ajax()を使用するのでjQueryを、全投稿数保持の為にjquery.cookieプラグインを利用するので登録しておきます。
functions.php
// JavaScript登録
add_action( 'wp_enqueue_scripts', 'sh_add_scripts' );
function sh_add_scripts() {
if ( is_page( 'wp-content-ajax-viewer' ) ) {
wp_enqueue_script( 'jquery' );
wp_enqueue_script( 'jquery-cookie', get_template_directory_uri() . '/js/jquery.cookie.js', array( 'jquery' ), true );
}
}
全投稿数を取得しクッキーに保存させる
投稿を全て表示し終えたら「もっと見る」アンカーを無効化する、を実現するために全投稿の件数が必要になります。
ページ読み込み時に全投稿数をカウントしてクッキーに保存しておきます。
2012/10/17修正
wp_headにフックさせるとhtmlを出力した後setcookie()が実行され”Warning: Cannot modify header information – headers already sent by”が発生するのでinitにフックするよう修正しています。
PHP: setcookie – Manual
2012/10/17更に修正
initにフックさせるとsh_get_query_count()関数内のis_page()が効かないのでwpフックに修正。
functions.php
// 全投稿数をカウントしクッキーに保存
add_action( 'wp', 'sh_get_query_count' );
function sh_get_query_count() {
if ( is_page( 'wp-content-ajax-viewer' ) ) {
$args = array( 'posts_per_page' => -1 );
$my_posts = get_posts( $args );
$query_count = count( $my_posts );
setcookie( 'count', $query_count, time() + 3600 );
}
}
「もっと見る」クリック時のajax処理登録
functions.php
// admin-ajax.phpへリクエストを送信し返ってきた情報をもとにページ情報を出力
add_action( 'wp_head', 'sh_add_ajax_script' );
function sh_add_ajax_script() {
if ( is_page( 'wp-content-ajax-viewer' ) ) {
?>
<script>
//<![CDATA[
ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
jQuery(function($){
$('#show-more').click(function(){
var paged = $('#content-list li').length;
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {
"action": "sh_show_more",
"paged": paged
},
success: function(data){
var html = generateHtml(data);
var target = $('#content-list');
$(target).append(html);
if ( $('#content-list li').length == $.cookie('count')) {
$('#show-more').css({
'pointerEvents': 'none',
'color': '#ccc'
});
}
},
error: function(){
alert('error');
}
});
return false;
});
function generateHtml(data){
var dataLength = data.length;
var li = [];
for ( i = 0; i < dataLength; i++ ){
li.push('<li><a href="' + data[i].url + '">' + data[i].title + '</a></li>');
}
li = li.join("");
return li;
}
})
//]]>
</script>
<?php
} // endif
}
// json出力
add_action( 'wp_ajax_sh_show_more', 'sh_show_more' );
add_action( 'wp_ajax_nopriv_sh_show_more', 'sh_show_more' );
function sh_show_more() {
global $post;
$charset = get_bloginfo( 'charset' );
$paged = $_POST['paged'];
$json = array( );
$args = array(
'posts_per_page' => 10,
'offset' => $paged
);
$my_posts = get_posts( $args );
foreach ( $my_posts as $key => $post ) :
$json[$key]['title'] = get_the_title();
$json[$key]['url'] = get_permalink();
endforeach;
$json = json_encode( $json );
nocache_headers();
header( "Content-Type: application/json; charset=$charset" );
echo $json;
die();
}
基本は/wp-admin/admin-ajax.phpを使ったデモと同じなのでそちらを参照。
大まかな流れとしては以下の通り。
- wp_headアクションフックでsh_add_ajax_script()を実行し（#02）、「AjaxでWordPressのコンテンツを遷移無く表示デモ」ページのみJavaScriptを出力（#05）
- 「もっと見る」アンカー（#show-more）クリックイベント（#11）
- 現在表示されている投稿件数を取得。（#12）
- jQuery.ajax()実行。（#13～）
今回はdataキー（サーバに送信するデータ）にactionパラメータ他にpagedパラメータを登録。pagedパラメータは#12で取得した現在表示されている投稿件数の値。
- /wp-admin/admin-ajax.php?action=sh_show_moreへのリクエストでアクションフック”wp_ajax_sh_show_more”、”wp_ajax_nopriv_sh_show_more”がフックされ、sh_show_more()が実行される。（#54,55）
- PHP関数側で$pagedにjQuery.ajax()より送信されたpagedの値を代入。（#60）
- get_posts()用のパラメータを設定。posts_per_page（表示件数）は10件。offset（取得開始位置）$pagedの値を。
他パラメータは今回はデフォルトで。画像で同様の処理を行いたいなら’post_type’ => ‘attachment’とかを指定。
- get_posts()で投稿を取得してきて（#67）、foreachで配列$jsonにタイトルとパーマリンクを代入。（#68～71）
- 先のデモ同様JSONを出力してdie()でプログラムを終了させる。（#73～77）
- jQuery.ajax()にJSONオブジェクトが返されsuccess時の処理実行。（#20～）
出力するhtmlを生成し（#21及び#37～45）、指定した要素へ出力。（#22,23）
- もし投稿件数がcookieに保存されている全投稿数と同じになれば「もっと見る」アンカー無効化処理。（#24～29）
ちなみにjQuery.ajax()でsuccess時に返ってくるJSONオブジェクトは以下の様な形式。（JSON文字列化及び整形済み）
[
{
"title": "Mac OS X Lion環境NetBeans IDEにプログラミング用フォントRicty導入",
"url": "http://show-web.jp/2012/01/31/mac-os-x-lion%E7%92%B0%E5%A2%83netbeans-ide%E3%81%AB%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0%E7%94%A8%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88ricty%E5%B0%8E%E5%85%A5/"
},
{
"title": "WordCrab Fukui 2012に参加してきました",
"url": "http://show-web.jp/2012/01/31/wordcrab-fukui-2012%E3%81%AB%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%A6%E3%81%8D%E3%81%BE%E3%81%97%E3%81%9F/"
},
{
"title": "Windows7でSCSS+Compass（導入編）",
"url": "http://show-web.jp/2012/01/17/windows7%E3%81%A7scss-compass%EF%BC%88%E5%B0%8E%E5%85%A5%E7%B7%A8%EF%BC%89/"
},
{
"title": "Retinaディスプレイ時に読み込む画像を切り替えるjQueryその2",
"url": "http://show-web.jp/2012/01/12/retina%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E6%99%82%E3%81%AB%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E7%94%BB%E5%83%8F%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8Bjquery-2/"
},
{
"title": "Retinaディスプレイ時に読み込む画像を切り替えるjQuery",
"url": "http://show-web.jp/2011/12/31/retina%E3%83%87%E3%82%A3%E3%82%B9%E3%83%97%E3%83%AC%E3%82%A4%E6%99%82%E3%81%AB%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%80%E7%94%BB%E5%83%8F%E3%82%92%E5%88%87%E3%82%8A%E6%9B%BF%E3%81%88%E3%82%8Bjquery/"
},
{
"title": "第1回WordPressお茶会＠WordBench香川を開催しました",
"url": "http://show-web.jp/2011/11/21/%E7%AC%AC1%E5%9B%9Ewordpress%E3%81%8A%E8%8C%B6%E4%BC%9A%EF%BC%A0wordbench%E9%A6%99%E5%B7%9D%E3%82%92%E9%96%8B%E5%82%AC%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F/"
},
{
"title": "第1回WordPressお茶会 – WordBench香川 – WordPressのインストール",
"url": "http://show-web.jp/2011/11/16/%E7%AC%AC1%E5%9B%9Ewordpress%E3%81%8A%E8%8C%B6%E4%BC%9A-wordbench%E9%A6%99%E5%B7%9D-wordpress%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB/"
},
{
"title": "第1回WordPressお茶会 – WordBench香川 – PHP環境設定",
"url": "http://show-web.jp/2011/11/10/%E7%AC%AC1%E5%9B%9Ewordpress%E3%81%8A%E8%8C%B6%E4%BC%9A-wordbench%E9%A6%99%E5%B7%9D-php%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A/"
},
{
"title": "第1回WordPressお茶会 – WordBench香川 – MAMPの環境設定（外部からのアクセス制限設定）",
"url": "http://show-web.jp/2011/11/05/%E7%AC%AC1%E5%9B%9Ewordpress%E3%81%8A%E8%8C%B6%E4%BC%9A-wordbench%E9%A6%99%E5%B7%9D-mamp%E3%81%AE%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A%EF%BC%88%E5%A4%96%E9%83%A8%E3%81%8B%E3%82%89%E3%81%AE/"
},
{
"title": "第1回WordPressお茶会 – WordBench香川 – XAMPPの環境設定（ドキュメントルートの確認）",
"url": "http://show-web.jp/2011/11/05/%E7%AC%AC1%E5%9B%9Ewordpress%E3%81%8A%E8%8C%B6%E4%BC%9A-wordbench%E9%A6%99%E5%B7%9D-xampp%E3%81%AE%E7%92%B0%E5%A2%83%E8%A8%AD%E5%AE%9A%EF%BC%88%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3/"
}
]
