WordPressに360度パノラマ画像を挿入する(Gutenberg対応、プラグイン使用)

先月RICOH THETAを購入し、機会を見ては360度写真を撮影するように努めています。

最初はA-FrameというVR用のフレームワークを使ってVRコンテンツを作ることを念頭においていたのですが、VR以外でも活用できないかと考えてみました。

facebookは挿入コンテンツの1つに「360度画像」というものがあり、プラットフォームとして360度画像を埋め込む下地があると言えます。

それでは、WordPressの場合はどうでしょうか。

検索したところ、360度画像を埋め込むプラグインがいくつか見付かりました。

しかし、どれもGutenberg以前のエディタでの導入方法で、Gutenberg上ではどうすれば良いのか分かりませんでした。

色々探して試して、現状(2019/4/1現在)で最終的にできた方法を以下に記します。

埋め込み方法

やり方としては、プラグインをインストールして埋め込みを実現します。また、プラグインはショートコードを使って360度画像を埋め込むものを使用します。

使用するプラグインは「DImage 360」というプラグインです。これをインストール。

360度画像をメディアライブラリ上にアップロード
360度画像をメディアライブラリ上にアップロード

次に、360度画像をメディアライブラリ上にアップロードします(記事編集画面ではない)。

メディアライブラリ上で画像を開いてURLを入手
メディアライブラリ上で画像を開いてURLを入手

今度はアップロードした画像の編集画面へ移動します。

そこで、「ファイルのURL」が記載されているのでそれをコピーします。

ショートコードブロックを挿入
ショートコードブロックを挿入

続いて、記事編集画面で「ショートコード」ブロックを呼び出します。

さて、ここでプラグインで有効となるショートコードを組み立てます。必要なものは先ほどのファイルのURLです。

[dimage url="https://example.com/wp-content/uploads/2019/04/PATH_TO_IMAGE.jpg" control="true"]

dimageのショートコードに、埋め込みたい画像のURLをurlパラメータの値として記述。あとはお好みに併せてcontrol="true"を付けたり。

これを先ほどのショートコードブロックにパラメータとして貼り付けます。

ショートコードブロックにDImage 360用のショートコードを貼り付け
ショートコードブロックにDImage 360用のショートコードを貼り付け

これで保存してあげると……

桜並木の写真
桜並木の写真

ショートコードが実際の360度カメラの画像に挿し代わり、WordPressへ埋め込むことができました。

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。