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

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() の条件は不要です。

最後に

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

WordPress

コメント

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

    返信

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

        返信

        • テーマが影響しているのかもしれません。試しに、下記コードをテーマの 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」に追記したところ、正常にアップできました！
            丁寧なご対応ありがとうございました。

  • 突然すみません。XO event calenderを使用して制作を行っているのですが、投稿ページの日付と共に曜日を出力することはできないでしょうか。

    返信

    • こんにちは、プラグインのご利用ありがとうございます。
      イベント投稿の日付形式は、WordPress の設定の日付形式（管理画面メニューより[設定]-[一般]-[日付形式]）で表示されます。
      ここで「カスタム」を選択して「Y年n月j日 (D)」のような日付形式にすることで曜日が表示されるようになります。
      ただし、イベント投稿以外の日付もこの日付形式で表示されてしまいます。イベント投稿だけを変更する場合は、テンプレートファイルを作成するといいかと思います。このページの「テンプレートファイル」セクションを参考にテンプレートファイルを作成して、下記のように変更すると曜日が表示されるようになります。
      $xo_event_calendar->get_event_date( $post->ID );
      ↓
      $xo_event_calendar->get_event_date( $post->ID, array( 'date_format' => 'Y年n月j日 (D)' ) );

      返信

  • こんにちは。一点教えていただけると幸いです。
    archive-xo_event.phpからイベント一覧ページを作成しております。
    でタイトルを出力すると「イベント」と表示されます。こちらを「イベント一覧」に変更したいのですが、何か方法はありますでしょうか？お手数ですが、ご教授いただければ幸いです。
    よろしくお願いします。

    返信

    • archive-xo_event.php の中でタイトルを出力しているところ（下記のようなコード）を書き換えるのがいいかと思います。
      the_archive_title( ... );
      ↓
      イベント一覧

      あとは、get_the_archive_title フィルターフックで書き換える方法もあります。
      add_filter( 'get_the_archive_title', function( $title ) {
      if ( is_post_type_archive( 'xo_event' ) ) {
      $title = 'イベント一覧';
      }
      return $title;
      } );

      以上、お試しください。

      返信

  • こんにちは。
    ご教示いただけると幸いなのですが、独自のアーカイブページで開催日を取得したい場合、どう記述すると良いのでしょうか？的外れなご質問でしたら申し訳ございません・・

    返信

    • はじめまして、こんにちは。コメントありがとうございます。
      ループ内なら下記コードで開催日を取得することができます。
      <?php if ( isset( $xo_event_calendar ) ) {
      echo '開催日: ' . $xo_event_calendar->get_event_date( $post->ID );
      } ?>

      返信

  • こんにちは。
    テンプレートファイルのカスタマイズとても参考になりました。ありがとうございます。

    本文上に追加される「イベント情報」の表示順を変更したり（本文下に変更など） cssのクラスを追加するにはどうすればよろしいでしょうか？

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

    返信

    • はじめまして、こんにちは。
      このページの「テンプレートファイル」セクションがそのままだと思います。このセクションのサンプルコードを挿入する位置で本文（コンテンツ）下に表示されるようになります。CSS の追加もこのサンプルコードが参考になると思います。

      返信

      • ありがとうございました！
        「テンプレートファイル」セクションの記述を追加すると、本文に自動で追加される「開催日」などの情報もあり、自動で追加される部分はCSSで非表示にすることで解決しました。

        返信

        • > 自動で追加される部分はCSSで非表示にすることで解決しました。
          イベント用のテンプレート (single-xo_event.php) を作成すると、自動で追加されません (^^♪

          返信

  • こんにちは。
    XO Event Calendarとても使い勝手が良く、愛用しております。
    初歩的な質問で恐縮ですが、一点質問させてください。

    イベントを入力した際、カレンダーにはイベントの表示がされるのですが、クリックをしてもイベント投稿ページへ遷移せず、リロードされるのみです。
    Chromeのデベロッパーツールで確認すると、ちゃんとイベント投稿ページへのリンクが生成されているようなのですが、遷移がされない状況です。
    function.php以外にもイベント投稿ページ用のファイル（single.php?
    ）を作成する必要があるということなのでしょうか？

    なお、今回は自作テーマにXo Event Calendarを埋め込んで使用しています。
    また、スタイルは追加CSSでカスタマイズしています。

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

    返信

    • こんにちは、コメントありがとうございます。
      パーマリンク設定が更新されていないのかもしれません（極稀に更新されないことがあります）。
      一度、管理画面より [設定]－[パーマリンク設定]を開き、保存ボタンを押してみてください。

      返信

  • こんにちは。
    ご教示いただけると幸いなのですが、カレンダーの休日のタイトルと背景色を非表示にすることは可能でしょうか？
    よろしくお願いいたします

    返信

    • 下記のような CSS で非表示にできると思います。
      .holiday-title { display: none; }

      返信

コメントを残す

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

日本語でコメントを入力してください。(スパム対策)