CocoonでWP VRの画像が表示されなくて2時間くらい迷った話

※WordPressというブログサービス(みたいなもん)に関する話なので、バイクとかキャンプとか全く関係ないです。

俺の環境における解決策

気にする意味があるか分からないPageSpeedInsightsのスコアはちょっと下がるけど、下の通りやれば表示できました。

Cocoon設定の高速化→JavaScript縮小化のチェックを外すか、画像の通りプラグインのパスを除外の欄に入力してやれば動く(投稿記事にWP VRの画像が表示できる)っぽいです。
何が起こってるのか理解してないのでオススメはしませんが、とにかく動けばOKという方は試してみる価値はあるかもしれません。

結論は終わったので、以下には困りはじめ～困り完了までの日記です。

発端

前回記事でInsta360 ONE Xで撮影した360度画像をブログに表示させるため、WP VRというプラグインを導入しました。
導入方法や使用方法については他の方のブログで詳しく解説されていました。

WordPressブログに360度画像を埋め込む方法【プラグイン利用】

【WPバージョン5.4対応確認】他のサイト様で紹介してくれている360度画像埋め込みプラグインが使用できなかったので、WPバージョン5.4で使用できるプラグイン「WP VR」の使い方を簡単にご紹介いた

hyakuyattsu.com

こちらを参考にプラグインの導入や360度写真のアップロードを行い、WP VRのプラグイン上でグリグリと動かせる画像も表示できました。

しかし、いざ記事投稿画面にWP VRで生成されたショートコードを入力しても、記事プレビューで謎のスペースができるだけで一向に画像が表示されないという現象が発生しました。

投稿する画像のサイズを変えてみたり、WP VRの設定が英語で良く分からないのでチェックを1つ1つ付けたり外したりしながら手探りで設定変えてみましたが、表示ができるようにはなりませんでした。

他のプラグインを探す

しまいにはWP VRというプラグインは俺の環境では使えないのだと思い、別のプラグインを探し始める始末。
こちらの記事を参考にしたり、

お探しのページが見つかりませんでした | 鯖ポタ

お探しのページが見つかりませんでした。

deep-blog.jp

プラグインのページで”360”とか”VR”とか検索して色々な奴をインストールしました。
結果的に、WP-VR-viewは普通に動きました。

動いたのですが、なんか360度写真の中心が円状に歪むような感じがあったのと、WP VRのプレビューで見る画像よりもモヤモヤした感じがあり、ズームもできない？っぽいのが気になったので使用には至りませんでした。

WP VRに戻る

なぜWP VRの表示ができないのかと考えたときに、ショートコードが認識されていないのではないかと考えました。

しかし、投稿画面にて入力したショートコードは、プレビュー画面に切り替えると本文には表示されていません。
ショートコードが認識できていなければ、[wp vr～]とそのまま本文に表示されるはずです。

ここでやっと、Cocoon(WordPressのテーマ)とプラグインの相性が悪いのでは？いう発想になりました。
その方向で調べてみると、以下のような記事が見つかりました。

[WordPress]Cocoonでプラグインが動かないときに試すこと

こんにちは。今回とあるプラグインを入れたかったのですが、なかなか動作してくれずに困ってしまいました。どうにか解決したので、確認すべき項目を記します。環境WordPress 5.2.4テーマ名：Cocoonバージョン：1.9.8子テーマ名：C

research-labo.com

こちらの記事を参考に、Cocoon設定→高速化から、縮小化に付けていたチェックをすべて外して投稿記事をプレビューしてみたところ、WP VRの画像が表示できるようになりました。

一つ一つチェックを戻していくと、JavaScript縮小化にチェックを入れたときにWP VRの画像が表示できなくなることが分かり、冒頭の対策(除外欄に/plugins/wpvr/と書いておく)を行った次第です。

おわりに

WP VRというプラグインが360度画像を表示させるプラグインとして他よりも優れているのかどうかは知りませんが、結構人気のあるプラグインみたいです。

ひとまず、使えるようになって良かったと思います。
自分のようにこんなしょうもないことで時間を使う人が減るよう記事にしましたが、たぶん検索に引っかからないと思うので意味はないと思います。

お付き合いいただきありがとうございました。