ど素人から毛を生やす。<延>

ページ遷移せずに次ページの内容を読み込む(MovableType編)

Web > Other 2014年10月31日(最終更新:2年前)

このページは2014.10.31に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。
レーヴ・ユナイティア、やっとこさナハト編に突入した餅。です。

ユリウス兄さんが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/アーカイブの記載は、これだけでおkです。

アーカイブマッピングは、表示したいアーカイブが[%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]に設定しておいてください。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (・∀・) 参考になった (0)
  • (`・ω・´) 役に立った (0)