自然のVR動画はYouTubeで!
最近の写真
Camera

【WordPress】RICOH THETAで撮影したVR写真を、Webサイトに表示する方法

RICOH THETAで撮影した写真をネットにアップして発信したいと考えている方への記事です。

VRに対応しているSNSはFacebookとYouTubeです。
普段利用しているInstagramやTwitterなどはVRに対応していません。

では早速WebにRICOH THETAで撮影した写真を表示する方法を紹介します。

・HTMLベタ書き
・WordPress

HTMLベタ書き

HTMLベタ書きは比較的簡単にできます。

ソースコード

画像のパスにVR写真のパスを入力します。

<html>
  <head>
   <meta charset="utf-8">
   <title>サイトのタイトル</title>
   <script src="https://aframe.io/releases/latest/aframe.1.0.3.js"></script>
  </head>
  <body>
   <a-scene>
        <a-sky src="画像へのパス.jpeg"></a-sky>
   </a-scene>
  </body>
 </html>

WordPress

ワードプレスの場合は編集するphpファイルのバックアップを取っておきましょう

phpファイルの追加

FTPサーバーにログインします。

/サイト作成時の名前/wp-content/themes/現在使用しているテーマ/single/

こちらに移動します。
おそらくsingleはないので、singleフォルダを追加しましょう。

singleフォルダに下記のファイルを追加しましょう。

・article.php
・vr.php

main.phpに既存のsingle.phpの内容を全てコピーします。

カテゴリー追加

WordPressの管理画面から、カテゴリーを追加します。

vrというカテゴリーを追加し、スラッグをvrにします。

header.php

header.phpに下記のソースを追加します。

<head></head>の中に入れます。

<!-- VR -->
	<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>

functions.php

fanctions.phpに下記のソースを追加します。

下記のソースは記事投稿画面にVR写真を入力するためのソースです。

function add_photo_fields() {
	
add_meta_box( 'photo', 'カスタム入力', 'insert_photo_fields', 'post', 'normal');
}
add_action('admin_menu', 'add_photo_fields');

function insert_vr_fields() {
global $post;

echo 'VR画像のパス: <input name="vr" size="50" type="text" value="'.get_post_meta($post-&gt;ID, 'vr', true).'" />
';
}

function save_cd_fields( $post_id ) {
if(!empty($_POST['vr'])){
update_post_meta($post_id, 'vr', $_POST['vr'] );
}else{
delete_post_meta($post_id, 'vr');
}


}
add_action('save_post', 'save_cd_fields');

single.php

single.phpの既存の内容をバックアップし、全て消し下記のソースを追加ましす。

既存のsingle.phpファイルの内容を先ほど作成したarticle.phpに貼り付けましょう。

下記のソースはカテゴリがvrの時のみ、vr専用のphpファイルに飛ばします。

<?php

if ( in_category('vr') ) {
include(TEMPLATEPATH . '/single/vr.php');
}else {
include(TEMPLATEPATH . '/single/article.php');
}
?>

vr.php

新規作成したvr.phpに下記のソースを追加します。

こちらはVR写真を表示させるためのphpファイルです。

<?php get_header(); ?>

<a-scene>
    <a-sky src="<?php echo get_post_meta($post->ID, 'vr', true); ?>"></a-sky>
</a-scene>

投稿の方法

最後に投稿方法です。

・投稿画面に移動

・カテゴリをvrに設定

・メディアを追加をクリックし、VR写真のパスを全てコピー

・VR画像のパスにコピーしたパスを貼り付ける
vr写真 WordPress

vr写真 WordPress
VR写真はこちら!
これで完了します。

Amazonで写真集販売中!!
読み放題対応
自然の4K動画とVR動画を
YouTubeで見る