wordpress

できた!360度カメラの画像をWordPressに

投稿日:2020年4月29日 更新日:

360カメラ

 

プラグインで簡単に!

 

360度カメラで撮影した画像をWordPress(ワードプレス)の固定ページや投稿ページまたは、カスタム投稿タイプなどに使いたいときに便利なのが、

『WP VR – 360 Panorama and virtual tour creator for WordPress』というプラグインです。

それでは手っ取り早く使い方を・・・

 

1.プラグインをインストール

 

360カメラ WP VR

 

WordPress管理画面の『プラグイン』→『検索BOXにWP VRと入力』→『表示されたWP VRというプラグインをインストール』

 

2.新規追加

 

プラグイン WP VR

 

『Add New Tour』から好きなタイトルを入力します。

『General Settings』の部分はいろいろ試してみるといいかも?

 

3.360度画像をアップロード

 

360VR

 

 

360度カメラの画像なので、『SCENES』タブを選択してから『Scene ID』を001とか01とかを入力します。

次に『UPLOAD』ボタンで画像を選択します。

 

4.表示させるショートコード

 

上図の右側に表示されているショートコードを使って、固定ページや投稿ページ、カスタム投稿ページに貼付けします。

この場合は、『wpvr id=”230″』と表示されていますので、コピーして貼り付けます。

 

 

5.画像のサイズについて

 

ホームページのデザインに合わすため、いろいろな方法がありますが、

例えば、横幅を指定するような場合

<div class=”xxxxx”>

[wpvr id=”230″ width=”100″]

</div>

と表示すると、xxxxxにcssでワイド幅などを自由に設定できると思います。

 



 



 

 

 

 

 

 

-wordpress
-, ,


comment

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

関連記事

vegas使い方

VEGAS BACKGROUND SLIDESHOWの使い方

  VEGAS BACKGROUND SLIDESHOWの使い方   画像だけを利用した基本的な使い方   独自で作成したjsファイルがあるならそちらに以下のコードを記述 …

スライドショー条件分岐

スライドショーのショートコードをPCとスマホで変える

今回も引き続き、「Smart Slider 3」を使って条件分岐をやってみました。 なぜ、このようなことをするのかと言うと、 PCでは、横長の長方形(例えば、横幅1900px,高さ600pxくらい) …

divでtableを作ってみた

divでtableを作ってみた(レスポンシブ対応)

  display: flexでレスポンシブにも対応させた PCとスマホで見せ方を変えたかったので、cssで調整 PCでは横4列、スマホでは横2列で表示 通常の表が横に2つ並んでいるようなも …

子テーマ functions.php

WordPress 子テーマのcssを読み込む

  親テーマのスタイルシート【style.css】の上部には、各テーマによって若干違いはあるが、以下のような記述があると思います。 @charset “UTF-8”; /*——— …

リンク先を取得

簡単にリンク先のホームページを取得

  Browser Shots   WordPressのプラグインを利用して、簡単にリンク先のホームページの情報・画像を取得してサムネイルのように表示ができます。   & …