WordPressでダイナミックなスライダーを実装する
WordPressのサイトで、ACF(Advanced Custom Fields)を使用してスライダーを
ダイナミックに実装する方法を紹介します。
このコードは、複数のスライドを表示すると共に、
リンクに「target=”_blank”」を加える機能も含んでいます。
コードの概要
下記のコードは、ACFで定義したフィールドを使用して、ダイナミックにスライダーを表示する方法です。スライドのデータは配列で管理し、ループを使用して表示を行います。
大まかな処理は下記の通りです。
スライド情報を配列で管理
ACFでフィールドを定義し、スライド情報を配列で一括管理。
ACFからデータを取得
get_field()
を使用して、スライド画像、リンク、チェックボックスの値を取得。
プロパティの加工
チェックボックスに基づき、target="_blank"
を加工。
HTMLとPHPコード
下記のHTML構造を使用します。
<div class="swiper-wrapper">
<?php
// スライド情報を配列で管理
$slides = [
[
'image_field' => 'sliderimg01',
'link_field' => 'linktxt01',
'checkbox_field' => 'blanktxt01',
'alt_text' => 'スライド画像01',
],
[
'image_field' => 'sliderimg02',
'link_field' => 'linktxt02',
'checkbox_field' => 'blanktxt02',
'alt_text' => 'スライド画像02',
],
[
'image_field' => 'sliderimg03',
'link_field' => 'linktxt03',
'checkbox_field' => 'blanktxt03',
'alt_text' => 'スライド画像03',
],
[
'image_field' => 'sliderimg04',
'link_field' => 'linktxt04',
'checkbox_field' => 'blanktxt04',
'alt_text' => 'スライド画像04',
],
[
'image_field' => 'sliderimg05',
'link_field' => 'linktxt05',
'checkbox_field' => 'blanktxt05',
'alt_text' => 'スライド画像05',
],
];
// スライドを出力
foreach ($slides as $slide) {
// 1. 画像の値を取得
$image = get_field($slide['image_field']);
// 2. リンクの値を取得
$link = get_field($slide['link_field']);
// 3. チェックボックスの値を取得
$checked = get_field($slide['checkbox_field']);
// 4. チェックが入っている場合に target="_blank" を設定
$target = ($checked && in_array('open_in_new_tab', $checked)) ? ' target="_blank"' : '';
// 5. スライド表示を行う
if ($image): // 画像フィールドが存在する場合
?>
<div class="swiper-slide">
<div>
<?php if ($link): ?>
<a href="<?php echo esc_url($link); ?>"<?php echo $target; ?>>
<?php endif; ?>
<img src="<?php echo esc_url($image); ?>" alt="<?php echo esc_attr($slide['alt_text']); ?>">
<?php if ($link): ?>
</a>
<?php endif; ?>
</div>
</div>
<?php
endif;
}
?>
</div>
<div class="swiper-button-prev swiper-button-black"></div>
<div class="swiper-button-next swiper-button-white"></div>
ポイント解説
配列によるデータ管理
スライドの情報を配列 $slides
で管理し、
同じ構造のコードを繰り返しで変更なく出力できるようにしています。
get_field
を使用してACFのデータを取得
各スライドの情報を、get_field()
を通じて取得しています。
たとえば$slide['image_field']
: 画像のフィールド名。ACFで使用しているフィールド名をそのまま取得。$slide['link_field']
: リンクのフィールド名。$slide['checkbox_field']
: チェックボックスのフィールド名。
target="_blank"
の追加
チェックボックスに基づき、値が配列として取得されることを考慮して、in_array
を使用して判定しています。
$target = ($checked && in_array('open_in_new_tab', $checked)) ? ' target="_blank"' : '';
HTMLエスケープでセキュリティ安全を確保
esc_url()
でURLをエスケープ。esc_attr()
でalt値をエスケープ。
Swiperとの連携
Swiper.jsの構造とクラス名を活用することで、動的なスライダーを実現します。
まとめ
このコードを使用すると、ACFで定義したフィールドからダイナミックにスライダーを
表示することが可能です。
配列を使うことで、一定のパターンに基づいて動的にHTMLを生成できます。
これにより、コードの再利用性が高まり、メンテナンスの時間を短縮できます。
デザインや動作に合わせたカスタマイズも容易なため、
WordPressサイトの強力な機能の一部として活用できる方法です。
WordPressのカスタムフィールドを使って投稿の優先順位を設定する方法
2月 6, 2025WordPressでタグがある場合のみ表示する方法
2月 5, 2025カスタムフィールドとWP_Queryを活用した投稿分類
1月 28, 2025