kazumich.log

Category_EntryListモジュールの活用

この記事は公開日より年以上経過しています

情報が古くなっている可能性がありますのでご注意ください。

a-blog cms のCategory_EntryListモジュールとカスタムフィールドを利用し、カテゴリと表示させたいエントリのリストを表示させる方法を紹介してみようと思います。これを利用すると、カテゴリーとエントリーをUL+LIでリスト表示させる事ができます。


そのまま Category_EntryList を貼ってみる


ビルトインモジュールの Category_EntryList スニペット をそのまま company1 の top.html に貼ってみます。すると右のように各カテゴリーと各カテゴリー内のエントリーが5件づつ表示されます。

では、index.html に貼るとどうなるでしょう?

Category_EntryList の仕様として、今いるカテゴリより下の階層のカテゴリーとエントリーを表示させるモジュールになっています。

ですので、新着情報 ( /news/ ) の一覧を表示させると、サブカテゴリーが無い事から何も表示されません。

便利なナビゲーションとしての利用を考えてみる

カテゴリーメインのナビゲーションとして利用し、その中で重要なエントリーについてナビゲーションの下に表示させるというものを作ってみます。事例としては、あそう動物病院 が、この方法でサイトを制作しています。


エントリーのカスタムフィールドにチェックボックスを追加しますが、先日書いた「a-blog cmsのカスタムフィールドを使った条件分岐」で用意したオススメのチェックボックスを利用してみる事にします。

Category_EntryList をそのまま貼っただけでは、各カテゴリーのページで表示される内容が違う事になってしまいますので、ナビゲーションとして利用には向きません。そこでモジュールIDを設定します。 このモジュールIDを設定する事で、どのページでも同じものを表示させる事ができるようになります。


<!-- BEGIN_MODULE Category_EntryList id="navi" -->

上記のようにテンプレート上に id="navi" と名前を設定しました。そして、管理ページのモジュールIDに以下のような設定を追加します。




注意して欲しいところが一番下にあるカテゴリーの設定を下階層のカテゴリーも含める ( descendant-or-self ) に設定下さい。

引数のところを何も設定しないと、そのカテゴリの中の5件が表示されます。モジュールの設定でどのような表示をさせるのかは指定が可能です。

今回は、エントリーのカスタムフィールド(sample)でチェックがあった項目(osusume)だけが表示されるようにするという事になります。その際には、引数のフィールドに


sample/osusume

のように書きます。

これは、カスタムフィールド名/値 という記述になります。これで、あそう動物病院 で利用したナビゲーションの再現が可能になります。


このように a-blog cms のカスタムフィールドは、表示させるだけではなく、検索に活用する事も可能で、その指定の方法はカテゴリーの指定と同様に扱う事(モジュールIDを設定)もできるようになっています。


関連エントリー

更新

Recommendation

a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法)

モジュールの管理ページが用意できたら、それをモジュールIDが利用できるようにしてみる事にします。「モジュールID化の方法」というと難しく感じるかもしれませんが、これも a-blog cms ならでは簡単に対応する事が可能です。 その1で用意したモジュールの修正は必要なく、その3で用意した管理ページのテンプレートも修正する必要はありません。1つモジュールIDを設定する管理ページのモジュールを選択するプルダウンの中に記述を追加するという事になります。 この部分については、テンプレートから切り離されています。以下のファイルにモジュールの名前等を追記します。 /themes/system/admin/module/select.html ATND EventsUsers ( Api_Atnd_EventsUsers ) これをするだけでモジュールIDとして利用が可能になります。 後は、その1で作ったモジュールのHTMLのモジュール名の後に id="**モジュールID名**" を追記する事で、1つのシステム内で複数のイベントで利用できるようになります。 {title} 参加者:{accepted}人 / 定員:{limit}人 このイベントに参加登録する これで「a-blog cms で ATNDもジュールを作ってみる」については終了となります。一連のエントリーを参考にオリジナルのモジュールを作ってみてはどうでしょうか。 関連エントリー a-blog cms で ATNDもジュールを作ってみる その1 a-blog cms で ATNDもジュールを作ってみる その2(post_includeの活用) a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定) a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法)

a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定)

その1 で a-blog cms のモジュールは用意できてしまっていますが、そのモジュールの設定をブラウザ上からできるようにするというのが今回の目標となります。a-blog cms のカスタムフィールドが分かる人であれば、簡単に管理ページを新規に作成する事が可能となります。 モジュールの名前から管理ページのアドレスやファイル名は自動的に決められてくる事になります。今回のモジュール名は Api_Atnd_EventsUsers という名前になっていますので、似たモジュールでどういう感じなのかを調べてみる事にします。 Yahooウェブ検索 ( Api_Yahoo_WebSearch ) を例に見てみましょう サイト内検索をシステム標準のモノを使うのではなく、YahooのApiを利用して検索した結果をモジュールで表示できるようにしたものです。 モジュール名:Api_Yahoo_WebSearch 管理ページのURL:http://設置先/bid/1/admin/config_api_yahoo_web-search/ テンプレート:/themes/system/admin/config/api/yahoo/web-search.html モジュール名のアンダバーについては、そのモジュールをグループ分けして管理ができるようになっており、そのグループはディレクトリとして扱う事になります。もう1つの WebSearch のようなキャメルケースについては a-blog cms のシステム上では web-search として扱います。 今回の Api_Atnd_EventUsers では モジュール名:Api_Atnd_EventsUsers 管理ページのURL:http://設置先/bid/1/admin/config_api_atnd_events-users/ テンプレート:/themes/system/admin/config/api/atnd/events-users.html のようになります。そして、管理ページのテンプレートとしては、以下のように記述します。他の管理ページと同様になるように、他のテンプレートを複製して作成する事をお勧めします。 events-users.html ルール : {name} の モジュールID : {label} ( {identifier} ) のコンフィグ管理 ATND EventUsers ( Api_Atnd_EventUsers ) ショートカットに追加 ATND イベントID 数字を入力して下さい。 上記の管理ページのテンプレートを用意する事で、特に管理ページを更新するためのプログラムを書く必要はありません。カスタムフィールドを作った時と同様に管理ページを用意する事が可能です。1点違う部分がカスタムフィールドでは name="field[]" と書く部分が name="config[]" と書くという事になります。 上記のようにトピックパスに今回のモジュールの名前「ATND EventsUsers」が出ていません。今回のモジュールのテンプレートを見ると <!--#include file="/admin/topicpath.html"--> と書かれていますので、このファイルも修正する必要があります。 ATND EventsUsers 関連エントリー a-blog cms で ATNDもジュールを作ってみる その1 a-blog cms で ATNDもジュールを作ってみる その2(post_includeの活用) a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定) a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法) 次回はモジュールID化する方法をご紹介します。

a-blog cms で ATNDモジュールを作ってみる その2(post_includeの活用)

a-blog cms には、Ajax を利用してページを表示後に、別のコンテンツを読み込む事ができる post include という機能が標準で実装されています。これを利用すると、その1 で問題になっていたキャッシュ部分が少し改善させる事が可能になります。 では、なぜ post include 機能を利用するとキャッシュの問題を少し改善する事ができるのでしょう? サーバ上に作成される各ページのキャッシュにはATNDモジュールは無い状態でキャッシュされる事になります。 ATNDモジュール部分の小さなパーツは、単体でキャッシュされる事になります。 これであれば5000ページあったとしても、ATND API へのアクセスはキャッシュの有効期間に1回しかない事になります。あとはキャッシュの時間を5分にするのか、60分にするのかという運用をどうするのかを考える事になります。通常は長い時間キャッシュを有効にしておき、ルール等を利用して post include するテンプレートのキャッシュ時間を短めにする事も、どうにかする事ができるかもしれません。 以下に公式の post include のドキュメントをリンクしておきます。 a-blog cms のマニュアルに掲載されている post include 関連のエントリー post includeの基本設定 ページを移動せずにフォームの検索結果を表示する(post include) 送信ボタンを押さずに検索結果を表示する(post include) 検索エンジンからのキーワードでサイト内検索結果を表示する(post include) post includeの結果をキャッシュさせない方法(post include) /include/atnd.html その1のモジュール部分を別ファイルにします。 {title} 参加者:{accepted}人 / 定員:{limit}人 このイベントに参加登録する 上記を呼び出す側のテンプレートに記述する post include の設定 post include は form 部分を Ajax で結果と置き換える機能になりますので、呼び出す側は form タグになります。 また、post include には、submit を押した後に動作させる class="js-post_include" とページの表示が終わってから自動的に動作する class="js-post_include-ready" というのがあります。 今回は自動的に実行なので、以下のようになります。 また、ログインしている時には毎回APIにアクセスしてしまいますので、無事動作するようになった時点でタッチモジュールを利用して、ログイン時は上記のHTMLを表示しないようにした方がいいかと思います。 post include のデモ 試しにクリックしてみましょう! 関連エントリー a-blog cms で ATNDもジュールを作ってみる その1 a-blog cms で ATNDもジュールを作ってみる その2(post_includeの活用) a-blog cms で ATNDもジュールを作ってみる その3(管理ページでのID設定) a-blog cms で ATNDもジュールを作ってみる その4(モジュールID化の方法) 次回は管理ページでIDを設定できるようにする方法をご紹介します。

Contact

お問い合わせはこちら