先日以来、 WordPress で某アーティストのサイト作成を行っています。前回の記事では NVDA 利用環境での WordPress のテーマ«Twentyseventeen»の設定を開設しましたが、この記事では今回利用したプラグインの中でもインストール&設定に特に手を焼いた«My Calendar»について解説します。
この記事の目次
My Calendar の特徴
My Calendar は WordPress でカレンダー形式でイベント情報を表示するためのプラグインです。通常の表形式やリスト形式の表示の切り替え、イベントの詳細表示等、様々な表示形式に対応しています。
海外製のプラグインですが、設定画面は日本語化されています。
そして他の紹介記事では触れられていませんが、以下のような特徴もあります。
- このプラグインを利用して表示されるカレンダーやイベントの情報はアクセシブルであり、音声ブラウザでも楽に操作できる
- 会場のバリアフリー情報やイベントのアクセシビリティ情報を掲載したり、その情報でフィルタを掛けることができる
プラグインのインストール&有効化
これは他のアプリと全く同じです。
- ダッシュボードのメニューから«プラグイン»→«新規追加»と進み、プラグイン名である«My Calendar»で検索します。
- 検索結果から«My Calendar»を選び、«インストール»をクリックします。
- インストールが完了すると«プラグインを有効化»という表示に変わるので、それをクリックします。
イベント&会場情報の登録
プラグインを有効化すると、ダッシュボードのメニューの中に«My Calendar»という項目が追加されます。細かい設定をする前に、まずは実際にイベントや会場の情報を登録してみましょう。
ダッシュボードのメニューから«My Calendar»→«新規イベントの追加»と進むと、イベントと会場の情報を登録する画面になります。
イベントの基本的な情報
- イベント名
- イベントの名前を入力します（当たり前か）。
- イベントの説明
- いわゆる本文になるところです。HTMLを使って自由に記述できます。
この内容は、カレンダーでイベント名をクリックしたときにポップアップされるウインドウや、イベントの詳細表示に表示されます。 - イベントの概要
- まだよくわかっていません、ごめんなさい！
イベントの日時
イベントの開始と終了の日時、イベントの繰り返し等、一通りのことはできるようです。
ここで注意です。日時の入力にはカレンダー表示を使いますが、この入力がNVDAではできませんでした。幸いテキストボックスに直接入力できるので問題ありませんが、数字の区切りは«/»ではなく«-»であることに注意してください。
アクセシビリティー
イベントのアクセシビリティー情報（手話通訳や字幕があるか等）と言った情報はここで入力します。
※会場のバリアフリー情報は、会場の情報として別に入力します。
イベントの場所
イベント自体の情報に加え、会場の情報も一緒に入力できます（入力しないこともできます）。
«この場所の情報を一覧にコピー»の欄にチェックを入れておくと、別のイベント作成時に今回の場所の情報を利用できます。また«登録された場所から選択する»欄のコンボボックスには今までに登録した場所の情報が入っているので、それを選ぶこともできます。
住所・電話・URL等の基本的な情報に加え、会場のバリアフリー情報（エレベータの設置、広い座席等）も入力できます。
入力内容の保存
イベントと会場の情報入力は以上です。«イベントを保存する»をクリックし、保存します。
カレンダーの作成
イベント情報を入力したら、カレンダーを表示したい固定ページや投稿にカレンダーを設置します。
本文に以下のような形式のショートコードを記述するだけです。
1 | [my_calendar option1="hogehoge" option2="fugafuga"] |
以下オプションの説明。
- format
- カレンダーの形式。«calendar»でグリッド（表）形式、«list»でリスト形式。
- above
- カレンダーの上部に何を表示するか。nav, toggle, jump, print, key, feeds, timeframe の中から表示したいものを指定。
- below
- カレンダーの下部に何を表示するか。（詳細はaboveを参照）
他にも様々なショートコードやオプションがありますが、その書き方は簡単なので、詳細はヘルプ（インストールするとついてくる）を御覧ください。またショートコードを生成するためのフォームも、同ヘルプに付いています。
«My Calendar»の設定&カスタマイズ
上記までで基本的なことはできますが、より使いやすくしようとするとカスタマイズが必要です。
そのやりかたが複雑だったので、備忘録を兼ねて書いておきます。
カレンダーの日表示
カレンダーをグリッド形式にしている場合、日の表示が«2017/3/9»のようになっています。いちいち年と月を表示したくない場合は、以下のように設定します。
- ダッシュボードのメニューから«My Calendar»→«設定»と進み、«テキスト»のタブをクリックします。
- «日付の書式 (その他の表示モード)»に«j»と入力します。
- »カスタムテキスト設定を保存する»をクリックし、内容を保存します。
イベントのポップアップ表示
カレンダー内のイベントをクリックすると、そのイベントの詳しい情報がポップアップで表示されますが、その内容は以下のように設定します。
- ダッシュボードのメニューから«My Calendar»→«テンプレート編集»と進みます。
- «このテンプレートを使用»にチェックを入れます。
- «カスタムテンプレート»のテキストボックス内を編集します。
- «テンプレートの更新»をクリックし、内容を保存します。
解説
この画面では様々なテンプレートについて、使用するかの有無と表示内容を設定できます。
«テンプレート»の見出の下の表で設定したいテンプレート名をクリックし、上記 2 のチェックボックスをチェックすることで、はじめてそのテンプレートが使用可能になります。
この画面を開いたときは、必ず«Grid»が表示されています。
癖っ毛のある画面なので注意してください。
イベントの詳細ページ
イベントのポップアップ表示で«More information about （イベント名»の表示をクリックすると、そのイベントの詳細ページに遷移しますが、その内容は以下のように設定します。
上記«テンプレート編集»で、«Grid»ではなく«Details»をクリックします。
詳細は、上記«イベントのポップアップ表示»と同じです。
バリアフリー情報、アクセシビリティー情報の表示
イベントや会場の情報入力の際、バリアフリーやアクセシビリティー情報の入力欄がありましたが、残念ながら表示テンプレートがデフォルトのままでは表示されません。
以下のようにして表示させます。
- ダッシュボードのメニューから«My Calendar»→«テンプレート編集»と進みます。
- «テンプレート»の見出の下の表で設定したいテンプレート名をクリックし、編集可能にします。
- «このテンプレートを使用»にチェックを入れます。
- «カスタムテンプレート»のテキストボックス内で、バリアフリー情報やアクセシビリティー情報を表示したい箇所に、以下のように記述します。
- {location_access}
- 会場のバリアフリー情報
- {access}
- イベントのアクセシビリティー情報
- «テンプレートの更新»をクリックし、内容を保存します。
注意点
以下は私が My Calendar を設定していて特にハマった箇所です。
イベント詳細ページのURL
イベントの詳細ページを表示すると、デフォルトでは URL に «my-calendar»と入ってしまいます。
これを防止するには以下のようにします。
- ダッシュボードのメニューから«設定»→«パーマリンク設定»と進みます。
- 最下行に«My Calendar Events base»という項目が出現しているので、カレンダーを表示させるページのスラッグを入力します。
- «変更を保存»をクリックして、内容を保存します。
- 次に、ダッシュボードのメニューから«My Calendar»→«設定»と進み、«表示»のタブをクリックします。
- «イベントのパーマリンクを整える»にチェックをします。
- «設定を保存する»をクリックして、内容を保存します。
これを行うことで、カレンダーページの直下にイベントの詳細ページがあるかのような URL になります。
実は上記とも関連しますが、デフォルトではパンくずリストの表示が思ったように表示されません。
パンくずリストに«Breadcrumb NavXT»を利用している方は多いと思いますので、その設定についてご紹介します。
- ダッシュボードのメニューから«設定»→«Breadcrumb NavXT»と進みます。
- «投稿タイプ»のタブをクリックし、«イベントテンプレート»の見出の下にある以下の項目を設定します。
- «イベントルートページ»のドロップダウンから、カレンダーを表示させているページを選ぶ。
- «イベント階層表示 パンくずリストで、イベントを、下記の設定に基づいて階層化して表示します。»にチェック。
これでパンくずリストがうまく動作し、カレンダーページの直下にイベント詳細ページがあるように見えるようになります。
まとめ
いかがでしたでしょうか。
なかなか複雑なプラグインですが、Ical形式のデータをエクスポートできたり、イベントを他のカレンダーにインポートできたりと、なかなか高機能なようです。
そして、そんな機能の一つとしてアクセシビリティーやバリアフリー情報が不通に掲載できるようになっていることが、個人的には最も考えさせられた点でした。
私自身も全ての機能を把握できているわけではありませんので、もし間違いや«もっといいやり方»等があれば、是非教えてください。