この記事では、不動産プラグインの物件詳細ページにパノラマ写真表示を設置する方法を解説していきます。不動産プラグインの拡張プラグインで不動産パノラマプラグインがありますが、35,200円（税込）と高価でしたのでjQueryプラグインの「pannellum」を利用して物件詳細ページにパノラマ写真を表示する機能を作成しました。
ファイルを編集する前に必ずバックアップを保存してください。
レインズの物件詳細データをコピペで物件登録できるワードプレスプラグイン「all in one 不動産」のライセンスキー（1年間）をstoresのJISAKU-HPショップにて5,500円（税込）で販売しています。
レインズの物件詳細データをコピペで物件登録できるワードプレスプラグイン「all in one 不動産」のライセンスキー（1ヶ月）をstoresのJISAKU-HPショップにて1,100円（税込）で販売しています。
パノラマ写真表示を導入した利用環境
下記がパノラマ写真表示を導入した利用環境です。
- WordPress6.0
- テーマ：Twenty Twenty-Two
- 不動産プラグインv6.0.0
不動産プラグインのファイルを編集しますがバージョンによって記述箇所が異なります。
Pannellumのライブラリを読込む
Leafletのライブラリを読み込むためにコードを追記します。追記するファイルは、テーマがTwenty Twenty-Twoを使用しているので/wp-content/plugins/fudou/themesの「single-fudo2022.php」を編集します。
「single-fudo2022.php」の52行目から記述している<head>～</head>を、下記のコードに編集してください。
<head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <?php wp_head(); ?> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> </head>
以降、行数は追記したことにより元の行数より2行増えます。これより増えた後の行数と（）で元の行数を記述します。
パノラマ写真のCSSを追記
「style2022.css」の最後に、下記のコードに編集してください。
/* ------------------------------
360viewer
------------------------------ */
.viewer360 .screenWrap {
margin: 0 auto;
width: 100%;
height: 500px;
position: relative;
z-index: 1;
}
.viewer360 .screenWrap .prev,
.viewer360 .screenWrap .next {
top: 50%;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 20px;
position: absolute;
display: block;
text-align: center;
background: #fff;
border: #555 1px solid;
transform: translateY(-50%);
transition: all 0.5s ease;
opacity: 0.5;
z-index: 2;
}
.viewer360 .screenWrap .prev {
left: 20px;
}
.viewer360 .screenWrap .next {
right: 20px;
}
.viewer360 .screenWrap .prev:hover,
.viewer360 .screenWrap .next:hover {
opacity: 0.8;
}
.viewer360 .screenWrap .prev:after,
.viewer360 .screenWrap .next:after {
content: '';
top: 0;
left: 0;
width: 60px;
height: 60px;
line-height: 60px;
font-size: 20px;
position: absolute;
display: block;
text-align: center;
transition: all 0.5s ease;
}
.viewer360 .screenWrap .prev:after {
content: '＜';
}
.viewer360 .screenWrap .next:after {
content: '＞';
}
.viewer360 #screen {
width: 100%;
max-width:1000px;
margin:0 auto;
position: relative;
}
.viewer360 nav {
margin: 20px auto;
}
.viewer360 nav a {
margin: 0 10px;
width: 160px;
height: 80px;
line-height: 60px;
text-align: center;
display: inline-block;
overflow: hidden;
background-size: cover;
box-sizing: border-box;
transition: all 0.5s ease;
opacity: 0.5;
}
.viewer360 nav a:hover {
opacity: 1;
}
.viewer360 nav a.active {
opacity: 1;
}パノラマ写真の実装
「single-fudo2022.php」の1145行目（元1143行目）の</body>の前にコードを追記します。
<?php if(count($fudopanorama_data) > 0):?>
jQuery(function(){
var setElm = jQuery('.viewer360'),
imgType = ".jpg";
setElm.each(function(){
var self = jQuery(this),
setScreen = self.children('div').attr('id'),
setNum = self.attr('data-num'),
setImgPass = self.attr('data-pass');
self.children('div').wrapAll('<div class="screenWrap"></div>').end().append('<nav></nav>');
var thisNav = self.find('nav');
if(setNum > 0){
for (var i=0; i<setNum; i++) {
thisNav.append('<a href="javascript:void(0);" style="background-image: url(<?php echo $upload_dir['url'].'/'; echo substr($fudopanorama_data[1], 0, strcspn($fudopanorama_data[1], '_'));?>_' + (i+1) + '"></a>');
}
}
thisNav.find('a').click(function(){
self.find('.pnlm-ui.pnlm-grab, .pnlm-render-container').addClass('targetHide');
setTimeout(function(){self.find('.targetHide').remove();},600);
var acvPos = jQuery(this).index()+1;
pannellum.viewer(setScreen, {
"panorama": setImgPass + acvPos + imgType,
"autoLoad": true,
"hfov": 120
});
thisNav.find('a').removeClass('active');
jQuery(this).addClass('active');
});
thisNav.find('a:first').click()
});
});
jQuery(function(){
jQuery(window).on("load", function(){
jQuery('.viewer360').fadeIn("slow");
});
});
<?php endif;?>つづいて、891行目（元889行目）から1003行目（元1001行目）を、下記のコードを編集します。
<?php
//画像 パノラマ写真 21～30
if( $fudou_img_max > 20 ){
$fudopanorama_data = array();
for( $imgid=21; $imgid<=$fudou_img_max; $imgid++ ){
$fudoimg_data = get_post_meta($post_id, "fudoimg$imgid", true);
$fudoimgcomment_data = get_post_meta($post_id, "fudoimgcomment$imgid", true);
if($fudoimg_data != ''){$fudopanorama_data[] = $fudoimg_data;}
} // for loop
echo '<div class="viewer360" data-num="'.count($fudopanorama_data).'" data-pass="'.$upload_dir['url'].'/';
echo substr($fudopanorama_data[1], 0, strcspn($fudopanorama_data[1], '_'));
echo '_"><div id="screen"></div></div>';
} ?>パノラマ写真の選択
物件詳細ページに表示したいパノラマ写真は、物件編集画面で画像21から画像30に登録していただき、下記の名称に設定してください。
「任意の名称_*.jpg」で*は連番です。
（例）c41_1.jpg、c41_2.jpg、c41_3.jpg
まとめ
コピペするだけで簡単に不動産プラグインの物件詳細ページにパノラマ写真が表示できました。
