ユニット、主にテキストユニットの設定について

このエントリーは、a-blog cms Advent Calendar 2016の7日目のエントリーです。

www.adventar.org

a-blog cmsはユニットと言うものを使用してページをつくることが出来ます。

https://developer.a-blogcms.jp/document/units/

今回は良く使っているテキストユニットのコンフィグ設定とその他設定を3つ紹介したいと思います。

普段はユニットのパーツを準備して、なるべくユニットだけでページを作る。足りない場合はカスタムユニットという形を取っています。

あとは案件に合わせて項目や、カスタムユニットを追加したりという感じです。

連携の取れる方、例えば外部デザイナーさんとの案件の場合

CMSとテーマのひな形を準備しておく。
デザイナーさんにパーツなど主要デザインを準備してもらう。
テーマの作成と同時にコンテンツの入力を進める。
最終的に完成したテーマを適用して調整。

といった形でいろいろ同時進行できたりとメリットが多いです。

まずはコンフィグの設定から

コンフィグの設定

まずは使いそうなものずらずらとを用意します。

コンフィグ画面

f:id:tamushou:20161130003526p:plain

ユニット入力画面

f:id:tamushou:20161130003349p:plain

表示画面

f:id:tamushou:20161130021244g:plain

コンフィグの設定はこんな感じです。

コンフィグ以外の3つの設定

テキストユニットの設定に拡張フィールドを追加
ajax/emoji-edit.htmlのカスタマイズ
ルールでコンフィグを分ける

1. テキストユニットの設定に拡張フィールドを追加

f:id:tamushou:20161130010657p:plain

表示はここ。

f:id:tamushou:20161130011838p:plain

設定はコンフィグ画面の拡張に入力します。

そしてinclude/unit.html内の該当タグ箇所で{extend_tag}と入れると表示されます。

デフォルトはタイトルのidに当てられています。

<!-- BEGIN p -->
<p{class}>{text}[nl2br]</p><!-- END p --><!-- BEGIN h2 -->
<h2{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h2><!-- END h2 --><!-- BEGIN h3 -->
<h3{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h3><!-- END h3 --><!-- BEGIN h4 -->
<h4{class} <!-- BEGIN_IF [{extend_tag}/nem] -->id="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</h4><!-- END h4 --><!-- BEGIN h5 -->

idは問題無いのですが、classにしてみると、

コンフィグのタグ入力のclassとかぶってうまく表示できません。

<!-- BEGIN p -->
  <p{class} <!-- BEGIN_IF [{extend_tag}/nem] --> class="{extend_tag}"<!-- END_IF -->>{text}[nl2br]</p>
<!-- END p -->

f:id:tamushou:20161130013100p:plain

f:id:tamushou:20161130013000p:plain

divで囲む

divで囲んじゃってます。こんな感じ

<!-- BEGIN_IF [{extend_tag}/nem] --><div class="{extend_tag}"><!-- END_IF -->
  <p{class}>{text}[nl2br]</p>
<!-- BEGIN_IF [{extend_tag}/nem] --></div><!-- END_IF -->

f:id:tamushou:20161130013649p:plain

表示されました。

2. ajax/emoji-edit.htmlのカスタマイズ

f:id:tamushou:20161130010830p:plain

表示はここ。

systemディレクトリの必要ファイルを自分のテーマにコピーします。

themes/system/ajax/emoji-edit.html

↓

themes/tamshow_theme/ajax/emoji-edit.html

<span class="js-tag_insertion">
  <!--<p> -->
  <a href="#" class="emoji-trigger-tag" rel="a" title="リンク先のURLを入力してください">リンク挿入</a> |
  <a href="#" class="emoji-trigger-text" rel="text-bold color-red">
    <span class="text-bold color-red">赤太字</span>
  </a> |
  <a href="#" class="emoji-trigger-text" rel="text-bold">
    <span class="text-bold">黒太字</span>
  </a> |
  <a href="#" class="emoji-trigger-text" rel="text-kaisho">
    <span class="text-kaisho">楷書</span>
  </a> |
  <a href="#" class="emoji-trigger-text" rel="js-tel-link">
    <span>スマホTELリンク</span>
  </a> |
</span>

こんな感じに編集しています。

rel=""の箇所に追加したいclassをいれるイメージです。

3. ルールでコンフィグを分ける

しかし、このままだと実際に更新されるお客様もこのテキストユニットが見えているということになります。

更新される方のスキルによっては選択項目が多すぎて混乱するかもしれません。

そこでルールを使ってコンフィグの表示をユーザーによって出し分けます。

f:id:tamushou:20161130014526p:plain

投稿ユーザー用のルールを作成して、

f:id:tamushou:20161130014603p:plain

不要な物は削除、ラベルもわかりやすく変更しちゃいましょう。

f:id:tamushou:20161130014638p:plain

設定後はこんな感じ

これで迷わず更新出来そうです。

この辺の管理画面の表示を細かく調整したい場合は、北海道のa-blog cms エバンジェリストのうぇびんさんの記事で紹介されているjQueryで表示を調整する方法がとても参考になります！

cms-skill.com

良いユニットライフを！！

tamlog

主にwebのフロント回りたまに登山