☰
Written by Toshiki
»【事業サイト公開】お仕事のご依頼はコチラからお願いします！（21/11/10）

当ブログではアフィリエイト広告を利用しています

【WordPress】スライダーをカスタムフィールドから設定できるようにする

JavaScript Web制作 WordPress

こんにちは、トシキです。
今回は「スライダーをカスタムフィールドから設定できるようにする」方法について解説していきます。

先日こんなツイートをしました。

「クライアント自身が管理画面から設定できるようにしたい」
「スライダーのWordPressプラグインは使わずに済ませたい」

このような方に向けた内容となります。

本記事の内容

スライダーをカスタムフィールドから設定できるようにする

スポンサードサーチ

スライダーをカスタムフィールドから設定できるようにする

管理画面のカスタムフィールドから画像とテキストを投稿して、上記のように表示させます。

必要なもの

Splideの解説記事はPENGIN BLOGさんが分かりやすかったので、初めて使う方は一度目を通してみるのが良いかと思います。

01. ACF PROの設定

繰り返しフィールドでスライダーを追加するため、有料版であるACF PROを使用します。
なお、ACFの使い方についてはこちらの記事が参考になります↓

今回は、「スライダー画像」「タイトル」「テキスト」の3箇所カスタムフィールドを作成しますので、ACFの設定画面は最終的に以下の画像のようになります（クリックで拡大表示できます）。
先に表示させたい固定ページを選択してから設定を進めてください。
繰り返しフィールド名：「mv_slider」

画像のフィールド名：「slider_img」↓

画像の選択は必須項目にしているので、「Validation」→「Required」をONに。

タイトルのフィールド名：「slider_ttl」↓

テキストのフィールド名：「slider_txt」↓

これで固定ページの編集画面にカスタムフィールドが表示されます（クリックで拡大表示できます）↓

02. functions.php

functions.phpにCSSとJavaScriptを読み込んでいる記述があるかと思いますので、その中にSplideのCDNを追記します。

/**
 * CSSとJavaScriptの読み込み
 */
function my_script_init()
{

  // トップページのみSplideのCDN（CSSとJS）を読み込む
  if (is_front_page()) {
    wp_enqueue_style(
      'splide',
'https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/css/splide.min.css',
      array(),
      "4.1.4",
      'all'
    );
    wp_enqueue_script(
      'splide',
'https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js',
      array('jquery'),
      "4.1.4",
      true
    );
  }

}
add_action('wp_enqueue_scripts', 'my_script_init');

今回Splideはトップページのみ適用したかったので、is_front_pageを使い、他のページではCDNを読み込まないようにしています。
※読み込むページの指定は必須ではありませんが、不要なページでの読み込みは無駄なので条件分岐させています。

03. HTML


<div class="splide" aria-label="メインビジュアルスライダー">
  <div class="splide__track">
    <ul class="splide__list bl_slider">
      <li class="splide__slide">
        <div class="bl_slider_inner">
          <div class="bl_slider_body">
            <h2>スライダー①のタイトル</h2>
            <p>スライダー①の本文</p>
          </div>
        </div>
        <img class="bl_slider_img" src="<?php echo  get_theme_file_uri(); ?>/assets/images/mv_01.jpg" alt="" width="375" height="250">
      </li>
      <li class="splide__slide">
        <div class="bl_slider_inner">
          <div class="bl_slider_body">
            <h2>スライダー②のタイトル</h2>
            <p>スライダー②の本文</p>
          </div>
        </div>
        <img class="bl_slider_img" src="<?php echo  get_theme_file_uri(); ?>/assets/images/mv_02.jpg" alt="" width="375" height="250">
      </li>
      <li class="splide__slide">
        <div class="bl_slider_inner">
          <div class="bl_slider_body">
            <h2>スライダー③のタイトル</h2>
            <p>スライダー③の本文</p>
          </div>
        </div>
        <img class="bl_slider_img" src="<?php echo  get_theme_file_uri(); ?>/assets/images/mv_03.jpg" alt="" width="375" height="250">
      </li>
      <li class="splide__slide">
        <div class="bl_slider_inner">
          <div class="bl_slider_body">
            <h2>スライダー④のタイトル</h2>
            <p>スライダー④の本文</p>
          </div>
        </div>
        <img class="bl_slider_img" src="<?php echo  get_theme_file_uri(); ?>/assets/images/mv_04.jpg" alt="" width="375" height="250">
      </li>
    </ul>
  </div>
</div>

変更前の状態↑
変更後の状態↓


<div class="splide" aria-label="メインビジュアルスライダー">
  <div class="splide__track">
    <ul class="splide__list bl_slider">
      <?php if (have_rows('mv_slider')) : while (have_rows('mv_slider')) : the_row(); ?>
          <?php
          // 画像情報を配列で取得
          $acf_row_image = get_sub_field('slider_img');
          $url = $acf_row_image['url'];
          $alt = $acf_row_image['alt'];
          ?>
          <li class="splide__slide">
            <div class="bl_slider_inner">
              <div class="bl_slider_body">
                <h2><?php the_sub_field('slider_ttl'); ?></h2>
                <p><?php the_sub_field('slider_txt'); ?></p>
              </div>
            </div>
            <img class="bl_slider_img" src="<?php echo $url; ?>" alt="<?php echo $alt; ?>" width="375" height="250">
          </li>
      <?php endwhile;
      endif; ?>
    </ul>
  </div>
</div>

liをhave_rowsで囲み、sub_fieldで「画像」「タイトル」「テキスト」をそれぞれ取得表示できるようにします。
先ほど設定したフィールド名↓
繰り返し：「mv_slider」
画像：「slider_img」
タイトル：「slider_ttl」
テキスト：「slider_txt」

splideを含むクラス名について

.splideが含まれているクラス名はスライダーを動かす上で必須のため、削除したり書き換えたりしないようにしましょう！

04. CSS


.bl_slider li {
  aspect-ratio: 3/2;
  max-height: 700px;
}

.bl_slider_inner {
  display: grid;
  place-items: center;
  height: 100%;
}

.bl_slider_body {
  background-color: #ddd;
  padding: 1em;
  border-radius: 10px;
  color: #333;
}

.bl_slider_body h1 {
  font-size: 40px;
  background-color: orange;
  width: fit-content;
  padding: 0.5em;
}

.bl_slider_body p {
  font-size: 20px;
  background-color: greenyellow;
  width: fit-content;
  margin-top: 1em;
  padding: 0.5em;
}

.bl_slider_img {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: -10;
  width: 100VW;
  height: 100%;
  object-fit: cover;
}

.bl_slider_dots {
  gap: 1em;
}

.bl_slider_dots li button {
  position: relative;
  width: 16px;
  height: 16px;
}

.bl_slider_dots li button::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  margin: auto;
  background-color: #276478;
  border: 1px solid transparent;
  border-radius: 50%;
  transition: background-color 0.4s;
}

.bl_slider_dots button.is-active {
  transform: scale(1);
}

.bl_slider_dots button.is-active::before {
  background-color: transparent;
  border: 1px solid #ccc;
}

スタイルはお好みで設定してください。

ドットのスタイルに関して

ドットのHTMLはデフォルトで自動生成されるため、検証ツールで.splide__pagination内にあるbuttonおよび、button.is-activeを確認しながらCSSを調整してください。
今回は独自クラスの.bl_slider_dotsを使用していますが、次項のSplideのオプションからクラスを追加することができます。

05. JavaScript


// Webページの読み込みが完了した時に発動（画像などのリソース含まず）
window.addEventListener('DOMContentLoaded', function() {
  // ページ内にsplideクラスがないとエラーになるため、
　　　　// あった場合は読み込むようにif文で条件分岐。
　　　　const splideEl = document.querySelector('.splide');
  if (splideEl) {
    // Splideの記述
    new Splide('.splide', {
      // オプション
      arrows: false,// 矢印ボタンを非表示
      autoplay: true,// 自動再生を有効
      interval: 3000,// 自動再生の間隔3秒
      speed: 500,// スライダーの移動時間0.5秒
      type: 'fade',// スライダーの種類はフェード
      rewind: true,// 最後のスライダーになったら先頭に巻き戻す
      pauseOnHover: false,// マウスオーバーしたときに自動再生停止を無効
      pauseOnFocus: false,// スライダー内にフォーカスされたら自動再生停止を無効
      classes: {
        pagination: 'splide__pagination bl_slider_dots'// 独自のクラス名を追加
      }
    }).mount();
  }
});

new Splide〜.mount();の部分がSplideの記述になります。
この中に必要に応じて、オプションを記述してください。
先ほど出てきた.bl_slider_dotsは、classesのpaginationに追記することでクラスが適用されます。

if (splideEl)について

Splideの存在しないページにアクセスするとエラーになるため、HTMLの読み込みが完了したタイミングで.splideクラスの有無を確認し、存在すればSplideを読み込むようにしています。

ここまでの設定で、管理画面からスライダーを自由に追加できるようになりました。
無事に読み込めれば、ソースコードはこのようになります（クリックで拡大表示できます）↓

06. まとめ

今回のポイント

  • .splideを含むクラス名は、削除したり書き換えたりしない
  • 自動生成されるHTMLもあるので、CSSを調整する際は検証ツールで確認
  • JavaScriptのSplideの記述は、.splideクラスがあるページのみ読み込むようにする（複数ページのWordPressサイトならば必須）

以上になります。

この記事が役に立ったら、応援してくれると嬉しいです！ 投げ銭で応援する
 

人気記事Webサイトにフォントサイズ変更ボタンを実装する方法（jQuery使用）

人気記事【脱jQuery】スクロールしたら画面上部に追従メニューを表示する方法


RELATED

【Splide】画面内に入ったらスライダーを自動再生させる...

JavaScript

スポンサードサーチ

HOME >  JavaScript >  【WordPress】スライダーをカスタムフィールドから設定できるようにする