「All-in-One Event Calendar」のカスタマイズ
「All-in-One Event Calendar」は、カナダのバンクーバーに拠点を置くTimelyという会社が開発したプラグインです。
日本語をはじめ、さまざまな言語への翻訳が進んでいますが、完璧ではありません。
なので、日本人からすると、
「ちょっと、その表示は…」
というところもあります。
この「ちょいプラ素材」のブログでは、日本語表示に関する部分に留まらず、私自身が、
「ここの表示やデザインは、変更したい。」
と感じた部分を中心にカスタマイズしていきます。
ポップアップ画面の日時表示を修正
数あるイベントカレンダーのプラグインの中から、私がこの「All-in-One Event Calendar」を選んだのは、機能とデザインが優れていたためです。
なので、基本、「All-in-One Event Calendar」のデザインは、気に入っています。
ただ、唯一気になるのが、イベント情報のポップアップ画面の表示です。
以下のように、サイドバーのイベント情報の部分にマウスを重ねると、ポップアップ画面が表示されます。
このポップアップ画面の「日時」表示の部分をよく見ると、
”11月5 ＠ 16:30 - 17:30”
になっています。
この表示の日にちの後に”日”の文字を追加するのと、"@"の文字を削除して、
”11月5日 16:30 - 17:30”
に修正します。
変更するファイル
変更するのは、
https://○○○…wp-contentpluginsall-in-one-event-calendarappviewevent
のフォルダにある「time.php」です。
日付の表示を修正
まず、日にちの後に"日"の文字を追加する修正をします。
以下のように、「time.php」のget_short_date関数のコードを変更します。
【変更前】
public function get_short_date( Ai1ec_Date_Time $time, $add_year = false ) {
$months = apply_filters( 'ai1ec_i18n_months', array() );
$m = $time->format_i18n( 'M' );
$m = array_key_exists( $m, $months ) ? $months[$m] : $m;
if ( $add_year ) {
return $m . ' ' . $time->format_i18n( 'j Y' );
}
return $m . ' ' . $time->format_i18n( 'j' );
}【変更後】
public function get_short_date( Ai1ec_Date_Time $time, $add_year = false ) {
$months = apply_filters( 'ai1ec_i18n_months', array() );
$m = $time->format_i18n( 'M' );
$m = array_key_exists( $m, $months ) ? $months[$m] : $m;
if ( $add_year ) {
return $time->format_i18n( 'Y年m月j日' );
}
return $m . ' ' . $time->format_i18n( 'j日' );
}
日付と時間の間の"@"を削除
次に、日付と時間の間の"@"を削除します。
同じく、「time.php」の以下の部分2か所のコードを変更して、
' @ ' → ' '
のように"@"の文字を削除します。
【変更前】
// Output start time for non-all-day events.
if ( ! $event->is_allday() ) {
if ( 'hidden' !== $start_date_display ) {
$output .= apply_filters(
'ai1ec_get_timespan_html_time_separator',
Ai1ec_I18n::_x( ' @ ', 'Event time separator' )
);
}
$output .= $this->get_short_time( $start );
}
// Output end time for non-all-day events.
if ( ! $event->is_allday() ) {
if ( $start_ts !== $end_ts ) {
$output .= apply_filters(
'ai1ec_get_timespan_html_time_separator',
Ai1ec_I18n::_x( ' @ ', 'Event time separator' )
);
}
$output .= $this->get_short_time( $end );
}【変更後】
// Output start time for non-all-day events.
if ( ! $event->is_allday() ) {
if ( 'hidden' !== $start_date_display ) {
$output .= apply_filters(
'ai1ec_get_timespan_html_time_separator',
Ai1ec_I18n::_x( ' ', 'Event time separator' )
);
}
$output .= $this->get_short_time( $start );
}
// Output end time for non-all-day events.
if ( ! $event->is_allday() ) {
if ( $start_ts !== $end_ts ) {
$output .= apply_filters(
'ai1ec_get_timespan_html_time_separator',
Ai1ec_I18n::_x( ' ', 'Event time separator' )
);
}
$output .= $this->get_short_time( $end );
}
ポップアップ画面の日時表示が修正された
「time.php」のコードを変更したら、メインページの表示を更新して確認します。
以下のように、ポップアップ画面の日時表示が、
”11月5日 16:30 - 17:30”
に修正されました。
まとめ
今回の記事では、一番気になっていた「All-in-One Event Calendar」のポップアップ画面の日時表示を修正する方法を紹介しました。
ポップアップ画面は、今回修正した日時表示以外にも、変更したい部分があります。
そのためには、まず、新しいカレンダーテーマを作成し、作成したテーマのスタイルを変更する手順を取ります。
次回は、「All-in-One Event Calendar」のカレンダーテーマを新しく作成する方法を紹介します。
コメント
情報が少なかったので、大変参考になりました。ありがとうございます！
ポップアップ画面の抜粋文字部分、全文表示されてしまうのですが、原因が分かりません。もしお分かりになりましたらご教示ください。
koaraさん
このブログが参考になったみたいで良かったです．
「All-in-One Event Calendar」は，魅力的なプラグインですが，情報が少ないですよね。
ポップアップ画面で本文が全て表示されるのも，このプラグインの残念なところです．
本文を全く表示させない方法であれば，わかります．
ただし，今，旅先で，手元にパソコンがありません．
自宅に戻ったら記事にしますので，しばらくお待ちください．
koaraさん
ポップアップ画面の本文表示をカットする方法を以下の記事にまとめました．
https://vitorec.co.jp/choi-plus-sozai/%EF%BC%88%E3%82%B3%E3%83%94%E3%83%BC%EF%BC%89-all-in-one-event-calendar%E3%80%80%E3%83%9D%E3%83%83%E3%83%97%E3%82%A2%E3%83%83%E3%83%97%E7%94%BB%E9%9D%A2%E3%81%AE%E3%82%B5%E3%83%A0%E3%83%8D%E3%82%A4/
試してみてください．
管理人さま
お返事、そして新しいエントリーありがとうございます！
無事に修正することができました。本当に感謝感謝感謝です。
神かと思いました。ありがとうございます。
たけおさん
ブログの閲覧ありがとうございました．
神なんかではなく，今やっと，ドットインストールで，PHP，jQueryを勉強している凡人ですよ．
http://dotinstall.com/
大変助かりました。ありがとうございます。
「time.php」のget_short_date関数のコード変更について、現行バージョン（2.5.19）では下記の通りの修正で反映されます。ご参考まで
＜修正前：182行目から＞
if ( $add_year ) {
return $m . ‘ ‘ . $time->format_i18n( ‘M j’ );
}
return $m . ‘ ‘ . $time->format_i18n( ‘j’ );
}
＜修正後：同上＞
if ( $add_year ) {
return $m . ‘ ‘ . $time->format_i18n( ‘m月j日’ );
}
return $m . ‘ ‘ . $time->format_i18n( ‘j日’ );
}
hikariさん
ご指摘ありがとうございました．
All-in-One Event Calendarの最新バージョン（2.5.19）に対応して，記事の方も修正しておきました．
こんにちは、日時修正の記事ありがとうございます！
便利なプラグインだと思いますが情報が少なかったので、
大変助かりました。
イベント時間の選択が15分刻みになっていると思うのですが、
5分刻みから設定できる方法はあるのでしょうか？
（通常だと、10時、10時15分、10時30分になっているものを、
10時、10時5分、10時10分、10時15分…と細かくしたいのですが、
設定できる個所が見つけられませんでした）
もしご存知でしたら、ご教示いただければ幸いです。
何卒よろしくお願いいたします。
かわいさん
ブログの閲覧ありがとうございます．
15分刻みの間隔を5分単位にする設定は，私も見つけられませんでした．
イベント時間を15分単位で設定しておいて，その後，キーボード入力で時刻を修正するしかないのかもしれません．
お力になれずすみません．