LoginSignup
2
1

More than 5 years have passed since last update.

@webbingstudio@github(Seiko Kuchida)

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

Last updated at Posted at 2017-12-01

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

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

内部的には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

2
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
1