WordPress事例 トップページに表示する画像スライドを管理画面で編集できるようにしたい

要望

トップページに表示する画像スライドを管理画面で編集できるようにしたい。

解決方法

ACFを使って、トップページの固定ページにカスタムフィールドを追加して管理できるようにします。

手順

1. 固定ページ作成 slug:index
2. ACFでカスタムフィールド作成
3. [1]で作成した固定ページから画像をアップロード
4. トップページのテンプレートを編集
5. 表示を確認する

1. 固定ページ作成

固定ページを作成します。

固定ページ名：トップページ
固定ページスラッグ：index

2. ACFでカスタムフィールド作成

ACFでカスタムフィールドで以下のフィールドを作成します。

フィールドグループ
フィールドグループ名：トップページ

フィールド設定
フィールドラベル：スライド
フィールド名：index_slide
フィールドタイプ：リピートフィールド（繰り返しフィールド）

リピートフィールド（繰り返しフィールド）設定
フィールドラベル：画像
フィールド名：index_slide_image
フィールドタイプ：画像

3. [1]で作成した固定ページから画像をアップロード

1で作成した固定ページから画像をアップロードします。

4. トップページのテンプレートを編集

トップページのテンプレートに以下のコードを追加します。

<?php if( have_rows('index_slide') ): ?>
    <?php while ( have_rows('index_slide') ) : the_row(); ?>
        <img src="<?php echo get_sub_field('index_slide_image')['sizes']['large'] ?>" alt="">
    <?php endwhile; ?>
<?php endif; ?>

5. 表示を確認する

トップページの表示を確認します。

デザインを本で学びたい人向けの記事

初心者ノンデザイナーがこれからデザインを勉強するのにおすすめの本 4選