Blog

Event Organiser カレンダーのパーマリンクを変更する方法3つ

イベントカレンダーを設置できるプラグイン、Event Organiserを初めて使いましたが、とても拡張性が高くて使いやすいです。

Event Organiserの特長

イベントカレンダープラグインをいろいろ探してみましたが、決め手になったのは下記でした。

  • 日本語に対応している(お客さんが触る部分は日本語でないと厳しい…)
  • ショートコードが使える
  • フックが用意されている
  • スタイルを完全に制御できる(デフォルトのスタイルをオフにできる)

これだけ揃えば大抵のケースに対応できます。ありがたい。

ちなみに他に検討していたプラグインで、「All-in-One Event Calendar」がありましたが、こちらはカレンダー専用のテーマがあるので、簡単に設置したい時は良いかもしれないと思いました。
今回は、フックの情報がないのと(情報が見つからなかっただけで実際はどうかわかりませんが)、テーマが適用されてるので逆にスタイルの上書きが手間だということで使用を見送りました。

イベントは、カスタム投稿で作られます。
post_typeはeventで、タクソノミーは「カテゴリー」「会場」「カレンダー表示」「システム情報」「追加機能」があらかじめ用意されています。

「カテゴリー」「会場」・・・そのままですがカテゴリーと会場を登録することができます。
「カレンダー表示」・・・登録したイベントをカレンダー形式で一覧表示できます。ここから編集画面に飛んだり、削除も可能です。
「システム情報」「追加機能」は流し見でOKだと思います。

パーマリンクそのものを変更する方法

今回の目的は、単純にイベントカレンダーを表示して、カレンダーの中のイベントをクリックすると、お問い合わせに飛ぶというものでした。

お問い合わせは、このプラグインの予約フォームではなく、別で用意したページです。

具体的には、
/contact/
という固定ページにリンクさせたいです。

デフォルトでは、イベント名をクリックすると、イベントの詳細ページに遷移します。
これを変更するには、パーマリンクを変更する必要があります。
…というより、「パーマリンクじゃないリンクにしたい(ここが重要)」というのが正しいです。

なのですが、とりあえずパーマリンクに関して変更する方法はいろいろあるので、関連情報として2パターン挙げてみました。

方法1、プラグインの設定から変更

設定 → 「パーマリンク」タブ → イベント

ここで、詳細ページのパーマリンクを変更することができます。(一覧やその他アーカイブも変更可能)
変更できるのは、register_post_typeで投稿タイプを登録するときに設定する、rewriteキーの値部分です。
デフォルトではここは「/events/event/」になっているので

/events/event/詳細ページのスラッグ/

というパスになりますが、例えば「contact」に変更すると

/contact/詳細ページのスラッグ/

になります。
イベントはカスタム投稿なので、そもそものWPの機能として変更可能な部分が、ここで操作できるということです。

方法2、「Custom Post Type Permalinks」プラグインを使う

たまにお世話になるプラグインで、カスタム投稿のターム一覧や詳細ページのパーマリンクを変更してくれるものです。
こちらは、詳細ページのスラッグ部分を変更するものです。

/events/event/詳細ページのスラッグ/

の「詳細ページのスラッグ」を変更するので、

/events/event/contact/

となります。

フィルターフックを使ってリンク先を変更

上記2パターンは、詳細ページへのパーマリンクそのものを変更するものであって、今回の目的には全くあっていません。
今回は、すでにある任意のページに遷移させたいのであって、イベントの詳細ページにとびたいわけではないので、「パーマリンクを変更する」のではなく、単にリンク先を変更する方法を考える必要があります。

結論から言うと、フィルターフックを使うことでリンク先を変えることができました。

add_filter('eventorganiser_calendar_event_link',function(){
  $permalink = '/contact/';
  return $permalink;
});

この後にパーマリンク の更新(設定>パーマリンク 設定>変更を保存ボタンを押すだけ)が必要です。

eventorganiser_calendar_event_linkフックは、プラグインの中で下記のように追加されています。

$link = apply_filters( 'eventorganiser_calendar_event_link', $link, $post->ID, $post->occurrence_id );

Event Organiser のフック一覧はここにありました。

event organiser codex

余談ですが、ツールチップの中身を変えるフックもありました。

add_filter('eventorganiser_event_tooltip',function($description){
  $description = 'これに変更';
  return $description;
});

どちらかというと、これで変更するよりは、ツールチップを無くしてしまうケースの方が多いかもしれません。
ショートコードにtooltip="false"でツールチップを無効にできます。

[eo_fullcalendar tooltip="false"]

eventorganiser_calendar_event_linkフックを使えば、パスにパラメータをつけたものをリンク先として設定することもできるようになります。
そうすると、イベントのIDをフォームに引き継ぐことができ、お問い合わせフォームでイベント予約の申し込みができたりします。

その他 Event Organiserのポイントやハマったとこ

jQueryがおそらく必要なんだと思います。

functions.phpに、WordPressのデフォルトのjQueryを無効にする

function my_delete_local_jquery() {
  wp_deregister_script('jquery');
}
add_action('wp_enqueue_scripts', 'my_delete_local_jquery');

を記載しているとカレンダーが読み込み中のままだったので、これはコメントアウトしました。

jQueryが絶対にいるのか、今回の場合たまたまだったのかはわからないですが、カレンダーのローディングが終わらない場合は試してみてください。

デフォルトのCSSをオフにする

設定 → Event Organiser → 基本タブ → 「CSSを使わない」
にチェック。

カレンダーショートコードのバリエーション

ドキュメントに詳しく載っています。

Event Organiser docs

例)※テンプレートに書き込む場合

<?php echo do_shortcode('[eo_fullcalendar titleformatmonth="Y F"]'); ?>

おすすめの記事 recommend blog

新着 new blog

github