White Space
WebLife

WordPress 使いによる a-blog cms についてのまとめ（一覧ページを作る）

  • Uncategorized

前回の続きです。自分でもざっくりとしか ablog についての理解をしていないので、ベストプラクティスではないかもしれませんがご参考までに。

WordPress 使いによる a-blog cms についてのまとめ（ローカル環境構築、テーマ作成）

カテゴリーを作成する

まずは投稿タイプの代わりである「カテゴリー」を作成します。ここでは例として「news」カテゴリーを作成したということで進めます。

サイドナビメニューの「カテゴリ」から新規作成し、エントリーから「news」カテゴリーに設定した記事を投稿しておきます。

モジュールIDを作成する

モジュールIDは WordPress で言うところのget_posts()だとかnew WP_Query()みたいなもので、あらかじめ欲しい記事の設定をしておき、テンプレ側で id を指定してその記事データを読み込みます。

今回は現在のブログで投稿した「news」の記事だけ引っ張りたいので、モジュールIDを作ります。

ablog では複数のブログを一つの ablog 内に作成することができます。他のブログで書いた news の記事も含めて全てを引っ張りたい場合は、今回のモジュールIDを設定する必要はありません。news/index.htmlのテンプレートを作れば、ablog が news の記事を引っ張ってきてくれます。

サイドナビから「モジュールID」ページにいき、新規作成します。ここでは例として、「news の一覧ページでタイトル・本文を10記事/ページで出力する」ためのクエリ設定を作ります。

  • id … news_archive
  • モジュール … Entry_Summary を選択
  • カテゴリーID … 「news」を選択
  • 「ページ」にチェックをつける
  • 表示設定タブ（※） > 表示件数 … 10

※表示設定タブが見当たらない場合は、一度保存してから再度確認してみる

※「モジュール」はそれぞれ取得できるものが情報が異なります。例えば上記で設定した Entry_Summary では本文を取得することができません。どのモジュールでなんの値が取得できるかはこちらを参照。

一覧ページテンプレートを作成する

news/index.html

<!-- BEGIN_MODULE Entry_Summary id="news_archive" -->
<section class="news">
<ul class="news-list">
  <!-- BEGIN unit:loop -->
    <!-- BEGIN entry:loop -->
        <!--#include file="/include/news-item.html"-->
    <!-- END entry:loop -->
  <!-- END unit:loop -->
</ul>
</section>
<!-- END_MODULE Entry_Summary -->

entry:loop の中身は別ファイルに分けます。

  • BEGIN_MODULE … 作成したモジュールIDと名前。
  • unit:loop … それぞれのユニットをループするためのもの
  • entry:loop … 日付や作成日、カスタムフィールド などを出力するためのもの

リファレンスの Entry_Summary の変数表を見ると、どんなタグで囲うことでどんな値が出力できるのかがわかります。

include/news-item.html

ループ部分はテンプレに分割しておきます。

<li class="news-item">
    <a href="{url}" class="news-item__wrap">
        <h3 class="news-item__title">{title}[trim(51, '...')]</h3>
        <time class="news-item__time">{date#Y}/{date#m}/{date#d}</time>
        <div class="news-item__tag">
            <!-- BEGIN tag:loop -->
            {name}
            <!-- END tag:loop -->
        </div>
    </a>
</li>
  • tag:loop … タグを出力するためのもの
  • {キー}[trim(51, ‘…’)] … [] で囲われた部分は校正オプションと呼ばれるもので、{キー}の値にフィルターをかけることができます。trim()は文字省略形のオプションですが、他にも色々用意されているのでこちらを参照してみてください。

ページネーション

ページネーションは例によって別ファイルに分割しておきます。

include/pagination.html

<nav class="pagination">
  
    <!-- BEGIN backLink -->
    <a class="pagination__prev" href="{url}">
        &lt;
        <span>prev</span>
    </a>
    <!-- END backLink -->

    <ul class="pagination__list">

        <!-- BEGIN firstPage:veil -->
        <li class="pagination__item">
            <a class="pagination__text" href="{firstPageUrl}">{firstPage}</a>
        </li>
        <li class="pagination__item">
            <span class="pagination__ellipsis">&hellip;</span>
        </li>
        <!-- END firstPage:veil -->

        <!-- BEGIN page:loop -->
        <li class="pagination__item">
            <span class="pagination__text">
                <!-- BEGIN link#front --><a href="{url}"><!-- END link#front -->
                {page}
                <!-- BEGIN link#rear --></a><!-- END link#rear -->
            </span>
        </li>
        <!-- END page:loop -->

        <!-- BEGIN lastPage:veil -->
        <li class="pagination__item">
            <span class="pagination__ellipsis">&hellip;</span>
        </li>
        <li class="pagination__item">
            <a class="pagination__text" href="{lastPageUrl}">{lastPage}</a>
        </li>
        <!-- END lastPage:veil -->
    </ul>

    <!-- BEGIN forwardLink -->
    <a class="pagination__next" href="{url}">
        <span>next</span>
        &gt;
    </a>
    <!-- END forwardLink -->

</nav>
  • backLink / forwardLink … 前後のURL情報などを出力、また最初/最後のページでこのタグで囲われた部分は非表示になる
  • firstPage:veil … 一番最初のページ
  • lastPage:veil … 一番最後のページ
  • page:loop … ページネーションループ

news/index.html

<!-- BEGIN_MODULE Entry_Summary id="news_archive" -->

...

<!-- BEGIN pager:veil -->
    <!--#include file="/include/pagination.html"-->
<!-- END pager:veil -->

...

<!-- END_MODULE Entry_Summary -->

ページネーションはpager:veilで囲う必要があるので、呼び出し側で囲っておきます。このタグもテンプレート化しちゃってもいいのかもしません。