a-blog cms 勉強会 in 名古屋 2018/06
WordPressユーザーの皆さんこんにちは。WordPressユーザーを対象にa-blog cmsの基礎を解説するこのシリーズ、前々回は「ユニット」、前回は「子ブログ」と「カテゴリー」について見てきました。今回取り上げるのは「カスタムフィールド」です。
まずはWordPressのカスタムフィールドについて見ていきましょう。WordPressのカスタムフィールドは、コアの機能だけでは、それほど扱いやすいとは言えません。
といった弱点があります。
カスタムフィールドに値を入力するには、まず「名前」セレクトメニューからカスタムフィールド名を選ぶ必要があります。
こういった弱点を補い、カスタムフィールドを扱いやすいものにするため、さまざまなプラグインが配布されています。中でも「Advanced Custom Fields」はもっとも人気のあるプラグインです。Advanced Custom Fields を使うと、次のような利点があります。
しかし、カスタムフィールド関連のプラグインを使うことには、下記のようなデメリットもあります。
それでもWordPressでカスタムフィールドを便利に使おうとすれば、プラグインに頼らざるを得ないのが実情です。
一方、a-blog cmsにはサードパーティ製のプラグインは基本的に存在しません。カスタムフィールドに限らず機能はすべて本体に搭載されていて、プラグイン同士のコンフリクトやバージョンアップ時の不具合に悩まされることはありません。
a-blog cmsのカスタムフィールドは、WordPressのように管理画面から追加していくのではなく、管理画面用のテンプレートファイルにHTMLを書いて定義するという特徴があります。そのためHTMLの知識がある程度必要になりますが、ソースコードは「カスタムフィールドメーカー」で生成できるので、慣れればそれほど難しくはありません(「カスタムフィールドメーカー」については後の文章でくわしく説明します)。HTMLなので柔軟にレイアウトを変更したり、注意書きを追加したり、JavaScriptと組み合わせたりすることが可能です。また、WordPressのカスタムフィールドと異なりとくにカスタマイズをしなくても初期状態で検索にヒットします。
a-blog cmsではカスタムフィールドはエントリー(投稿)だけでなく、ブログ、カテゴリー、ユーザー、モジュールに設定できます。
エントリー(投稿)以外のカスタムフィールド入力フォームは、それぞれの設定画面の「カスタム設定」タブをクリックすると表示されます。デフォルトテーマの「site2018」テーマの場合、カテゴリーの「カスタム設定」では、SEOやOGP設定の他に、ページタイトルの背景画像や説明文を設定することができます。
WordPressではブログ全体に関する設定は、カスタマイザーで行います。リアルタイムで表示確認できるカスタマイザーはきちんと作りこめば更新者にとって操作しやすい機能ですが、カスタマイザーのカスタマイズは難易度が高く、制作者にとっては負担が大きいところです。
WordPress:カスタマイザー
一方、a-blog cmsではブログのカスタムフィールドはエントリー(投稿)やカテゴリーのカスタムフィールドと同じ感覚で追加したり、編集できるようになっています。
エントリー(投稿)のカスタムフィールドは、ユニットと同じエントリー(投稿)の編集画面に表示されます。テンプレートファイル名を「field.html」にするとユニットの前に表示され、「field_foot.html」にするとユニットの後に表示されます。
site2018の物件情報のカスタムフィールドの定義は「テーマフォルダ/admin/entry/field.html」から
インクルードされているため、エントリーの編集画面でカスタムフィールドはユニットの上に表示されています
カスタムフィールドのテンプレートファイルの場所は下図のようになっています。
カスタムフィールドのソースを生成するためには「カスタムフィールドメーカー」を使います。カスタムフィールドメーカーへのリンクは「管理ページ > コンフィグ」の「ガイドライン・ツール」にあります。[^1]
必須項目である「入力欄の種類」、「タイトル」、「フィールド」に入力し、必要に応じてツールチップやオプションを入力して「生成」ボタンをクリックすると、「入力用ソース」と「出力用ソース」に上から順にソースが追加されていきます。「プレビュー」をクリックすると実際の入力画面をプレビューできます。「履歴クリア」をクリックするとソースがクリアされます。 「入力用ソース」は上図で示したテンプレートファイルにコピー&ペーストします。
出力用ソースは、出力側のテンプレートファイルにコピー&ペーストします。[^2]
a-blog cmsの管理画面用テンプレートはHTMLで書かれているので、直接編集すれば分かりやすくカスタマイズすることができます。site2018テーマの「物件情報」カテゴリーのエントリーには多くのカスタムフィールドが用意されていますが、表示画面と管理画面のレイアウトを一致させることによって、直感的に編集できるようになっています。
WordPressではカスタムフィールドの値を検索に含めるには、functions.phpに書き込んでカスタマイズするか、Advanced Custom Fieldsとはまた別のプラグインを追加する必要があります。a-blog cmsではカスタムフィールドの値はとくにカスタマイズをしなくても初期状態で検索にヒットします。逆に特定のカスタムフィールドをヒットさせたくない場合は、上記の「カスタムフィールドメーカー」のオプションで「カスタムフィールド検索の対象外にする」にチェックを入れてソースを生成します。 また、カスタムフィールドの値を使った詳細なカスタムフィールド検索を作成することも可能です。
「カスタムフィールドグループ」はAdvanced Custom Fieldsの有料版、Advanced Custom Fields Proの繰り返しフィールドに似た機能で、カスタムフィールドを任意の回数繰り返すことができます。カスタムフィールドグループも、「カスタムフィールドメーカー」を使ってソースコードを生成し、ソースコードをテンプレートにコピー&ペーストするという手順で作成できます。
a-blog cmsではフォームもカスタムフィールドの一種です。site2018テーマに標準で搭載されているフォームをカスタマイズしたい場合は、 themes/site2018/contact/form/ にあるテンプレートファイルを編集します。
参考:フォーム | ドキュメント | a-blog cms developer
最後に、これはa-blog cmsではカスタムフィールドではないのですが、Advanced Custom Fieldsの「関連」に似た機能として「関連エントリー機能」について触れておきます。
該当エントリーの関連エントリーを複数設定でき、ドラッグ&ドロップで順序を変えることができる点もAdvanced Custom Fieldsの「関連」と似ています。
参考:関連エントリーを表示してみよう | ハンズオン | a-blog cms developer
a-blog cmsのカスタムフィールドには次のような特徴があります。
カスタムフィールドについてもっと詳しく知りたい場合は、a-blog cmsのドキュメントを参照してください。
それでは、第3回「 柔軟なカスタムフィールド」は以上となります。第4回は「URLの階層と一致しているテーマ&テンプレート」です。
[^1]: Ver.2.8からの新機能である「クイックサーチ」を使う場合は「Ctrl + k」あるいは「⌘K」で表示されるポップアップで「カスタム」と入力すればいちばん上に表示されます。クイックサーチはログインした状態であれば管理画面からも表示画面からも使用できます。 [^2]: 出力用ソースはそれぞれ決まった文脈の中で使う必要があることに注意しましょう。たとえばブログのカスタムフィールドはBlog_FieldモジュールやblogFieldブロック内で、カテゴリーのカスタムフィールドはCategory_FieldモジュールやcategoryFieldブロック内でないと表示されません。
WordPressユーザーの皆さんこんにちは。今回は、エントリー(WordPressでは「投稿」のこと)の分類方法について見ていきます。エントリー(投稿)の分類はCMSの根幹とも言える部分ですが、WordPressとa-blog cmsの間にはどのような違いがあるのでしょうか。
まずは、WordPressの投稿についておさらいしましょう。WordPressの投稿には、大きく分けて「投稿」と「固定ページ」という種類があります。と言うと少し分かりにくいかもしれませんが、WordPressにおいては「投稿」も「固定ページ」もシステムの内部では投稿(post)として扱われています。
$posts = get_posts( array('post_type' => 'post') );
と書けば「投稿」を取得でき、
$pages = get_posts( array('post_type' => 'page') );
と書けば「固定ページ」を取得できることからも分かるように、「投稿」と「固定ページ」はどちらも「投稿(post)」であって、投稿タイプ(post_type)が違うだけです。
このように、システム内部ではどちらも「投稿」である「投稿」と「固定ページ」ですが、それぞれ下表のような特徴を持っています。
| 投稿 | 固定ページ |
|---|---|
| 階層構造を持たない | 階層構造を持つ |
| アーカイブを持つ | アーカイブを持たない |
| 時系列順に表示される | 「ページ順序」で指定した順に表示される |
| カテゴリーやタグが使用できる | カテゴリーやタグは使用できない |
つまり、お知らせやブログ記事など情報の鮮度が重要な内容は「投稿」、あまり更新されない基本的な情報は「固定ページ」、というように、それぞれ特化した役割を持っています。この役割にのっとったサイトを作成するには手軽ですが、違うことをやりたい場合や大規模なサイトや複雑な構造のサイトを作りたい場合には、カスタマイズが難しかったり、工数がかかってしまうことがあります。「投稿」「固定ページ」といった名前ひとつとっても、管理画面で違う名前で表示するにはカスタマイズが必要です。
バージョン3.0からの機能であるカスタム投稿タイプは、ひとつの投稿が必ずひとつのカスタム投稿タイプに属するという点で、カテゴリーより扱いやすい面があります。サイトを制作していると「カテゴリーをひとつしか選んでほしくない」という場合がよくありますが、そういった場合にはカテゴリーよりカスタム投稿タイプを使うことが一般的になりました。
カスタム投稿タイプを作成する際にはregister_post_type() 関数を使います。この関数のパラメータの 'hierarchical' を ‘false’ にすると投稿のように階層性のない投稿タイプになり、’true’にすると固定ページのように階層性がある投稿タイプになります。つまり、カスタム投稿タイプもまた「投稿」「固定ページ」のどちらかと似た特徴があります。
a-blog cmsには「投稿」と「固定ページ」の区別はなく、もちろんカスタム投稿タイプもありません。つまりWordPressでいうところの「投稿タイプ」のような種類はなく、すべてがエントリー(投稿)として扱われます。では、上で見てきたような「投稿」と「固定ページ」の違いは、a-blog cmsではどのように実現されているのでしょうか。
前回に引き続き、ablogcms.ioで簡単に作成したテスト環境を前提として順に見ていきましょう。a-blog cmsではインストールした時点で標準的なコンテンツが一通り揃っています。下図はその中の一部を示しています。
トップページでは「top.html」、一覧ページでは「index.html」、詳細ページでは「entry.html」テンプレートが使用されます。(第4回「URLの階層と一致しているテーマ&テンプレート」で解説予定)
これと同じものをWordPressで構築する場合、「お知らせ」は投稿として、「会社概要」は固定ページとして扱います。a-blog cmsの場合は、「お知らせ」と「会社概要」はどちらもカテゴリーであり、そのカテゴリーに属する詳細ページはどちらもエントリー(投稿)です。
では「お知らせ」と「会社概要」で何が違っているのかというと、カテゴリーの中にファイル名が空のエントリー(投稿)があるかどうかです。a-blog cmsでは、カテゴリーの中にファイル名が空のエントリー(投稿)があれば、そのエントリー(投稿)が親ページ的に扱われます。「会社概要」カテゴリーの「会社概要」エントリー(投稿)のファイル名が空なので、このエントリー(投稿)が親ページ的に扱われ、「ドメイン名/company/」で表示されます。エントリー(投稿)なので詳細ページのテンプレートである「_entry.html」が使用されます。
エントリー(投稿)のファイル名はデフォルトでは「entry-.html」になっています。空欄にするには、いったんエントリー(投稿)を作成した後に「詳細」オプションを開いてファイル名を削除し、保存します。
カテゴリーの中にファイル名が空欄のエントリーがない場合には、「ドメイン名/{カテゴリーコード}/」のURLで表示されるのは一覧ページ(アーカイブ)になります。テンプレートは「_entry.html」ではなく「index.html」が使用され、カテゴリーに属するエントリー(投稿)の一覧が表示されます。上図においては「お知らせ」の一覧ページがそれにあたります。
WordPressでは固定ページと投稿を切り替えるのは大変なことですが、a-blog cmsではエントリーのファイル名を空欄にしたり、入力して保存したりすることで簡単に扱いを切り替えられます。
表示順はこのシリーズの第5回で解説する予定の「モジュール」の表示設定で設定できます。
の選択肢があり、第2表示順も簡単に設定できます。
WordPressでは表示順を変えるためにはfunctions.phpへ記述が必要になります。カスタムフィールドをキーにしたり第2表示順を設定したりといったカスタマイズも可能ではありますが、難易度は高めです。
WordPressでは固定ページは基本的にカテゴリーを持つことができませんが、a-blog cmsではもちろん、エントリーはすべてカテゴリーを持つことができます。しかも、必ずひとつだけのカテゴリーに属します。エントリーとカテゴリーは一対一の対応(※1)です。
WordPressのカテゴリーは階層性があっても複数選択が可能なので、カテゴリーの階層性は投稿の階層性とは関係はありません。そのため、投稿に階層性を持たせるには固定ページという投稿とは別の投稿タイプが必要になります。また、テンプレート階層、パーマリンクもディレクトリ構造と一致せず、複雑になります。
一方、a-blog cmsではカテゴリーの階層性を利用してエントリー(投稿)に階層性を持たせることができます(※2)。また、サイトツリー、テンプレートのディレクトリ構造、URLは一致した概念であって非常にシンプルにサイト構造を考えることができます。エントリー(投稿)のカテゴリーをひとつしか選べないことがこれを可能にしています。
カテゴリーは1つしか選べませんが、タグはもちろん複数選択ができます。a-blog cmsではカテゴリーとタグは明確に異なる役割を持っています。
※1:「カテゴリーなし」のエントリーはカテゴリーを持たず、URLはトップページと同じ第一階層になります。
※2:本文中で説明したように「親ページ > 子ページ」までであれば、カテゴリーの中で親ページ的扱いにしたいエントリーのファイル名を空にするだけでできます。さらにカテゴリーの階層を利用してエントリーの階層を深くし、孫ページ、ひ孫ページを作成することも可能です。デフォルトコンテンツの例では「会社概要 - company」カテゴリーの子カテゴリーとして「アクセス - access」カテゴリーを作成し、「アクセス - access.html」エントリーのカテゴリーをその中に入れてファイル名を空にすれば、このエントリーのURLは「ドメイン名/comany/access/」となって、その下にページを作成することが可能になります。将来的に階層を深くする可能性がある場合、WordPressからの移行でURLを変えたくない場合に利用できる方法です。
a-blog cmsにはカテゴリーより上位の分類方法として「子ブログ」が用意されています。WordPressの「マルチブログ」は階層性を持っておらず、作成や運用が大変なわりにはメリットが少ないのであまり活用されていません。a-blog cmsの子ブログなら管理画面から簡単に作成でき、階層性があるため、さまざまに利用されています。
「管理ページ > ブログ」の右上にある「子ブログを作成」ボタンをクリックし、名前とコードネーム(WordPressでは「スラッグ」のこと)を入力して「作成」をクリックするだけで子ブログが作れます。
ブログ間を移動するには管理ページのサイドバーのブログ名をクリック、あるいはメインエリアにあるトピックパス内のブログ名にカーソルを合わせます。
子ブログの下階層には子ブログとカテゴリーの両方を作成することができますが、カテゴリーの下階層に子ブログを作成することはできません。ルールはこれだけで、子ブログ/カテゴリーともに階層の深さや数に制限はありません。基本的にはカテゴリーのほうが手軽ですが、下記のような場合には子ブログのほうが便利です。
それでは詳しく説明します。
カテゴリーではできませんが、ブログであればブログごとにテーマを別に設定できます。
ユーザー権限には次の4種類があり、ブログごとにユーザーを設定できます。
| 管理者 | すべての管理権限を持つユーザー |
|---|---|
| 編集者 | 他のユーザーのエントリー(投稿)を管理できるが、コンフィグやルールなどシステムに関する管理はできないユーザー |
| 投稿者 | 自分のエントリー(投稿)の管理(追加、変更、削除)のみ可能なユーザー |
| 読者 | ログイン機能は利用できるが、エントリー(投稿)を書く権限がないユーザー |
ブログごとの公開状態を「公開/非公開/シークレット」の3種類のステータスから選択できます。「非公開」と「シークレット」はどちらも閲覧にログインが必要です。該当ブログにアクセスした場合、「非公開」では「403 Forbidden」となり表示されず、「シークレット」ではログイン画面が表示されます。会員制にする場合は、「シークレット」を設定します。
ひとつのブログに複数のカート機能を設けることはできません。1ブログにつき1カートを設定できます。
WordPressと同じく、a-blog cmsではひとつのブログの中でカテゴリーコード(カテゴリースラッグ)の重複は認められません。たとえば東京支店、名古屋支店、大阪支店のそれぞれのイベントをまとめるカテゴリーに「events」という同じカテゴリーコード(カテゴリースラッグ)を使いたい場合、東京支店、名古屋支店、大阪支店を子ブログとして分ける必要があります。
エントリー管理の画面でブログやカテゴリーで絞り込んでエントリーを全選択し、所属するブログやカテゴリーを一括で変更できます。ブログの変更、カテゴリーの変更はもちろん、カテゴリーからブログへ、ブログからカテゴリーへの変更も簡単にできるため、後からのサイト構成の変更が手軽に行えます。
ブログやカテゴリーの種類が多くなったり、階層が深くなったりすると、エントリー(投稿)作成時にブログやカテゴリーを選択することに手間がかかってしまい、ミスも起こりやすくなります。あらかじめ、よく使うブログやカテゴリーを指定したエントリー作成ボタンの設置しておくと更新者にとって親切です。このカスタマイズは初心者でも簡単にできます。
参考:コンテンツ専用の「エントリー作成」ボタンで、よりわかりやすく。 | プラクティス | ドキュメント | a-blog cms developer
WordPressのカスタム投稿タイプは、ひとつの投稿がひとつのカスタム投稿タイプに属しているという点でカテゴリーより便利に扱え、a-blog cmsの「子ブログ」や「カテゴリー」に似ている面があります。しかし、カスタム投稿タイプには階層性がないため、カスタム投稿タイプの下階層にカスタム投稿タイプを作成することはできません。「外観 > メニュー」でメニューの表示上、階層性を持たせることもありますが、実際に親子関係があるわけではないので、URLと呼応していなかったり、カレントメニューアイテムの判定が煩雑になったりするという問題があります。また、カスタム投稿タイプにしても、タクソノミーにしても、パーマリンクはそのままではスッキリしたものではなく、思い通りに変更するには多少知識が必要になります。
a-blog cmsでは子ブログにしても、カテゴリーにしても、実際の親子関係がそのままURLに反映され、テンプレートの構造とそのまま対応しています。そのため、サイト構築の方針を立てることが簡単になり、開発途中での変更や、ローンチ後のサイト拡張にも強いと言えます。
子ブログについては、以下の初心者向けのハンズオンがあります。
第4回で取り上げる「テーマとテンプレート」や、第5回で取り上げる「モジュール」に関する内容も含まれていますが、とても分かりやすいハンズオンなのでぜひ試してみてください。
それでは、第2回「 階層性を持つ子ブログ、シンプルなカテゴリー」は以上となります。第3回は「柔軟なカスタムフィールド」です。