TheEventsCalendarで画像が表示されない問題を解消した話

      2016/02/07

WordPressの構築・運営に携わるみなさん、プラグインを入れすぎると競合するってこと、ありますよね。
今日はそんなトラブルに遭遇したお話です。
Web広報や運営をお手伝いしている団体で、ワードプレス製のサイトにプラグインを追加するプロボノ仕事をしました。

・イベント情報をもっと手軽に載せたい
・イベントの一覧を自動に生成してくれるようなものがないかな

というリクエストだったので、とりあえず有名どころのプラグイン「The Events Calendar」を利用することに。

The Events Calendar

インストール方法や使用方法はこちらに詳しいので、ご参考にどうぞ。
The Events Calendarプラグインの使い方
The Events Calendar 使用方法 解説!

画像が出ない

導入はサクサク、ダッシュボードでの設定もググりながら試しながらでスイスイと進めたものの、イベント記事に画像を設定したところ問題発生。
イベント個別の詳細ページでなんと画像が表示されない。生成されたHTMLにはIMGタグが配置されており、画像が表示されるだけのスペースも空いているのだけれど、そこには背景画像がむなしく表示されるのみ。
影響を受けたのは
・アイキャッチ画像
・イベント情報に追加したメディア画像
・サイドバーに設定してある画像
・グーグルマップ(地図の画像)
この辺りでした。

ちなみにリストビューやマンスリービューは表示に問題はなく、詳細ページでは見えないアイキャッチ画像もばっちり表示。

原因と解決策

これ、原因はプラグインの競合でした。
Head Cleanerというプラグインがイベントカレンダーの挙動を阻害していたようです。

ヘッダーの整理でSEO対策にも有効! / Head Cleaner

色々なプラグインを入れるとカオスになるWordPressのソースコードをきれいにしてくれる優れもの、Head Cleaner。
ダッシュボードでどうやら他のプラグインが利用しているCSSやjavascriptを対象外に設定できるようです。
この設定箇所を見てみると、
・Tribe__Events__Main::noindex_months
・Tribe__Events__Template__Single_Event::google_data_markup
「おまえ、こんなところにいたんだな…」と、イベントカレンダー絡みの何かを見つけることができたので、対象外にチェックして更新。

これだけで素敵に画像が表示されるようになりました。よかったー!!

#他人様のサイトの事例ためキャプチャを貼ることができず技術ブログとしては片手落ちですが、そのぶん描写で補いました。読みづらいですがご勘弁を。

 - NPOに役立つITの話 , ,