【wordpress】Event Organiserの使い方とトラブルシューティング

【wordpress】Event Organiserの使い方とトラブルシューティング

wordpressでカレンダーと予定を表示できるプラグイン「Event Organiser」

Event Organiserとは、wordpressでカレンダーと予定を表示することができるプラグインです。
Event ORganiserをインストールすることで、
管理画面で予定を入力し、フロント画面にその予定を表示することができます。
例えば、何かイベントを催している店舗さんが、その情報を公開するために使ったりすることができそうですね。

イメージとして、以下のように表示されます。

CSSもデフォルトでついてるので、インストールしてそのまま使ってもイイ感じです。

インストール方法

[管理画面] > [プラグイン] > [新規追加]画面で、「Event Organiser」と検索すると、以下のアイコンのプラグインが検索結果に出てきます。
これをインストールしましょう。

 

インストールして有効化すると、管理画面のサイドメニューに「イベント」という項目が追加されているはずです。

 

フロント画面にカレンダーを表示する方法

ここまで出来たら、以下のコードを好きなページに追加しましょう。
footer.phpのような、全ページの共通部分に追加するとわかりやすいかもしれないですね。

echo do_shortcode('[eo_fullcalendar]');

これで、以下のようにカレンダーが表示され、
管理画面上で追加した予定も表示されているはずです。

 

「読み込み中」のままカレンダーが表示されない場合

先ほどのコードを追加し、フロント画面にカレンダーを表示しようとしたところ、
以下の画像のように、「読み込み中」のままカレンダーが読み取れない場合

 

この場合、wp_head()、wp_footer()をちゃんと呼び出しているか確認しましょう。
wordpressの公式のテーマを使っていればほぼ問題無いはずですが、
オリジナルで作成したテーマを使っている場合等は、もしかするとここがちゃんと対応できていない可能性があります。
通常であれば、wp_head()は、headタグ内。
wp_footer()はbodyタグを閉じる直前に書かれているはずです。

Event Organiserに関わらず、
wordpressのプラグインは基本的にこのwp_head()、wp_footer()で
必要なjavascriptやcssの読み込みを行っています。

スマホで見たときもPCと同様、1行に1週間分表示したい場合

ここまで紹介したやり方でいくと、
スマホで見た時カレンダーが以下のように表示されるかと思います。

 

なぜか1行1日の表示。
何よりも、1ヶ月表示なのでかなり縦に長くなってしまいます。
これはさすがにイケてないので、PCで見た時と同じように、1行に1週間分表示されるようにしましょう。

先ほど追加したコードを、以下の通りに変更してください。

echo do_shortcode('[eo_fullcalendar responsivebreakpoint="0"]');

 

これでスマホで見た時も以下のような表示になっているはずです。

 

まとめ

Event Organiserはかなり便利なプラグインだと思うのですが、
使い方やトラブルシューティングに関して
日本語でまとめられた記事が圧倒的に少ないと感じたので、
簡単にまとめてみました。

誰かの役に立てば幸いです。