MENU
WordPress

カスタムフィールドを利用して、管理画面から画像登録ができるスライダーのつくりかた

カスタムフィールドを利用して、管理画面から画像登録ができるスライダーのつくりかた
designchips

WEBサイトのメインビジュアル画像を管理画面から登録・編集・削除ができるようにしたい！これができると、サイト納品後にお客様が管理画面から画像を自由に変更できるようになるので、大変便利です。HTMLやPHPコードがよくわからないWEB担当者しか会社や店舗にいなくて困っている管理者はとても多いので、メインビジュアルを誰でも変更できる仕様になっているのは嬉しいですよね。さらに今回は、トップページのメインビジュアルをスライダーにする方法も合わせて解説します。

WordPressの管理画面からメインビジュアル画像を変更できると、毎回修正依頼を受ける必要なく、管理者が自由に変更できるのでうれしいですね！

女性A
女性A
Contents

はじめに

今回使用するプラグインは「Advances Custom Fields（通称ACF）」、そしてスライダーを実装するのにJavaScriptのライブラリの「Swiper」を利用します。jQueryの読み込みも不要です。

まずは、管理画面にメインビジュアル画像の登録項目を作成し、それをトップページに表示するための記述を作成。さらに、それをスライダーにするためのJavaScriptの記述と読み込みという流れで進めていきますので、順を追って見ていきましょう。

01.ホームページの表示設定を確認

まずはじめに、WordPressは基本的にブログ投稿を目的としたCMSであるため、トップページが「最新の投稿」を読み込むページに設定されています。

今回はWEBサイトのトップページにスライダーを設置したいので、「最近の投稿」ではなく「固定ページ」の「フロントページ」をホームページ（ドメインにアクセスがあった際に、最初に表示されるページ）に設定しておくようにします。

WordPress管理画面の「設定」＞「表示設定」＞ホームページの表示＞「固定ページ」にチェックを入れ、ホームページを「フロントページ」を選択します。

Homepage

ここで「フロントページ」が表示されない場合は、自分で「固定ページを追加」から「フロントページ」というタイトルの固定ページを新規で作成すればOKです。

Front page

02.Advanced Custom Fieldsをインストール

WordPress管理画面＞プラグイン＞プラグインを追加から「Advanced Custom Fields」で検索します。

Advanced Custom Fieldsをインストール

インストールが完了したら「有効化」しましょう。

または、「Advanced Custom Fields」からダウンロードしてFTPからアップロードして有効化します。

03.フィールドグループを新規作成

Advanced Custom Fieldsを有効化したら、管理画面メニューから「ACF」＞「フィールドグループ」を開きます。

Field

フィールドグループ画面を開いたら「+新規追加」ボタンを押してフィールドグループの設定をしていきます。

Add

今回はスライダーを作成しますが、「5枚画像を登録」できる仕様にし、PCとSP（スマホ）で別の画像を登録できるようにしたいと思います。

まずは、フィールドグループ（スライダー画像の登録項目）を作成していきましょう。
フィールドグループを編集の入力欄には「メインビジュアル画像」と入力します。どの部分のフィールドか自分でわかるような名前であれば何でもOKです。

Field

次にラベルの下にある「フィールドタイプ」のプルダウンから「グループ」を選択します。ここでは、PC画像とSP画像をグループとして登録するために「グループ」を選択しておきます。

そして「フィールドラベル」には「メインビジュアル1」と入力し、スライド画像の「1枚目」であることをわかるようにしておきます。

そして次に「フィールド名」には「main_visual1」と入力します。ここに入力する名前は日本語ではなく、phpコード内で呼び出しやすい名前に設定しておきましょう。

phpの記述でこの「フィールド名」を指定するので、必ず英語や数字でわかるように登録しておくようにしましょう！

コーダー
コーダー

04.サブフィールドを登録

続けてその下にある「サブフィールド」の項目も登録していきます。このサブフィールドでは「PC画像」と「SP画像」を登録するフィールドを作成して『○○という名前を付けておきますよ！』という内容です。

サブフィールド（PC画像）

まずは、「フィールドタイプ」のプルダウンから「画像」を選びます。
次に「フィールドラベル」には「PC画像」と入力、「フィールド名」には「pc_image」と名前を付けておきます。

Subfield

そして、「戻り値の形式」という項目では「画像ID」にチェックを入れて、「ライブラリ」では「すべて」にチェックを入れてください。

サブフィールド（SP画像）

次に、SP画像のサブフィールドを設定していきます。「フィールドタイプ」のプルダウンから先程と同じように「画像」を選びます。次に「フィールドラベル」には「SP画像」と入力、「フィールド名」には「sp_image」と名前を付けておきます。

Sp field

そして、「戻り値の形式」という項目では「画像ID」にチェックを入れて、「ライブラリ」では「すべて」にチェックを入れてください。最後に「レイアウト」の項目を「行」にチェックを入れて「保存」します。

Pc sp

これで、サブフィールドの「PC画像」と「SP画像」の設定が完了しました。ここまででスライダーの「1枚目」の画像を登録するためのフィールド「メインビジュアル1」が設定できましたので、「メインビジュアル1」を「複製」して、「メインビジュアル2」「メインビジュアル3」「メインビジュアル4」「メインビジュアル5」を作成します。

Field fukusei

複製したフィールドで書き換えるのは「フィールドラベル」を「メインビジュアル2」とそれぞれ数字を変えるのと、「フィールド名」の部分を「main_visual2」とここの数字を変えます。

それ以外の、サブフィールドの「フィールドラベル」である「PC画像」や「フィールド名」の「pc_image」などは、変更する必要はなく同じ名前で登録しておいて問題ありません。「戻り値の形式」も変更なく「画像ID」で「ライブラリ」も「すべて」のままにして複製します。

複製して「メインビジュアル1」～「メインビジュアル5」までフィールドを作成できたら、一番下の「設定」の「ロケーションルール」の欄に、「このフィールドグループを表示する条件」として「固定ページ」「等しい」「フロントページ」を選び「変更内容を保存」をクリックしてください。

Front

これで、固定ページの「フロントページ」編集画面に、スライド画像を登録するフィールドが表示されるようになります。

05.固定ページのフロントページで画像登録フィールドを確認

ここまでのACF設定が完了すると、固定ページの「フロントページ」にフィールドグループの登録項目が表示されるようになっているはずです。

固定ページの「フロントページ」の編集画面を開いて、下の方にある「メタボックス」をクリックすると、「メインビジュアル画像」という登録項目が表示されるようになります。

Metabox

メタボックスをクリックすると下の「画像を追加」画面が表示されます。

List

「画像を追加」から

SPslider

ここまでが、AFCでのフィールドグループの設定と管理画面での表示設定になります。ただ、このままでは、表側のトップページにスライダーはまだ表示されていません。

残りは、スライダーをトップページ（フロントページ）で表示するためにJavaScriptのライブラリ「Swiper」の設定とファイルの読み込み（JSやCSS）、さらにはAFCで登録したフィールドグループの内容を出力するために「front-page.php」の中身を編集する作業が必要です。

一旦、ここでコーヒーブレイクしておきましょう！
この後はphpの記述やオプション設定などがあります！

DesignChips
DesignChips

この後は、スライダーを実装するためにSwiperという便利なJavaScriptライブラリを使用していきます。様々なカスタマイズ設定も可能なので、イメージ通りのスライダーを組み込むことができるはずです。既に別の機会で使用したことがある方は、必要箇所だけ抜粋して進めてください。

06.Swiperライブラリをサイトに読み込む

Swiperとは、画像スライダーを簡単に実装できる、JavaScriptライブラリのひとつです。さらにはjQueryなしでも動きます。まずは、CDNでSwiperに必要なファイルを読み込みましょう。

Swiper

Swiper CDN

Use Swiper from CDNの下に記載してある以下のコードを確認し、header.phpの</head>より上に「swiper-bundle.min.css」を記載しCSSを読み込み、footer.phpの</body>タグの直前に「swiper-bundle.min.js」を記載して「swiper-bundle.min.js」を読み込みます。

Include

header.phpに「swiper-bundle.min.css」を読み込む

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"/>

footer.phpに「swiper-bundle.min.js」を読み込む

<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>

07.Swiperを出力するコードを記述する

次にfront-page.phpを編集してメインビジュアル画像を表示するコードを記述していきます。

PHPを記述（front-page.php）

以下のコードを、front-page-phpのスライダーを表示したい場所に記述してください。

<div class="wrapper">
 <!--// MainVisual Slider //-->
 <div class="main-visual mainSlider">
  <div class="swiper">
	<div class="swiper-wrapper">
      <?php
        $main_visuals = array('main_visual1', 'main_visual2', 'main_visual3', 'main_visual4', 'main_visual5');
        foreach ($main_visuals as $main_visual) :
        	if (have_rows($main_visual)) :
        		while (have_rows($main_visual)) : the_row();
        			get_template_part('slide-main-visual');
        		endwhile;
        	endif;
        endforeach;
      ?>
	</div>
	<!-- ページネーションを追加するときは以下を追加 -->
	<div class="swiper-pagination"></div>
 	</div>
 </div>

 <div id="content">
  <div class="container">
    <section class="conts"></section>
    <section class="conts"></section>
    <section class="conts"></section>
  </div>
 </div>
</div>

<div id=”content”>　…　<div>の部分は適当に下のエリアに何かを配置する想定で記述していますので、不要であれば消してください。

エンジニア
エンジニア

少しここのphp構文について解説を入れておきます。
“細かいことはどーでもいーよー”という方は飛ばして次へ進んでください。

6行目からのphpの中身を解説すると、

$main_visuals = array(‘main_visual1’, ‘main_visual2’, ‘main_visual3’, ‘main_visual4’, ‘main_visual5’);

こちらの一行は「変数$main_visuals」を宣言し、その変数の中に「’main_visual1′, ‘main_visual2’, ‘main_visual3’, ‘main_visual4’, ‘main_visual5’」を格納しています。

foreach ($main_visuals as $main_visual) :

この部分は、配列された複数のメインビジュアル画像（$main_visual）を順番に取り出し、HTMLとして出力するためのループ処理です。

if (have_rows($main_visual)) :
　while (have_rows($main_visual)) : the_row();
　　get_template_part(‘slide-main-visual’);
　endwhile;
endif;

if (have_rows($main_visual)) : は、指定したフィールド（$main_visual）にデータが存在するかどうかをチェックしています。

while (have_rows($main_visual)) : the_row(); では、データが存在する場合、データの数だけループ処理を開始します。

get_template_part(‘slide-main-visual’); では、ループの際に毎回「slide-main-visual.php」というテンプレートパーツを読み込み出力（表示）します。

テンプレートパーツを新規作成（slide-main-visual.php）

ループ処理の中にある「get_template_part(‘slide-main-visual’); 」でテンプレートファイルを読み込んでいますが、新規で「slide-main-visual.php」を作成しルートディレクトリに配置する必要があります。

記述するコードは以下をコピペでOKです。AFC設定でPC画像とSP画像の項目を作成する際に付けた「サブフィールド名」の「pc_image」と「sp_image」を指定しPC画像、SP画像それぞれの画像IDを取得し、if文で振り分け、「echo wp_get_attachment_image_url($image_id, ‘画像サイズ’);」とそれぞれのURLを呼び出しています。

新規でjsファイルを作成し、以下のコードをコピペして「slide-main-visual.php」という名前でルートディレクトリに保存すればOKです！

コーダー
コーダー 
<div class="swiper-slide">
    <div class="slide-img" style="background-image: url(<?php
        $image_id = get_sub_field('pc_image');
        $image_sp_id = get_sub_field('sp_image');
        if (!wp_is_mobile()) {
            echo wp_get_attachment_image_url($image_id, 'full');
        } else {
            echo wp_get_attachment_image_url($image_sp_id, 'large');
        } ?>);"></div>
</div>

CSSを記述（style.css）

メインビジュアル画像のスライダーを画面横幅いっぱいに表示したいので、「.wrapper」のwidthを100%、「.main-visual」と「.swiper」のwidthも100%、heightを100vhに指定しています。

.wrapper {
  width: 100%;
}

/* メインビジュアルスライダー */
.main-visual {
  width: 100%;
  height: 100vh;
}
.swiper {
  width: 100%;
  height: 100vh;
}
.slide-img {
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100%;
}
#content .container {
  max-width: 1400px;
  padding: 0 60px; 
  margin: 0 auto;
  background-color: rgba(15,10,10,0);
}
.conts{
  background: #ccc;
  width: 100%;
  height: 300px;
  margin: 1% 0;
}

/* メインビジュアル画像をゆっくり拡大させたい場合は以下を記述 */
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img {
  /* 10秒かけてゆっくり拡大 */
  animation: zoomUp 10s linear 0s both;
}
@keyframes zoomUp {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  100% {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
  }
}

※33行目から下は、スライド画像を表示している時間の間、わずかにズームさせて動きのある表現をしたいため設定しています。不要であれば33行目以降は必要ありません。

JavaScriptを記述（js/main-slider.js）を新規作成

新規で「main-slider.js」を作成し、ルートディレクトリに「js」フォルダを作成しその中に格納します。

( function() {
	const mySwiper = new Swiper('.swiper', {
		effect: 'fade', //フェード機能をONにする
		lazy: true, //遅延読み込み
		fadeEffect: {
			crossFade: true,
			transformEl: 'img'
		},
		loop: true, //スライダを繰り返す
		loopAdditionalSlides: 1,
		speed: 2000, //2.0秒かけてスライド
		autoplay: { //自動再生する
			delay: 5000, //5.0秒ごとにスライダを切り替える
			disableOnInteraction: false, //スライドやナビにマウスを合わせても停止しない
			waitForTransition: false,
		},
		followFinger: false,
		direction: 'vertical', //ページネーションを右に縦並びに配置
		pagination: { //ページネーションを追加
			el: '.swiper-pagination',
			clickable: true,
		},
	});
}()
);

細かいカスタマイズが可能なプロパティがこの他にもたくさん用意されています。英語での説明になりますので翻訳しながら設定してみるのも良いかもしれません。

08.Swiperのカスタマイズ参考

今回のカスタマイズとはもう少し違った表現をしたい場合は、Swiper APIやDEMOページを参考にしてみてください。

Swiper API

またスライダーのデモを見てお好みの設定を探してみてください。

Swiper DEMO

関連記事
こんな記事も読まれています
記事URLをコピーしました