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」の表示や使い勝手を紹介します。

vitorec.co.jp

2024.07.25

この記事では、「All-in-One Event Calendar」を使って入力したイベントを、通常の投稿と一緒に自分のWordPressのメインページに表示してみます。

「All-in-One Event Calendar」の使い方は、以下、「WEB WORKERS CLIP」さんのページを参考にしてください。

https://webworkersclip.com/554/

webworkersclip.com

新しくイベントを追加するには、「イベント」-「新しく追加」のメニューから実行できます。

「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）の区別がついてない方は、以下、「バズ部」さんのページを参考にしてください。

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

WordPressにはコンテンツを投稿する機能が以下の２つある。 投稿：ブログ記事の作成はここから行う 固定ページ：一つの新しいページを作りたい時はここから行う 実は、この２つの機能には大きな違いがあり、使い方を間違えるとSEO的にも大きな

lucy.ne.jp

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

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

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

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

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

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

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

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

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

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

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

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

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

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

投稿者の記事一覧に、カスタム投稿タイプの記事も含めたい

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

wp-simplicity.com

デフォルトの状態では、WordPressが記事を検索するときには、通常の投稿（post）のみを対象にしています。

上記のサポートフォーラムの記事にあるように、WordPressがデータベース（MySQL）から記事を検索するときの検索クエリに、表示したいイベント（カスタム投稿タイプ）を追加してやれば、目的のことが実現できます。

検索クエリにカスタム投稿タイプを追加する

検索クエリに、表示したいイベント（カスタム投稿タイプ）を追加するには、自分の使っているWordPressテーマのディレクトリにある「functions.php」に以下のコードを追加してやるだけです。

「Simplicity2」を使っている場合は、子テーマ「simplicity2-child」のディレクトリ

https://○○○…wp-content hemessimplicity2-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」さんのページが参考になります。

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

https://webdesignrecipes.com/wordpress-conditional-tags-and-custom-post-type/

webdesignrecipes.com

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

上記のコードを「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　データベースからイベント情報を取得する

「All-in-One Event Calendar」のイベント表示 前回は、以下の記事で「All-in-One Event Calendar」のイベントをメインページに表示する方法を紹介しました。 すると、以下のように、「All-in-O...

vitorec.co.jp

2022.12.25