【WordPress】The Events Calendar3.12.3に対応しました!カスタマイズ編

The Events Calendarの最新(2015/10/28現在バージョン3.12.3)のカスタマイズにやっと対応しました。

  1. カレンダーページの年月の見出しを変える
  2. カレンダーの見出し行の色を変える
  3. 「今日」の色を変える
  4. 住所の並び方を日本語フォーマットにする
  5. 日本語化について

※万一のために、カスタマイズ前に必ずバックアップを取りましょう。

カレンダーページの年月の見出しを変える

カレンダーページトップの見出しを変えます。”Events for”をやめて、「年月」を日本語の並び方にしていきます。

ec1

変更ファイル

hoge/wp-content/plugins/the-events-calendar/src/functions/template-tags/loop.php

変更前

if ( tribe_is_month() ) {
			$title = sprintf(
				__( '%1$s for %2$s', 'the-events-calendar' ),
				$events_label_plural,
				date_i18n( tribe_get_option( 'monthAndYearFormat', ' F Y' ), strtotime( tribe_get_month_view_date() ) )
			);
		}

‘F Y’を’ Y年F’にします。
上の2行目をみてください。 %2$s が年月にあたり、%1$sが”Events”、”for”が”for”にあたります。
そのため、%2$sを残し、%1$sと”for”を日本語で好きな言葉に変える、または消すことで見出しを変えられます。

上記変更してファイルを保存、上書きする際は必ずUTF-8にしてください。Windowsで作業しているとたまSJISで保存さて、そのままサーバーにアップしたら文字化けってことがあります。

変更後

		if ( tribe_is_month() ) {
			$title = sprintf(
				__( '%2$sのスケジュール', 'the-events-calendar' ),
				$events_label_plural,
				date_i18n( tribe_get_option( 'monthAndYearFormat', ' Y年F' ), strtotime( tribe_get_month_view_date() ) )
			);
		}

ev6



カレンダーの見出し行の色を変える

ev2

変更ファイル

hoge/wp-content/plugins/the-events-calendar/src/resources/css/tribe-events-theme.min.css

.tribe-events-calendar thead th {
	background-color: #666;
	color: #fff;
	font-weight: bold;
	padding: 1em 0;
	white-space: nowrap;
	border-left: 1px solid #666;
	border-right: 1px solid #666;
}

自分の好きなカラーコードにしましょう。
※tribe-events-theme.cssが整形済みのCSSで実際読み込んでいるのはtribe-events-theme.min.cssのほうです。
これでいっきに印象が変わります。

「今日」の色を変える

ev3

変更ファイル

hoge/wp-content/plugins/the-events-calendar/src/resources/css/tribe-events-theme.min.css

.tribe-events-calendar td.tribe-events-present div[id*="tribe-events-daynum-"], 
.tribe-events-calendar td.tribe-events-present div[id*="tribe-events-daynum-"] > a,
#tribe_events_filters_wrapper input[type=submit],
.tribe-events-button,
#tribe-events .tribe-events-button,
.tribe-events-button.tribe-inactive,
#tribe-events .tribe-events-button:hover,
.tribe-events-button:hover,
.tribe-events-button.tribe-active:hover {
	background-color: #21759b;
}

自分の好きなカラーコードにしましょう。
※tribe-events-theme.cssが整形済みのCSSで実際読み込んでいるのはtribe-events-theme.min.cssのほうです。


住所の並び方を日本語フォーマットにする

ev7

変更ファイル

hoge/wp-content/plugins/the-events-calendar/src/views/modules/address.php

変更前

<span class="adr">

<?php
// This location's street address.
if ( tribe_get_address( $venue_id ) ) : ?>
<span class="street-address"><?php echo tribe_get_address( $venue_id ); ?></span>
	<?php if ( ! tribe_is_venue() ) : ?>
		<br>
	<?php endif; ?>
<?php endif; ?>

<?php
// This locations's city.
if ( tribe_get_city( $venue_id ) ) :
	if ( tribe_get_address( $venue_id ) ) : ?>
		<br>
	<?php endif; ?>
	<span class="locality"><?php echo tribe_get_city( $venue_id ); ?></span><span class="delimiter">,</span>
<?php endif; ?>

<?php
// This location's abbreviated region. Full region name in the element title.
if ( tribe_get_region( $venue_id ) ) : ?>
	<abbr class="region tribe-events-abbr" title="<?php esc_attr_e( $full_region ); ?>"><?php echo tribe_get_region( $venue_id ); ?></abbr>
<?php endif; ?>

<?php
// This location's postal code.
if ( tribe_get_zip( $venue_id ) ) : ?>
	<span class="postal-code"><?php echo tribe_get_zip( $venue_id ); ?></span>
<?php endif; ?>

<?php
// This location's country.
if ( tribe_get_country( $venue_id ) ) : ?>
	<span class="country-name"><?php echo tribe_get_country( $venue_id ); ?></span>
<?php endif; ?>

</span>

だいたい分かるかもしれませんが、「tribe_get_region」「tribe_get_city」「tribe_get_address」の3つのPHPのセクションを入れ替えるだけです。
それだけです。

変更後

<span class="adr">

<?php
// This location's postal code.
if ( tribe_get_zip( $venue_id ) ) : ?>
	<span class="postal-code"><?php echo tribe_get_zip( $venue_id ); ?></span>
<?php endif; ?>

<?php
// This location's country.
if ( tribe_get_country( $venue_id ) ) : ?>
	<span class="country-name"><?php echo tribe_get_country( $venue_id ); ?></span>
<?php endif; ?>
<?php
// This location's abbreviated region. Full region name in the element title.
if ( tribe_get_region( $venue_id ) ) : ?>
	<abbr class="region tribe-events-abbr" title="<?php esc_attr_e( $full_region ); ?>"><?php echo tribe_get_region( $venue_id ); ?></abbr>
<?php endif; ?>
<?php
// This locations's city.
if ( tribe_get_city( $venue_id ) ) :
	if ( tribe_get_address( $venue_id ) ) : ?>
		<br>
	<?php endif; ?>
	<span class="locality"><?php echo tribe_get_city( $venue_id ); ?></span><span class="delimiter">,</span>
<?php endif; ?>
<?php
// This location's street address.
if ( tribe_get_address( $venue_id ) ) : ?>
<span class="street-address"><?php echo tribe_get_address( $venue_id ); ?></span>
	<?php if ( ! tribe_is_venue() ) : ?>
		<br>
	<?php endif; ?>
<?php endif; ?>
</span>

ev8
こんなかんじで普通の住所の並びになりました。


日本語化について

私が作ったのはこちら
ダウンロードして解凍したものはhoge/wp-content/plugins/the-events-calendar/langに入れてください。