トップページのスライドショーを外観→カスタマイズから変更できるようにする方法

2023.03.29

技術のこと

WordPress

トップぺージに複数枚のスライドショーを設置しているケースは多いと思います。
画像を変更したい場合、HTMLコードを触ることなく、WordPress管理画面から画像を更新できるような仕組みにカスタマイズすることができます。

では実際に手順をみていきましょう。

登録方法

管理画面にスライドショーを登録

functions.phpに以下のコードを記述します。
今回は画像を5つまで登録できようにしました。

//スライドショー用画像サイズの生成
add_image_size( 'slideshow-image', 1200, 500, true );

//管理画面にスライドショー登録追加
function custom_slideshow_customize_register( $wp_customize ) {
    // カスタマイズ画面にセクションを追加する
    $wp_customize->add_section( 'custom_slideshow_section', array(
        'title' => __( 'スライドショー' ), // セクションのタイトルを指定
        'description' => __( 'トップページのスライドショー画像を変更できます。' ), // セクションの説明を指定
        'priority' => 1, // セクションの表示順を指定（数字が小さいほど上に表示）
    ) );

    // スライドショー画像を5つ分追加する
    for ( $i = 1; $i <= 5; $i++ ) {
        // スライドショー画像の設定を追加する
        $wp_customize->add_setting( 'slideshow_image_' . $i, array(
            'default' => '', // デフォルト値を空に設定
            'transport' => 'refresh', // 設定変更後にページをリロードして反映する
        ) );

        // スライドショー画像のコントロールを追加する
        $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slideshow_image_' . $i . '_control', array(
            'label' => sprintf( __( 'スライドショー画像 %d' ), $i ), // コントロールのラベルを指定
            'section' => 'custom_slideshow_section', // コントロールを追加するセクションを指定
            'settings' => 'slideshow_image_' . $i, // コントロールと紐付ける設定を指定
        ) ) );
    }
}
// カスタマイズ画面の初期化時に関数を呼び出す
add_action( 'customize_register', 'custom_slideshow_customize_register' );

PHP
​x
 
//スライドショー用画像サイズの生成
add_image_size( 'slideshow-image', 1200, 500, true );
​
//管理画面にスライドショー登録追加
function custom_slideshow_customize_register( $wp_customize ) {
    // カスタマイズ画面にセクションを追加する
    $wp_customize->add_section( 'custom_slideshow_section', array(
        'title' => __( 'スライドショー' ), // セクションのタイトルを指定
        'description' => __( 'トップページのスライドショー画像を変更できます。' ), // セクションの説明を指定
        'priority' => 1, // セクションの表示順を指定（数字が小さいほど上に表示）
    ) );
​
    // スライドショー画像を5つ分追加する
    for ( $i = 1; $i <= 5; $i++ ) {
        // スライドショー画像の設定を追加する
        $wp_customize->add_setting( 'slideshow_image_' . $i, array(
            'default' => '', // デフォルト値を空に設定
            'transport' => 'refresh', // 設定変更後にページをリロードして反映する
        ) );
​
        // スライドショー画像のコントロールを追加する
        $wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'slideshow_image_' . $i . '_control', array(
            'label' => sprintf( __( 'スライドショー画像 %d' ), $i ), // コントロールのラベルを指定
            'section' => 'custom_slideshow_section', // コントロールを追加するセクションを指定
            'settings' => 'slideshow_image_' . $i, // コントロールと紐付ける設定を指定
        ) ) );
    }
}
// カスタマイズ画面の初期化時に関数を呼び出す
add_action( 'customize_register', 'custom_slideshow_customize_register' );

保存したら管理画面（外観 > カスタマイズ）を確認してみましょう。
画像を5つ登録できるエリアが追加されています。

テンプレートに出力する

現時点では画像を登録できるだけで、トップページに表示できません。
トップページのテンプレートに出力するコードを記述します。
以下のコードは画像の登録枚数分だけ、for文で回して表示します。

<?php
// スライドショー画像の取得
$slideshow_images = array();
for ( $i = 1; $i <= 5; $i++ ) {
    $image_url = get_theme_mod( 'slideshow_image_' . $i );
    if ( ! empty( $image_url ) ) {
        $slideshow_images[] = $image_url;
    }
}
?>

//スライドショーのHTMLを出力 
<?php if ( ! empty( $slideshow_images ) ) : ?>
    <div id="slideshow">
        <?php foreach ( $slideshow_images as $image ) : ?>
            <img src="<?php echo esc_attr( $image ); ?>" alt="">
        <?php endforeach; ?>
    </div>
<?php endif; ?>

PHP
xxxxxxxxxx
 
<?php
// スライドショー画像の取得
$slideshow_images = array();
for ( $i = 1; $i <= 5; $i++ ) {
    $image_url = get_theme_mod( 'slideshow_image_' . $i );
    if ( ! empty( $image_url ) ) {
        $slideshow_images[] = $image_url;
    }
}
?>
​
//スライドショーのHTMLを出力 
<?php if ( ! empty( $slideshow_images ) ) : ?>
    <div id="slideshow">
        <?php foreach ( $slideshow_images as $image ) : ?>
            <img src="<?php echo esc_attr( $image ); ?>" alt="">
        <?php endforeach; ?>
    </div>
<?php endif; ?>

スライドショー用の画像サイズで出力する場合

functions.phpに生成サイズを追加します。

//スライドショー用画像サイズの生成
add_image_size( 'slideshow-image', 1200, 500, true );

PHP
xxxxxxxxxx
 
//スライドショー用画像サイズの生成
add_image_size( 'slideshow-image', 1200, 500, true );

トップページテンプレート出力は以下です。
登録したslideshow-imageのサイズで表示されます。

<?php
    // スライドショー画像の取得
    $slideshow_images = array();
    for ( $i = 1; $i <= 5; $i++ ) {
        $image_url = get_theme_mod( 'slideshow_image_' . $i );
        if ( ! empty( $image_url ) ) {
            $image_id = attachment_url_to_postid( $image_url );
            $image_size_url = wp_get_attachment_image_src( $image_id, 'slideshow-image' );
            if ( $image_size_url ) {
                $slideshow_images[] = $image_size_url[0];
            }
        }
    }
    ?>

    //スライドショーのHTMLを出力
    <?php if ( ! empty( $slideshow_images ) ) : ?>
    <div id="slideshow">
        <?php foreach ( $slideshow_images as $image ) : ?>
        <img src="<?php echo esc_attr( $image ); ?>" alt="">
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

PHP
xxxxxxxxxx
 
<?php
    // スライドショー画像の取得
    $slideshow_images = array();
    for ( $i = 1; $i <= 5; $i++ ) {
        $image_url = get_theme_mod( 'slideshow_image_' . $i );
        if ( ! empty( $image_url ) ) {
            $image_id = attachment_url_to_postid( $image_url );
            $image_size_url = wp_get_attachment_image_src( $image_id, 'slideshow-image' );
            if ( $image_size_url ) {
                $slideshow_images[] = $image_size_url[0];
            }
        }
    }
    ?>
​
    //スライドショーのHTMLを出力
    <?php if ( ! empty( $slideshow_images ) ) : ?>
    <div id="slideshow">
        <?php foreach ( $slideshow_images as $image ) : ?>
        <img src="<?php echo esc_attr( $image ); ?>" alt="">
        <?php endforeach; ?>
    </div>
    <?php endif; ?>

これで管理画面から簡単に画像を登録できるようになりました。
スライドショーだけでなく、別の任意の箇所をカスタマイズ登録することも可能です。