「All-in-One Event Calendar」プラグイン
前回は、以下の記事で「All-in-One Event Calendar」の表示例や使い勝手を紹介しました。
この記事では、「All-in-One Event Calendar」を使って入力したイベントを、通常の投稿と一緒に自分のWordPressのメインページに表示してみます。
「All-in-One Event Calendar」の使い方は、以下、「WEB WORKERS CLIP」さんのページを参考にしてください。
新しくイベントを追加するには、「イベント」-「新しく追加」のメニューから実行できます。
「All-in-One Event Calendar」のイベントをメインページに表示する
まず、「All-in-One Event Calendar」のイベントを追加する前に、このWEBサイトには、以下のコンテンツがすでに登録されているものとします。
- 投稿（post）×2件
・新曲できました 「あの青い空から」
・待望の1stアルバム 「Calendar」 - 固定ページ（page）×1件
・イベント情報
※この固定ページは、「All-in-One Event Calendar」をインストールしたときに自動で追加される「Calendar」というページをリネームしたもの。
さらに、「All-in-One Event Calendar」で、以下のイベント3件を追加したという前提で進めます。
- イベント ×3件
・「シークレットライブ」
・ライブ＠埼玉
・「秋ライブ 2016」
また、私は、自身の「ちょいプラ素材」のブログのWordPressテーマに、わいひらさんが無償で公開されている「Simplicity2」を使っています。
なので、以降は、このWordPressテーマ「Simplicity2」の環境での説明になります。
「Simplicity2」以外のWordPressテーマをお使いの方は、適宜、読み替えてください。
初期状態
上記の投稿×2件、固定ページ×1件、イベント×3件が登録されている状態で、自分のWEBサイトのメインページを表示してみます。
すると、以下のように通常の投稿（post）と固定ページ（page）のコンテンツが表示されます。
イベントに関するコンテンツは、サイドバーの「今後のイベント」に3件表示されていますが、メインページ本体には表示されません。
投稿（post）と固定ページ（page）の区別がついてない方は、以下、「バズ部」さんのページを参考にしてください。
「Simplicity2」のカスタマイズ機能
ちょっと本題から外れますが、ここで「Simplicity2」のカスタマイズ機能について説明しておきます。
「Simplicity2」以外のWordPressテーマをお使いの方は、メインページには、固定ページのコンテンツが表示されないのではないでしょうか？
「Simplicity2」は、カスタマイズ機能が充実していて、WordPressの動作の仕組みや「HTML」「PHP」などの詳しい知識がない人でも、カスタマイズのメニューから、いろいろなカスタマイズができるようになっています。
以下のように、「Simplicity2」のカスタマイズの「レイアウト（全体・リスト）」メニューで、
固定ページを一覧リスト（インデックス）に含めるか。
にチェックをすると、メインページに固定ページも表示されます。
ちょっと訳あって、とりあえず以下のように、
① この「固定ページも一覧リストに含める」のチェックを外し、
② 「保存して公開」ボタンを押し、
カスタマイズのメニューを閉じます。
すると、以下のように、メインページから固定ページの表示が消えます。
イベントを一覧リストに加える
結論から言うと、「All-in-One Event Calendar」のイベント（カスタム投稿タイプ）がメインページに表示されないのは、WordPressが実行しているデフォルトの一覧リスト作成の対象から外れているためです。
これから説明する方法で、イベント（カスタム投稿タイプ）を一覧リストの対象に加えることができれば、メインページにイベントも並んで表示されます。
この方法は、「Simplicity2」のサポートフォーラムの以下の記事が参考になりました。
デフォルトの状態では、WordPressが記事を検索するときには、通常の投稿（post）のみを対象にしています。
上記のサポートフォーラムの記事にあるように、WordPressがデータベース（MySQL）から記事を検索するときの検索クエリに、表示したいイベント（カスタム投稿タイプ）を追加してやれば、目的のことが実現できます。
検索クエリにカスタム投稿タイプを追加する
検索クエリに、表示したいイベント（カスタム投稿タイプ）を追加するには、自分の使っているWordPressテーマのディレクトリにある「functions.php」に以下のコードを追加してやるだけです。
「Simplicity2」を使っている場合は、子テーマ「simplicity2-child」のディレクトリ
http://○○○…\wp-content\themes\simplicity2-child
の下にある「functions.php」を変更します。
//All-in-One Event Calendarプラグインのカスタム投稿タイプもメインページにリストする
function my_search_filter($query) {
if (is_home() && $query->is_main_query() ) {
$query->set( 'post_type', array( 'post', 'ai1ec_event' ) );
}
}
add_action( 'pre_get_posts', 'my_search_filter' );
コードの解説
ちなみに、「All-in-One Event Calendar」のイベントのカスタム投稿タイプは、
'ai1ec_event'
として定義されています。
なので、上記コードの
$query->set( );
の中で、「All-in-One Event Calendar」のイベントのカスタム投稿タイプである'ai1ec_event'を検索リストの対象配列に追加しています。
「All-in-One Event Calendar」のイベントに限らず、プラグインとかで追加したカスタム投稿タイプも、同様の方法で、検索対象に追加することができます。
また、
if (is_home() && $query->is_main_query() )
の条件文の中のis_home()は、「メインページに関する検索のときだけ」という限定をするためのWordPressの条件分岐タグです。
is_home()以外のWordPressの条件分岐タグについては、以下の「Web Design Recipe」さんのページが参考になります。
このページには、カスタム投稿タイプのことも書かれています。
メインページにイベントが表示された！
上記のコードを「functions.php」に追加したら、メインページの表示を更新して確認します。
以下のように、「All-in-One Event Calendar」のイベント（ai1ec_event）のコンテンツが表示されていれば成功です！
固定ページも表示する
先ほど、「Simplicity2」のカスタマイズのメニューで、「固定ページも一覧リストに含める」のチェックを外し、メインページから固定ページの表示を消しました。
実は、「固定ページも一覧リストに含める」にチェックをして、メインページに固定ページを表示すると、上記、「functions.php」に追加したmy_search_filter($query)関数が呼び出されません。
「固定ページも一覧リストに含める」にチェックをすると、親テーマの「Simplicity2」側で、WordPressの'pre_get_posts'をフックするためと思われます。
私は、これに気づくまで、半日くらい悩みました（笑）。
メインページに固定ページも表示されるようにするには、以下のコードのように、
$query->set( );
の中で、固定ページのタイプ'page'も検索配列に追加してやります。
//All-in-One Event Calendarプラグインのカスタム投稿タイプもメインページにリストする
function my_search_filter($query) {
if (is_home() && $query->is_main_query() ) {
$query->set( 'post_type', array( 'post', 'page', 'ai1ec_event' ) );
}
}
add_action( 'pre_get_posts', 'my_search_filter' );先に「functions.php」に追加したコードを上記コードで置き換えたら、先ほどと同様にメインページの表示を更新して確認します。
以下のように、固定ページ（page）の表示も追加されました。
まとめ
今回の記事では、「All-in-One Event Calendar」プラグインで入力したイベント（ai1ec_event）をメインページに表示する方法を紹介しました。
次回の記事では、データベースからイベントの「日時」や「場所」といった各種情報を取得して、メインページに表示する方法を紹介します。
コメント
初めまして！
All-in-One Event Calendarの導入に当たり、一連のカスタマイズ記事がとても役立ちました。
複数日のイベントや全日のイベントの時にトップページの日時表示の仕方を変えたかったのですが、それもこちらの記事のおかげで変更することができました。
ありがとうございました！
それとは別にカスタマイズで上手くいかずに悩んでいるのですが、ご相談よろしいでしょうか。
・イベントに設定したアイキャッチ画像
・イベント内に貼られている画像 ←simplicityの機能でOK
・All-in-One Event Calendarの主催（カテゴリ）に登録した画像 ←これを追加したい
・no image
という優先順位でトップページに画像を表示したく思っています。
カスタムフィールドの画像をアイキャッチに設定するカスタマイズは情報が出てくるのですが、それをすると後からカテゴリの画像を変更した場合にイベント一つずつアイキャッチを変更しないといけなくなるため、「functions.php」でAll-in-One Event Calendar用に追加した部分とセットで、トップページでの表示の処理でなんとかできないかと思ったのですが…
//アイキャッチ取得
$eyecatch = get_the_post_thumbnail($post->ID);
//アイキャッチがない場合はカテゴリの画像を取得
if (!$eyecatch) {
$eyecatch = $post->term_image;
}
だと上手くいかなくて、phpの知識も大したものではないので、自力で何とかするのはあきらめて書き込みました。
わあああすみません！
書き込んでからこちらの情報参考に構文読み返したのですが、全くデータベースのこと理解していない素人なのが丸出しでお恥ずかしい…
カスタムポストタイプの、さらにカスタムタクソノミーなので、カスタムタクソノミーのテーブルを読み込むところからですね…
そりゃこれだけ追記しても何も変わりませんね…
もうすこし勉強してから再度書き込みます、失礼しました！
みよさん
ブログの閲覧ありがとうございます．
このブログでは，私が実際にやってうまく行ったことだけを紹介しています．
なので，みよさんの質問に応えられないかもしれませんが，ここに何か書いておけば，詳しい人がアドバイスくれるかもしれませんね．
「聞くは一時の恥」ですから，お気軽に！