WordPress

WP(WordPress)

WPのプラグイン「iPanorama 360」で360°パノラマ写真を公開

360°パノラマ写真(全天球画像)の埋め込みを行えるWordPressプラグインの「iPanorama 360」を試してみました。

 

まずは「iPanorama 360」のをインストールを行います。

管理画面左メニューから「iPanorama 360」を選択します。
プラグイン:WP iPanorama 360

プラグイン:WP iPanorama 360 新規追加
「Add New」をクリックします。

プラグイン:WP iPanorama 360 シーンの追加
「+」をクリックして、Scene(シーン)を追加します。

プラグイン:WP iPanorama 360 写真をアップロード
写真をアップロードします。

WP iPanorama 360 ショートタグをコピー
画面右上からショートタグ([ ipanorama id=”6800″]または[ ipanorama slug=”xxxx”])をコピーして、投稿画面に移動します。

WP iPanorama 360 ショートタグを貼り付け
公開します。

WP iPanorama 360 再生01
公開ページに移動すると上記の様なページが表示されるので、

「CLICK TO LOAD PANORAMA」をクリックすると、以下の様に再生が始まります。
WP iPanorama 360 再生02
基本的な設定はここまでなんですが、

このままだとユーザーの使い勝手はあまり良くないので、

もう少し使い勝手を良くしていきます。

 

まずは、もう一度「iPanorama 360」の設定画面に移動して、

「General」タブの「Actions」メニューを開きます。
WP iPanorama 360 「Actions」メニュー
「Auto load」と「Auto rotate」を「ON]に変更します。

すると、下記のように、ページへアクセスした時点で自動でパノラマの再生が始まります。
WP iPanorama 360 再生03
次は、複数のパノラマ写真を設定する方法について説明します。
WP iPanorama 360 シーン2を追加

まず、「+」をクリックして、2つ目のScene(シーン)を追加して、更新を行います。

公開ページに移動すると、以下の様に、

パノラマの左側に「◀」「▶」が表示されるので、これでパノラマ写真を切り替えられます。
WP iPanorama 360 再生04

さらに、ここからサムネイル写真を表示させて、もう少し見た目を改良します。
WP iPanorama 360 Controls
「Controls」メニューの「Thumbnails slider control」を「ON」にします。

WP iPanorama 360 サムネイルを追加
「Scene thumb image」を「ON]にして、サムネイル用のパノラマ写真をアップロードします。

公開側ページには、サムネイルが表示されていると思います。
WP iPanorama 360 再生05

あと、最後にデザイン(テーマ)を変更してみます。

WP iPanorama 360 テーマの変更

「Theme」メニューの設定を「DEFAULT」から「MODERN」に変更します。

こんな感じになります。
WP iPanorama 360 再生06

関連記事

  1. WordPress

    WP(WordPress)

    WordPressにDB Cache Reloaded Fixをインストールしてみた

    「DB Cache Reloaded Fix」というプラグインを見つけ…

  2. WordPress

    WP(WordPress)

    WP 「query_posts()」でページナビが誤作動を!!

    WordPressで特定カテゴリーの記事のみを表示させたくて、&l…

  3. WordPress

    WP(WordPress)

    WP プラグインでサイト改善

    ずっと放置しいてたサイト(WordPressで構築)があったのですが、…

  4. WP(WordPress)

    ConoHaサーバへWordPressをインストール

    こちらの記事では、ConoHa VPSサーバへのWordPress…

  5. WordPress

    WP(WordPress)

    WP デフォルトの投稿画面を非表示

    WordPressをCMSとして使用していると、デフォルトの投稿画…

  6. WordPress

    WP(WordPress)

    WPでページ上部に変なスペースが!!

    WordPressから吐き出しているページをよくよくチェックしてみると…

最近の記事

  1. PHP
  2. Python
  3. Python
  4. PHP
  5. 宅建
PAGE TOP