ant2マガジン

2022年03月

2022.03.23

モジュール定義タグの活用（2）

こんにちは。
アントアントのメルマガ担当です。

いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は前回に引き続き『ant2 CMS モジュール定義タグの活用（第二回）』についてご紹介いたします。

前回のメルマガではモジュール定義タグについて、モジュール定義タグのご説明、
ブロックレイアウト用のモジュール定義タグを使って表示する方法についてご紹介しました。

前回の振り返り

モジュール定義タグについて

モジュール定義タグはブロックレイアウト用パーツとページ用のモジュール定義タグの2種類があります。

ブロックレイアウト用パーツ：赤枠線で囲った範囲にブロックレイアウト用パーツを配置することができます。
ページ用：青枠線で囲ったMAINのコンテンツブロックのみで使用することができます。

レイアウトブロックとページにモジュール定義タグを入れてみよう！

前回はトピックスにパターン1のブロックレイアウト用パーツのモジュール定義タグをいれてみました。

パターン1 :ブロックレイアウト用パーツのモジュール定義タグ《サイト内検索フォーム》をレイアウトブロック《FOOTER》に挿入

前回のブロックレイアウト用パーツのモジュール定義タグ挿入についてはこちらから

今回はパターン2のページ用のモジュール定義タグをいれてみましょう。

パターン2:ページ用のモジュール定義タグ《トピックス一覧》

今回も引き続きカスタマイズ初心者のメルマガ担当が実践します！

まずは前回と同様にカスタムデザインテンプレートを作成してモジュール定義タグを挿入する準備をしましょう。

準備：カスタムデザインテンプレートを作成

コントロールパネル内[作成]＞[デザイン]＞[サイトデザインを変える]＞サイトデザインダイアログ

　サイトデザインダイアログの【Myデザイン】タブに表示される公式テンプレートまたはオリジナルテンプレートの中から、

　ベースにしたいテンプレートの鉛筆マークをクリックします。

作成するカスタムデザインテンプレートの《ディレクトリ名》《デザイン名称》《作者名》を入力し、[OK]ボタンをクリックします。

【Myデザイン】タブに作成したカスタムデザインテンプレートが追加されます。

次にまずはここを確認してください！　

編集したいモジュール定義タグを確認
モジュール定義タグを挿入したいページのページデザインを確認

1．編集したいモジュール定義タグを確認

まずは弊社でご用意しているタグリファレンスを参考にカスタマイズしたいモジュールの定義タグがあるかどうかを確認します。

今回は事前に下記のモジュール定義タグを用意しました。(赤文字が変更箇所です)

<h1><span id="cms-editor-textarea-cms_topics_group___ctg_title___ctg_id___{topics_header[id]}___{GLOBALS.numeric_id()}">{topics_header[ctg_title]}</span>{tr(#List#)}</h1>

{if:topic[ctp_image]}

<p class="topicDate">{date_format(#Y/m/d#,topic[ctp_date])}</p>

{if:topic[ctp_link_flag]}

<h2><a href="{topic[ctp_url]:us}" target="{topic[ctp_target]}" id="cms-editor-textarea-cms_topics___ctp_title___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}">{topic[ctp_title]:bs}</a></h2>

{else:}

<h2 class="linkNo" id="cms-editor-textarea-cms_topics___ctp_title___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}">{topic[ctp_title]:bs}</h2>

{end:}

{topic[description]:bs}

</p>

</div>

{if:topic[ctp_image]}

{if:topic[ctp_link_flag]}

{else:}

{end:}

</div>

{end:}

</div>

{else:}

<p class="topicDate">{date_format(#Y/m/d#,topic[ctp_date])}</p>

{if:topic[ctp_link_flag]}

{else:}

<h2 class="linkNo" id="cms-editor-textarea-cms_topics___ctp_title___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}">{topic[ctp_title]:bs}</h2>

{end:}

{topic[description]:bs}

</p>

</div>

{if:show_ph()}

{if:topic[ctp_link_flag]}<a href="{topic[ctp_url]:us}" title="{topic[ctp_title]}" target="{topic[ctp_target]}">{end:}

<img class="cms-dummy-image" src="<?php echo CMS_DUMMY_IMAGE?>" alt="{data[title]}" id="cms-editor-image-cms_topics___ctp_image___ctp_id|ctp_ctg_id___{topic[id]}|{topic[ctg_id]}___{GLOBALS.numeric_id()}" />

{if:topic[ctp_link_flag]}</a>{end:}

</div>

{end:}

</div>

{end:}

</div>

{if:page[prev_url]}<li class="prevBu"><a href="{page[prev_url]:us}">« <span class="linkTxt">{page[prev_year]}{tr(#year#)}</span></a></li>{end:}

<li class="mainBu"><a href="{base_url:us}">{tr(#New Topics#)}</a></li>

{if:page[next_url]}<li class="nextBu"><a href="{page[next_url]:us}"><span class="linkTxt">{page[next_year]}{tr(#year#)}</span> »</a></li>{end:}

</ul>

</div>

今回挿入するページ用のモジュール定義タグではこちらの表示を変更することができます。

トピックス名「一覧」→トピックス名「List」
投稿日時「年.月.日」→「年/月/日」
前の年を表示「≪2022年」→「≪2022year」
「最新一覧」→「New Topics」
アイコン画像の表示→表示なし

モジュール定義タグ挿入前

トピックス名「一覧」
投稿日時「年.月.日」
前の年を表示「≪2022年」
「最新一覧」
アイコン画像の表示あり

モジュール定義タグ挿入後

トピックス名「List」
投稿日時「年/月/日」
前の年を表示「≪2022year」
「New Topics」
アイコン画像の表示なし

2．モジュール定義タグを挿入したいページのページデザインを確認

作成したいページのページデザインを下記の①～③のいずれかの方法で確認してください。

①ページリストからページデザインを確認する
コントロールパネル内[作成]＞[コンテンツ管理]＞[ページリスト]内《ページデザイン列》
※下階層があるコンテンツに関してはコンテンツの上位のページデザインが引き継がれます。

②作成したいページを開いてページデザインダイアログを開く
コントロールパネル内[作成]＞[デザイン]＞[サイトデザインを変える]

③作成したいページを開いて、レイアウトダイアログからページデザインを確認する
右クリック＞レイアウト＞レイアウトを変える＞レイアウトダイアログ

ここから実践！

パターン2：ページ用のモジュール定義タグ《トピックス一覧》の表示を変える

1．コントロールパネル内[作成]＞[サイトデザインを変える]
先ほど作成したカスタムデザインテンプレートを選択し、鉛筆マークをクリックします。

2．鉛筆マークをクリックするとカスタムデザインテンプレート内に格納されているフォルダを確認することができます。

3．今回は《トピックス一覧》の表示を変えたいため
トピックスのページデザインは【default.htm】なのでdefault.htmを編集していきます

ページ用のモジュール定義タグはMAINのブロックのみで使用することができます。
このMAINのブロックを定義するタグはになりますので、
ページ用のモジュール定義タグはこのタグ内に挿入する必要があります。そのためこのタグ内にモジュール定義タグを挿入する必要があります。

先ほど確認したトピックス一覧のモジュール定義タグをの間に追記していきます。

モジュール定義タグの追記が完了したら[保存]ボタンをクリックしてください。

4．[保存]ボタンをクリック後、編集サイトの画面へ戻ります。
編集サイトの画面上ではまだ表示が変わっていません。

5．モジュール定義タグを反映させるためにブラウザのリロードボタンをクリックしてください。
リロードボタンをクリックすることで、モジュール定義タグのカスタマイズを反映することができます。

今回は前回に引き続き、モジュール定義タグについて、

モジュール定義タグ（ページ用）を使ったhtmファイルのカスタマイズ方法をご紹介しました。
モジュール定義タグを使ってカスタマイズすることで表示方法を変えられるため、今までとまた変わったWebサイトの見せ方が可能となります。

カスタマイズ初心者でも簡単にカスタマイズできる箇所も多いので是非ご活用ください！

Permalink
by 保守サポート
at 17:05
コメント(0)

2022.03.09

モジュール定義タグの活用（1）

こんにちは。
アントアントのメルマガ担当です。

いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。
今回は『ant2 CMS モジュール定義タグの活用（第一回）』についてご紹介いたします。

モジュールとは

フリーページやトピックス、ブログなどの各コンテンツやそのコンテンツの伴うブロックレイアウトで配置するパーツのことをまとめて『モジュール』と呼びます。

モジュール定義タグとは

モジュールを-というようなタグで定義することをモジュール定義タグと呼んでいます。

モジュール定義タグの種類

モジュール定義タグには2種類あります。

ブロックレイアウト用パーツ
MAINコンテンツ以外に配置するブロックレイアウト用のパーツのモジュール定義タグ
ページ用
MAINコンテンツのブロックのみで使用するページ用のモジュール定義タグ

例えば、トピックスモジュールの場合、レイアウト用パーツとページの
モジュール定義タグは下記のように定義されています。

（例）トピックスモジュールの場合のパーツとページ

・ブロックレイアウト用パーツ

最新記事パーツ

暦アーカイブ

・ページ用

トピックス - 一覧ページ

トピックス - 記事本文

[レイアウト画面]

レイアウトでブロックレイアウト用パーツを配置できるブロックは赤枠線で囲った範囲となります。

★注意点

使用するテンプレートによってはレイアウトを崩さないよう、パーツを配置できないように設定されているものもあるのでご注意ください。

パーツを配置できるブロック

HEADER
UPPER
BOTTOM
SIDE
RIGHT
OPT1
OPT2
OPT3
FOOTER

各ブロックはブロックの定義用タグで作成されています。

ブロックの定義用タグ

「HEADER」や「UPPER」などの各ブロックは、
ブロックの定義用タグ -で定義されています。
モジュール定義タグをカスタマイズするときには、テンプレート（default.htmなど）のブロックの定義用タグの中にモジュール定義タグを記述することで、
パーツやページの出力タグ（HTMLタグ）をカスタマイズすることができます。