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 );

最後に

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

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

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