XO Event Calendar イベント投稿ページのカスタマイズ

XO Event Calendar プラグインのイベント投稿ページをカスタマイズする方法を紹介します。
イベント投稿ページは、デフォルトではテーマの投稿ページ(single.php など)のコンテンツの上部に、下記のようなイベント情報が追加される形で表示されます。

開催日: 2019年3月1日 - 4月30日
カテゴリー: 無料教室

翻訳テキスト

「開催日」「カテゴリー」の表記のみを変更する場合は、翻訳テキストなので gettext フィルターフックなどで変更することができます。

下記のコードをテーマの functions.php に追記します。

function my_gettext_calendar( $translated, $text, $domain ) {
	if ( $domain === 'xo-event-calendar' ) {
		$texts = array (
			'Event date:' => '開催日:',
			'Categories:' => 'カテゴリー:',
		);
		if ( isset( $texts[$text] ) ) {
			$translated = $texts[$text];
		}
	}
	return $translated;
}

add_filter( 'gettext', 'my_gettext_calendar', 10, 3 );

なお、gettext フィルターは翻訳テキストで常に実行されるため、パフォーマンス上の問題を起こす場合があります。上記コードではあまり気にするほどでもないかと思いますが、次のセクションで説明しているテンプレートファイルを編集する方法をおすすめします。

テンプレートファイル

ここでは、テンプレートファイルを編集する方法を説明します。

テーマの single.php または single.php を複製して作成した single-xo_event.php ファイルの、ループ内に下記のコード追記します。

<?php if ( is_singular( 'xo_event' ) && $xo_event_calendar ) : ?>
	<div class="xo-event-meta-details">
	<div class="xo-event-meta">
	<span class="xo-event-date">開催日: <?php echo $xo_event_calendar->get_event_date( $post->ID ) ?></span>
	<span class="xo-event-category">カテゴリー: <?php echo get_the_term_list( $post->ID, 'xo_event_cat', '', ', ', '' ); ?></span>
	</div>
	</div>
<?php endif; ?>

※ single-xo_event.php テンプレートファイルの場合は、is_singular() の条件は不要です。

最後に

イベント情報は、テンプレートファイルを使用すると簡単にカスタマイズすることができます。ぜひお試しください。

コメント

  • こんにちは。
    現在制作中のサイトにプラグインを使わせていただいています。
    とても分かりやすくて重宝してます。
    教えていただきたいのですが、イベントを投稿したページの内容が表示されなくて困っています。カレンダーやアーカイブなどには反映されているのですが、カレンダーに表示されているイベント名をクリックすると入力したはずのイベント内容や画像は表示されずに真っ白なんです。
    マルチサイトではないのですが、念のためパーマリンクは開いたのですが、表示されません。
    よろしくお願いします。

    • 返信ありがとうございました。お礼が遅くなり申し訳ありません。
      まだ解決できていなくて…。
      エラーは出てなさそうなのですが、
      ヘッダーとフッターは表示されていて、イベントの内容のみが表示されません。アーカイブでは表示されていますがイベント個別ごとのページで内容が表示されないのです。パーマリンクが問題なのでしょうか?

    • テーマが影響しているのかもしれません。試しに、下記コードをテーマの functions.php に追記してみてください。
      if ( $xo_event_calendar ) { remove_filter( 'template_include', array( $xo_event_calendar, 'template_include' ) ); }
      イベント情報(イベント日やカテゴリー)は表示されなくなりますが、本文は表示されませんでしょうか?
      お手数おかけしますがお試しください。

    • functions.php に追記してみましたが、表示されませんでした。あれからそのまま本文は表示させない設定で使用させていただいています。
      色々やってみたのですが、テーマが良くないのかと思っておりましたが、
      「Custom Post Type UI」のプラグインを追加したところ、同じように本文が表示されませんでした。

    • お久しぶりです。
      テーマの問題の可能性が高そうですね。テーマ名を教えてもらえませんか。

    • テーマは「Counter」です。
      試しにに違うテーマでライブプレビューをしてみたら表示されました。
      テーマを変更しようと思っています。
      随分、長々と引っ張ってしまいまして申し訳ありませんでした。
      毎回丁寧にお答え頂き感謝です!

    • テーマの template-parts ディレクトリ内にある content-single-post.php ファイルをコピーして、ファイル名「content-single.php」ファイルを作成することで、イベント投稿(カスタム投稿タイプ)も表示されるようになると思います。お試しください。

    • または、
      single.php ファイルを下記のように変更することでもできると思います。
      <?php get_template_part( 'template-parts/content-single', get_post_type() ); ?>

      <?php get_template_part( 'template-parts/content-single', 'post' ); ?>

    • 出来ました!去年からモヤモヤしていたものが解消しました。
      ありがとうございました!
      引き続き、プラグインを使わせていただきます!

  • お世話になります。

    single-xo_event.php テンプレートファイルには、

    archive-xo_event.phpテンプレートファイルには、

    で、テンプレートを呼び出しています。

    カテゴリーのテンプレートファイルを呼び出すにはどうすればよいのでしょうか?よろしくお願いいたします。

    • こんにちは、コメントありがとうございます。
      イベントカテゴリーは、カスタムタクソノミーで名前は「xo_event_cat」(デフォルト)です。
      よって、イベントカテゴリーアーカイブインデックスページのテンプレートファイル名は「taxonomy-xo_event_cat.php」となります。

  • こんにちは。
    wordpressを使い始めたばかりで基本的な事でしたら申し訳ないのですが・・・

    ウィジットでXO event callendarを設定すると、スマホ画面で表示したときに
    黒い背景で曜日のみ(日・月~)が縦で表示され、
    その下に設定していた定休日が週表示で表示されます。
    パソコンの時はきちんと月のカレンダーが表示されているのですが
    どうしても解決できません。
    よろしくお願いいたします。

    • こんにちは、コメントありがとうございます。
      テーマのスタイルシート(style.css)が影響しているのかもしれません。
      使用されてるテーマを教えていただけませんか?

  • ご返信ありがとうございます。
    スタイルのシートはLightning Pro Child Sample
    というものです。

    よろしくお願いいたします。

    • Lightning Pro テーマが手元にないので、Lightning テーマで試してみました。
      結果、どのウィジェットに配置しても、スマホ画面でレイアウトが崩れるようなことはありませんでした。
      プラグインなどでスマホ時にテーマを切り替える(JetPack のモバイルテーマや WPtouch など)ようなことはしていませんでしょうか?
      実際のサイトを見ることができればいいのですが可能でしょうか?パブリックでは問題あるようでしたら、当サイトのお問い合わせフォームや Twitter の DM からでも構いません。
      以上、よろしくお願いします。

    • お手数をおかけします。

      パソコンでも拡大を150%にするとモバイル版に
      切り替わるので、もしかすると切り替わるプラグインを
      使っているかもしれません。
      もう一度自分でも色々調べてみます。
      よろしくお願いいたします。

    • Bootstrap のスタイルが影響しているようです。
      下記スタイルを、テーマの style.css またはカスタマイズの「追加 CSS」に追記してみてください。

      @media (max-width: 991px) {
      .xo-event-calendar table tr {
      display: table-row;
      }
      .xo-event-calendar table td,
      .xo-event-calendar table th {
      display: table-cell;
      padding: 0 !important;
      }
      }

    • カスタマイズの「追加CSS」に追記したところ、正常にアップできました!
      丁寧なご対応ありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。

日本語でコメントを入力してください。