今日は、お仕事で使ったカスタムフィールド真偽値の使い方をアウトプットします。
こんにちは。Webコーダーのharuです。
3歳1歳の育児をしながら、5~7時・21~0時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQuery/WordPress。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
【学習記録やアウトプットのTwitterはこちらです＊】
普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！
【WordPress】カスタムフィールドにチェックをしたらコンテンツを表示させる
ちょっとタイトルで表現するのがむずかしくて↑こんな表現になってしまっていますwむむむ…
やりたいことは以下です。
②チェックを入れたら、任意のページに指定のコンテンツを表示させる
これらを実現するために、”カスタムフィールド”を使っていきます。
ゴール：下記の練習用テーマ「テスト投稿③」のカードにPR表示/非表示の機能をつけてみます。(伝わりますか…….)
カスタムフィールドを作成する
カスタムフィールドを作成するために案件で使用したのが「Advanced Custom Fields」というプラグインです。まず、プラグイン導入をしていきます。
「Advanced Custom Fields」プラグインを導入
WordPressの管理画面から、プラグインの追加 > 「Advanced Custom Fields」と検索。
インストールをしたらプラグインを有効にしておきます。
カスタムフィールドの設定
左のメニューから「カスタムフィールド」を選択して、設定をおこないます。
今回は「PR」という名前のフィールドを新規追加していきます(名前は任意です)
フィールドの詳しい設定をしていきます。
②フィールド名・・・コードを書くときに使う
③フィールドタイプ・・・今回は「真 / 偽」を選択
ここでいう「真 / 偽」とは、チェックボックス形式のフィールドで、チェックをすれば値が1、チェックをしなければ値はなしというシンプルなものです。
フィールドタイプは他にも様々なものを選ぶことができます。
少しスクロールを進めて、「位置」の設定です。
↑これは、カスタムフィールド(今回はチェックボックス)をどの投稿タイプに使用するかを選びます。今回は、カスタム投稿で作成した「コラム投稿」を選びました。
次に、「設定」 > 「位置」です。
↑これは、投稿画面のどこにチェックボックス を表示されるかを選択します。今回は、本文入力の後に表示されるようにしました。
ここまで設定したら「更新」を押します。フィールドグループを公開しました、と表示されればOKです。
カスタムフィールドのチェックボックスを確認
ここまで設定できたら、実際に投稿画面にカスタムフィールドが表示されているか確認します。
今回は、テスト投稿③の編集ページを開きました。先ほど設定したとおり、本文入力欄の下に「PR」のチェックボックスが表示されています。ここにチェックを入れて、更新します。
表示させるコンテンツを設定する(phpコード)
次に、コードを書いてカスタムフィールドにチェックが入ったらどんなコンテンツを表示させるのかを設定していきます。
今回は、投稿一覧ページに「PR」という文字を表示させたいのでした。以下のコードをphpファイルに記述しました。
<!--条件分岐/カスタムフィールドでPRにチェックしたら、一覧でPRの文言を出す-->
<?php if(get_field('pr')): ?>
<p class="new-post__pr">PR</p>
<?php endif; ?>
<!--//条件分岐-->
get_field(‘ ‘)にカスタムフィールドの設定で自分で決めた”フィールド名”を入れます。
再掲します、これです↓
そして、if文の間にある<p class=”new-post__pr”>PR</p>の部分が、チェックが入ったら表示させたいコンテンツです。classなどは任意です。
完成
コードを保存したら、一覧ページをリロードしてみます。「テスト投稿③」のカードに、PRの文字が表示されました！意外と簡単にできた！
今回は以下の記事を参考にさせていただきました！ありがとうございます！
あとがき
案件でカスタムフィールドを他にもたくさん使ったので、忘れぬうちにしっかり備忘録として残していきたいと思います。今回は以上です！
Thanks：師匠「もりけんさん」(@terrace_tec)
もりけんさんのHPはこちら
★私が「実務プロジェクト」でお仕事をいただいているクライアントのあきらさん（@akira0727x)がYouTubeをはじめました！
Web制作で結果を出すためのノウハウを公開されています✨
