デモサイトのようにタイトルや説明を変更したい

カスタムフィールドによる情報の書き換え

a-blog cmsのデモサイトでは、サイトタイトルや説明、フッターのテキストはカスタムフィールド(自由に追加できるエントリー、カテゴリー、ブログ固有の入力フィールド)でできています。

ブログのカスタムフィールドはご利用のテーマに /admin/blog/field.html を置くことで読み込むことができます。

ブログカスタムフィールドの記述に関するファイル

/themes/(ご利用のテーマ)/admin/blog/field.html

a-blog cmsをダウンロードしていただき、v2.0 以降に同梱されている「site2014」テーマのブログカスタムフィールドを参考にしてみてください。

site2014のブログカスタムフィールドの記述に関するファイル

/themes/site2014/admin/blog/field.html

表示されていないカスタムフィールドの値を削除しないようにする

通常、エントリーデータの変更時にはカスタムフィールドの値は全て更新が行われます。そのエントリーに登録されているカスタムフィールドの値を全て削除したのちに、入力されている値を登録します。
例えば、新規エントリー登録時には、カスタムフィールドとしてTEL、FAXの項目にデータを入力して保存します。誤って編集時はカスタムフィールドのTEL、FAXの項目を記述しておらず、保存してしまいました。本来ならカスタムフィールドが無い状態で保存したため先ほど入力したTELとFAXの値は消えてしまいますが、下記の記述をするとカスタムフィールドの値が削除されないようになります。
エントリーのカスタムフィールドだけではなく、カテゴリーやブログのカスタムフィールドも同様に値を保持することができます。

全て削除してから登録するのではなく、画面に存在している値のみ上書きするには、下記の2行を入力・編集画面のformブロック内に記述します。

<input type="hidden" name="updateField" value="on" />
<input type="hidden" name="field[]" value="updateField" />

ユーザーがわかりやすい管理画面を作ろう

Ver. 2.10 がリリースされ管理画面のカスタマイズがテンプレートではなく、管理画面からでも設定で可能な部分が多くなりました。その点を理解するためのハンズオンになります。HTMLのテンプレートを触る必要もない設定のみになりますので、ディレクターさんも是非お試しください。

コンフィグセット

コンフィグの設定をブログやカテゴリー毎に細かく設定したり、その設定をグローバル指定し共有することができるようにコンフィグのセットを必要な数だけ作ることができるようになりました。( Ver. 2.10 より )

例えば、多店舗ブログを管理するような場合に、全店舗のブログの設定をコンフィグセットで設定して管理しておくことで一括で設定変更も可能になります。


コンフィグセットの一覧画面

多店舗サイトのプロトタイプを作ってみよう

以下のようなカタチで、子ブログ・孫ブログを作成します。

1. 子ブログ「ショップ(shop) 」を作成

2. ショップ(shop) のコンフィグセットに「店舗用コンフィグ」を作成

各店舗ブログ(孫ブログ)で共有するためのコンフィグを「店舗用コンフィグ」としてコンフィグセットを作成します。



名前 店舗用コンフィグ
グローバル チェックを入れる

コンフィグセット設定例

3. 孫ブログ 「東京(tokyo) 」「大阪(osaka) 」「名古屋(nagoya) 」を作成


孫ブログの設定例



コンフィグセット 店舗用コンフィグ
コードネーム 「shop/tokyo」、「shop/osaka」、「shop/nagoya」

複数の孫ブログを作成する際には、コンフィグセットを「デフォルト」から「店舗用コンフィグ」を設定して作成してください。

※ コードネームの欄は、shop/tokyo と設定することで http://localhost/shop/tokyo/ となり、tokyo とだけ書くと http://localhost/tokyo/ で表示が可能になります。つまり、ブログの URL はブログの階層構造を無視して設定が可能になりますので shop/ が必要な場合にはコードネームで設定をするようにしてください。

4.「店舗用コンフィグ」を編集

ショップのコンフィグに作られている「店舗用コンフィグ」を修正することで設定が各店舗のブログの設定が変わることを確認してみてください。

分かりやすいところでいえば、テーマ設定を変更してみてください。

5. この機会に「カテゴリーのグローバル化」も体験してみよう

せっかく多店舗ブログの設定を行ったので、カテゴリーのグローバルについても体験してみましょう。

ショップブログ(shop) のカテゴリーの管理画面にアクセスして、お知らせ (topics) をカテゴリーで作成して、グローバルのチェックをつけて作成してみてください。

すると、孫ブログ側でも お知らせ (topics) が利用できるようになります。

メニュー管理

管理ページの左側に並んでいる管理メニュー項目がブラウザからカスタマイズ可能になる「メニュー管理」機能が増えました。「メニュー管理」機能はルートブログのコンフィグまたは左端のサイドメニューのヘルプメニューからご利用できます。

メニュー管理では、例えば「コメント」「スケジュール」「カート」など、使わないメニューを削除することが簡単にできます。


メニュー管理機能の設定画面

また、項目を追加 をすることでオリジナルのメニューを追加可能です。

メニュー管理のカスタマイズ

1.「外部リンク」列を追加

外部リンクをメニューを用意し、Googleアナリティクス・サーチコンソールへのリンクを常時管理画面のメニューに追加してみましょう。

列を追加」ボタンをクリックすると新規のメニューグループが追加されます。「 新規」 のテキスト部分はクリックすると編集可能になりますので、「外部リンク」に書き換えてみてください。


メニューグループを新規追加した画面


項目を追加」 で、Googleアナリティクス・サーチコンソールのリンクを設定します。

最後に、このメニューグループはドラッグして順番が変更できますので、最後に持っていきましょう。そして、「保存」すると作業は完了です。

管理メニューの反映を確認するためには、ブラウザのリロードが必要です。

2. 管理画面のショートカットとして利用

制作中によく利用する管理画面をリンクとして出しておくことも管理画面の移動回数を減らすことができ、便利にお使いいただけます。※入力欄にはグローバル変数の利用が可能です



タイトル URL
カスタムフィールドメーカー /bid/%{BID}/admin/customfield_maker/
コンフィグ /bid/%{BID}/admin/config_index/

参考リンク

ルールの新しい機能

今回、ログインユーザーやログインユーザーの権限によるルールが追加されています。

実用的な例だと、クライアントのみに開発中のサイトをテストデータではなくCMSに登録されている実データを元にチェックしていただくことが可能です。

  1. ルートブログ(bidが1のブログ)にクライアントを想定したユーザーを作成してください。
  2. ルールを新しく作成し、作成したユーザーのIDを「ログインユーザーID」に設定してテーマを切り替えてみてください。

環境によってデバックモードの ON/OFFを切り替える

デバックモードを環境ごとに切り替える

config.server.phpにDEBUG_MODEという設定があります。この値を1に設定すると デバックモードがONになり以下のような作用があります。

  • キャッシュが効かなくなる
  • phpのエラーが出力されるようになる

開発中はデバックモードをONにすることによって開発がしやすくなりますが、 上記の事がありますので、運用時には必ずデバックモードをOFFにしないといけません。

接続元のグロバールIPアドレスによって切り替える

config.server.phpのDEBUG_MODEを以下のように書き換えます。

ポストインクルードの基本設定

ここでは、組み込みJavaScriptの「post include」機能の基本設定について説明します。post include機能は、フォームでpost(送信)した結果を、ページのリロードなしで表示する機能です。

config.js内の設定

/js/config.jsの以下の箇所に設定内容が記載されています。

//--------------
// post include
postIncludeOnsubmitMark     : '.js-post_include',
postIncludeOnreadyMark      : '.js-post_include-ready',
postIncludeOnBottomMark     : '.js-post_include-bottom',
postIncludeOnIntervalMark   : '.js-post_include-interval',
postIncludeMethod           : 'replace', // ( 'swap' | 'replace' )
postIncludeEffect           : 'slide', // ( 'slide' | 'fade' | '' )
postIncludeEffectSpeed      : 'slow', // ( 'slow' | 'fast' )
postIncludeOffset           : 60,
postIncludeReadyDelay       : 0,
postIncludeIntervalTime     : 20000,
postIncludeArray  : [{
//  'mark'       : '.js-post_include-original',
//  'type'       : 'submit',
//  'method'     : 'swap',
//  'effect'     : 'slide',
//  'effectSpeed': 'slow'
}],


postIncludeOnsubmitMark ここで指定したセレクタのフォームは、送信ボタンを押した後に結果を表示します。「.js-post_include」の場合は、class="js-post_include" が付与されているform要素に適用されます。
postIncludeOnreadyMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページを読み込んだら自働的に送信されて結果を表示します。「.js-post_include-ready」の場合は、class="js-post_include-ready" が付与されているform要素に適用されます。
postIncludeOnBottomMark ここで指定したセレクタのフォームは、送信ボタンを押さなくてもページの下部までスクロールしたら自働的に送信されて結果を表示します。「.js-post_include-bottom」の場合は、class="js-post_include-bottom" が付与されているform要素に適用されます。
postIncludeOnIntervalMark ここで指定したセレクタのフォームは、送信ボタンを押さなくても一定時間ごとに自働的に送信されて結果を表示します。「.js-post_include-interval」の場合は、class="js-post_include-interval" が付与されているform要素に適用されます。
postIncludeMethod swap:target属性で指定した場所の「中身」を置き換える / replace:target属性で指定した場所「自体」を置き換える
postIncludeEffect slide:スライド表示 / fade:フェード表示 / 指定なし:エフェクトなし
postIncludeEffectSpeed postIncludeEffectでエフェクトが指定されている時のみ有効になります。slow:ゆっくり表示 / fast:早く表示
postIncludeOffset postIncludeOnBottomMark で指定されたセレクタのフォームの下部からの読み込み開始位置になります。
postIncludeReadyDelay postIncludeOnreadyMark で指定されたセレクタのフォームの読み込み開始時間を遅くする設定になります。ミリ秒で設定します。
postIncludeIntervalTime postIncludeOnIntervalMark で指定されたセレクタのフォームの読み込み時の更新頻度をミリ秒で設定します。
postIncludeArray 配列として複数の設定を記述できます。同じページ内で複数の設定を併用したい場合などに利用します。

Ver. 2.8.0よりpostIncludeEvalValueMarkの設定ではキャッシュさせないポストインクルードが動作しなくなりました。詳しい実装方法については「post includeの結果をキャッシュさせない方法」の代替案をご覧ください。(2020年11月19日)

Ver. 2.11.25よりデフォルトの設定だと tplコンテキストが無効になりました。ポストインクルードを利用する際には ポストインクルードの準備 をご覧ください。(2021年6月16日)