おいでなんしょ

飯田応援サイト

The Events Calendar|Word Press

   

wordpress_the_events_calendar

The Events Calendar|バージョン 4.5.1/4.5.2

Word Pressでカレンダーを作成できるプラグイン

公式サイトではミニプラグインも提供されています。

Googleカレンダーに日程を個別で登録できるのが気に入ったので使用してみたいと思います。

インストール

お使いのWordpressのプラグイン新規追加検索に「The Events Calendar」と入力します。

インストールをして有効化をクリックすると利用できるようになります。

また、直接ダウンロードの場合は

The Events Calendar by MODERN TRIBE

サイトページの少し下がった場所にアイコンが並んでいる部分がありますので一番左「THE EVENTS CALENDAR」のアイコンをクリックしてダウンロードができます。

そのままでも十分ご利用できますが、少しだけ手を加えたいと思います。

▼目次

  1. Setting
  2. 外観をカスタマイズ
  3. 子フォルダーを作成する
  4. 住所の順番、及び 〒と,の処理
  5. CSSファイル作成
  6. 一覧(リスト)の会場と住所を改行する
  7. 個別(single)ページのAll EVENTSの変更
  8. 一覧(リスト)にカレンダーに戻るリンクを追加
  9. 詳細部分の Web Site の変更
  10. イベント FOR を消す

Setting

Word Press管理画面から設定できます。

イベント ⇒ Settings ⇒ General

ますはお使いのWord Pressのダッシュボードから操作をしていきます。

1.イベントURLスラッグを[calendar]に設定しなおす

URL: http://ユーザーのドメイン/calendar/ と表示されます。

2.デフォルトの通貨記号

円 と入力しておきます。

3.Currency symbol follows value

その下部にある「Currency symbol follows value」の設定にチェックを入れます。

Currency symbol follows value
The currency symbol normally precedes the value. Enabling this option positions the symbol after the value.

通常、通貨記号が値の前に表示されます。 このオプションを有効にすると、値の後にシンボルが配置されます。説明文より

Save Changes をクリックして保存しておきます。

イベント ⇒ Settings ⇒ Display

1.テンプレート選択

イベントテンプレートに使用するデフォルトスタイルシートの項目からご希望の設定を選択します。
当サイトでは「Tribe Events スタイル」を選択

2.イベントテンプレート

プルダウンになっていますので、ご希望の設定にします。
当サイトでは「デフォルトイベントテンプレート」

3.イベント表示の有効化

チェックしてある項目が、カレンダーの切替になります。ご希望の表示方法にチェックを入れましょう。
当サイトでは「全部表示」

4.月表示の1日分のイベント数

月表示にしたときの1日の枠の中にいくつ表示させるか?の項目になります。
予定が多い人はそれなりの数値に設定したほうがよいかもしれません。
当サイトでは「8」

ただし表示数が増えれば閲覧時(読み込み)に負担となります。

5.Date Format Settings

ご自分の表示させたい表示方法を記入してください。

当サイトでは

  • 年月日:Y年n月j日
  • 月日:Fj日(D)
  • 年月フォーマット:Y年F
  • 日付と時間の区切り記号:
  • 時間の範囲の区切り記号:~
  • Datepicker Date Format:2017-01-15

に設定してあります。

Google マップ設定

Googleマップを利用するには「APIキー」が必要になります。
「Googleマップ APIキー」をコピー&ペーストで登録します。

これでSettingsの項目は終了となります。

外観をカスタマイズ

お使いのテーマに依存らしいので、外観からお気に入りのカレンダーに作成してみましょう。

Word Press のダッシュボード画面から「外観」を選択し「カスタマイズ」をクリックします。

お使いのテーマ設定がいろいろと出てくるかと思いますが、その中から【The Events Calendar】を探しクリックをします。

  • General Theme
  • Global Elements
  • Month View
  • List-style Views
  • Single Event
  • Widgets

の、各ページ設定ができるようになっています。

お好みの色でカスタマイズをしてみましょう。

依存している部分

全てを把握はしていませんがいくつか箇条書きをして残しておきたいと思います。

  • 各hは使用しているテーマの設定
  • Word Press の設定を参照している
  • 設定⇒一般⇒日付フォーマット「Y年n月j日」
  • 設定⇒一般⇒時刻フォーマット「G:i」
  • 設定⇒一般⇒週の始まり「月」

「」内は当サイトの設定の備忘録

子フォルダーを作成する

※ここからの記述は「イベント⇒Settings」から選択したテンプレートにより変わります。

ここでの記述は「Tribe Events スタイル」+「デフォルトのイベントテンプレート」での当サイトの環境となります。

今度はファイルを触ってみます。

カスタマイズをするにあたって、直接ファイルを編集するということもできますが、直接ファイルを変更するとバージョンアップ・更新等でせっかく変更した箇所が元通りになったりしてしまいます。

更新のたびに同様のことをすれば良いのですが全ての変更箇所を覚えていたりするのは少し難儀なものです。

そこでThe Events Calendarの公式にある手順で子テーマならぬ子フォルダーを作成したいと思います。

まずは親となるフォルダーを作成

1.親となるフォルダーをご自分の環境のテーマ直下に作成いたします。

では、まずはご自分の使用しているテーマの直下にフォルダーを作成します。

フォルダー名は「 tribe-events 」で入力し作成します。

この時点では「 hoge/wp-content/themes/お使いのテーマ名/tribe-events 」となっています。

2.作成した「tribe-events」に変更したいフォルダー/ファイルを作成する

さて、ここでアドレスの順番を修正したいので例として作成してみます。

  • アドレスがあるファイルは hoge/wp-content/plugins/the-events-calendar/src/views/modules/address.php
  • フォルダー経由のファイルになっている

そこで先ほど作成した「tribe-events」直下に再度フォルダーを作成します。

フォルダー名は「 modules 」で作成します。

これで「 hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/ 」

と、フォルダーの中身が空の状態ができあがりました。

3.今作成した「 hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/ 」に「 address.php 」を作成します。
  • address.php の名前でファイルを作成する
  • ファイルの文字コードは「UTF-8」

これで「 hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/address.php 」という中身の無い状態のPHPファイルが作成できたと思います。

4.「 address.php 」に中身を入れてあげましょう。

元である「address.php」ファイルを開き中身を全部コピーして作成した子ファイルに貼り付け保存します。

元:hoge/wp-content/plugins/the-events-calendar/src/views/modules/address.php
子:hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/address.php
5.これで「address.php」を編集するときは、こちらの子ファイルを使用して編集が可能になりました。

次の項目は今作成した子ファイル「hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/address.php」を編集していきます。

住所の順番、及び 〒と,の処理

hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/address.php

保存:UTF-8

1.アドレスの順番を日本風に変更する

このように並べ替えれば日本風の住所の書き方になりますよね。

コメントだけ並べ替えて表示してありますが、本来は中身の記述も一緒に移動させてください。

2.// This location's postal code.に〒マークを挿入する。

3.// This locations's city.にある,を取り除く

2個目のspanの終了タグの手前にある[,]です。

4.変更したのがこちらになります。

CSSファイル作成

次に子CSSファイルを作成いたしましょう。

先ほど作成した
hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/address.php
を少し階層を戻って
hoge/wp-content/themes/お使いのテーマ名/tribe-events
まで戻ります。

一番最初に作成したフォルダー「tribe-events」直下に「 tribe-events.css 」ファイルを作成します。

あとは、tribe-events.cssにCSSを記述してあげていけばOKです。

国表示を消すCSS

公式サイトに記載してあったのでCSSに放り込んであります。

一覧(リスト)の会場と住所を改行する

間違った方法でしょうが、変更記録として残しておきます。

変更ファイル
元:hoge/wp-content/plugins/the-events-calendar/src/views/list/single-event.php
子:hoge/wp-content/themes/お使いのテーマ名/tribe-events/list/single-event.php

こちらのファイルは上述した手順でテーマ直下に作成したフォルダーに「list」フォルダーを作成し『single-event.php』ファイルを作成。元の【single-event.php】ファイルから中身を全部コピーしてペーストしてあります。

※single-event.phpは他のフォルダーにもありますのでお間違いないように。

3行目のecho implode()で呼び出した出力を連結させているので<br />で改行させています。(\nは使用してません)
また、この作業で(',', $venue_details )による「会場名」『,』「郵便番号」の『,』を消去して「会場名,」となっていたのを「会場名」と修正しています。

9行目(2枚目5行目)ハイライト部分の記述は一覧(リスト)の項目に主催情報を載せるために追加しています。
主催追加の方法はプラグインの公式サイトに記述してありましたが、<p></p>タグで英語文章で直接記入してあったため日本語化ファイルでは翻訳できない為このように変更してあります。

また、この作業で「一覧(リスト)に表示される『Googleマップ』へのリンクをごそっと削除」しています。

に、変更しました。

個別(single)ページのAll EVENTSの変更

月カレンダーに戻るリンクの部分が日本語化ファイルでも上手に変更できなかったのでファイルを触ることにしました。

作成するファイル
元:hoge/wp-content/plugins/the-events-calendar/src/views/single-event.php
子:hoge/wp-content/themes/お使いのテーマ名/tribe-events/single-event.php

この【single-event.php】ファイルは「Views」直下のファイルです。上述の「一覧(リスト)の会場と住所を改行する」ファイルとは違います。
一番最初に作成した「tribe-events」の直下にファイルを作成してください。日本語を記述するようでしたら作成時に「ファイル名の文字コード【UTF-8】」に設定してください。

26行目付近にあるコード記述です。

ハイライトで表示されている4行目を変更します。
'ALL %s'の部分を'カレンダーに戻る'に変更します。

と、しました。

2行目と6行目にある<br />はお使いのテーマしだいですが、私は少し間隔が欲しかったので入力してあります。

一覧(リスト)にカレンダーに戻るリンクを追加

一覧リストに上述のカレンダーに戻るリンクを作成します。

作成/編集ファイル
元:hoge/wp-content/plugins/the-events-calendar/src/views/list/content.php
子:hoge/wp-content/themes/お使いのテーマ名/tribe-events/list/content.php

子ファイルを作成します。
こちらは今までと同じ手順ですね。
「list」直下に【content.php】の作成します。

29行目付近にある「List Title」が目安になります。

と、追加しました。

一覧(リスト)タイトルの上部に「カレンダーに戻る」リンクが表示されるようにしました。

タイトル(h2)の下部に表示させたい場合は
9行目の「Notices」上部でしょうか?

と、変更してみました。

一覧(リスト)下部にもカレンダーに戻るリンク

イベントの数が増えていくと一覧(リスト)下部にもカレンダーに戻るリンクが欲しくなりました。

ですので、追加してみます。

編集ファイル
子:hoge/wp-content/themes/お使いのテーマ名/tribe-events/list/content.php

追加する行は上と同じファイル「content.php」最下部付近になります。

と、7,8,9行目に同じリンクのコピーをペーストしました。

詳細部分の Web Site の変更

イベントの公式サイトや、表示させたいサイト先のURLは短いものから長いものまであると思います。

URLアドレスで表示させるとURLが長ければかなりの行数になりますし、レイアウト的にも希望のレイアウトではない場合もあると思います。

そこで、URL表示ではなくご自分の好きな表示方法に変更したいと思います。

表示方法の変更

TOP/SUPPORT/KNOWLEDGEBASE/Make the Event Website URL a linked word or button

表示変更をカスタマイズするには「functions.php」の変更をします。

「functions.php」はお使いのテーマの「functions.php」になります。

また、公式サイトの説明、関連する「GitHub」をご覧の上カスタマイズしてください。

私の環境
hoge/wp-content/themes/お使いのテーマ名/functions.php
5行目にある $label = "Visit Website »"; の「Visit Website」が表示される記述になります。
もちろん、日本語でも大丈夫ですので保存時「UTF-8」にしてください。

後半の「raquo」は特殊文字です。

別タブでリンク先を表示させる

上述した記述の最後のURLの指定の部分を変更します。

CSS

CSSで装飾したい方はこちらもご覧ください。

を、上述したコードに付け足してあげます。

「my-button-class」はクラス指定の名前なのでご自分の付けたいクラス名をつけてあげましょう。

CSSのコードは上述で作成した

子:hoge/wp-content/themes/お使いのテーマ名/tribe-events/tribe-events.css

に、上でつけたクラス名でCSSを作成します。

Website:の表示を消す

リンクの文字が変更できましたね。
上部に表示されている文字「Website:」を消したい方はこちらをご覧ください。

元:hoge/wp-content/plugins/the-events-calendar/src/views/modules/meta/details.php

子:hoge/wp-content/themes/お使いのテーマ名/tribe-events/modules/meta/details.php

表示を消すには子ファイルを使用します。

上述で作成した子フォルダーから「meta」フォルダーを追加で作成し「details.php」ファイルを作成します。

元のdetails.phpをコピーし作成した子ファイル「details.php」にペーストします。

編集には子ファイルの「details.php」を使用します。

details.phpの最下部にある記述になります。

5行目の

をごっそりと削除します。

イベント FOR を消す

%1$s for を削除する。

%1$s for というのが、月のカレンダー、日のカレンダー、そしてリストの日にちのタイトル部分である「イベント FOR 年月日」にあてはまっています。

イベント FOR が表示されるとスペース的にきついものになります、ならばいっそのこと削除してしまいましょう。

※子ファイル作成方法がわからないため直接ファイルを触ります。バックアップ等の後にお試しください。

また、プラグインの更新がありますと元通りになってしまいます。

プラグインを更新する際には思い出しましょう。

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

まず、「%1$s for」と記載されている箇所のうち上方にある「%1$s for %2$s - %3$s」についてです。

同じ loop.php ファイル内にありますが、こちらは日本語化ファイルがあれば削除は不要でした。

日本語化されたファイルを「Poedit」等で開き編集します。

%1$s for %2$s - %3$s のソーステキストに対して翻訳文章を %2$s - %3$s と翻訳をあてがってあげます。

日本語化ファイルをFTPソフト等でアップロードして変更されていることを確認してあげれば完了です。

上手くできなかった場合は削除して覚えておきましょう。

以下、削除方法です。
削除するのは%1$s for の文字だけです。
155行目付近

と、以下の箇所は上記述と繋がっていますがこちらの記述は「%1$s for %2$s」です。3行目と12行目のハイライト部分

162行目付近と171行目付近

当方、専門ではない為コメントで質問されてもお答えはできかねません…申し訳ないです。

プラグインがあちら産の為、日本で使いたい方のヒントになればと思い作成した説明(備忘録)ページです。

言葉足らずの部分もあるかと思いますが、お役に立てていただけたら幸いです。

サイト備忘録

サイト備忘録

 - 備忘録 , ,