カテゴリーのカスタムフィールド

カテゴリーの管理画面にカスタムフィールドを作って、独自の情報を持たせることができます。テキスト、画像、ファイル、地図などカテゴリー毎に項目が作れます。


カテゴリーのカスタムフィールド画面

カテゴリーのカスタムフィールド画面


カテゴリーのカスタムフィールドはカテゴリー管理のカスタム設定タブにあります。カスタムフィールドを追加するには以下のファイルを利用中のテーマフォルダに置いてください。

/themes/利用中のテーマ/admin/category/field.html

カテゴリーのカスタムフィールドを作る

/themes/利用中のテーマ/admin/category/field.html にページのキーワードを入力するカスタムフィールドを追加してみましょう。

<input type="text" name="category_meta_keywords" value="{category_meta_keywords}" class="acms-form-width-full" />
<input type="hidden" name="field[]" value="category_meta_keywords" />

サイトに表示させる

カテゴリーのカスタムフィールドはCategory_Fieldモジュール、Category_ListやCategory_EntryList、Entry_BodyやEntry_SummaryモジュールのcategoryFieldブロック内で使うことができます。

Category_Fieldモジュールで表示

<!-- BEGIN_MODULE Category_Field -->
<p>{category_meta_keywords}</p>
<!-- END_MODULE Category_Field -->

Category_ListやCategory_EntryListモジュールで表示

category:loop内にカテゴリーのカスタムフィールドを書きます。

<!-- BEGIN_MODULE Category_List -->
<!-- BEGIN category:loop -->

<!-- BEGIN ul#front -->
<ul><!-- END ul#front --><!-- BEGIN li#front -->
	<li><!-- END li#front --><!-- BEGIN category:veil -->
		<a href="{url}">{name} - {category_meta_keywords}</a><!-- END category:veil --><!-- BEGIN li#rear -->
	</li><!-- END li#rear --><!-- BEGIN ul#rear -->
</ul><!-- END ul#rear -->

<!-- END category:loop -->
<!-- END_MODULE Category_List -->

Entry_BodyやEntry_SummaryモジュールのcategoryFieldブロック内で表示

モジュールIDの設定して、entry:loop内にcategoryFieldブロックを記述してください。

<!-- BEGIN_MODULE Entry_Summary id="testID" -->
<!-- BEGIN unit:loop -->
<!-- BEGIN entry:loop -->
     
<!-- BEGIN categoryField -->
<p>{category_meta_keywords}</p>
<!-- END categoryField -->
     
<!-- END entry:loop -->
<!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

Entry_BodyやEntry_Summaryモジュールでカテゴリーのカスタムフィールドの情報を出すときはモジュールIDの表示設定にカスタムフィールド カテゴリーフィールドにチェックをしてください。


モジュールのカテゴリーカスタムフィールド出力設定

モジュールのカテゴリーカスタムフィールド出力設定

新機能サブカテゴリーを使ってみよう

この機能は、Ver. 2.10.0 のアルファ版機能になります。製品版では仕様が変わる可能性があります。みなさんのご意見をぜひお聞かせください。

機能紹介

a-blog cms はこれまでエントリーにカテゴリーは1つのみしか設定できない仕様になっていました。これによりシンプルな構造を維持でき、実際のURLと変わらない構造にすることができました。

ただ、同じ記事が複数のカテゴリーに所属したい場合は、実際の現場ではありえることだと思います。たとえば、FAQコンテンツのサイトで、「初めてのお客様向け」と「製品ご利用中のお客様」というカテゴリーがあった場合、両方のカテゴリーに同じ記事が必要な場合などです。

今までは、カスタムフィールドやタグを使って、複数の分類に属する記事を作成できるようにしていましたが、もう少し簡単に実装できるように、Ver. 2.10.0 でサブカテゴリー機能を追加する予定でいます。

しかしながら、今までのシンプルな構造を壊したくはないので、いままでのメインのカテゴリーは残し、サブカテゴリーという形で、複数のカテゴリーを選択できるような形になっています。

機能の有効化

管理ページ > コンフィグ > 編集設定 の「サブカテゴリー」を「有効」にしてください。


機能の有効化

機能の有効化


操作方法


サブカテゴリーの選択画面

サブカテゴリーの選択画面


サブカテゴリーを有効化した後に、エントリーの編集画面に移動すると、「サブカテゴリー」項目が増えています。 ここをクリックすると、カテゴリーの選択肢が表示されますので、「クリック」or「エンター」で選択できます。また入力欄にキーワードを入れることで、リアルタイムで項目が絞り込まれる機能も搭載しています。

一覧ページでの確認

実際に「サブカテゴリー」をエントリーに設定してみて、一覧ページ(カテゴリーページ)で実際に、そのエントリーが表示されるか確認してみましょう。

例えば、「お知らせ(news)」カテゴリのエントリーのサブカテゴリーに「採用情報(recruit)」を設定した場合、

  • http://example.com/news/
  • http://example.com/recruit/

で同じ記事が表示されているか確認してみてください。

Entry_Body で表示(課題)

Entry_Bodyでメインのカテゴリーと同じように、「サブカテゴリー」も表示できるようになっています。変数表(クイックサーチを使うと便利です)で確認して、エントリー詳細ページに「サブカテゴリー」を下記のように表示してみましょう。


以上で「サブカテゴリー」に関するハンズオンは終了です。まだアルファ版の機能ですので、製品版がよりよくなるように、ぜひご意見を聞かせてください。

エントリー編集画面をより使いやすく設定する

このハンズオンの目的

Ver. 2.8 からエントリー編集画面に関するオプションがいくつか追加されています。特にカスタマイズが必要なものではありませんが、新しく追加されたオプション項目をここで確認して、サイト運営者がより使いやすいエントリー編集画面を提供できるようにしましょう。

編集ページの統一

現状a-blog cmsのエントリー編集画面は2通りあります。

  • 閲覧側での編集画面
  • 管理画面で編集画面

管理画面で編集画面

管理画面で編集画面


閲覧側での編集画面

閲覧側での編集画面


それぞれメリット・デメリットがあり一概にどちらがいいかは言えませんが、サイト運用者のスキルや、コンテンツ内容によって変わってくると思います。



管理画面での編集 閲覧側での編集
メリット 保存した後も編集画面のままなので、移動回数がすくなく素早い編集ができる。 保存後すぐに実際の表示状態が確認できる。
デメリット 実際の表示状態を確認するには、表側ページに移動するか、プレビュー機能をつかう必要がある。 保存後すぐに実際の表示状態に移動するので、再編集するのにまた編集ページに移動しないとけない。

この2つの編集画面のどちらに移動するかは、移動元の画面が閲覧側か管理画面かによって判断されていましたが、運用する人にとってはいつも同じ編集画面で編集したい事は多いです。

そこで、Ver. 2.9.0 から どこからの編集ページへの移動でも、編集画面をどちらかに統一するオプションが追加されました。

設定方法

管理画面 > コンフィグ > 編集設定 の「編集画面」を設定します。設定できる項目は、

  • 従来の挙動: 移動元により、表側、管理画面側の両方の編集画面が利用できる
  • 表側に統一: どこから移動しても、閲覧側の編集画面に移動
  • 管理画面に統一: どこから移動しても、管理画面側の編集画面に移動

となっています。

初期ステータスの設定

今までの仕様では、エントリーを新規作成した時の「ステータス」は「下書き」に設定されており、オプションで変更できませんでした。これが、Ver. 2.9.0 より設定できるようになりました。

設定方法

管理画面 > コンフィグ > 編集設定 の「初期ステータス」を設定します。

初期ステータスを変更したいシチュエーション

例えば、承認機能利用時は承認されないと記事が公開されないので、通常「下書き」ステータスで承認依頼することはありません。なので最初から「公開」ステータスにしておくことで、ステータスの変更忘れを防げます。

エントリー日付の更新

こちらは、Ver. 2.6系で追加された機能になりますが、コンテンツ内容によって設定した方が、使いやすくなると思いますので紹介しておきます。

デフォルトの動作だと、以下動作のときにエントリーの日付を更新するようになっています。

  • 下書きのエントリーを公開ボタンにより公開した時
  • エントリーの複製時

ブログのようなコンテンツの場合は、エントリーを下書きで保存しておき、公開した日時が、コンテンツの日時になって欲しいので、この動作で問題ありませんが、イベント日時などを設定するコンテンツの場合は公開時にエントリーの日付は更新されて欲しくないと思います。

また複製時も、1日に複数のイベントがあり、複製してイベントを増やしたい場合なども、日付が更新されると困るのでこの設定が有効です。

設定方法

管理画面 > コンフィグ > 編集設定 の「エントリー日付の更新」を設定します。チェックをつけると更新されるようになりますので、日時を更新したくない場合は、チェックをはずします。

例題

最後に実際に使ってみて、使い方をイメージしてみましょう。

  • ステータスが「下書き」のエントリーを後から更新しても設定した日時が変更されないようにする
  • はじめから作成したエントリーのステータスを「公開」の状態にする設定にする
  • エントリーを複製しても日時が変わらない設定にする

画像を Retina Display に対応する

CMSで表示させる画像には拡大画像の large- というファイルがあります。もともとは拡大表示用に利用している画像ですが、これをメイン画像として利用する事ができるようにする JavaScript を用意してみました。

大きな画像を利用する事になるので、サイトが重くなりますので、Cookie を利用して希望する人だけがキレイな画像のファイル名にJavaScriptで置き換えます。全ての画像を対象とするわけではなく、class="retinaImage" のついた画像のみを対象とします。


カスタムフィールドを利用して、エントリーに複数の位置情報を持たせてみよう

a-blog cmsでは、位置情報の設定を有効化すれば、エントリーごとに一つの位置情報を登録できるようになっていますが、複数の位置情報を登録することができません。複数の位置情報を登録することができれば、例えばエントリーがイベント記事になっていて、そのイベントが複数会場になっている場合などに便利です。

このハンズオンで行うこと

このハンズオンでは以下の手順で、OpenStreetMapとカスタムフィールドグループを使って、一つのエントリーに複数の会場情報をもたせてみましょう。

  1. siteテーマでeventというカテゴリーを作成
  2. エントリーの編集画面のカスタマイズ
  3. OpenStreetMapを使った表側での表示

1. siteテーマでイベントカテゴリーを作成

管理画面 > カテゴリー より、eventというカテゴリーコードでイベント用のカテゴリーを新規追加します。

2. エントリーの編集画面のカスタマイズ

site2018/admin/entry/field/event.htmlを追加し、以下のようなHTMLを記述します。

<h2 class="acms-admin-admin-title2">マップの焦点の設定</h2>
<table class="acms-admin-table-admin-edit">
  <tr>
    <th>緯度</th>
    <td>
      <input type="text" name="mapDefaultLat" value="{mapDefaultLat}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultLat">
    </td>
  </tr>
  <tr>
    <th>経度</th>
    <td>
      <input type="text" name="mapDefaultLng" value="{mapDefaultLng}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultLng">
    </td>
  </tr>
  <tr>
    <th>ズーム</th>
    <td>
      <input type="text" name="mapDefaultZoom" value="{mapDefaultZoom}" class="acms-admin-form-width-full">
      <input type="hidden" name="field[]" value="mapDefaultZoom">
    </td>
  </tr>
</table>
<h2 class="acms-admin-admin-title2">会場一覧</h2>
<div class="js-fieldgroup-sortable adminTable acms-admin-table-admin-edit">
  <!-- BEGIN VenueList:loop -->
  <div class="sortable-item" style="border-bottom: 1px solid #CCC;">
    <span class="item-handle" style="display:inline-block; padding: 10px;">
      <i class="acms-admin-icon-sort"></i>
    </span>
    <table class="acms-table-entry">
      <tr class="js-open-street-map-editable">
        <th>地図</th>
        <td>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="" value="" class="js-osm-search" size="40" />
            <input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn" />
            <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger acms-admin-float-right"
              value="削除">
          </div>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="venueName[]" value="{venueName}" class="acms-admin-form-width-full" placeholder="会場名">
          </div>
          <div class="acms-form-group">
            <div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
          </div>
          <div class="acms-form-group" style="padding-top: 10px;">
            緯度 <input type="text" name="mapLat[]" value="{mapLat}" size="9" class="js-osm-lat" />
            経度 <input type="text" name="mapLng[]" value="{mapLng}" size="10" class="js-osm-lng" />
            ズーム <input type="text" name="mapZoom[]" value="{mapZoom}" size="10" class="js-osm-zoom" />
          </div>
        </td>
      </tr>
    </table>
  </div>
  <!-- END VenueList:loop -->
  <div class="sortable-item item-template" style="border-bottom: 1px solid #CCC;">
    <span class="item-handle" style="display:inline-block; padding: 10px;">
      <i class="acms-admin-icon-sort"></i>
    </span>
    <table class="acms-table-entry">
      <tr class="js-open-street-map-editable">
        <th>地図</th>
        <td>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="" value="" class="js-osm-search" size="40" />
            <input type="button" name="" value="検索" class="js-osm-search-btn acms-admin-btn" />
            <input type="button" class="item-delete acms-admin-btn-admin acms-admin-btn-admin-danger acms-admin-float-right"
              value="削除">
          </div>
          <div class="acms-form-group" style="padding-bottom: 10px;">
            <input type="text" name="venueName[]" value="" class="acms-admin-form-width-full" placeholder="会場名">
          </div>
          <div class="acms-form-group">
            <div class="acms-admin-gmap-container js-open-street-map-picker" style="position:relative; overflow: hidden; width: 100%; height: 300px;"></div>
          </div>
          <div class="acms-form-group" style="padding-top: 10px;">
            緯度 <input type="text" name="mapLat[]" value="" size="9" class="js-osm-lat" />
            経度 <input type="text" name="mapLng[]" value="" size="10" class="js-osm-lng" />
            ズーム <input type="text" name="mapZoom[]" value="" size="10" class="js-osm-zoom" />
          </div>
        </td>
      </tr>
    </table>
  </div>
  <div class="clearfix" style="padding: 10px;">
    <input type="button" class="item-insert acms-admin-btn-admin acms-admin-float-right" value="追加">
  </div>
</div>


<input type="hidden" name="@VenueList[]" value="mapLat">
<input type="hidden" name="field[]" value="mapLat">
<input type="hidden" name="@VenueList[]" value="mapLng">
<input type="hidden" name="field[]" value="mapLng">
<input type="hidden" name="@VenueList[]" value="mapZoom">
<input type="hidden" name="field[]" value="mapZoom">
<input type="hidden" name="field[]" value="@VenueList">
<input type="hidden" name="@VenueList[]" value="venueName">
<input type="hidden" name="field[]" value="venueName">

以下のようなOpenStreetMapの地図登録UIがカスタムフィールドグループとして表示されたらカスタマイズ成功です。


3. OpenStreetMapを使った表側での表示

site2018/include/field/entry_event.htmlを作成し、以下のように記述します。

<!-- BEGIN_SetRendered id="map-markers" -->
<!-- BEGIN VenueList:loop --><!-- BEGIN VenueList:glue -->|<!-- END VenueList:glue -->{mapLat},{mapLng}<!-- END VenueList:loop -->
<!-- END_SetRendered -->

<!-- BEGIN_SetRendered id="map-messages" -->
<!-- BEGIN VenueList:loop --><!-- BEGIN VenueList:glue -->[[:split:]]<!-- END VenueList:glue --><p>{venueName}</p><!-- END VenueList:loop -->
<!-- END_SetRendered -->

<div class="entry-container">
	<div class="js-open-street-map"
		data-multiple="true"
		data-lat="{mapDefaultLat}"
		data-lng="{mapDefaultLng}"
		data-zoom="{mapDefaultZoom}"
		data-markers='<!-- GET_Rendered id="map-markers" trim="1" -->'
		data-messages='<!-- GET_Rendered id="map-messages" trim="1" -->'
		style="width: 857px; height: 400px;"
	></div>
</div>

エントリーのカスタムフィールドにマップの焦点の設定と、2つの地図情報を登録してください。 以下、カスタムフィールドの登録例です。



緯度 経度 ズームレベル
マップの焦点 35.1703969 136.8863534 16
会場A 35.16908096284039 136.8803542479873 17
会場B 35.1703969 136.8863534 17

最終的に、以下のようにテンプレートに2つピンが立っていることが確認できたらハンズオン成功です。