All-in-One Event Calendar　ポップアップ画面の本文表示をカットする

ポップアップ画面の本文表示をカット

以下の記事に対して、

All-in-One Event Calendar　ポップアップ画面の日時表示を修正する

「All-in-One Event Calendar」のポップアップが画面の日時表示を修正する方法を紹介します。

vitorec.co.jp

2022.07.27

koaraさんから、コメントをいただきました。 

情報が少なかったので、大変参考になりました。ありがとうございます！
ポップアップ画面の抜粋文字部分、全文表示されてしまうのですが、原因が分かりません。もしお分かりになりましたらご教示ください。

今までの記事でも書いたように、「All-in-One Event Calendar」のポップアップ画面は、いろいろ残念な点が多いです。

中でも、イベントの本文が、ポップアップ画面に長々と表示されてしまうのは、かなりがっかりなところです。

今回は、ポップアップ画面にイベントの本文が表示されないようにカスタマイズします。

イベントに本文を追加してみる

まず、イベントの本文がポップアップ画面でどのように表示されるのかを見てみましょう。

前回の記事で追加した、「Friday Night ライブ」という架空のライブイベントに、以下のような長めの本文を追加してみます。

本文を追加したら、以下のように、サイドバーのイベント情報の部分にマウスを重ねて、ポップアップ画面を表示させてみましょう。

ポップアップ画面には、先ほど追加した本文が、改行もフォーマットもなく、全て表示されてしまいます。

ポップアップ画面には、イベントの

• タイトル
• 場所
• 日時
• サムネイル画像

が表示されていれば十分なので、本文表示をばっさりカットすることにします。

テンプレートエンジン Twigファイルの変更

「All-in-One Event Calendar」は、TwigというPHPのテンプレートエンジンを使っています。

Twigファイルのコピー/ペースト

以前の記事でも軽く触れたように、自分のカレンダーテーマ（子テーマ）のテンプレートを変更するには、まず、親テーマの「vortex」から関係するテンプレートファイルをコピーして、自分のカレンダーテーマの同じフォルダにペーストします。

これからの説明は、いつものように、新しく作った「MyCalendar」というカレンダーテーマを選択している前提で進めていきます。

今回、対象となるTwigファイルは、親テーマ「vortex」の

https://○○○…wp-contentpluginsall-in-one-event-calendarpublic hemes-ai1ecvortex wig

フォルダにある、

• event-popup.twig
• month.twig

という２つのファイルです。

この2つのファイルをコピーして、自分のカレンダーテーマ「MyCalendar」の

https://○○○…wp-contentpluginsall-in-one-event-calendarpublic hemes-ai1ecMyCalendar wig

フォルダにペーストします。

Twigファイルの書き換え

対象となるTwigファイルをコピー/ペーストしたら、このファイルを以下のように書き換えます。

まず、event-popup.twigを書き換えます。

【event-popup.twig 変更前】

    {% if event.post_excerpt is not empty %}
        <div class="ai1ec-popup-excerpt">{{ event.post_excerpt | raw }}</div>
    {% endif %}

【event-popup.twig 変更後】

{#
    {% if event.post_excerpt is not empty %}
        <div class="ai1ec-popup-excerpt">{{ event.post_excerpt | raw }}</div>
    {% endif %}
#}

次に、month.twigを書き換えます。

【month.twig 変更後】

        {% if event.post_excerpt %}
            <div class="ai1ec-popup-excerpt">{{ event.post_excerpt | raw }}</div>
        {% endif %}

【month.twig 変更前】

{#
        {% if event.post_excerpt %}
            <div class="ai1ec-popup-excerpt">{{ event.post_excerpt | raw }}</div>
        {% endif %}
#}

コードの解説

event-popup.twigは、サイドバーのイベント情報の部分にマウスを重ねたときに表示されるポップアップ画面のテンプレートです。

一方、month.twigは、「月」単位のイベント表示のページで、イベント情報の部分にマウスを重ねたときに表示されるポップアップ画面のテンプレートです。

event-popup.twig、month.twigどちらも、本文表示の部分をコメントアウトしているだけです。

PHPも満足に書けない私には、Twigはさらに難しく、コメントアウトするのが精一杯です（笑）。

本文表示がカットされた

2つのTwigファイルを変更したら、ポップアップ画面の本部鵜表示がカットされているか確認してみましょう。

サイドバーのイベント情報のポップアップ画面

サイドバーのイベント情報の部分にマウスを重ねたときに表示されるポップアップ画面です。

「月」単位のイベント表示ページのポップアップ画面

「月」単位のイベント表示のページで、イベント情報の部分にマウスを重ねたときに表示されるポップアップ画面です。

どちらも、ポップアップ画面の本文表示がカットされました。

まとめ

今回の記事では、「All-in-One Event Calendar」のポップアップ画面の本文表示をカットするカスタマイズを紹介しました。

Twigテンプレートエンジンのことがもう少し理解できると、イベントの本文を指定の文字数だけ表示させるというようなことも可能だと思いますが、とりあえず、この程度に留めておくことにします。

「All-in-One Event Calendar」のカスタマイズの方法をいくつか紹介してきました。

個人的に気になっていた表示やデザインの不具合は、一通り修正できましたので、一旦、「All-in-One Event Calendar」のカスタマイズの紹介は、この記事で終わりにします。