a-blog cmsで指定条件のエントリーを表示する、「ポストインクルード」の使い方まとめ

この記事は、a-blog cms Advent Calendar 2017の2日目の記事です。

指定した条件のエントリー一覧を表示する、a-blog cmsの「ポストインクルード」機能の、バージョン2.7.20時点のガイドラインです。

https://developer.a-blogcms.jp/document/postinclude/

内部的にはAjaxの技術が使用されていますが、HTMLとa-blog cmsの独自タグのみで実装することができます。

実装の流れ

大まかな流れについては、以下の記事を参照してください。

送信ボタンを押さずに検索結果を表示する(post include) | a-blog cms developer
https://developer.a-blogcms.jp/document/postinclude/csv-1273.html

  1. どのような条件でエントリーを絞り込むかを決める
  2. 検索結果を呼び出すモジュールIDを作成する
  3. 2.で決めたモジュールのタグを使用して、エントリーの繰り返し部分を表示するテンプレートを作成する
    (ヘッダやMETAタグは不要です)
  4. 実際に検索結果を出力したいテンプレート内に、指定された書式でform要素を書く
  5. form要素内に、3.で作成したテンプレートへのパスを、name属性「tpl」で渡す

「検索結果を呼び出すモジュールID」の設定方法

モジュールの種類は、汎用性の高い、Entry_Summaryモジュールが無難です。
IDはなんでも良いですが、「summary_postinclude」など、ポストインクルードに使用していることがわかる名称が良いです。

post_include_01.jpg

画像の通り、「条件設定>引数」の、絞り込みの対象にしたい値に「チェック」を入れます。
カスタムフィールドの値であれば「フィールド」、タグであれば「タグ」です。

よくわからない場合は、全部にチェックを入れてしまっても動作します(処理が遅くなる可能性はあります)。

「検索結果を呼び出すform要素」の書き方

基本書式

引数と条件は、URLコンテキスト(URLの法則)に従います。
https://developer.a-blogcms.jp/document/urlcontext/entry-2289.html
条件には、グローバル変数(%{BID}など)や、表示中のエントリーの情報を渡すことができます。

acms_postinclude_load_outline.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="(テーマ内の表示テンプレートへのパス)" />
・・・
    <input type="hidden" name="(引数)" value="(条件)" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

絞り込みの例

検索結果「りんご」

特に設定を行わない限り、a-blog cmsではカスタムフィールドの値も検索対象となります。
METAタグなど、対象としたくない値がある場合は以下を参照ください。
https://developer.a-blogcms.jp/document/customfield/entry-1749.html

acms_postinclude_load_keyword.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="keyword" value="りんご" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

エントリーIDが100

仕様上、eidは一件しか絞り込めないので、複数呼び出すときは、formタグを繰り返し書きます。

acms_postinclude_load_eid.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="eid" value="100" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

カスタムフィールド「example」の値が「りんご」

カスタムフィールドは、fieldの宣言の行も必要となります。

acms_postinclude_load_keyword_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="field" value="example" />
    <input type="hidden" name="example" value="りんご" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

チェックボックス型のカスタムフィールド「example」に、チェックが入っていない

「値が空(em)」として絞り込みます。

acms_postinclude_load_eid_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="field" value="example" />
    <input type="hidden" name="example@operator" value="em" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

カスタムフィールド「example」の値が「りんご」「バナナ」「みかん」のいずれか

正規表現の「| (いずれか)」で絞り込みます。

acms_postinclude_load_keyword_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="field" value="example" />
    <input type="hidden" name="example" value="(りんご|バナナ|みかん)" />
    <input type="hidden" name="example@operator" value="re" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

タグ「りんご」が付いている

acms_postinclude_load_tag.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="tag" value="りんご" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

タグ「りんご」「バナナ」「みかん」のいずれかが付いている

タグの複数検索は「/」で区切ります。

acms_postinclude_load_tag_multi.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="tag" value="りんご/バナナ/みかん" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

数値フィールド「example」が101以上

acms_postinclude_load_gte.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="field" value="example" />
    <input type="hidden" name="example" value="101" />
    <input type="hidden" name="example@operator" value="gte" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

数値フィールド「example」が100未満

「以上」と「未満」の両方の絞り込みはできないようです(できるよという方、コメントで情報ください)。

acms_postinclude_load_lt.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="field" value="example" />
    <input type="hidden" name="example" value="100" />
    <input type="hidden" name="example@operator" value="lt" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

公開日が2016年12月1日

「一年前の記事」に活用できます。

acms_postinclude_load_date.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="date" value="2016/12/01" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

公開日が2016年12月1日から2017年11月30日

指定した開催期間内のイベントを表示する場合に活用できます。

acms_postinclude_load_date_range.html
<form action="%{PROTOCOL}://%{DOMAIN}{path}" method="post" class="js-post_include-ready">
    <input type="hidden" name="tpl" value="include/module/summary_related.html" />
    <input type="hidden" name="date" value="2017-01-01/-/2017-11-30" />
    <input type="submit" name="ACMS_POST_2GET" />
</form>

補足

ポストインクルードのイベントハンドラ

生成されたDOMに、ウェブフォントなどのJSの処理を適用したい場合は、「acmsAfterPostInclude」イベントを使用してください。
以下は、FONTPLUSのリロードを行う例です。

acms_postinclude_fontplus.js
ACMS.addListener("acmsAfterPostInclude", function() {
  //ここに処理が入ります。
  FONTPLUS.reload();
}, $('.js-post_include').get(0));

特殊な実装例

ポストインクルードは応用するといろいろなことができます。

位置情報を付加してポストインクルードする
https://developer.a-blogcms.jp/document/postinclude/entry-2767.html

[a-blog cms]ポストインクルードで現在のエントリーを表示しない
https://www.penpale.jp/blog/post_include_hide_current_post.html
(ポストインクルードでも「現在のエントリーを表示しない」を有効にする方法)

お店が今やってるかどうか、アクセス時点の営業情報を表示する(Plugin_Scheduleと連動)
http://tabegoto-shinbun.com/cms/entry-1403.html


a-blog cms Advent Calendar 2017
https://adventar.org/calendars/2570

1日目はこちら
a-blog cmsのカスタマイズが捗る、Hook.php の設定 | maki-o memo
https://www.maki-o.net/memo/entry-133.html

3日目はこちら
ページの表示速度で気をつけている a-blog cms の「画像サイズ」と「モジュールの実行時間」について | mkasumi.com
https://mkasumi.com/a-blogcms-page-speed-image-size.html

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.