「All-in-One Event Calendar」のカレンダーテーマを作る
「All-in-One Event Calendar」は、WordPress本体と同様に、テーマを選んで、表示やデザインを変更することができます。
しかし、あらかじめ用意されているテーマの数は少なく、好みの表示やデザインにするには、自分で新しいカレンダーテーマを作ることになります。
この記事では、
- 新しいカレンダーテーマの作り方
- カレンダーテーマの切り替え方
について説明します。
新しいカレンダーテーマの作り方
「All-in-One Event Calendar」のオフィシャルサイトには、新しいカレンダーテーマの作り方を説明した以下のページがあります。
詳しくは、上記のページを見てもらえばいいのですが、この記事では、オフィシャルページのステップに沿って、実際に新しいカレンダーテーマを作って、そのテーマに切り替えるまでの手順を紹介します。
Step 1：デバッグモードにする
まず、「All-in-One Event Calendar」の環境をデバッグモードにします。
変更するのは、
https://○○○…wp-contentpluginsall-in-one-event-calendarappconfig
のフォルダにある「constants.php」です。
「constants.php」の以下の部分2か所のコードを変更して、
'AI1EC_DEBUG'を'false' → 'true'
'AI1EC_CACHE'を'true' → 'false'
に変更します。
デバッグを有効に、キャッシュを無効にしています。
【変更前】
// Enable All-in-One-Event-Calendar to work in debug mode, which means,
// that cache is ignored, extra output may appear at places, etc.
// Do not set this to any other value than `false` on production even if
// you know what you are doing, because you will waste valuable
// resources - save the Earth, at least.
if ( ! defined( 'AI1EC_DEBUG' ) ) {
define( 'AI1EC_DEBUG', false );
}
// Enable Ai1EC cache functionality. If you set this to false, only cache
// that is based on request, will remain active.
// This is pointless in any case other than development, where literary
// every second refresh needs to take fresh copy of everything.
if ( ! defined( 'AI1EC_CACHE' ) ) {
define( 'AI1EC_CACHE', true );
}【変更後】
// Enable All-in-One-Event-Calendar to work in debug mode, which means,
// that cache is ignored, extra output may appear at places, etc.
// Do not set this to any other value than `false` on production even if
// you know what you are doing, because you will waste valuable
// resources - save the Earth, at least.
if ( ! defined( 'AI1EC_DEBUG' ) ) {
define( 'AI1EC_DEBUG', true );
}
// Enable Ai1EC cache functionality. If you set this to false, only cache
// that is based on request, will remain active.
// This is pointless in any case other than development, where literary
// every second refresh needs to take fresh copy of everything.
if ( ! defined( 'AI1EC_CACHE' ) ) {
define( 'AI1EC_CACHE', false );
}
Step 2：「子テーマ」を作る
次に、新しいカレンダーテーマを作ります。
https://○○○…wp-contentpluginsall-in-one-event-calendarpublic hemes-ai1ec
のフォルダには、以下の図のように「gamma」というサブフォルダがあります。
この「gamma」フォルダを丸ごとコピーして、好きな名前のフォルダ名でペーストします。
今回は、「MyCalendar」というフォルダ名にしました。
「gamma」は、「子テーマ」のスケルトン
「gamma」というテーマは、「子テーマ」として必要最小限の要素を揃えています。
なので、新しくカレンダーテーマを作るときは、「gamma」をスケルトンとして用います。
「gamma」や新しく作った「MyCalendar」の「親テーマ」はどれかというと、それは、上の図でも示したように「vortex」です。
Step：4、Step：5でも説明しますが、新しく作ったカレンダーテーマのテンプレートを変更したい場合は、変更部分に関連するファイルを「vortex」から「MyCalendar」にコピー/ペーストして、「子テーマ」側のファイルを変更します。
この辺りは、WordPressの「親テーマ」「子テーマ」の関係に似ていますね。
Step 3：style.cssの編集
WordPressで「style.css」というと、自分のホームページのスタイルを指定するCSS（Cascading Style Sheets）の定義ファイルです。
しかし、「All-in-One Event Calendar」では、ちょっと違った目的で使われています。
新しく作った「MyCalendar」の直下には、「style.css」というファイルがあり、このファイルの冒頭で、以下のようなカレンダーテーマの情報を記述します。
- テーマの名前
- テーマのURL
- 作成者
- 作成者のURI
- テーマの説明
- バージョン
- タグ
ここで記述した情報は、後で説明するカレンダーテーマの選択のときに、選択画面に表示されます。
この情報は、みなさんの状況に合わせて、自由に記述してください。
ただし、ここに日本語の2バイト文字を使うと、うまく表示されませんでした。
新しいカレンダーテーマのスタイルを変更するには？
では、WordPressの「style.css」のように、新しく作ったカレンダーテーマのスタイルを変更するには、どうすればいいのでしょうか？
そのためには、まず、「子テーマ」のフォルダの直下にある「css」サブフォルダに、「override.css」というファイルを新規に作成します。
今回の場合は、
https://○○○…wp-contentpluginsall-in-one-event-calendarpublic hemes-ai1ecMyCalendarcss
の下に、「override.css」というファイルを作ります。
この「override.css」に「子テーマ」のスタイル属性を定義すれば、「親テーマ」のスタイル属性がオーバーライドされ、表示に反映されます。
今回は使いませんでしたが、lessファイルで「子テーマ」のスタイルを定義することもできます。
この場合は、「子テーマ」のフォルダの直下に「less」というサブフォルダを作り、さらに、「less」フォルダの下に、「override.less」というファイルを作ります。
Step 4：「親テーマ」の「vortex」から必要なファイルをコピーする
先ほども説明したように、「vortex」は、すべての「子テーマ」の「親テーマ」です。
「子テーマ」に変更を加えたい場合は、「vortex」から関係するテンプレートファイルをコピーして、変更を加える「子テーマ」の下の同じフォルダにペーストします。
Step 5：「子テーマ」のテンプレートファイルを変更する
その後、ペーストした「子テーマ」側のテンプレートファイルを変更すれば、その内容が「子テーマ」の表示やデザインに反映されます。
「子テーマ」の表示やデザインを変えるとは言っても、まず、やりたいことは、文字のフォントを変えたり、ボタンやフォームの色を好みのものに変えたりすることだと思います。
実は、このようなちょっとした変更であれば、「All-in-One Event Calendar」に最初から備わっている、
「イベント」-「テーマオプション」
のメニューから変更できます。
また、「テーマオプション」で変更できないスタイルも、Step：3で説明したように、「override.css」でスタイル属性をオーバーライドできます。
なので、「vortex」から必要なテンプレートファイルをコピーして変更するケースは、それほど多くないと思います。
カレンダーテーマの切り替え方
さっそく、新しく作ったカレンダーテーマ「MyCalendar」に切り替えてみましょう。
下の図のように、WordPressの管理メニューから、
「イベント」-「カレンダーテーマ」
を選びます。
すると、「All-in-One Event Calendar: テーマ」画面が表示されます。
この画面を下にスクロールしていくと、「利用可能なカレンダーテーマ」の中に、今回作成した「MyCalendar」が、以下のように出てきます。
「MyCalendar」の「有効にする」をクリックするとカレンダーテーマが切り替わり、「現在のカレンダーテーマ」に「MyCalendar」が表示されます。
ただし、現時点で「MyCalendar」は、「gamma」をそのままコピーしているだけなので、表示スタイルはほとんど変わりません。
まとめ
今回の記事では、「All-in-One Event Calendar」のカレンダーテーマを新しく作成し、作成したテーマに切り替える方法を紹介しました。
次回は、新しく作成したカレンダーテーマのスタイルを変更し、ポップアップ画面に表示されるサムネイル画像のアスペクト比が変わってしまう点を修正します。
コメント