モジュールID

「モジュールID」は、基本的には「モジュール」と表示内容は同じですが、モジュールにIDを付けることで、特定のモジュールを指定することができます。普段HTMLを書いている方であれば、HTMLのclass属性のように設定できるものとして想像していただければと思います。これにより、指定した条件やモジュールが設置された状況によって設定内容を区別することができます。

基本的にモジュールは、URLコンテキストの情報を元に表示する内容を決めていますが、今回紹介するモジュールIDを利用することで、URLコンテキストを利用せず、管理ページのモジュールIDで指定した条件を元にモジュールを動作させることができるようになります。

モジュールIDの設定

テンプレートの書き方

    <!-- BEGIN_MODULE Entry_List id="topEntryList" -->
    <ul>
    	<!-- BEGIN entry:loop -->
    	<li><a href="{url}">{title}</a></li>
    	<!-- END entry:loop -->
    </ul>
    <!-- END_MODULE Entry_List -->

テンプレート上のモジュールの BEGIN_MODULE モジュール名の後に id="モジュールID" のように指定をします。

管理ページの設定


モジュールIDの作成画面

モジュールIDの作成画面


モジュールIDを作成した時には、まず最初に「条件設定」を設定することになります。 管理ページ側の指定については、「モジュール」の項目でモジュールの種類をプルダウンメニューから指定し、「id」の項目にテンプレート上に記述したモジュールIDを指定します。

次にモジュールID設定ページ下部にある「階層」の項目から、ブログやカテゴリーなどの細かい階層の条件を指定します。

  • 下層のブログやカテゴリー含めない
  • 下層のブログやカテゴリーも含める
  • 下層のブログやカテゴリーのみを対象とする

また、子ブログでも利用するようなモジュールについては、「グローバル」項目のチェックボックスにチェックをすることで、下階層のブログでも使用できるグローバルモジュールIDとして利用することができます。

モジュールIDで指定したモジュールについては、以下のように個別に「表示設定」の設定ができます。


モジュールIDの表示設定

モジュールIDの表示設定


なおVer.2.5.0より、モジュールIDにもカスタムフィールドの機能が増えました。例えば、新着記事一覧の見出しなどを運営者側でも変更したい場合に設定すると便利に利用いただけます。


モジュールのカスタムフィールド設定

モジュールのカスタムフィールド設定


モジュールIDの引数

Entry_Body と Entry_Headline については、URLコンテキストの値を自動で取得するような仕様になっていますが、他のモジュールについてはモジュールIDの設定画面で取得したい値を指定する必要があります。例えばモジュールIDを設定しなければ、URLコンテキスト上のpageが反映されず、2ページ目に移動しても1ページと同じようなコンテンツが表示されてしまいます。


モジュールIDの引数設定

モジュールIDの引数設定

memberテーマを追加 - Ver. 3.1.0 リリース情報


この記事では、2023年09月14日にリリースされた「Ver. 3.1.0」で追加された「member」テーマついて紹介しています。

Ver. 3.1 で会員機能が大幅にアップデートされましたので、会員機能を使った新しいテーマ「member」を新たに追加いたしました。

新機能・改善点一覧

  • CMS-6461 会員機能が入った、memberテーマを追加
  • CMS-6477 ログイン中だけエントリーの続きを閲覧できる会員限定記事機能を追加

CMS-6461 会員機能が入った、memberテーマを追加

「member」テーマは、メディアサイトベースの作りになっており、会員機能を持ち、会員限定の記事を用意できるテーマとなっております。 基本的にコンテンツは記事のみになりますので、作りはそこまで難しくなく、会員サイトを作りたい場合のベースとして便利なテーマになっております。


memberテーマ

memberテーマ


また「member」テーマは、継承はしていませんが「UTSUWA」テーマベースで開発されていてパーツなどは「UTSUWA」と同じになっております。

memberテーマの主な機能

  • メディアサイト
  • カテゴリーによる記事の分類
  • 会員登録機能
  • マイページ(シークレットカテゴリー)
  • 会員情報の変更機能(プロフィール、メールアドレス、パスワードなど)
  • 会員限定記事機能
  • SNS認証によるサインイン・会員登録
  • お問い合わせフォーム

サインイン画面

サインイン画面


会員登録画面

会員登録画面


マイページ

マイページ


プロフィール変更画面

プロフィール変更画面


会員限定記事

会員限定記事


CMS-6477 ログイン中だけエントリーの続きを閲覧できる会員限定記事機能を追加

会員限定記事のカスタマイズ方法について紹介いたします。

エントリー編集画面に会員限定設定を表示させる

管理ページ > 編集画面 > 編集設定の「会員限定」の表示にチェックをつけます。これによりエントリーを会員限定記事に設定することができるようになります。


編集設定画面

編集設定画面


エントリーを会員限定にする

次に会員限定にしたい記事を編集します。エントリーの編集画面に移動すると「 会員限定記事にする」チェックボックスがあるので、チェックをつけます。


エントリーの編集画面

エントリーの編集画面


チェックをつけると、普段は「続きを読む」の位置を設定するバーが「以下ユニットが会員限定になります」と表示が変わります。このバー以下が会員限定のコンテンツになるので、好きな位置にバーを動かしましょう。


会員限定内容の設定

会員限定内容の設定


会員限定部分の表示テンプレートを用意

以上の設定ができると、エントリー詳細で会員限定コンテンツ部分が表示されなくなります。 このままだと会員限定コンテンツが表示されないので、会員限定コンテンツ部分のテンプレートを用意する必要があります。

ログインしている場合は、続きのユニットをJSで読み込み、ログアウトしている場合はサインインを促すテンプレートを用意します。

memberテーマの「include/parts/members-only.html」か、systemテーマの「include/members-only.html」を参考にください。

<!-- BEGIN continueLink -->
<div class="js-members-only-entry" data-eid="%{EID}" data-page="%{PAGE}" data-display="block" style="display: none;" >
  <div class="read-more entry-container">
    <div class="acms-alert acms-margin-top-small acms-margin-bottom-large">
      <p class="acms-margin-none acms-margin-top-large acms-margin-bottom-large acms-text-center">以降は会員限定コンテンツです。<br>続きを読むためには会員登録が必要になります。</p>
      <div class="acms-text-center">
        <p class="acms-margin-none acms-margin-bottom-medium">
          <a href="%{HOME_URL}%{SIGNUP_SEGMENT}/" class="acms-btn acms-btn-primary acms-btn-large">今すぐ無料で登録</a>
        </p>
        <form action="" method="post" class="acms-margin-bottom-large">
          <input type="hidden" name="bid" value="%{BID}" />
          <input type="hidden" name="eid" value="%{EID}" />
          <button type="submit" name="ACMS_POST_Member_SigninRedirect" class="acms-btn acms-btn-large">サインインして続きを読む</button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- END continueLink -->

このテンプレートをエントリー詳細のEntry_Bodyで読み込みます。 読み込む位置は、ユニット表示に下になります。

<!-- ユニット -->
<!-- BEGIN unit:veil -->
@include("/include/unit.html")
<hr class="clearHidden" />
<!-- END unit:veil -->

<!-- 会員限定 -->
@include("/include/members-only.html")

これで、会員限定設定の基本は完了になります。ログインしている時は全てのユニットが見え、ログアウトしている時は、サインインを促す表示がされると思います。


会員限定コンテンツを知らせるテンプレート

会員限定コンテンツを知らせるテンプレート


エントリー一覧や詳細に会員限定ラベルを表示

Entry_Summary系モジュールやEntry_Bodyモジュールに会員限定記事の場合に表示するブロックが新しく追加されました。これを利用して会員限定記事にはラベルをつけると分かりやすくなります。

<!-- BEGEIN entry:loop -->
...
<!-- BEGIN membersOnly --><span class="...">会員限定</span><!-- END membersOnly -->
...
<!-- END entry:loop -->

Entry_Summaryの変数表

Entry_Summaryの変数表


一覧での会員限定ラベル

一覧での会員限定ラベル


詳細での会員限定ラベル

詳細での会員限定ラベル


会員限定記事の一覧作成

必須の設定ではありませんが、サイトに会員限定記事の一覧を出したい場合もあると思います。ここでは会員限定記事のみの一覧の出し方を解説します。

といってもEntry_SummaryEntry_Bodyモジュールの設定を1つ変更するだけです。

Entry_SummaryやEntry_BodyのモジュールIDの「表示設定」で、「会員限定のエントリーのみ表示する」にチェックをつけてください。 あとは、通常のモジュールの使い方で会員限定記事のみ表示することができるようになります。


会員限定の記事のみ表示する

会員限定の記事のみ表示する


以上、会員限定記事機能の紹介でした。

memberテーマの紹介については以上になります。他 Ver. 3.1.0 の新機能・改善も多くありますので、ぜひご覧ください。

日々使いやすいシステムとなるよう改善を勤めておりますので、皆様からの貴重なフィードバック、お待ちしております。
今後とも a-blog cms のことをどうぞよろしくお願いいたします。

ルール

ルールという機能を利用すると、条件を指定してコンフィグまたモジュールIDを設定できるようになります。例えば、特定のデバイスやブラウザという条件で設定したり、特定のカテゴリーのみという条件で設定したい時に、このルール機能が役立ちます。


ルール作成画面

ルール作成画面


グローバルルールという機能を利用すると、ルールを設定した子ブログに同様のルールを適用し、多くの子ブログが存在するサイトの設定を一元化することができます。

ここでは、具体的なルール機能の活用例を3つ見ていきましょう。

スマートフォンに対応する

a-blog cms では、スマートフォン専用のプラグインや専用のプログラムがあるというわけではなく、ルール機能によってブラウザの名前(USER-AGENT)をチェックし、設定を切り換えて表示します。


スマートフォンの時のルール設定

スマートフォンの時のルール設定


このルールの設定を行った後に、一覧の「コンフィグ」ボタンをクリックすると、スマートフォンで表示する時のコンフィグについて個別で設定することができます。

ルール機能の主な用途としては、テーマの設定を変更することが挙げられます。この場合、PCとスマートフォンでは同じURLで違ったテーマを表示することができるようになります。a-blog cms で標準搭載のキャッシュ機能もルールによって別で処理されますので、キャッシュを気にする必要もありません。

特定のカテゴリーの時にユニット設定を変更する

ブラウザの名前(USER-AGENT)だけでなく、特定のカテゴリー内のみでユニットの細かな設定を変更することもできます。例えば「商品紹介」と「お知らせ」では、ユニット設定の内容や、ユニット追加ボタン自体の設定、テキストタグセレクトの内容を適切に変更しカスタマイズすることで、表示する設定を区別することができます。

スマートフォンの時、モジュールIDの設定を変更する

コンフィグによる大きな変更ではなく、限定的にモジュールIDの設定だけを変更することもできます。例えば、パソコンの時に表示するバナーと、スマートフォンの時に表示するバナーについて違うサイズやデザインのものを設定することができます。

利用するには、管理ページ > ルール のページに移動し、変更したいルール名の「モジュールID」ボタンをクリックしてください。モジュールID一覧と同じようなページに移動します。


スマートフォンの時のモジュール設定を変更する

スマートフォンの時のモジュール設定を変更する


変更したいルール名の設定を確認したい場合は、左上のプルダウン、もしくはトピックパスから確認できます。


ルール毎のコンフィグ設定のルール確認

ルール毎のコンフィグ設定のルール確認


特定の期間のみ異なるテーマを設定する

このルール機能の中には「期間」の設定ができるものがあります。これを利用してコンフィグを変更することで、例えば年末年始のみ特定のテーマを適用することも可能になります。