この記事では、WordPressプラグインである「不動産プラグイン」の物件詳細ページに画像スライダーとギャラリー機能を導入方法を解説しています。
デモページでスライダーとギャラリー機能を確認できるので、実装を検討していた方は、コピペで簡単にご利用できるようになります。
ファイルを編集する前には必ずバックアップを保存してから行ってください。
スライドショーとギャラリー機能には、スライドショーが作れるjQueryのプラグイン「slick」と、ギャラリー機能を実装できるjavascriptのプラグイン「Spotlight」を使用します。
スライダーとギャラリー機能を導入した利用環境
下記がスライダーとギャラリー機能を導入した利用環境です。
- WordPress6.0
- テーマ：Twenty Twenty-Two
- 不動産プラグインv6.0.0
- 画像スライダー：slick
- ギャラリー機能：Spotlight
不動産プラグインのファイルを編集しますがバージョンによって記述箇所が異なります。
slickのファイルをアップロード
不動産プラグインの物件詳細ページで画像スライダー機能を利用する準備として、「slick」のファイルを不動産プラグインのプラグインフォルダーにアップロードします。まずはslickの公式サイトのget it nowをクリックしてダウンロードできる場所まで移動して、Download Nowをクリックしてファイルをダウンロードしてください。
ダウンロードしたzipファイルを解凍して、slickというフォルダーの中に入っている下記のファイルを不動産プラグインのフォルダにアップロードしてください。
アップロード場所：/wp-content/plugins/fudou/themes
- slick.css
- slick-theme.css
- slick.min.js
- ajax-loader.gif
- fontsフォルダー（中に入っているファイル全て）
Spotlightのファイルをアップロード
不動産プラグインの物件詳細ページでギャラリー機能を利用する準備として、「Spotlight」のファイルを不動産プラグインのプラグインフォルダーにアップロードします。まずはSpotlightから「spotlight.bundle.js」をダウンロードしてください。
ダウンロードした「spotlight.bundle.js」を/wp-content/plugins/fudou/themesにアップロードしてください。
物件詳細ページの画像の大きさを変更
物件詳細ページの画像の大きさはデフォルトで幅150×高さ150に設定されているので、幅を100％に変更します。スタイルの変更はcssファイルを編集します。テーマがTwenty Twenty-Twoを使用しているので/wp-content/plugins/fudou/themesの「style2022.css」を編集します。
「style2022.css」の545行目から553行目を、下記のコードに編集してください。
/* 画像 1-10 min */
#list_simplepage2 .list_picsam img {
height: auto;
display: inline-flex;
/*margin: 0 5px 10px 5px;*/
padding: 0;
/*border: 1px solid #999;*/
width: 100%;
}marginとborderをコメントアウトして、widthを100%にしています。
この設定で物件詳細ページの画像の幅が100%になります。
画像スライダーとギャラリー機能を実装するためにファイルを呼び出す
画像スライダーとギャラリ機能を実装するためにアップロードしたファイルの呼び出すためのコードを追記します。追記するファイルは、テーマが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="<?php echo plugins_url( 'slick.css', __FILE__ ); ?>" /> <link rel="stylesheet" href="<?php echo plugins_url( 'slick-theme.css', __FILE__ ); ?>" /> <script type="text/javascript" src="<?php echo plugins_url( 'slick.min.js', __FILE__ ); ?>"></script> <script type="text/javascript" src="<?php echo plugins_url( 'spotlight.bundle.js', __FILE__ ); ?>"></script> </head>
以降、行数は追記したことにより元の行数より4行増えます。これより増えた後の行数と（）で元の行数を記述します。
画像スライダー「slick」の実装
編集するファイルは引き続き「single-fudo2022.php」です。238行目（元234行目）に//サムネイル画像とある箇所の3行下の241行目（元237行目）の空白部分に下記のコードを追記します。
echo '<div class="spotlight-group"><div class="slick">';
つづいて289行目（元285行目）を下記のコードに編集します。
$fudoimg_data1 = wp_get_attachment_image_src( $attachmentid, 'full');
つづいて、348行目（元344行目）の//携帯QRの1行上の347行目（元343行目）の空白部分に下記のコードを追記します。
echo '</div></div>';
つづいて、316行目（元312行目）と318行目（元314行目）の</a>の前に下記のコードを追記します。これにより画像の下に説明文と画像タイプが表記されます。
'.$fudoimg_alt.'
つづいて、1147行目（元1143行目）の</body>の前に下記のコードを追記します。
<script>
jQuery('.slick').slick({
focusOnSelect: true,
slideToShow: 1,
slidesToScroll: 1,
adaptiveHeight:true,
infinite:false,
});
</script>これでslickの画像スライダー機能が実装されました。
ギャラリー機能「Spotlight」を実装
編集するファイルは引き続き「single-fudo2022.php」です。265行目（元261行目）、314行目（元310行目）、331行目（元327行目）のaタグに「class=”spotlight”」を追記してください。
これでギャラリー機能が実装されました。
スライドショーの枚数上限を変更
不動産プラグインの物件詳細ページでは画像1から10までと画像11から20までの表示位置が異なります。
「single-fudo2022.php」の233行目（元229行目）と242行目（元238行目）の10を20に変更することにより、画像1から20までを同じ位置で表示できるようになります。
物件詳細ページ下部に表示される画像11から20までを非表示にするには、893行目（元889行目）から1005行目（元1001行目）を削除してください。
まとめ
サイトに記述しているコードをコピペするだけで、簡単に不動産プラグインの物件詳細ページに画像スライダーとギャラリー機能が導入できました。
上部の動画は「single-fudo2022.php」にコピペしている動画です。約4分弱でコピペが完了しているので、ファイルのアップロード、「style2022.css」の編集を合わせても約20分くらいで行うことができるかと思います。
