スライダーの画像をWordPress管理画面から変更可能にした実務経験について

2023年10月24日
デモ
HTML/CSS, JavaScript, WordPress

デモ

はじめに

この記事では、実務経験であった、HTMLの知識がない方でもカスタム投稿タイプの個別ページにスライダーを設置し、管理画面から簡単に変更できる手法について解説します。スライダーの実現には「slick.js」を使用し、「Smart Custom Fields」プラグインを活用して画像の変更を可能にします。

1 はじめに
2 使用ライブラリ
3 実装手順
4 完成したスライダー
5 まとめ
6 その他のスライダー

使用ライブラリ

下記のようなスライダーのボタンとメイン画像を連動させる必要があるスライダーを作成する指示だったため、slick.jsを選択しました。

実装手順

1．プラグインの導入

まずは「Smart Custom Fields」プラグインをインストールして有効化します。これにより、カスタムフィールドを利用してスライダーの画像を管理画面から変更できるようになります。

2．スライダーの設定

カスタム投稿タイプの各記事編集画面で、スライダー画像を管理画面から指定できるように設定します。

繰り返しフィールドを使用し、slider__listというグループ名を指定して設定します。

「グループ名」と「名前の部分」に入力する文字は任意ですが、日本語ではなく英語にしてください。

表示条件の部分は適宜変更してください。実際の案件ではカスタム投稿の個別記事ですが、自分のWordPressのため「投稿」を選択しています。

「公開」をすると投稿にスライダーの画像を入力する欄ができています。

画像を選択でスライダーにしたい画像を指定すればOKです。またスライダー画像の「+」をクリックすることでスライダー画像を挿入する欄が増えるため、好きな枚数だけ指定することが可能です。

3．ショートコードの作成

functions.phpにショートコードを追加します。このショートコードは、指定したグループ名からカスタムフィールドの値を取得してスライダーを表示します。

functions.phpに下記のソースコードを入力します。functions.phpを編集する前にバックアップをとってください。

今回はショートコードで作成しました。

function custom_slider_shortcode() {
  // グループ名「slider__list」のカスタムフィールドの値を取得
  $slider__list = SCF::get('slider__list');
  ob_start();
  ?>
  <div class="slider-wrapper">
  <!-- メインの画像 -->
    <div id="slider01">
      <?php
        foreach ($slider__list as $slider__item) :
          // 管理画面で入力した画像のURLを取得
          $imgUrl = wp_get_attachment_image_src($slider__item['slider__img'], 'full');
          echo '<div class="slick-slider-item">';
          // 配列$imgUrlのインデックス番号0にURLが格納されている
          echo '<img src="' . $imgUrl[0] . '" alt="スライダー">';
          echo '</div>';
        endforeach;
      ?>
    </div>
    <!-- ボタン部分のスライダー -->
    <div id="slider02">
      <?php
        foreach ($slider__list as $slider__item) :
          $imgUrl = wp_get_attachment_image_src($slider__item['slider__img'], 'full');
          echo '<div class="slick-slider-item02">';
          echo '<img src="' . $imgUrl[0] . '" alt="スライダー">';
          echo '</div>';
        endforeach;
      ?>
    </div>
</div>
<?php
  return ob_get_clean();
}
add_shortcode('custom_slider', 'custom_slider_shortcode');

4．スライダーのJavaScriptの設定

必要なJavaScriptライブラリを読み込み、スライダーの設定を行います。jQuery、slick.min.js、スライダーのスクリプトの順番で記載してください。ボタンになるスライダーは、asNavForオプションでメイン画像のスライダーと連動するように設定します。

一応今回はjQueryも書きましたが、WordPress環境ではデフォルトで読み込まれているので環境よっては読み込まなくても大丈夫です。ご自分の環境に合うように適宜変更していただければと思います。また「$」をそのまま記載するとWordPressでは「typeerror $ is not a function」とエラーが発生するため、自分はいつもに「jQuery」と記述しています。

ボタンになる方のスライダー(#slider02)のasNavForにメインの方のスライダー(#slider01)を指定すると、スライダーのボタンとメインのスライダーが連動するようになります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script>
jQuery(document).ready(function(){
    jQuery('#slider01').slick({
        arrows: false,
    });
    jQuery('#slider02').slick({
        asNavFor: '#slider01',
        autoplay: true,
        slidesToShow: 4,
        slidesToScroll: 1,
        centerMode: true,
        focusOnSelect: true,
        responsive: [
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 2,
                },
            },
        ],
    });
});
</script>