🎃

スライダー(Swiper)をwordpress管理画面から操作できるようにする

2024/10/21に公開

WordPress

swiper

スライダー

tech

wordpressのトップページで、swiperによるスライダーを使っています。
画像はダミー

ある日ディレクターから、
『TOP画面で使っているスライダーを、管理画面側から修正できるようにしたい』
と要望があったので改修した。

考えた流れは、

スライダー用のカスタム投稿タイプを作る
↓
画像をメディアライブラリから登録できるようにする。
↓
TOPページから関数で呼び出してスライダーにmapする

chatGPTもあるし、多分いけるやろ・・・！

functions.phpの修正

カスタム投稿タイプを追加するために、functions.phpを修正する。

この記事を参考にします。

swiperについては各自用意してください。

function create_post_type() {
  register_post_type(
    'slider',
    array(
      'label' => 'スライダー',
      'public' => true,
      'has_archive' => true,
      'show_in_rest' => true,
      'menu_position' => 5,
      'supports' => array(
        'title',
        'editor',
        'thumbnail',
        'revisions',
      ),
    )
  );
}

まずは管理画面のメニューバーに
『スライダー』カスタム投稿タイプが加わる。

次に、ページを新規追加した際に、
画像のURLを貼り付けるためのURLと、
画像をクリックした時に飛ぶ、遷移先URLを登録するためのinputを作る


if ( ! function_exists( 'my_add_slider_image' ) ) {
  function my_add_slider_image() {
    add_meta_box(
      'slider_image_url', // 識別子（フィールド名に一致させる）
      'スライダー画像URL', // 表示される見出し
      'my_custom_slider_image', // 以下で定義する関数
      'slider', // 投稿タイプを 'slider' に設定
      'normal', // 表示する位置
      'default' // 優先度
    );
  }
  add_action( 'add_meta_boxes', 'my_add_slider_image' );
}


// メタボックスにスライダー画像URL、遷移先のURL、キャプション、サブタイトルを追加
if ( ! function_exists( 'my_custom_slider_image' ) ) {
  function my_custom_slider_image( $post ) {
    for ( $i = 1; $i <= 4; $i++ ) {

      $slider_image_url = get_post_meta( $post->ID, 'slider_image_url_' . $i, true );
      $slider_image_url = esc_attr( $slider_image_url );

      $slider_link_url = get_post_meta( $post->ID, 'slider_link_url_' . $i, true );
      $slider_link_url = esc_attr( $slider_link_url );

      ?>
      <div class="my-metabox">
        <h4>スライダーセット <?php echo $i; ?></h4>
        <label for="slider_image_url_<?php echo $i; ?>">スライダー画像URL <?php echo $i; ?></label><br>
        <input type="text" value="<?php echo $slider_image_url; ?>" id="slider_image_url_<?php echo $i; ?>" name="slider_image_url_<?php echo $i; ?>" size="50"><br>

        <label for="slider_link_url_<?php echo $i; ?>">遷移先のURL <?php echo $i; ?></label><br>
        <input type="text" value="<?php echo $slider_link_url; ?>" id="slider_link_url_<?php echo $i; ?>" name="slider_link_url_<?php echo $i; ?>" size="50"><br>
      </div>
      <?php
    }
  }
}

新規追加ボタンをクリックすると、以下のように
画像URL登録用inputと、
遷移先登録用のinputタグが出る。

最後に、この4つをちゃんと保存できるようにする。


// 保存処理に4つのスライダーセットを追加
if ( ! function_exists( 'my_save_meta_box' ) ) {
  function my_save_meta_box( $post_id ) {
    for ( $i = 1; $i <= 4; $i++ ) {
      if ( isset( $_POST['slider_image_url_' . $i] ) ) {
        update_post_meta( $post_id, 'slider_image_url_' . $i, $_POST['slider_image_url_' . $i] );
      }
      // 遷移先のURLの保存
      if ( isset( $_POST['slider_link_url_' . $i] ) ) {
        update_post_meta( $post_id, 'slider_link_url_' . $i, $_POST['slider_link_url_' . $i] );
      }
    }
  }
  add_action( 'save_post', 'my_save_meta_box' );
}

function get_slider_images() {
  $args = array(
    'post_type' => 'slider',
    'posts_per_page' => -1,
    'post_status' => 'publish',
    'orderby'        => 'meta_value_num'
  );

  $slider_posts = new WP_Query($args);
  $slider_images = array();

  if ($slider_posts->have_posts()) {
    while ($slider_posts->have_posts()) {
      $slider_posts->the_post();

      for ( $i = 0; $i <= 4; $i++ ) {
        $image_url = get_post_meta(get_the_ID(), 'slider_image_url_' . $i, true);
        $link_url = get_post_meta(get_the_ID(), 'slider_link_url_' . $i, true);

        if ($image_url) {
          $slider_images[] = array(
            'title' => get_the_title(),
            'image_url' => esc_url($image_url),
            'link' => esc_url($link_url),
          );
        }
      }
    }
    wp_reset_postdata();
  }

  return $slider_images;
}

後はfront-page.php側で
呼び出すためのコードを記述する。
ループを使って登録した4枚の画像を展開する。

  <?php
$slider_images = get_slider_images();

  echo '<div class="swiper">';
  echo '<ul class="swiper-wrapper slider" id="js-slick">';

  foreach ($slider_images as $slider) {
    echo '<li class="swiper-slide">';
    echo '<div class="swiper__box">';
    echo '<a href="' . esc_url($slider['link']) . '" target="_blank" rel="noopener">';
    echo '<img src="' . esc_url($slider['image_url']) . '" alt="#" height="180" width="292">';
    echo '</a>';
    echo '</div>';
    echo '</li>';
  }

  echo '</ul>';
  echo '</div>';
?>

仕事で使ったコードのコピーなので、表示部分は各自で設定してください。

実際に使ってみる

メディアライブラリに適当な画像を4枚登録する。

スライダーカスタム投稿タイプに、
記事を新規追加して、画像URLと遷移先URLを登録する。
必要なのはURLだけなので、タイトルはなんでもいい。

公開ボタンをクリックして、確認。

TOPにちゃんと表示されるようになった

functions.phpの修正

実際に使ってみる

Discussion