360度パノラマを表示するフィルタWP Photo Sphere

インストール手順

WP Photo Sphereのサイトからブラグインをダウンロードし、wp-photo-sphereのフォルダを/wp-content/plugins/ディレクトリにアップロードします。または、WordPressの「プラグインを追加」からWP Photo Sphereのプラグインを検索し、インストールしてください。

WP Photo Sphere・フォトスフィア

WP Photo Sphereのプラグインは、WordPressのバージョン4.8.9以降テストされておらず、2019年3月28日時点でバージョン3.8で、最終更新日が2年以上前となっています。プラグインをダウンロードされる場合は、自己の判断・責任で行ってください。

パノラマを投稿に挿入する

WP Photo Sphereのプラグインを「有効化」した後、投稿の編集ページで「Add a panorama」ボタンをクリックして、投稿に挿入するパノラマをアップロードまたは選択すると、ショートタグsphere xxxxが挿入されます。「公開」「更新」をクリックで表示されますが、このままでは自動再生されないので、ショートタグにautoloadを追記します。これで自動再生されるようになります。
(▼例)
[sphere xxxx autoload]

ショートタグのその他の設定

●width属性とheight属性を使用して、パノラマごとに異なるサイズを指定することができます。
●title属性を使用して、パノラマごとに異なるタイトルを指定することができます。
(▼例)
[sphere xxxx autoload width=”100%” height=”300″ title=”和歌山市・高津子山展望台 2019/4/5″]

●ナビゲーションバーの非表示
(▼例)
[sphere xxxx autoload navbar=”no”]

プラグインの詳細な設定

WordPressの「設定」から「WP Photo Sphere」を選択し、プラグインの詳細な設定を行うこともできます。パノラマを個別に設定する場合は、ショートタグに記述します。

●Style of the container コンテナのスタイル
 margin 要素外の余白
 auto 自動再生
(▼例)
margin: 0px auto;

●Style of the link リンクのスタイル
 padding 要素内の余白(タイトル部分)
 background-color タイトルの背景色
 color テキストの色
 text-align: center 文字センター揃え
(▼例) 
padding: 5px;
background-color: #ff9933;
color: #ffffff;
text-align: center;

Text of the link リンクのテキスト
 (タイトルのテキストはここに挿入します)
Default width デフォルトの幅
Default maximum width デフォルトの最大幅
Time after which the animation is started アニメーションが開始されるまでの時間
Default animation speed アニメーション速度
 (プルダウンの選択肢)
 Revolutions per minute 1分あたりの回転数
 Revolutions per second 1秒あたりの回転数

Default height デフォルトの高さ
Default maximum height デフォルトの最大高さ
Hide link リンクを隠す
 (チェックを入れるとタイトルが非表示となります)
Display the navigation bar ナビゲーションバーを表示する
 (チェックを外すと表示下部の操作メニューが非表示となります)
Overlay image オーバーレイ画像
 (画像のURLを挿入すると表示します)
Overlay image position オーバーレイ画像位置
 (ラジオボタンの選択肢)
 Top left corner 左上コーナー
 Bottom left corner 左下コーナー
 Bottom right corner 右下コーナー
 Top right corner 右上コーナー

Default zoom level デフォルトのズームレベル
Allow “scroll to zoom” 「スクロールしてズーム」を許可する
 (チェックを外すとマウスホイールのスクロールでのズーム機能が無効になります)