All-in-One Event Calendar メインページにイベントを表示する

ブログサイトの立ち上げ方
スポンサーリンク
スポンサーリンク

 

 

 

「All-in-One Event Calendar」プラグイン

前回は,以下の記事で「All-in-One Event Calendar」の表示例や使い勝手を紹介しました.

All-in-One Event Calendar WordPressにイベントカレンダーがカッコよく追加できるプラグイン
WordPressにイベントカレンダーの機能を追加できる「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件表示されていますが,メインページ本体には表示されません.

 

all-in-one-event-calendar-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%8c%e5%88%9d%e6%9c%9f%e7%8a%b6%e6%85%8b%e3%80%8d

 

投稿(post)固定ページ(page)の区別がついてない方は,以下,「バズ部」さんのページを参考にしてください.

WordPressの固定ページと投稿の違い

 

「Simplicity2」のカスタマイズ機能

ちょっと本題から外れますが,ここで「Simplicity2」のカスタマイズ機能について説明しておきます.

「Simplicity2」以外のWordPressテーマをお使いの方は,メインページには,固定ページのコンテンツが表示されないのではないでしょうか?

 

「Simplicity2」は,カスタマイズ機能が充実していて,WordPressの動作の仕組みや「HTML」「PHP」などの詳しい知識がない人でも,カスタマイズのメニューから,いろいろなカスタマイズができるようになっています.

 

以下のように,「Simplicity2」のカスタマイズの「レイアウト(全体・リスト)」メニューで,

□固定ページも一覧リストに含める
 固定ページを一覧リスト(インデックス)に含めるか。

にチェックをすると,メインページに固定ページも表示されます.

 

all-in-one-event-calendar-%e3%80%8c%e5%9b%ba%e5%ae%9a%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e4%b8%80%e8%a6%a7%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ab%e5%90%ab%e3%82%81%e3%82%8b%e3%80%8d

 

ちょっと訳あって,とりあえず以下のように,

① この「固定ページも一覧リストに含める」のチェックを外し,
「保存して公開」ボタンを押し,

カスタマイズのメニューを閉じます.

 

all-in-one-event-calendar-%e3%80%8c%e5%9b%ba%e5%ae%9a%e3%83%9a%e3%83%bc%e3%82%b8%e3%82%92%e4%b8%80%e8%a6%a7%e3%83%aa%e3%82%b9%e3%83%88%e3%81%ab%e5%90%ab%e3%82%81%e3%81%aa%e3%81%84%e3%80%8d

 

すると,以下のように,メインページから固定ページの表示が消えます.

 

all-in-one-event-calendar-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%8c%e5%9b%ba%e5%ae%9a%e3%83%9a%e3%83%bc%e3%82%b8%e9%9d%9e%e8%a1%a8%e7%a4%ba%e3%80%8d

 

イベントを一覧リストに加える

結論から言うと,「All-in-One Event Calendar」のイベント(カスタム投稿タイプ)がメインページに表示されないのは,WordPressが実行しているデフォルトの一覧リスト作成の対象から外れているためです.

これから説明する方法で,イベント(カスタム投稿タイプ)を一覧リストの対象に加えることができれば,メインページにイベントも並んで表示されます.

 

この方法は,「Simplicity2」のサポートフォーラムの以下の記事が参考になりました.

投稿者の記事一覧に、カスタム投稿タイプの記事も含めたい
Simplicityの特徴 › フォーラム › テーマファイルのカスタマイズに関する質問など › 投稿者の記事一覧に、カスタム投稿タイプの記事も含めたい このトピックには5件の返信が含ま

 

デフォルトの状態では,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」さんのページが参考になります.

このページには,カスタム投稿タイプのことも書かれています.

404 Not Found

 

メインページにイベントが表示された!

上記のコードを「functions.php」に追加したら,メインページの表示を更新して確認します.

以下のように,「All-in-One Event Calendar」のイベント(ai1ec_event)のコンテンツが表示されていれば成功です!

 

all-in-one-event-calendar-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%8c%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%e8%a1%a8%e7%a4%ba%e3%80%8d

 

固定ページも表示する

先ほど,「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-%e3%83%a1%e3%82%a4%e3%83%b3%e3%83%9a%e3%83%bc%e3%82%b8%e3%80%8c%e3%82%a4%e3%83%99%e3%83%b3%e3%83%88%ef%bc%86%e5%9b%ba%e5%ae%9a%e3%83%9a%e3%83%bc%e3%82%b8%e8%a1%a8%e7%a4%ba

 

 

まとめ

今回の記事では,「All-in-One Event Calendar」プラグインで入力したイベント(ai1ec_event)をメインページに表示する方法を紹介しました.

 

次回の記事では,データベースからイベントの「日時」や「場所」といった各種情報を取得して,メインページに表示する方法を紹介します.

All-in-One Event Calendar データベースからイベント情報を取得する
「All-in-One Event Calendar」のイベント表示 前回は,以下の記事で「All-in-One Event Calendar」のイベントをメインページに表示する方法を紹介しました. すると,以下のように,「Al...

 

 

コメント

  1. みよ より:

    初めまして!
    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の知識も大したものではないので、自力で何とかするのはあきらめて書き込みました。

  2. みよ より:

    わあああすみません!
    書き込んでからこちらの情報参考に構文読み返したのですが、全くデータベースのこと理解していない素人なのが丸出しでお恥ずかしい…
    カスタムポストタイプの、さらにカスタムタクソノミーなので、カスタムタクソノミーのテーブルを読み込むところからですね…
    そりゃこれだけ追記しても何も変わりませんね…
    もうすこし勉強してから再度書き込みます、失礼しました!

    • 管理者 より:

      みよさん

      ブログの閲覧ありがとうございます.
      このブログでは,私が実際にやってうまく行ったことだけを紹介しています.
      なので,みよさんの質問に応えられないかもしれませんが,ここに何か書いておけば,詳しい人がアドバイスくれるかもしれませんね.
      「聞くは一時の恥」ですから,お気軽に!