360°パノラマ

WP(WordPress)

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

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

 

まずは、プラグインのインストール画面に移動して、「iPanorama 360」をインストールします。

プラグイン「iPanorama 360 」をインストール

インストール後、管理画面に「iPanorama 360」メニューが追加されるので、そちらからプラグインの専用画面に移動します。
iPanorama 360 プラグインの画面
画面上部の「Add New」のリンクをクリックします。

Sceneを追加
「+」をクリックして、Scene(シーン)を追加します。

「Scenes」タブ→「Scene Settings」メニューを開きます。写真を追加写真をアップロードして、「公開」して下さい。

ショートコードをコピー
画面右上にショートコード([ ipanorama id="6800"]または[ ipanorama slug="xxxx"])が表示されるので、それをコピーして、記事の投稿画面に移動します。

ショートコードを貼り付ける
ショートコードを貼り付けて記事を保存したら、実際にユーザー側の公開ページでどのように表示されているか確認します。

まずは、保存した記事のURLへアクセスしてみて下さい。

iPanorama360 ユーザー公開画面
ユーザー側にこのように表示されているはずなので、「CLICK TO LOAD PANORAMA」をクリックして下さい。
パノラマの再生が始まります。

iPanorama360 ユーザー公開画面

 

基本的な設定はここまでなんですが、

このままだとユーザーの使い勝手はあまり良くないので、もう少し使い勝手を良くしていきます。

 

もう一度「iPanorama 360」の設定画面に移動して、「General」タブ → 「Actions」メニューを開いて下さい。
Generalタブ→Action
Auto load」と「Auto rotate」を「ON]に変更して下さい。
自動再生の設定になるので、「CLICK TO LOAD PANORAMA」が表示されず、アクセスと同時に再生が開始されます。

自動再生
※こちらは画面のキャプチャ(静止画)なので、実際の動きを確認できません。

 

次は、複数のパノラマ写真を設定する方法について説明します。

まず、「+」をクリックして、2つ目のScene(シーン)を追加して下さい。
複数写真の再生設定

ユーザー側の公開ページ移動してみて下さい。
パノラマの左側に「◀」「▶」が表示されるので、これでパノラマ写真を切り替えられます。
パンラマ写真の切り替え

 

次は、パノラマ写真のサムネイルを表示できるように設定します。

「General」タブ→「Controls」メニューの画面を開いて、「Thumbnails slider control」を「ON」にします。
「Thumbnails slider control」を「ON」

「Scenes」タブ→「Scene Settings」メニューを開きます。
「Scene thumb image」をOnにする
Scene thumb image」を「ON]にして、サムネイル用の写真を追加します。
※「Scene 1」「Scene 2」の両方とも設定して下さい。
これで、再度ユーザー側の公開ページを確認します。

このようにサムネイルが表示されるようになっていると思います。サムネイル写真の表示

これでかなり見た目を改良できたと思います。

 

それでは、最後にパノラマの再生プレイヤーのデザイン(テーマ)を変更してみます。

「General」タブ → 「Theme」メニューを開いて、ここでテーマを変更します。
iPanorama360 テーマ「DARK」に変更

テーマは、「DEFAULT」以外に「DARK」と「MODERN」が用意されているので、
どちらかのテーマに変更できます。

「DARK」だとこんな見た目になります。
テーマ「DARK」に変更

「MODERN」はこんな感じになります。
テーマ「MODERN」

デフォルトで設定されているテーマよりも見た目がカッコよくなりましたね!

説明が少し長くなりましたが、慣れればチャチャっと設定できるようになると思います。

360°パノラマの再生プレイヤーをお探しの方は、
こちらのプラグインを一度試してみてはいかがでしょうか?

WordPress短期学習プログラム

関連記事

  1. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP ZIPファイルからプラグインをインストール

    ダウンロードしたZIP形式のファイルからプラグインをインストールしてみ…

  2. WP:WordPress(ワードプレス)

    WP(WordPress)

    記事詳細ページからカテゴリー情報を取得

    WPから投稿した記事の公開ページ(single.php)の作成時に、…

  3. WP:WordPress(ワードプレス)

    WP(WordPress)

    WordPress やはり、リビジョンはこまめに削除すべき?

    WordPressを使って、弊社で構築させて貰った某サイトでの…

  4. BLOG(ブログ)

    WP(WordPress)

    賢威(けんい)で組んだサイトが遅い。。。

    弊社のサイトに賢威を導入WordPressを利用されて…

  5. WP(WordPress)のプラグイン「All in One SEO Pack」

    WP(WordPress)

    本当に必要、そのプラグイン「All In One SEO Pack」

    今回は、WordPressの超人気のプラグイン「All In …

  6. WP:WordPress(ワードプレス)

    WP(WordPress)

    WP 自動整形機能

    WordPressには「自動整形」という機能が備わっています。&n…

最近の記事

  1. URLのwwwあり・なしの統一方法
  2. URLのwwwはあり?なし?
  3. SEO(エスイーオー)
  4. 中古ドメイン(Old Domain)について
  5. CakePHP
  6. Technology-Connection-Net
  7. ドメインにハイフンを使うのは日本人だけ?
  8. SSL(HTTPS)
  9. ドメインについて
  10. WP:WordPress(ワードプレス)
PAGE TOP