RICOH THETAで撮影した写真をネットにアップして発信したいと考えている方への記事です。
VRに対応しているSNSはFacebookとYouTubeです。
普段利用しているInstagramやTwitterなどはVRに対応していません。
では早速WebにRICOH THETAで撮影した写真を表示する方法を紹介します。
・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フォルダに下記のファイルを追加しましょう。
・vr.php
article.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_photo_fields() {
global $post;
echo 'VR画像のパス： <input type="text" name="variable" value="'.get_post_meta($post->ID, 'variable', true).'" size="50" /><br>';
}
function save_photo_fields( $post_id ) {
if(!empty($_POST['variable'])){
update_post_meta($post_id, 'variable', $_POST['variable'] );
}else{
delete_post_meta($post_id, 'variable');
}
}
add_action('save_post', 'save_photo_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, 'variable', true); ?>"></a-sky>
</a-scene>
投稿の方法
最後に投稿方法です。
↓
・カテゴリをvrに設定
↓
・メディアを追加をクリックし、VR写真のパスを全てコピー
↓
・VR画像のパスにコピーしたパスを貼り付ける
VR写真はこちら！
これで完了します。
