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

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

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

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)