WordPressで投稿内の画像をVR表示する方法

最近CGでVRのコンテンツ作りにはまっているヘンコです。今日はWPに投稿したVRコンテンツを投稿から自動で表示する方法をご紹介します。
今回はGoogleで無料公開されているGoogleVRを使用していきます。タダってとても素晴らしいので、他に選択肢はありません。ちなみにこのVRはiframeを使用して貼り付けるバージョンと、JavaScriptを使用したhtmlで表示さす2種類の方法が準備されています。
ブログやwebサイトにときたま貼り付けるのであればiframeで埋め込めば問題ないですが、VRコンテンツ専用のWebサイトを作りたいなどという時に、htmlを毎回生成していくのは面倒この上ありません。作成したコンテンツをwpに投稿していく感覚で簡単に表示さす、というのが今回の目的です。

ではいってみましょう。

まずGoogleVR本体のプログラムをGitHubからダウンロードします。
https://github.com/googlevr/vrview

落ちてきたvrview-master.zipを解凍するとなんかいっぱい詰まっているので、そのままサーバへアップしておきます。WPで使っているテーマ内のheader.phpへこの中のスクリプトを読み込むために一文を追加します。パスはサイトに合わせてください。

1つの投稿にアイキャッチを使って1つのVR画像をUPします。VR画像は圧縮してもそれなりのサイズで重くなるため、投稿内から取得するより手取り早くわかりやすいのでよしとします。

image: ‘xxx.jpg’,preview:’xxx.jpg’に画像のurlをいれるため、表示中の投稿内アイキャッチのurlを取得しています。固定ページでは表示させないよう、投稿(post)の表示先であるsingle.phpに記述していきますが、条件分岐をするのであればcontent.phpでも良いかもしれません。ご自分の仕様にあわせてください。ちなみに私はVR専用にファイルを分けてget_template_part()でVR表示部分を呼び出しています。あとはCSSをいじってお好きな表示にカスタマイズしてください。

ちなみにオリジナルのマニュアルはここ、オプションもろもろ参考になさってください。

VR View for the Web:https://developers.google.com/vr/concepts/vrview-web

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です