どもです。
レーヴ・ユナイティア、やっとこさナハト編に突入した餅。です。
ユリウス兄さんがPTキャラにいる新鮮感。
今回はMovableTypeのおはなし。
ページ遷移する際、次のページが現在のページの下に追加されるサイトってイマドキ感ありますね。
そんなページをMovableTypeで作ってくれという話になりました。
もしかしたらデータベースにアクセスすれば手っ取り早いのかもしれませんが、僕はそのやり方がよくわかっていないので、専用に出力した裏アーカイブを、表アーカイブから読み込むという方法を使いました。
①完成形の確認
<div id="list">
<ul>
<li>この中身が記事1つ分</li>
</ul>
</div>
<div id="paging"><span>続きを読むボタン</span></div>
[#pager span]をクリックすることで、[#list ul]の中に[li]が読み込まれます。
一度に読み込まれる[li]の数は設定することができます。
②/list/アーカイブを用意する
まずは読み込み専用アーカイブを作ります。
お馴染みのページ送り生成プラグイン、「PageBute」をインストールしておきましょう。
<MTPageContents count="一度に読み込みたい記事数">
<mt:Entries include_subcategories="1" lastn="999"><li>
この中身が記事1つ分
</li><$MTPageSeparator$></mt:Entries>
</MTPageContents>
/list/アーカイブの記載は、これだけでおｋです。
アーカイブマッピングは、表示したいアーカイブが[%y/%m/%i]だったら[list/%y/%m/%i]。
つまり、頭に[list/]をつけて、後は同じにしてください。
まず無いとは思われますが、万が一、検索エンジンに引っかかることを危惧するのであれば、
SetEnvIf User-Agent "Googlebot" shutout
SetEnvIf User-Agent "Slurp" shutout
SetEnvIf User-Agent "msnbot" shutout
order Allow,Deny
Allow from all
Deny from env=shutout
最後に改行を挟む
.htaccessに以上の記載をして、listディレクトリに突っ込んでください。
検索エンジン全てをシャットアウトする強力な記述なので、くれぐれも/list/より上には設置しないようお気をつけて。
.htaccess参考サイト：【検索避け覚書】.htaccess設置と書き方
③スクリプトを用意する
さて、次は表アーカイブに記載するスクリプトです。
使用する言語はMovableType、jQuery、PHPです。
MovableTypeはともかく、PHPを使える環境で、予めjQueryを読み込んでおく必要があります。
<?php
$data = $_SERVER["REQUEST_URI"]; list($domain,$dir_01,$dir_02,$dir_03,$dir_04,$dir_05,$dir_06) = explode("/",$data);
?>
<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
url: '<$MTBlogURL$>list/<?php for($i=2; $i<=6; $i++){$n_dir = ${"dir_0".$i}; if(!empty($n_dir)){echo $n_dir.'/';}} ?>index.html',
dataType: 'html',
success: function(data) {
$("#list ul").append(data);
},
error:function() {
$("#paging span").css("display","none");
}
});
var list_no = 2
var element ="";
$.ajax({
type: 'GET',
url: '<$MTBlogURL$>list/<?php for($i=2; $i<=6; $i++){$n_dir = ${"dir_0".$i}; if(!empty($n_dir)){echo $n_dir.'/';}} ?>index_'+list_no+'.html',
dataType: 'html',
success: function(data) {
element = data;
$("#paging span").css("display","inline-block");
},
error:function() {
$("#paging span").css("display","none");
}
});
$('#paging span').click(function(){
$("#list ul").append(element);
list_no++;
$.ajax({
type: 'GET',
url: '<$MTBlogURL$>list/<?php for($i=2; $i<=6; $i++){$n_dir = ${"dir_0".$i}; if(!empty($n_dir)){echo $n_dir.'/';}} ?>index_'+list_no+'.html',
dataType: 'html',
success: function(data) {
element = data;
$("#paging span").css("display","inline-block");
},
error:function() {
$("#paging span").css("display","none");
}
});
});
});
</script>
[ブログURL/list/ブログURL以下の開いているページと同じURL]の内容を丸ごとを読み込み、ボタンクリックで出力、次のページを読み込んで、記事がない場合はボタンを非表示にします。
$("#paging span").css("display","inline-block");は実際のボタンのスタイルに合わせます。
また、ボタンは予め、スタイルシートの方で[display:none]に設定しておいてください。