その他

目次

現在いるエントリーと同じカスタムフィールドの値を持つエントリーを表示する

この記事では、現在いるエントリーと同じカスタムフィールドの値を持つエントリーを表示する方法をご紹介します。

たとえば、{select_item}という変数があったとします。{select_item}では「りんご」「もも」「ぶどう」の中から値が選べるようになっています。記事Aというエントリーが、「りんご」という値を持っていたとき、記事Aの詳細ページに、{select_item}という変数で「りんご」を選択しているエントリーをリストにして一覧することができます。


同じように「りんご」が選ばれたエントリーがサブカラムで一覧になっている

select_itemが「りんご」だったときの詳細ページの図


今回はモジュールで出力されるカスタムフィールドの値を使用したいので、モジュールが出力された後にモジュールを実行しなければいけません。実行順序を少し遅らせるためには、ポストインクルードを使います。ポストインクルードについて詳しくはドキュメントをご覧ください。

以下は、{select_item} という変数をキーにしたいときの記述です。

<!-- BEGIN_MODULE Entry_Field id="current_eid" -->
  <form action="" method="post" class="js-post_include-ready">
    <input type="hidden" value="{select_item}" name="select_item">
    <input type="hidden" value="select_item" name="field[]">
    <input type="hidden" name="tpl" value="include/sub/entryList.html">
    <input type="submit" name="ACMS_POST_2GET" style="display:none;">
   </form>
<!-- END_MODULE Entry_Field -->

1行目と8行目の記述

今回はエントリーの情報を表示したかったため、Entry_Fieldのモジュールを使用しました。

あらかじめ、Entry_Fieldモジュールで、モジュールID名で作成しておきます。ここではモジュールID名を「current_eid」としました。新しく作成したモジュールIDでは、現在いるエントリーの情報を表示できるように、「エントリーID(eid)」のURLコンテキストにチェックをつけておきました。


エントリーID(eid)にチェックをつける

ポストインクルードで使用するためのモジュールIDの設定


5行目の記述

5行目で指定している、include/sub/entryList.html には、とくに特殊な設定は必要なく、通常のモジュールを置いてください。

<input type="hidden" name="tpl" value="include/main/curriculum/this_course_summary.html">

include/sub/entryList.html(通常のモジュール)の例:

<!-- BEGIN_MODULE Entry_List id="select_item_list" -->
<div class="acms-margin-bottom-medium">
<!--#include file="/admin/module/setting.html"-->
  <ul class="acms-list-group">
    <!-- BEGIN entry:loop -->
    <li><a href="{url}" class="acms-list-group-item">{title}</a></li>
    <!-- END entry:loop -->
  </ul>
</div>
<!-- END_MODULE Entry_List -->

モジュールの設定

entryList.htmlの中に記述したモジュールにはモジュールIDの設定をしておく必要があります。ポストインクルードでフィールドの情報を渡しているため、フィールドのURLコンテキストが有効になった状態になったので、モジュールでもフィールドの情報が表示できるようになりました。Entry_List でフィールドの情報を表示するため、モジュールの設定も「フィールド(field)」のURLコンテキストを有効にしましょう。


フィールド(field)にチェックをつける

表示用のモジュールIDの設定


動作の確認

ポストインクルードの記述で値を渡したカスタムフィールドの変数(この記事では「select_item」)と同じカスタムフィールド(この記事ではエントリーのカスタムフィールド)を作成し、値を入力してください。

ポストインクルードを設置したページに戻り、「include/sub/entryList.html」のテンプレートの中身が表示されれば完成です。もし表示されなかった方は手順をもう一度ご確認ください。

エイリアス機能を使って多言語サイトを用意する

a-blog cms で多言語のサイトを作るには、本記事で紹介している方法か、新しくブログを作り直して別のサイトのような多言語サイトをつくる方法の2つがあります。本記事の場合は、元言語のサイトと同じレイアウト・同じコンテンツを表示させたい場合ににお勧めの方法です。

エイリアスを作成する

元言語のブログにて、管理画面>エイリアスの順に移動し、エイリアスを作成します。

「名前」、「ドメイン」、「コードネーム」を入力して、保存します。


(スクリーンショット)エイリアス作成の画面

名前、ドメイン、コードネームを入力する


保存したら、あとで使うため、一覧ページに戻り、エイリアスIDの値を覚えておきます。


(スクリーンショット)エイリアスの一覧画面

ここでは、エイリアスIDが「3」でした

今の段階では、http://ドメイン/en/を表示すると、URLが http://ドメイン/ だったときと全く同じ内容が表示されます。

表示の分けかた

エイリアスを作成したので、言語別に表示を分ける方法について説明していきます。

  • IFブロックを使って表示を分ける
  • モジュールIDの設定を変更する
  • グローバル変数とインクルードを使って表示を分ける方法
  • テーマの継承とルール機能を使ってインクルードを分ける方法

IFブロックを使って表示を分ける

IFブロックを使って表示を分ける方法は、細かな変更にも対応でき、手軽に実装することができます。

さきほど作成したエイリアスを使用します。

作成したエイリアスIDと現在いるURLのエイリアスIDが同じだった場合の記述例:

<!-- BEGIN_IF [%{ALIAS_ID}/eq/3] --><p>Hello!</p><!-- ELSE --><p>こんにちは!</p><!-- END_IF -->

※ /eq/の後の数値はご使用のエイリアスIDによって変更してください

モジュールIDの設定を変更する

モジュールID名にエイリアスコードのグローバル変数を使用すると、エイリアスIDごとに表示を分けることもできます。

<!-- BEGIN_MODULE Entry_Summary id="summary_AID%{ALIAS_ID}" -->

設定したら、管理画面には、「summary_AID1」、「summary_AID2」、「summary_AID3」というように、モジュールID名をつけて設定してください。元言語のサイトの場合は、「summary_AID」というモジュールID名で作成するとよいでしょう。

グローバル変数とインクルードを使って表示を分ける方法

インクルード文を以下のように記述して、表示方法を分けます。

<!-- #include file="/include/summary_aid%{ALIAS_ID}.html" -->

上記のコードの場合、includeフォルダの中に、「summary_aid1.html」、「summary_aid2.html」、「summary_aid3.html」を作成してください。元言語のサイトの場合は、「summary_aid.html」というファイル名で作成するとよいでしょう。

テーマの継承とルール機能を使ってインクルードを分ける方法

この方法は、今回ご紹介した中で一番複雑な方法になりますが、たとえばユニットの多言語対応したいときに使うことになります。

元言語のテーマを継承する他の言語用のテーマを用意する

まずは、元言語のテーマを継承する他の言語用のテーマを用意しておきます。

たとえば、元言語のテーマ名が「site」だった場合、「◯◯@site」というテーマを作成してください。◯◯には多言語用のテーマだとわかる名前をつけてください。作成したディレクトリの中身は空っぽのままで大丈夫です。

ルールを作成する

管理画面>ルールの順に移動し、ルールを作成します。ルール名と、エイリアスIDのセレクトメニューを「=」、入力欄には先ほど覚えておいたエイリアスIDを記入したら保存します。


(スクリーンショット)ルール作成の画面

ルールの一覧ページに戻り、先ほど作成したルール名の「コンフィグ」ボタンをクリックします。テーマ設定をクリックして、冒頭で多言語サイト用に作成したテーマを適用します。


(スクリーンショット)作成したルールのテーマ設定の画面

ここでは「en@site」というテーマを設定しました

これで、下準備が整いました。

実際に表示を分けてみる

継承したテーマにテンプレートを置いて、実際に表示を分けてみましょう。

継承元のテーマにtest.htmlという名前のファイルを作成し、その中にはわかりやすいように「こんにちは」と記入してみましょう。

トップページに(たとえば「site」)、インクルード機能を使って、test.htmlを好きな場所に読み込んでください。そして、トップページをブラウザで開いて、「こんにちは」が読み込まれているか確認してください。


(スクリーンショット)カスタマイズ後のトップページ

http://ドメイン にアクセスすると、「こんにちは」と書かれたファイルが読み込まれいる

次に、継承テーマ(たとえば、「en@site」)のディレクトリの中にtest.htmlを作成してください。このtest.htmlには「Hello」と記入してみましょう。作業ができたら、http://ドメイン/◯◯(作成したエイリアスコード)/にアクセスしてください。そうすると、http://ドメイン/では「こんにちは」とあった文章が「Hello」という文章に変更されています。


(スクリーンショット)カスタマイズ後のhttp://ドメイン/◯◯/

http://ドメイン/◯◯/ にアクセスすると、「Hello」と書かれたファイルが読み込まれいる

https関連のリンクを書き換える機能

a-blog cmsでは、httpとhttpsのリンクを自動で書き換える機能が標準で実装されています。(v1.4.0より) この機能は、相対パスでリンクしているナビゲーションのリンク先を、通常のhttpのページでは設定しているリンクのみhttpsとし、お問い合わせフォーム等のhttpsで運用したいページでは、設定していないリンク先を任意にhttpsではなくhttpとすることができます。

PCサイト表示とスマートフォン表示を行き来するボタンの設置

a-blog cms では、PC用とスマートフォン用のテーマをそれぞれ作成・適用できますが、スマートフォンでの表示の場合、スマートフォン用だけでなく、PC用の表示を見たいという場合があります。

ここでは、スマートフォン用テーマでの「PCモードに切り替える」ボタン、PC用テーマでの「スマートフォンモードに切り替える」ボタンの作成について解説します。