WordPress（ワードプレス）のチェックボックスの作り方を解説！どんなときに使う？

ワードプレスのサイト内に、チェックボックスを作りたい！というときもありますよね。

イメージはできるけど、一体どうやって作ればいいの？そんな機能ある？と悩んでいる人もいるはずです。

そこで今回は、ワードプレスでチェックボックスを作る方法について解説します。

どんなときにチェックボックスを使えばいいのかについても見ていきましょう。

ワードプレスのチェックボックスとは？

まずは、ワードプレスのチェックボックスがどんなものなのかについて見ていきましょう。

チェックボックスはこんな感じです。

記事を読んでいる読者が、自分でチェックを入れられる仕組みになっています。

このチェックボックスを作るときは、以下のようなコードを使用しています。

<div class="checkbox">
<label><input class="checkbox-input" name="checkbox" type="checkbox" /><span class="checkbox-parts">チェック1</span></label>
<label><input class="checkbox-input" name="checkbox" type="checkbox" /><span class="checkbox-parts">チェック2</span></label>
<label><input class="checkbox-input" name="checkbox" type="checkbox" /><span class="checkbox-parts">チェック3</span></label>
</div>

このコードを繰り返して使用すれば、項目を増やすこともできますよ。

ワードプレスのチェックボックスはどんな時に使う？

ワードプレスではこのように、チェックボックスを追加することができます。

これは、「あなたに当てはまる項目はいくつ？」などのときに実際にチェックするときなどに役立ちます。

その他にも、チェックした項目によってサイトの表示内容を変更するという使い方もできます。

でも、そんな難しい設定自分でできるのかな？と不安になる人も多いですよね。

そこで、便利なプラグインがあるので紹介します、

ACF（Advanced Custom Fields）

ACF（Advanced Custom Fields）というプラグインは、ワードプレスの入力項目のカスタマイズができます。

ワードプレスのデフォルトにはない入力項目をカスタムフィールドとして追加することが可能です。

このプラグインは多くおサイトで利用されていて評価も高く、信頼できるプラグインと言えるでしょう。

その中でACFチェックボックスフィールドは、選択肢系のフィールドタイプになっています。

このプラグインでは、どのチェックボックスにチェックを入れたかによって条件分岐させることも可能です。

カスタムフィールドのチェックボックスの使い方

では、ACF（Advanced Custom Fields）の使い方について紹介しますので参考にしてみてください。

ACF（Advanced Custom Fields）をインストールする

まずは、プラグイン「ACF（Advanced Custom Fields）」をインストールします。

フィールドグループの作成

次は、チェックボックスのフィールドグループの作成を行います。

これで、カスタムフィールドの作成はOKです。

カスタムフィールドのチェックボックスで条件分岐させる

カスタムフィールドのチェックボックスで条件分岐させる方法を見ていきましょう。

チェックで条件分岐させる

まずは、チェックをしたかしないかで条件分岐させる方法です。

チェックを入れたら表示させるためのコードを紹介します。

<?php if ( get_field( 'フィールド名' ) ): ?>
<!-- チェックが入っている時に表示される -->
<?php else: ?>
<!-- チェックが入っていない時に表示される -->
<?php endif; ?>

get_field( ‘フィールド名’ ) ):には、先ほど作成したフィールドの「checkbox」と入力しましょう。

<?php if ( get_field( 'checkbox' ) ): ?>
<!-- チェックが入っている時に表示される -->
<?php else: ?>
<!-- チェックが入っていない時に表示される -->
<?php endif; ?>

このようになります。

これは、checkboxにチェックが入っている場合は～～、入っていない場合は～～という意味を表しています。

複数の条件分岐したい場合

実際に使う場合には、いくつかの条件を組み合わせて分岐させたいことが多いですよね。

そのときには、カスタムフィールドの選択肢をいくつか用意しておかなければいけません。

選択肢を複数用意する

カスタムフィールドの編集画面から「選択肢」を編集します。

入力したら保存し、複数の条件分岐させるコードを書きます。

<?php if( get_field('checkbox') == "check1"): ?>
<!-- check1にチェックが入っている時に表示される -->
<?php elseif( get_field('checkbox') == "check2"): ?>
<!-- check2にチェックが入っている時に表示される -->
<?php elseif( get_field('checkbox') == "check3"): ?>
<!-- check3にチェックが入っている時に表示される -->
<?php endif; ?>

これで、都度表示させたい内容を記述すれば条件分岐させることができます。

まとめ

ワードプレスのチェックボックスの作り方を紹介しました。

ワードプレスでは、チェックボックスを作って読者が記事を読みやすいようにすることができます。

チェックボックスをいろいろとカスタマイズして、活用してみてください。

便利なプラグインについても是非チェックしてみてくださいね。

ホームページを今より活用して集客に繋げたい方、
WEBマーケティングを展開してきたい方はWebHEROにお任せください！

ホームページを活用して、もっと売上アップしたい…！
そう考えているあなたは、こんなお悩みをお持ちではないでしょうか？

成約に繋がるホームページを作りたい
自分で作ってみたけど見栄えが悪い
WEB集客に本腰を入れたい
問い合わせ・来客数を増やしたい
地元（岐阜県・岐阜市）の制作会社に依頼したい

そのお悩み、WebHEROにお任せください！
WEBマーケティングにおける重要なポジションを担っている「ホームぺージ」を
優秀なWEBマーケターの視点をいれて制作をさせていただきます！

まずは無料相談！
いつでもお気軽にご相談ください！

ホームページ制作の無料相談受付中