カスタムフィールドを使用して、
編集が容易なウェブサイトを構築しましょう。
ACFプラグイン-応用編

2023.08.16 カスタムフィールドで編集しやすくする。

はじめに

概要

固定ページのデザインにおいて、カラム数のみが異なる場合、管理画面から選択できるようになり、自由にカスタマイズできると便利です。ACFというプラグインを活用することで、このようなニーズやアイデアを柔軟に実現できます。また、このページのみスライダーアニメーションを表示したいといったこともできますのでぜひともマスターしていきましょう。

目的

実装内容
構築方法
まとめ

※本記事の情報は執筆時点のものであり、閲覧時点では変更されている可能性があります。また、ご利用の環境によっては、本記事の内容が正常に動作しないことがあります。最新の情報については、公式サイトなどでご確認ください。

実装内容

ラジオボタンを使用して、各カラム数に応じたデザインが形成されていることがわかります。それでは、実装していきましょう。

構築方法

ACF

以下の動画のようにラジオボタンで各フィールドを設定します。

フィールド名は何でも良いですが、ここではcol-1としております。

page.php

<?php $result = get_field("col-1", 29);
echo '<span class="block pt-10 text-center var_dump">var_dumpの値: ';
print_r($result);
echo '</span>';
?>

値がしっかりと取れているかvar_dumpを使って確認しています。

get_field()を使用して、選択した値を取得します。これはACFプラグインが提供する関数です。フィールド名を第一引数、投稿のIDを第二引数に指定します。これにより、取得する値が明確に指定されます。投稿IDは投稿のタイトルをホバーした際、下部に表示される数字になります。

投稿ID

小さいですが、上記の29がIDとなります。

page.php

<div class="content">
    <div class="content__inner wrap">
        <?php
        if ($result === '2カラム') {
        ?>

　　　　　　　　　　　　　　　　// ここに2カラムのHTMLコードを記述。以下同上

        <?php
        } else if ($result === '3カラム') {
        ?>


        <?php
        } else if ($result === '4カラム') {
        ?>


        <?php
        }

        ?>


    </div><!-- /.content__inner -->
</div><!-- /.content -->

中身は省略していますが、このように条件分岐を設定し、それぞれのHTMLを記述することになります。

以上です。実装できましたでしょうか？もしわからないことがあれば、お問い合わせフォームからお気軽にご連絡ください。

まとめ