ライブスケジュールを見やすくしたい
自分自身とか、知り合いとか友達でミュージシャンのひとたち、みんなブログ持ってますよね。
そしてライブスケジュールの記事ばっかりだったりします。
それしかなかったりする。
そして、ほとんど、縦長で日付とメンバーを羅列してるだけのフォーマット。
というかそれしか書きようがない。
そして、ライブの場所のリンクさえなかったりする。
私もそうでした！
ライブに来てほしいのに、情報提供に費やす労力を惜しむ？
好きなミュージシャンの演奏はスケジュールをチェックして聴きにいきたいものです。
でも、ブログのスケジュールが見にくいと、
チェックする気が失せます。
人気のミュージシャンのブログやHPは、やっぱり作りこまれていて、
演奏スケジュールもほとんどカレンダー形式でアップされています。
でも作りこむのはプロに頼まないと難しい・・・
コストがかかりそうだし・・・
という気持ちわかります。
そこで。
無料で見やすく美しいスケジュールをブログに！
見やすいスケジュールにしたら、みんなチェックしてくれるし、ライブを聴きにくるひとも増えるのでは・・・
と考えました。
（WAY OUT WESTさんの情報誌のスケジュールカレンダーのページがお手本です。）
WordPressのプラグインのカレンダーでは私はこのThe Events Calendarプラグインが一番です。
The Events Calendarプラグインのいい所と悪い所
いいところ
- 見た目美しい
- 基本無料
- イベント開催地に住所を入れたら詳細ページにデフォルトでGoogleMapが埋め込まれる
- イベント、開催地、などはCSV形式のファイルからさくっとデータインポートできる
- WordPressのバージョンに合わせて頻繁に更新してくれる
悪いところ
- 基本英語だけど外観は日本語化しました
- カスタマイズの情報が少ない
- カスタマイズが難しい
- レスポンシブ非対応
まだ途中ですがカスタマイズしてみました。
ちなみにこのプラグイン、
イベント詳細ページもデフォルトで見やすいです。
The Events Calendar プラグイン導入
ここからはWordPressを知っているひと向けです。
ここからダウンロードして、普通にプラグインをインストールして、有効化します。
次に、はるるさんが作ってくださった日本語化ファイルを入れます。
詳細はこちらから。
はるるさんありがとうございます！
基本的な使い方は上記はるるさんのページでもわかりやすく解説してくださっています。
インストールがうまくいったらダッシュボードに「イベント」が増えているはず。
カレンダーのページは固定ページで自分のホームURL+/events/で勝手に生成されます。
/events/の所はダッシュボードの[イベント]-[設定]から変更できます。
私は/calendar/にしました。
早速、インストールと同時に生成された固定ページをみてみます。
ばーん
これは公式ページのスクリーンショットですがデフォルトはこうです。
デフォルトではカレンダーの横幅が1000pxを超えていたので、
サイトデザインが崩れました。
私のこのサイトは
賢威で作っていますが、固定ページ1カラムで最大950pxにしています。
またこのプラグインはレスポンシブ非対応なので、
今現在も、カレンダーページはスマホで見ると崩れてます。
この世の終わりってくらい。
これから見目よくしていきたいです。
カスタマイズしたこと
上記のデフォルトのカレンダーがこのようになるまでの軌跡です。
- カレンダーの横幅を自分のサイト幅に合わせる（950px）
- 曜日の色を変える。
- 「今日」の色を変える
- findボタン（検索ボタン）の色を変える。
- カレンダーの見出しが欧米風「events for MM月YYYY」になっていたのを、日本風（YYYY年MM月）に変える。
検索ボタンが英語findになっているのを日本語にする
※2015/1/15追記 日本語化したので不要検索結果メッセージを日本語にする
2014/4/14追記
※5番についてはこちらの新しい記事を参考にしてください。
バージョン3.1以降は5番については下記は適用できません！
2015/10/28追記
3番と5番についてはこちらの記事（バージョン3.12.3に対応）を見てください！
the events calendarをカスタマイズする
1．カレンダーの横幅を自分のサイト幅に合わせる（950px）
変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-full.css
変更箇所
.tribe-events-calendar th {
width: 142px;
widthのここを変えると全体幅も小さくなりました。お好みのサイズに。
もともと250px
※実際読み込んでいるCSSファイルはtribe-events-full.min.cssなので、
変更だけしてあとでminにしてminのほうのCSSファイルを上書きします。
2．曜日の色を変える
変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-theme.css
変更箇所
.tribe-events-calendar thead th {
background-color: #ffbab5;
カラーコードを私のサイトカラーのひとつにしました。もとは#666でした。
このCSSファイルもあとでminにしてからminのほうも上書きします。
3．今日の色を変える
２と同じファイルです。
変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-theme.css
※2015/1/14変更済み バージョン3.9に対応しました。
変更箇所(25行目のカラーコード）
.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: #ffbab5;
}
カラーコードを同じくサイトカラーのひとつ#ffbab5にしました。
2015/10/28追記
こちらの記事（バージョン3.12.3に対応）を見てください！
4．findボタンの色を変えて角丸にする
変更ファイル
/wp-content/plugins/the-events-calendar/resources
tribe-events-full.css
変更箇所
#tribe-bar-form .tribe-bar-submit input[type=submit] {
略
background: #228b22;
略
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
カラーコードとradiusをつけました。
5．カレンダーの見出しが欧米風「events for MM月YYYY」になっていたのを、日本風（YYYY年MM月）に変える。
※2014/4/14追記
バージョン3.1以降はこちらの新しい記事を参考にしてください！
2015/10/28追記
こちらの記事（バージョン3.12.3に対応）を見てください！
変更ファイル
wp-content/plugins/the-events-calendar/views/list
loop.php
変更箇所
if( tribe_is_month() ){
$title = sprintf( __( ' %s', 'tribe-events-calendar' ),
date_i18n( 'Y'.'年'.'F ', strtotime( tribe_get_month_view_date() ) )
);
}
6．検索ボタンが英語findになっているのを日本語にする
※2015/1/15変更 日本語化ファイルを作ったのでそれを入れれば不要
変更ファイル
/wp-content/plugins/the-events-calendar/views/modules
bar.php
変更箇所
<
7．検索結果メッセージを日本語にする
変更ファイル
wp-content/plugins/the-events-calendar/lib/template-classes
month.php
変更箇所
if ( $no_events && ! empty($search_term)) {
TribeEvents::setNotice( 'event-search-no-results', sprintf( __( 'この月では見つかりませんでした。<strong>"%s"</strong> ', 'tribe-events-calendar' ), esc_html( $search_term ) ) );
}
elseif ( $no_events ) {
TribeEvents::setNotice( 'event-search-no-results', __( '', 'tribe-events-calendar-pro' ) );
}
変更したCSSファイルをminに変換する
忘れてはなりません。上記１～４番で変更した２ファイルを上書きアップロードしても変更は反映されません。
一緒にmin.cssファイルも作りなおして上書きアップロードする必要があります。
私はこのサイトを使ってmin.cssを作りました。
次回はイベント会場とイベントをCSVファイルから一括インポート
あくまで私のやり方なのでテンプレートによっては効かないかもしれません。
また、間違っているかもしれません。
気づかれた方はご指摘くださると、とてもありがたいです。
※The Events Calendar User CSSというプラグインも試したんですが、
うまくいきませんでした。
次回はThe Events Calendarプラグイン素敵な機能、
イベント会場とイベントの一括インポートをやってみます。
※カスタマイズが進むにつれ、この記事をちょくちょく更新していくかもしれません。
“客が聴きに来ないのはスケジュールが見にくいから？[WordPress]The Events Calendarプラグインでスケジュールを見やすくしてみた” への1件のフィードバック