Tumblr ページネーションを追加する方法

Tweet

Pocket

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タグに記述します。

このコードを先ほどのように投稿ブロックの外側に設置すれば完了です。