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」を選択し、プラグインの詳細な設定を行うこともできます。パノラマを個別に設定する場合は、ショートタグに記述します。
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” 「スクロールしてズーム」を許可する
(チェックを外すとマウスホイールのスクロールでのズーム機能が無効になります)
