管理画面から任意のエントリーを選んで表示する。｜a-blog cms #CMS

この記事は、「a-blog cms Advent Calendar 2021」12日目の記事です。

公式で紹介されている方法ですが、以前、適切な検索キーワードがわからず、該当記事にたどり着くまでに時間がかかったので、実装例から紹介したいと思います。

今回は、テストとして「掃除当番リスト」を作ってみようと思います。

やりたいことは以下です。

管理画面：表示したいエントリーを選ぶ。（任意の数）
管理画面：選べるエントリーは、指定のカテゴリーに属しているエントリー。
表示側：任意の場所に、記事の一覧を表示する。（エントリーのタイトルクリックで、エントリー詳細表示）

各エントリーとカテゴリーを用意。

エントリーの表示を管理するエントリー。（表示したいエントリーを選ぶ。）
必要なカテゴリーを用意。
必要なエントリーを用意。

今回は表示エントリーの管理に、エントリーのカスタムフィールドを使いましたが、管理・運用によってはカテゴリーやブログなどにカスタムフィールドを使っても良いかもしれません。

カスタムフィールドを用意する。

表示を管理するエントリー専用に、カスタムフィールドを作ります。

今回はエントリーのカスタムフィールドを使うので、以下ディレクトリにファイルを用意しました。（ご利用の環境に合わせてご用意ください。）
/themes/利用中のテーマ/admin/entry/ecd/管理用エントリーのファイル名.html

続いてコードを用意します。
カスタムフィールドメーカーのカスタムフィールドグループから、カスタムフィールドを用意します。（カスタムフィールドメーカーの画面は、表示側でも使いますので、開いたままにしておいてください。）

今回は、以下の通りにしました。

グループのタイトル：丸山太郎さん
フィールド名（変数）：touban
入力欄の種類：セレクトボックス
タイトル：エントリー名
フィールド：touban_maru
ツールチップ：なし
項目名（label）：あああ（後で変更するのでテキトーに）
値（value）：aaaa（後で変更するのでテキトーに）

コードは以下です。

<h2 class="acms-admin-admin-title2">丸山太郎さん</h2>
<table class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <thead class="acms-admin-hide-sp">
    <tr>
      <th class="acms-admin-table-left acms-admin-admin-config-table-item-handle"> </th>
      <th></th>
      <th class="acms-admin-table-left acms-admin-admin-config-table-action">削除</th>
    </tr>
  </thead>
  <tbody>
    <!-- BEGIN touban:loop -->
    <tr class="sortable-item">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <table>
          <tr>
            <th>エントリー名</th>
            <td>
              <select name="touban_maru[]" class="acms-admin-form-width-full">
                <option value=""></option>
                <option value="aaaa" {touban_maru:selected#aaaa}>あああ</option>
              </select>
            </td>
          </tr>
        </table>
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
    <!-- END touban:loop -->
    <tr class="sortable-item item-template">
      <td class="item-handle acms-admin-table-nowrap">
        <i class="acms-admin-icon-sort"></i>
      </td>
      <td>
        <table>
          <tr>
            <th>エントリー名</th>
            <td>
              <select name="touban_maru[]" class="acms-admin-form-width-full">
                <option value=""></option>
                <option value="aaaa">あああ</option>
              </select>
            </td>
          </tr>
        </table>
      </td>
      <td class="acms-admin-table-nowrap">
        <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger" value="削除" />
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colSpan="3">
        <input type="button" class="item-insert acms-admin-btn-admin" value="追加" />
      </td>
    </tr>
  </tfoot>
</table>
<input type="hidden" name="@touban[]" value="touban_maru" />
<input type="hidden" name="field[]" value="touban_maru" />
<input type="hidden" name="field[]" value="@touban" />

上記コードで、管理画面は以下のような表示になります。

任意のカテゴリーに属するエントリーを選択できるようにする

現状ですと、カスタムフィールドメーカーで設定した選択項目しか選択できません。
この部分を、カテゴリー「掃除（ID:10 / コード:clean）」に属するエントリーの一覧を選択できるようにします。

そのために使うのが、「モジュールの外部コンテキスト挿入機能」と「モジュールのエスケープ機能」です。

モジュールのエスケープ機能 & モジュールに外部コンテキスト挿入機能を追加

まず、23行目あたりの<option value="aaaa" {touban_maru:selected#aaaa}>あああ</option>を、以下のように書き換えます。（\ がついている部分が、エスケープしている部分です。）

<!-- BEGIN_MODULE Entry_List ctx="cid/10" -->
<!-- BEGIN entry:loop -->
<option value="{eid}" \{touban_maru:selected#{eid}\}>{title}</option>
<!-- END entry:loop -->
<!-- END_MODULE Entry_List -->

45行目あたりの<option value="aaaa">あああ</option>も、以下のように書き換えます。

<!-- BEGIN_MODULE Entry_List ctx="cid/10" -->
<!-- BEGIN entry:loop -->
<option value="{eid}">{title}</option>
<!-- END entry:loop -->
<!-- END_MODULE Entry_List -->

このようにすることで、予め用意していたエントリーが選択できるようになります。
さらに、カスタムフィールドグループで作っているので、「追加」から選択するエントリーを増やすこともできます。

以上で、任意のエントリー選択が可能になりました！

表示させる

続いて、表示側に移ります。

先ほど操作したカスタムフィールドメーカー画面に戻り、「出力ソース」からコードをコピーして、任意のファイルに貼り付けます。（※適切なモジュールのloop内に貼り付けます。テストでは「エントリー本文/Entry_Body」に貼り付けています。）

<h2 class="acms-admin-admin-title2">丸山太郎さん</h2>
<table class="adminTable acms-admin-table-admin-edit">
  <tbody>
    <!-- BEGIN touban:loop -->
    <tr>
      <td>
        <table>
          <tr>
            <th>エントリー名</th>
            <td>
              <div>
                <!-- BEGIN_IF [{touban_maru}/eq/aaaa] -->あああ<!-- END_IF -->
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- END touban:loop -->
  </tbody>
</table>

そして、あああ 部分を以下のようにカスタマイズしていきます。

<!-- BEGIN_IF [{touban_maru}/nem] -->
<!-- BEGIN_MODULE\ Entry_List ctx="eid/{touban_maru}" -->
<!-- BEGIN\ entry:loop -->
<a href="\{url\}">\{title\}</a>
<!-- END\ entry:loop -->
<!-- END_MODULE\ Entry_List -->
<!-- END_IF -->

すると、選択したエントリーの一覧が表示されるようになります。
エントリータイトルは、エントリー詳細ページへリンクしています。

最後に、表示を<table>からリスト表示に変えてて、今回のテストは完成です！

この方法を知ってから、a-blog cms実装の幅が広がりました。工夫次第でいろいろ活用できます！

かなりざっくり書いてしまったので、もしこの内容について需要がありましたら、もう少し詳しく書きますので、不明点などコメントください〜