Tumblrは誰でも簡単にブログを開設できるサービス。リブログやフォローなどの機能もあって人気の高いブログツールになってます。
デフォルトのテンプレートも結構使いやすくて便利ですが、もうちょっとオリジナリティが欲しい場合は自由にコードをカスタマイズ可能。
ここではTumblrにページネーション機能を追加する方法を紹介します。
Tumblrにページネーションを追加する方法
ページネーションの設置場所
Tumblrにページネーションを追加するには、{block:Posts}
の外にコードを設置します。
<!-- 投稿記事の表示 -->
{block:Posts}
<article>
<!-- ここに投稿の表示処理 -->
</article>
{/block:Posts}
<!-- ページネーション -->
<footer id="footer" class="content clearfix">
{block:IndexPage}
{block:Pagination}
<!-- ページネーションの処理 -->
{/block:Pagination}
{/block:IndexPage}
</footer>
ページネーションの作り方
ページネーションも独自タグが用意されており、公式リファレンスに使い方が書かれいます。基本的にはこのページを見ながら作っていけばOK。
<!-- 一覧ページで表示 -->
{block:IndexPage}
<!-- ページネーションブロック -->
{block:Pagination}
<div id="pagination">
<!-- 前のページ -->
{block:PreviousPage}
<a href="{PreviousPage}">前のページ</a>
{/block:PreviousPage}
<!-- 次のページ -->
{block:NextPage}
<a href="{NextPage}">次のページ</a>
{/block:NextPage}
</div>
{/block:Pagination}
{/block:IndexPage}
{block:Pagination}
で囲った中に前のページ、次のページのリンクを配置していきます。公式サイトにも書かれている通り、{PreviousPage}
や{NextPage}
はURLを出力するものなので、a
タグに記述します。
このコードを先ほどのように投稿ブロックの外側に設置すれば完了です。