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

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

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

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

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

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

変更ファイル

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

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

変更ファイル

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のほうです。
これでいっきに印象が変わります。

「今日」の色を変える

変更ファイル

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のほうです。

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

変更ファイル

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>

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

日本語化について

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

“【WordPress】The Events Calendar3.12.3に対応しました！カスタマイズ編” への3件のフィードバック

むささび より:

2015年11月6日 2:51 AM

参考にさせていただいております。質問なのですが、The Events Calendarの最新版をインストールして試しにテストのイベントを作成しました。公式サイトの見本では現在の当日の色が青っぽく変わっていましたが、こちらではなにも変わっていません。デフォルトで色が変わると思っていたのですが・・・当日の色が変わるようにするにはどうすればよいでしょうか？どうぞよろしくお願いします。

返信
1. ayako より:
  
  2015年11月6日 11:34 AM
  
  こんにちは。デフォルトでなんの設定もなく今日の色は変わるはずです。
  サイトを見ると、CSSのclassが今日の色用のものが設定されていないので、
  the events calendarプラグインで「今日」が処理できていないようですね。
  プラグインをざっくりみたところ、the-events-calendar\src\Tribe\Template\Month.phpでカレンダーに「今日の色」用のclassを設定しています。
  そこがちゃんと動いていないからclassがついていないのでしょうが、原因はわかりません。
  むささびさんのイベントリストを見ると、プラグインは「今日」を認識しているようですし・・・。
  TheEventsCalendarは今3.12.5が出ていますので、最新に更新して、スラッグやプラグインの設定を触ってみるなどされてはどうでしょうか。
  また、「処理が動いていない」原因として考えられるのは、WordPressそのもののバージョン（PHP、MySQLも）ぐらいでしょうか。
  お役に立てず申し訳ありません。
  
  返信
匿名より:

2015年12月5日 8:50 PM

https://theeventscalendar.com/lost-in-translation/

返信