XO Event Calendar イベントリストショートコード

XO Event Calendar プラグインのイベントをリスト表示するショートコードを紹介します。

以前、直近のイベントをリスト表示する方法を紹介しましたが、サンプルコードのようなもので、そのまま使用するものではありませんでした。そこで、今回は多くのケースでそのまま使用できるよう、汎用的なショートコードに仕上げました。
まずは、表示例をご覧ください。

表示例

short タイプ

standard タイプ

detail タイプ

上記の3種類の表示レイアウトが「基本タイプ」となります。これら以外の表示レイアウトは「ユーザー定義タイプ」となります。

xo_event_list ショートコード

[xo_event_list]

short タイプの例:

[xo_event_list type="short"]

detail タイプの例:

[xo_event_list type="detail"]

オプション

オプション 説明
type

表示タイプです。

“short”, “standard”, “detail” または任意の文字列(ユーザー定義タイプ)。省略時は、”standard” です。

ユーザー定義タイプの場合(基本タイプ以外)は、format オプションで指定したフォーマットで表示されます。

HTML の class に “type-{$type}”(”type-short”、”type-xxx”(ユーザー定義タイプが xxx の場合))が付与されます。

class

HTML の class です。

省略時は、”xo-event-list” です。

before

リストの前に表示される HTML です。

省略時は、”<dl>” です。

after

リストの後に表示される HTML です。

省略時は、”</dl>” です。

format

表示するフォーマットです。

詳細は「format オプション」セクションを参照してください。

limit

表示するリストの件数です。

省略時は 10 です。

order

リストを表示する順序の昇降順です。

” ASC”, または ” DESC” の何れか。省略時は “DESC” です。

orderby

リストを並べ替える項目です。

“date”, “modified”, “title”, “rand”, “event_start_date” または “event_end_date” の何れか。省略時は “date” です。

“event_start_date” および “event_end_date” 以外は組み合わせて指定(カンマ区切り)することができます。

thumbnail_size

サムネイル画像のサイズです。

“thumbnail”, “medium”, “large”, “full” または “(width),(height)”(例: “100,100”)の何れか。省略時は “thumbnail” です。

category

カテゴリー スラッグです。

表示するカテゴリーをスラッグで指定します。複数の場合はカンマ区切りで指定します。省略時は “”(すべてのカテゴリー)です。

default_thumbnail_id

デフォルトのサムネイル画像の ID です。

format オプション

HTML に専用の構造タグ(% で囲まれたキーワード)を埋め込むフォーマットで指定します。

構造タグ一覧

構造タグ 説明
%date%

投稿日を取得します。

%event_start_date%

イベントの開始日を取得します。

%event_start_date% イベントの終了日を取得します。
%event_date%

イベントの開催期間を取得します。

%category% カテゴリーを取得します。
%category_color%

カテゴリーの色を取得します。例えば、#eeeeee です。

%category_font_color%

カテゴリーの色を背景とした場合の文字の色を取得します。例えば、#333333です。

%permalink%

パーマリンクを取得します。

%title%

タイトルを取得します。

%thumbnail%

サムネイル画像を表示する HTML を取得します。

format オプションのサンプル

イベント期間+タイトルを表示する場合のショートコードの例です。

[xo_event_list orderby="event_start_date" type="custom" format='<dt><span class="event-date">%event_date%</span></dt><dd><span class="title"><a href="%permalink%">%title%</a></span></dd>']

xo_event_list ショートコードの PHP コード

xo_event_list ショートコードの PHP コードです。

fucntions.php などに記述してください。

if ( defined( 'XO_EVENT_CALENDAR_VERSION' ) ) {

	/**
	 * Shortcode that outputs an event list for the XO Event Calendar.
	 *
	 * @version 0.3.1
	 *
	 * @param array $attr {
	 *     Array of default event list attributes.
	 *
	 *     @type string $type Type of list to display. Accepts 'short', 'standard', 'detail' or Any character string. Default 'standard'.
	 *     @type string $class CSS Class. Default 'xo-event-list'.
	 *     @type string $before HTML displayed before the list. Default '<dl>'.
	 *     @type string $after  HTML displayed after the list. Default '</dl>'.
	 *     @type string $format Display Format. Default empty.
	 *     @type int $limit Amount of list to display. Default 10.
	 *     @type string $order Designates ascending or descending order of items in the list. Accepts 'ASC', 'DESC'. Default 'DESC'.
	 *     @type string $orderby Any column, or columns, to sort the list. Accepts 'date', 'modified', 'title', 'rand', 'event_start_date' or 'event_end_date'. Default 'date'.
	 *     @type string $thumbnail_size Thumbnail image size to use. Accepts 'thumbnail', 'medium', 'large', 'full' or '(width),(height)'. Default 'thumbnail'.
	 *     @type string $category Category slug, or comma-separated list of slugs. Default empty.
	 *     @type int $default_thumbnail_id The default attached thumbnail ID. Default null.
	 * }
	 *
	 * @return string Event list output. Empty string if the passed type is unsupported.
	 */
	function xo_event_list_shortcode( $attr ) {
		global $allowedposttags, $xo_event_calendar;

		$atts = shortcode_atts( array(
			'type' => 'standard',
			'class' => 'xo-event-list',
			'before' => '<dl>',
			'after' => '</dl>',
			'format' => '',
			'limit' => '10',
			'order' => 'DESC',
			'orderby' => 'date',
			'thumbnail_size' => 'thumbnail',
			'category' => '',
			'default_thumbnail_id' => null,
		), $attr, 'xo_event_list' );

		// Structure tags
		$tags = array(
			'%date%',					// Post date
			'%event_start_date%',		// Event start date
			'%event_end_date%',			// Event end date
			'%event_date%',				// Event date
			'%category%',				// Category
			'%category_color%',			// Category background color
			'%category_font_color%',	// Category font color
			'%permalink%',				// Permalink
			'%title%',					// Title
			'%thumbnail%',				// Thumbnail image
		);

		$args = array(
			'post_type' => XO_EVENT_CALENDAR_EVENT_POST_TYPE,
			'post_status' => 'publish',
			'posts_per_page' => $atts['limit'],
			'order' => $atts['order'],
		);

		$class = esc_attr( $atts['class'] );
		$before = wp_kses( wp_specialchars_decode( $atts['before'] ), $allowedposttags );
		$after = wp_kses( wp_specialchars_decode( $atts['after'] ), $allowedposttags );
		$type_class = '';
		$format = '';

		switch ( $atts['type'] ) {
			case 'short':
				$type_class = 'type-short';
				if ( $atts['format'] ) {
					$format = $atts['format'];
				} else {
					$format =
						'<dt><span class="date">%date%</span></dt>' .
						'<dd><span class="title"><a href="%permalink%">%title%</a></span></dd>';
				}
				break;
			case 'standard':
				$type_class = 'type-standard';
				if ( $atts['format'] ) {
					$format = $atts['format'];
				} else {
					$format =
						'<dt><span class="date">%date%</span></dt>' .
						'<dd>' .
						'<span class="category" style="color:%category_font_color%;background-color:%category_color%;">%category%</span>' .
						'<span class="title"><a href="%permalink%">%title%</a></span>' .
						'</dd>';
				}
				break;
			case 'detail':
				$type_class = 'type-detail';
				if ( $atts['format'] ) {
					$format = $atts['format'];
				} else {
					$format =
						'<dt><span class="thumbnail"><a href="%permalink%">%thumbnail%</a></span></dt>' .
						'<dd>' .
						'<span class="date">%date%</span>' .
						'<span class="category" style="color:%category_font_color%;background-color:%category_color%;">%category%</span><br>' .
						'<span class="title"><a href="%permalink%">%title%</a></span><br>' .
						'<span class="event-date">' . esc_html__( 'Event date:', 'xo-event-calendar' ) . ' %event_date%</span>' .
						'</dd>';
				}
				break;
			default:
				$type_class = esc_attr( "type-{$atts['type']}" );
				$format = wp_kses( wp_specialchars_decode( $atts['format'] ), $allowedposttags );
				break;
		}

		if ( $atts['orderby'] == 'event_start_date' || $atts['orderby'] == 'event_end_date' ) {
			$args['orderby'] = 'meta_value';
			$args['meta_key'] = $atts['orderby'];
			$args['type'] = 'DATE';
		} else {
			$args['orderby'] = $atts['orderby'];
		}

		if ( $atts['category'] ) {
			$tarms = $categories = explode( ',', $atts['category'] );
			$args['tax_query'] = array( array(
				'taxonomy' => XO_EVENT_CALENDAR_EVENT_TAXONOMY,
				'field' => 'slug',
				'terms' => $tarms,
			) );
		}

		$date_format = get_option( 'date_format' );
		$has_category = ( strpos( $format, '%category%' ) !== false || strpos( $format, '%category_color%' ) !== false || strpos( $format, '%category_font_color%' ) !== false);
		$has_thumbnail = ( strpos( $format, '%thumbnail%' ) !== false );
		if ( $has_thumbnail ) {
			if ( strpos( $atts['thumbnail_size'], ',' ) !== false ) {
				$sizes = explode( ',', $atts['thumbnail_size'] );
				if ( count( $sizes ) === 2 ) {
					$thumbnail_size = array( (int)$sizes[0], (int)$sizes[1] );
				}
			} else {
				$thumbnail_size = $atts['thumbnail_size'];
			}
			if ( !$thumbnail_size ) {
				$has_thumbnail = false;
			}
		}
		if ( $has_thumbnail ) {
			if ( ( $default_thumbnail_id = intval( $atts[ 'default_thumbnail_id' ] ) ) !== 0 ) {
				$default_thumbnail = wp_get_attachment_image( $default_thumbnail_id, $thumbnail_size );
			}
		}

		$output = '';

		$get_posts = new WP_Query( $args );
		while ( $get_posts->have_posts() ) {
			$get_posts->the_post();
			$post_id = $get_posts->post->ID;

			if ( $has_thumbnail ) {
				if ( has_post_thumbnail( $post_id ) ) {
					$thumbnail = get_the_post_thumbnail( $post_id, $thumbnail_size );
				} else {
					$thumbnail = $default_thumbnail;
				}
			} else {
				$thumbnail = '';
			}

			if ( $has_category ) {
				$cats = get_the_terms( $post_id, XO_EVENT_CALENDAR_EVENT_TAXONOMY );
				if ( $cats && ! is_wp_error( $cats ) && count( $cats ) > 0 ) {
					$cat = $cats[0];

					$category = $cat->name;

					$cat_data = get_option( 'xo_event_calendar_cat_' . intval( $cat->term_id ) );
					$cat_color = esc_html( $cat_data['category_color'] );
					$category_color = $cat_color ? $cat_color : '#ccc';

					$hsv = XO_Color::getHsv( XO_Color::getRgb( $category_color ) );
					$category_font_color = $hsv['v'] > 0.8 ? '#333' : '#eee';
				}
			} else {
				$category = '';
				$category_color = '';
				$category_font_color = '';
			}

			$values = array(
				get_the_date(),
				mysql2date( $date_format, get_post_meta( $post_id, 'event_start_date', true ) ),
				mysql2date( $date_format, get_post_meta( $post_id, 'event_end_date', true ) ),
				$xo_event_calendar->get_event_date( $post_id ),
				$category,
				$category_color,
				$category_font_color,
				get_permalink(),
				get_the_title(),
				$thumbnail,
			);

			$line = str_replace( $tags, $values, $format );

			$output .= "{$before}{$line}{$after}";
		}
		wp_reset_postdata();

		$output = "<div class=\"{$class} {$type_class}\">{$output}</div>\n";

		return $output;
	}

	add_shortcode( 'xo_event_list', 'xo_event_list_shortcode' );
}

更新履歴

v0.3.1 – 2018年4月14日

  • default_thumbnail_id オプションを追加しました。

v0.1.0 – 2018年4月10日

  • 初リリース。

スタイル(CSS)

スタイル(CSS)の例です。適当に調整してください。

style.css 等に記述してください。

/*
XO Event Calendar - Event list
*/
.xo-event-list * {
	font-size: 1em;
}
.xo-event-list {
	list-style: none;
	display: block;
	margin: 0;
}
.xo-event-list > dl {
	display: block;
	margin: .1em 0 0 0;
	padding: 0 0 .1em 0;
	overflow: hidden;
	color: #444;
	border-bottom: dotted 1px #ccc;
}
.xo-event-list > dl > dt,
.xo-event-list > dl > dd {
	display: table-cell;
	vertical-align: top;
}
.xo-event-list > dl > dt > span,
.xo-event-list > dl > dd > span {
	float: left;
	margin: 0 1em 0 0;
	padding: 0;
	vertical-align: middle;
}
.xo-event-list .thumbnail {
	margin: .2em 0;
}
.xo-event-list .thumbnail img {
	padding-right: 15px;
	width: 110px;
	min-width: 110px;
	height: auto;
	object-fit: cover;
}
.xo-event-list .date {
	margin-top: .1em;
	font-size: .9em;
}
.xo-event-list.type-short .date,
.xo-event-list.type-standard .date {
	width: 7.5em;
}
.xo-event-list .category {
	margin-top: .2em;
	margin-bottom: .1em;
	padding: 0 .5em;
	text-align: center;
	font-size: .8em;
	color: #fff;
	border-radius: 2px;
}
.xo-event-list.type-short .category,
.xo-event-list.type-standard .category {
	width: 8.5em;
}
.xo-event-list .title {
	margin-top: .1em;
}
.xo-event-list .event-date {
	font-size: .9em;
}
.xo-event-list li br {
	display: block;
}

.xo-event-list.type-custom .event-date {
	width: 16em;
	margin-top: .2em;
}

shortcode_atts_{$shortcode} フィルタフック

shortcode_atts_{$shortcode} フィルタフックを使用すれば、ショートコードのオプションを設定することができます。

同じオプションのショートコードを複数の場所に記述する場合や、PHP コードで柔軟に指定する場合など、便利なフックです。

例えば、detail タイプで表示される「イベント日:」を「開催日:」にする場合は、下記のようなコードになります。

function filter_shortcode_atts_xo_event_list( $out, $pairs, $atts, $shortcode ) { 
	if ( $out['type'] == 'detail' ) {
		$out['format'] =
			'<dt><span class="thumbnail"><a href="%permalink%">%thumbnail%</a></span></dt>' .
			'<dd>' .
			'<span class="date">%date%</span>' .
			'<span class="category" style="color:%category_font_color%;background-color:%category_color%;">%category%</span><br>' .
			'<span class="title"><a href="%permalink%">%title%</a></span><br>' .
			'<span class="event-date">開催日: %event_date%</span>' .
			'</dd>';
	}
	return $out; 
}

add_filter( 'shortcode_atts_xo_event_list', 'filter_shortcode_atts_xo_event_list', 10, 4 );

最後に

イベントをリスト表示するといっても千差万別あり、だれにでも当てはまるものにするのは意外と難しいものです。

こうした方がいいああした方がいいと思うところはまだまだありますが、際限がないので今回は想定するコモンケースに絞ってみました。仕様も固まってはいないので、プラグインには当面組み込まない予定です。

是非皆さんのご意見ご要望をもらえればと思います。

コメント

  • 滝澤里奈 より:

    はじめまして。素敵なカレンダーをありがとうございます。
    他のプラグインでうまく動かずに困っていたところ、こちらのプラグインに出会って無事にカレンダーの表示ができました!

    こちらのリストの表示はphpをいじらないとできないのでしょうか。
    タグの挿入だけでは表示ができなかったので、教えていただけますでしょうか。

    また、以下の点を変更したいと思っているのですが、可能でしょうか。
    ・カレンダーの土日の文字色
    ・カレンダーを月曜始まりに
    ・月火水・・・を英語表記に(Mon,Tue,Wed)

    お忙しい中、恐縮ですが、お返事いただけたら嬉しいです。
    よろしくおねがいいたします。

    • 石鷹 より:

      こんにちは、コメントありがとうございます。

      > こちらのリストの表示はphpをいじらないとできないのでしょうか。

      はい、そうなります。現バージョンのプラグインにはリスト表示するショートコード等は組み込まれていません。
      どのようなリスト表示がいいのか思案中でして、なかなかプラグインに組み込めないでいるところです。
      いじる PHP ファイルは、現在使用しているテーマの functions.php ファイルになります。本記事の「xo_event_list ショートコードの PHP コード」セクションのコードを、functions.php に追記してください。また、「スタイル(CSS)」セクションのスタイルを、style.css や管理画面より [外観]-[カスタマイズ]-[追加 CSS] に追記してください。
      あとは、リスト表示したい投稿にショートコード([xo_event_list])を記述してください。

      > ・カレンダーの土日の文字色

      あっ、実はこのような場合に対応するためにクラス(’sunday’ 等)を追加していたつもりだったのですが、抜けていました。
      次のバージョンでは追加したいと思います。それまでは、下記のようなスタイル(CSS)で対応していてください。

      /* 土曜日(週の初めが月曜の場合) */
      .xo-event-calendar .xo-month .dayname td:nth-child(6) {
      color: #ff00ff;
      }
      /* 日曜日(週の初めが月曜の場合) */
      .xo-event-calendar .xo-month .dayname td:nth-child(7) {
      color: #00ffff;
      }

      > ・カレンダーを月曜始まりに

      バージョン 1.3.0 より月曜始まりに対応しました。
      古いバージョンをお使いでしたらバージョンアップして、下記のページを参照してみてください。
      https://ja.wordpress.org/support/topic/xo-event-calendarのカレンダー曜日の並びの変更について/
      https://xakuro.com/wordpress/xo-event-calendar/

      > ・月火水・・・を英語表記に(Mon,Tue,Wed)

      変更方法を記事にしたのでご覧ください。
      https://xakuro.com/blog/wordpress/1433/

      まだまだこなれていないプラグインなので、ご要望がありましたらお気軽にコメントしてくださいね。
      ではでは

  • (株)ウーマンスタイル 穴田 より:

    お客様から、イベント表示ができて管理もカンタンなカレンダーを設置してほしいというご要望をいただき、こちらのプラグインを使わせていただいています。とても使いやすく見やすいカレンダーですね。簡単に管理ができるところがいいとお客様にも好評です。

    一つ教えていただきたいところがあるのですが、
    イベントを表示させるとき、背景色を選ぶと、色によって文字の色が黒か白に自動で出るようなのですが、、。
    文字の読みやすさのご判断と思いますが、文字を白に固定し、背景色は読みやすいものをこちらで選びたいと思っています。
    イベントの文字色を白に固定するのはどのようにしたらいいのでしょうか。
    お忙しいところ申し訳ありませんが、お教えいただけたらうれしいです。
    どうぞよろしくお願いいたします。

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      スタイル(CSS)で変更するのが簡単でいいかと思います。
      スタイルは、下記のような記述で変更できます。
      .month-event-title { color: #eee !important; }
      インラインで設定されているので、!important が必要です。
      お試しください。

      • (株)ウーマンスタイル 穴田 より:

        早々にお教えいただき、ありがとうございます。
        スタイルでやってみたのですが、きかなかったので、ついお聞きしてしまいました。
        important でうまくいかなければ、こちらのサイトの問題かなと思います。
        お忙しいところ、どうもありがとうございました!
        素晴らしいプラグイン、これからもお客様におすすめしていきたいと思います。ありがとうございました。

  • 熊谷 より:

    はじめまして、こちらのカレンダーの使い勝手がとても良く、利用させていただいております。

    この度、利用者から「直近のイベントカレンダー」がまったく動いていないよ。と連絡がありました。

    「XO Event Calendar で直近のイベント一覧を表示」を参考にしていたのですが、プラグインのアップデート後こちらのページに書き換えました。
    更に「format オプションのサンプル」のショートコードを利用し10件分ではなく3件分だけ表示しようとlimit=3としたところ、直近3件ではなく、スタートが遅い3件分だけ表示されてしまいます。

    直近から3件分表示させるにはどうしたらよいでしょうか?
    お忙しい中恐縮ですが、教えていただければ嬉しいです。
    よろしくお願いします。

    • 石鷹 より:

      こんにちは、コメントありがとうございます。
      orderby オプションに “event_start_date” を指定するとそのような順序で表示されます。
      投稿日で降順(新しい順)の場合は、orderby を省略するか、または “data” を指定してください。
      例:
      [xo_event_list limit=3 orderby="date" type="short"]

      • 熊谷 より:

        お返事ありがとうございます。
        ご提示いただいたコードは投稿日順に3件きちんと並んでおりましたが、大変申し訳ございません、こちらの説明不足でした。

        「10件ほどのイベントを登録。投稿日はすべて同じだが、開催日順に並び替えて開催日が近い3件分を表示したい。」という旨でした。

        [xo_event_list orderby=”event_start_date” type=”custom” format=’%event_date%<a href="%permalink%" rel="nofollow">%title%</a>’]

        の表示が一番近いと思います。この表示のまま、直近3件分。ということは可能でしょうか?
        説明がヘタで申し訳ございませんが、再びよろしくお願い致します。

        • 石鷹 より:

          過去のイベント(イベント開始日)を除くということかしら?
          確かに必要なオプションですね。そのうち対応したいと思います。
          それまでは、下記コード(追加の2行)を119行目(Version 0.3.1)に追加してみてください。

          if ( $atts['orderby'] == 'event_start_date' || $atts['orderby'] == 'event_end_date' ) {
          $args['orderby'] = 'meta_value';
          $args['meta_key'] = $atts['orderby'];
          $args['type'] = 'DATE';
          $args['meta_value'] = date_i18n( 'Y-m-d' ); // 追加
          $args['meta_compare'] = '>='; // 追加
          } else {
          $args['orderby'] = $atts['orderby'];
          }

          • 熊谷 より:

            ご指導いただきありがとうございます。お陰様できちんと目的の表示をさせることができました。参考として、表示したコードを置いておきます。

            [xo_event_list order=”ASC” orderby=”event_start_date” type=”custom” format='<a href="%permalink%" rel="nofollow">%title%</a>%event_date%’ limit=3]

          • 石鷹 より:

            返信ありがとうございます。今後の参考にします。
            また何かありましたら気軽にコメントしてくださいね。
            ではでは

  • 五十嵐史織 より:

    こんにちは。いろいろためしましたが、やっと理想のカレンダーに出会い嬉しいです。

    「スタイル(CSS)」セクションのスタイルを、style.css や管理画面より [外観]-[カスタマイズ]-[追加 CSS] に追記してください。
    あとは、リスト表示したい投稿にショートコード([xo_event_list])を記述してください。

    上記実行したのですが、反映されず・・・
    反映まで時間がかかるとかかりますか?

    また、ふつうのブログと、イベント投稿がかぶる場合、統一したいのですが、どのような方法がありますか?
    初心者でなんとかやっております。
    ご指導よろしくお願いいたします。

    • 石鷹 より:

      こんにちは、初めまして。
      xo_event_list ショートコードは、まだプラグインには組み込んでいません。
      この記事の「xo_event_list ショートコードの PHP コード」セクションの、PHP コードをテーマの functions.php にコピペしてください。
      コードのコピーは、コードの右上にマウスカーソルを合わせると表示される「copy」ボタンをクリックするとコピーされます。

      ふつうのブログと、イベント投稿がかぶる場合、統一したいのですが、どのような方法がありますか?

      すみません、「ふつうのブログ(投稿のことかな?)とイベント投稿がかぶる」というのがちょっと分かりません。もう少し具体的に教えてもらえませんか?

      • 五十嵐 より:

        早速のご対応ありがとうございます。上記試してみます。

        投稿のことです。
        イベントはイベントで詳細を投稿し、
        店のブログとしてまたイベント紹介で同じ内容を投稿していました。
        ブログ投稿のカテゴリーにおさめたいのと、最新投稿をトップに表示しているため。
        うまく説明できずすみません!!!!!!
        初心者でそもそもの仕組みをちゃんと理解していないようで、すみません。

        • 石鷹 より:

          ブログ投稿のカテゴリーにおさめたいのと、最新投稿をトップに表示しているため。

          イベントは、カスタム投稿タイプになります。カスタム投稿タイプに関してはここでは説明しきれないので、すみませんが WordPress の書籍などを読んでみてください。m(__)m

          • 五十嵐 より:

            ありがとうございます。

            PHP コードをテーマの functions.php にコピペしてください。
            >こちら実行したのですが、反映されませんでした。。。

  • 五十嵐 より:

    できました!!
    すみませんでした。ありがとうございます。
    いろいろ勉強してみます。

コメントを残す

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

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