[ PR ]

[ PR ]

MovableType4.1AutoPagerizeに対応させるコードを紹介しておきます。

mtentryautopagerize_jpg

AutoPagerize対応class指定を設定しておくことで、エントリーを昇順で読むことができるようになります。実際にMovableType.jpで対応されているので、導入している方には、過去のエントリーから読んでいくとページ末尾に新しい記事(次ページ)が追加表示されるようになり、読みやすさを実感できるかと思います。

インデックスページ(トップページ)で、エントリーがアップした日付で降順に表示されるのが一般的です。記事を読み始めると昇順に記事が追加され読めるようになります。逆でもいいのですが、こっちの方がスマートかもしれません。

最初のエントリー投稿内容からコードの追記修正いたしました。最新記事において、「次の記事」が表示されていたのを表示されないコードに修正しました。

Autopagerize対応情報について

こちらのautopagerize作成者のbrazilさんのブログAutoPagerize0.0.11 - SWDYHにて、その詳細が書かれています。

AutoPagerizeに必要な情報をページ中のHTMLに埋め込んでおけば、SITEINFOがなくてもAutoPagerが起動するようになります


埋め込みの形式は以下の通りです

link要素またはa要素でrel="next" (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_insert_before (複数あった場合は、先に現れるものが選ばれます)
classでautopagerize_page_element (複数指定可、指定したもの全てが挿入されます)

mtentry_jpg

上記で上げられている要素をアーカイブテンプレートに追加することで、AutoPagerizeに対応させることができます。

右のイメージのように色指定している部分の要素にclass指定します。

本文コンテンツ全体(右イメージ水色部分)を括ってあるタグにclass指定します。

デフォルトのテンプレートには、前後ページのナビゲーションが無いので新しく作り(右イメージ中のオレンジ部分とパープル部分)、それに対してautopagerize対応要素指定をします。

デフォルトのテンプレートを使って、追加部分の要素などについて紹介します。


autopagerize_page_elementをclassに指定

本文部分(ページ末尾に追加されるコンテンツ部分)のclassにautopaerize_page_elementを指定します。

モジュールテンプレートの中の「ブログ記事の詳細」を開いて、

<div id="entry-<$MTEntryID$>" class="entry-asset asset hentry autopagerize_page_element">

最初の行のdiv要素のclass に追加します。

新しいモジュールテンプレート作成

autopagerize_insert_beforeとlink要素またはa要素でrel="next" を指定については、新規にモジュールテンプレートを作成し、その中に指定した要素を挿入します。そのモジュールをアーカイブテンプレートの中のブログの記事の中にインクルード(include module)させることで後々の管理がしやすくなります。

追記 修正;最新記事のときに「次のページ」だけが表示されてしまいます。下記に修正コードを表示させておきます。

<div class="autopagerize_insert_before">
<ul>
<MTEntryNext><li>次の記事:<a href="<$MTEntryPermalink$>" rel="next"><$MTEntryTitle remove_html="1"$></a></li></MTEntryNext>
<MTEntryPrevious><li>前の記事:<a href="<$MTEntryPermalink$>"  rel="prev"><$MTEntryTitle remove_html="1"$></a></li></MTEntryPrevious>
</ul> 
</div>

ブログメインコンテンツの下に、前後ページへのリンクを生成するようにし、それをdiv要素で囲んでclassにautopagerize_insert_beforeを指定すればいいわけです。

ちなみにMovableType.jpでは、divではなくhrの水平線のタグにautopagerize_insert_beforeを指定しています。

autopagerize_insert_beforeをclassに指定

追加する内容を差し込む位置の指定です。autopagerize_insert_before指定されている部分に次ページ指定されている内容が差し込み表示されます。

link要素をdivで括り、それに指定をします。

<div class="autopagerize_insert_before">
リンク要素
</div>

link要素またはa要素でrel="next" を指定

次ページのリンク指定するためのrel指定をします。こちらも新しいモジュールテンプレートの中に前後のページ情報へのリンクを作成し、挿入します。

追記修正:

<MTEntryNext><li>次の記事:<a href="<$MTEntryPermalink$>" rel="next"><$MTEntryTitle remove_html="1"$></a></li></MTEntryNext>

次ページへのナビゲーションを作成し、そのリンク要素にrel指定でnextを追加します。 尚、前の記事のリンク要素には、prev指定をしておくといいですね。

追記修正:

<MTEntryPrevious><li>前の記事:<a href="<$MTEntryPermalink$>"  rel="prev"><$MTEntryTitle remove_html="1"$></a></li></MTEntryPrevious>

新しいモジュールテンプレートに名前を付けて(たとえば、autopagerize_link)アーカイブテンプレートのブログ記事の中でコメントモジュールをincludeしているその下に挿入(インクルード)します。

<MTSetVar name="body_class" value="mt-archive-listing mt-entry-archive">
<MTSetVar name="sidebar" value="1">
<MTSetVar name="module_about_context" value="1">
<MTSetVar name="onloadjs" value="1">
<MTIfCommentsAccepted><$MTSetVar name="body_onload" value="individualArchivesOnLoad(commenter_name)"$></MTIfCommentsAccepted>
<MTSetVarBlock name="page_title"><$MTEntryTitle$></MTSetVarBlock>
<MTSetVarBlock name="title"><$MTGetVar name="page_title"$> - <$MTBlogName encode_html="1"$></MTSetVarBlock>
<MTSetVarBlock name="html_head">
<link rel="alternate" type="application/rss+xml" title="ROR" href="http://weblibrary.s224.xrea.com/weblog/ror.xml" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://feeds.feedburner.jp/WebWeblog" />
<link rel="SHORTCUT ICON" href ="http://weblibrary.s224.xrea.com/weblog/images/favicon.ico" />
    <MTEntryPrevious><link rel="prev" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryPrevious>
    <MTEntryNext><link rel="next" href="<$MTEntryPermalink$>" title="<$MTEntryTitle encode_html="1"$>" /></MTEntryNext>
    <MTIfPingsAccepted><$MTEntryTrackbackData$></MTIfPingsAccepted>
    <MTIfCommentsAccepted><script type="text/javascript" src="<$MTLink template="javascript"$>"></script></MTIfCommentsAccepted>
</MTSetVarBlock>

<$MTInclude module="ヘッダー"$>

<$MTInclude module="ブログ記事の詳細"$>

<$MTInclude module="トラックバック"$>

<$MTInclude module="コメント"$>

<$mt:Include module="autopagerize_link"$>

<$MTInclude module="フッター"$>

以上の設定をすることでMovableType4.1AutoPagerizeに対応させることができます。

追記:
もう一度MTのブログを見てみたら、最新記事においてNEXTページのリンクが表示されていませんね。ここにも条件分岐が使われているようなので、考えてみて後から情報追加しておきます。

[ PR ]

[ PR ]

[ PR ]

トラックバック(1)

「[を] AutoPagerize は便利なのでこのブログでも対応しました」経由で知った AutoPagerize が便利そうだったので、このブログでも... 続きを読む