【WordPress】カスタムフィールドで画像のカルーセルスライダーを表示させる方法!

最大52%OFF!

今、ブログを始めようとしている方、

今なら、ConoHaサーバーの「WINGパックプラン」が最大55%OFF!

「1,452円/月」が「643 円/月」の「低コスト」で始められるチャンスとなっております!

お申し込みはこちらから!

美雲このは

ConoHa WINGは国内最速の高性能レンタルサーバーサービスで
初期費用無料、最低利用期間無しでご利用いただけます!




(この記事は2022年3月4日に投稿されました。)

WordPressではカスタムフィールドを使用することで、画像をカルーセルスライダーとして表示することができます。

そもそもカスタムフィールドとは画像や文字、URLなどをさまざまなページに追加することができるWordPresで用意されている編集機能の一つとなります。

つまり、こちらの機能を使用すると、入力した値を表示したい箇所に表示することができ、画像をカルーセルスライダーとして表示できるということです。

しかし、コードを少し修正する必要がありますので注意が必要です。

少し難しく感じるかと思いますが一度作成すると、カスタムフィールドに画像のURLを入力するだけで画像をカルーセルスライダーとして表示することができるようになります。

そのため、さまざまな記事にカルーセルスライダーを使用する場合はこちらの方法をおすすめします。

今回はWordPressのカスタムフィールドで画像のカルーセルスライダーを表示させる方法について紹介していきます。

この記事はこんな方におすすめ
・カルーセルスライダーを設置したい人
・毎回、簡単にカルーセルスライダーを作成したい人

カスタムフィールドとは

カスタムフィールドとはWordPresで用意されている編集機能の一つであり、追加したい画像や文字、URLなどをさまざまなページに追加することができます。

しかし、カスタムフィールドが搭載されているテーマもありますが、搭載されていないテーマもありますので注意してください。

その場合はプラグインを使ってカスタムフィールドを使用できるようにしましょう。

カスタムフィールドで画像のカルーセルスライダーを表示させる方法

ここではカスタムフィールドでカスタムフィールドで画像のカルーセルスライダーを表示させる方法について紹介していきます。

方法としては下記のような手順となります。

1
カスタムフィールドを設定する
どのカスタムフィールドを設置するのか設定する。
2
カスタムフィールドのコードを追記する
テーマのPHPファイルにカスタムフィールドのコードを追記する。
3
カスタムフィールドに挿入したい文字や画像などを入力する
投稿の編集画面のカスタムフィールドに挿入したい文字や画像などを入力する。

それぞれの手順について詳しくご紹介していきます。

カスタムフィールドを設定する

まずは、カスタムフィールドを設定します。

今回はどのテーマでもカスタムフィールドを使用できるよう「Advanced Custom Fields」というプラグインを使用します。

インストールが完了しましたら、左側のメニューに[カスタムフィールド]がありますので[新規追加]をクリックします。

すると、カスタムフィールドを作成する画面が表示されますので、下記の動画のように設定していきます。

動画では「スライド2」まで作成していますが、今回は「スライド7」まで作成していきます。

そのため、下記の画像のようにできましたらカスタムフィールドを設定は完了です。

カスタムフィールドのコードを追記する

続いて、カスタムフィールドのコードを追記していきます。

先ほどの手順でカスタムフィールドの枠を作成できましたので、続いては投稿ページのどのあたりに設置するのかをコードで追記していきます。

今回はCDNのslickを使ってカルーセルスライダーを表示させていきます。

もし、slickのCDNの使い方について知りたい人は下記の記事をご参考ください。
(クリックすると該当する部分に飛びます。)

すると、先ほど作成したカスタムフィールドを設置しようとすると下記のようなコードになります。

⚫︎ header.php

⚫︎ single.php

⚫︎ footer.php

何を書いているか分からない人もいるかと思いますので、コードについて解説していきます。

コードの簡単な解説
  1. header.phpではjQyeryのファイルとslick.jsのCSSファイルを指定
  2. footer.phpではslick.jsのJSファイルを指定し、かスーセルスライダーを表示するslick()を使用している
  3. single.phpではカスタムフィールドで入力された値をカルーセルスライダーとして表示する
    (the_field()の引数には「Advanced Custom Fields」で作成したフィールドの「フィールド名」を指定しており、
    get_field()では指定したフィールド名に値があるか確認している)
  4. if文を使ってカスタムフィールドの値が空でないことを条件として処理を分岐させている
    (スライド2以降に値が入っているとカルーセルスライダーになり、スライド1のみに値が入っているとシンプルな画像の表示となる)

カスタムフィールドに挿入したい文字や画像などを入力する

コードの入力が完了しましたら、カスタムフィールドに挿入したい文字や画像などを入力していきます。

今回はデフォルトで設定していますので投稿ページに表示されるようになります。

そのため、投稿の編集ページの下を見ると、先ほど作成したカスタムフィールドが追加されており、今回はスライド1からスライド7までが表示されてます。

そして、下記の画像のようにスライド1からスライド7までのカスタムフィールドの値に画像のURLをコピーして貼り付けていきましょう。

画像のURLをコピーする方法
  • [メディアを追加]をクリック
  • 挿入したい画像を選択
  • 右側のメニューから[URLをクリップボードにコピー]をクリック
  • 挿入したい箇所に貼り付け
  • カスタムフィールドに画像のURLが追加できましら、[更新]か[公開]をクリックします。

    これで設定は完了です。

    実際にカスタムフィールドで画像のカルーセルスライダーを表示させてみた

    実際にカスタムフィールドで画像のカルーセルスライダーを表示させてみました。

    すると、下記の画像のようにカルーセルスライダーが表示されます。

    ⚫︎ スライド1から7まですべてに値を入力した場合

    ⚫︎ スライド1のみに値を入力した場合

    カスタムフィールドに画像のURLを入力することで、7枚の画像がカルーセルスライダーとして表示されています。

    また、画像がスライド1のみの場合はシンプルな一枚絵として表示されています。

    これでカスタムフィールドに画像のURLを入力するといつでもカルーセルスライダーを表示することができます。

    Sossy

    カスタムフィールドに画像のURLを入力するだけでカルーセルスライダーを表示することができました。
    もし、画像の大きさや位置などが気になる場合はCSSで調整しましょう。

    まとめ

    ⚫︎ カスタムフィールドとは追加したい画像や文字、URLなどをさまざまなページに追加することができるWordPresで用意されている編集機能の一つ

    ⚫︎ カスタムフィールドで画像のカルーセルスライダーを表示させるには下記の手順となる
    ・カスタムフィールドを設定する
    (「Advanced Custom Fields」というプラグインがおすすめ)
    ・カスタムフィールドのコードを追記する
    (the_field()でカスタムフィールドに入力した値を出力)
    ・カスタムフィールドに挿入したい文字や画像などを入力する
    (編集のページに作成したカスタムフィールドが表示される)