Pannellumを利用して不動産プラグインの物件詳細ページにパノラマ写真を表示

この記事では、不動産プラグインの物件詳細ページにパノラマ写真表示を設置する方法を解説していきます。不動産プラグインの拡張プラグインで不動産パノラマプラグインがありますが、35,200円（税込）と高価でしたのでjQueryプラグインの「pannellum」を利用して物件詳細ページにパノラマ写真を表示する機能を作成しました。

ファイルを編集する前に必ずバックアップを保存してください。

チャンネル登録をお願いいたします。

JISAKU-HP会員メニュー

パノラマ写真表示を導入した利用環境
Pannellumのライブラリを読込む
パノラマ写真のCSSを追記
パノラマ写真の実装
パノラマ写真の選択
まとめ

パノラマ写真表示を導入した利用環境

下記がパノラマ写真表示を導入した利用環境です。

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>';
							}						?>