WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投稿で編集のしやすいサイトを構築しよう #2/4

はじめに

概要

WordPressのメリットの一つは、プログラミングの知識がなくても編集が容易なウェブサイトを構築できることです。今回は、プラグインを使ってカスタムフィールドやカスタム投稿タイプを設定し、テキストやリンクを編集する方法について実装してみたいと思います。

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

読者

WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投…は、最初にどこを理解するとよいですか？

木村

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。

読者

実際に試すときは、手順だけでなく確認方法も知っておいた方がよいでしょうか？

木村

はい。この記事では、作業の目的から実装後の確認までを順番に整理します。自分の環境と照らし合わせながら読み進めてください。

プラグインの紹介

プラグインの紹介では、WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投稿で編集のしやすいサイトを構築しよう #3/4を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

ACF（Advanced Custom Fields）

カスタムフィールドはこちらのプラグインを使用します。WordPressの投稿やページに独自のカスタムフィールドを追加することができます。通常、WordPressでは、タイトルや本文などの基本的なフィールドしか提供されていませんが、ACFを導入することで、画像アップロード、ファイル選択、チェックボックス、ドロップダウンリスト、日付ピッカーなど、さまざまなカスタムフィールドを追加することができます。

CPT（Custom Post Type）

カスタム投稿はこちらのプラグインを使用します。通常の投稿や固定ページ以外の独自の投稿タイプを作成することができます。

実装動画

実装動画では、WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投稿で編集のしやすいサイトを構築しよう #3/4を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

サイトのボタンのテキストとリンクを編集するために、カスタムフィールドを使用します。まず、編集専用のカスタム投稿タイプ（ここでは「共通パーツ」）を設定します。その後、このカスタム投稿タイプにフィールドを追加し、それぞれのボタンに対してテキストとリンクの値を関連付けます。

<?php the_field();?>

こちらの関数を使用することで、ACFの値を表示することが可能です。the_field()関数は、引数としてカスタムフィールドの名前を受け取ります。ここではボタン1には’btn1’リンクには’link1’というフィールド名を指定います。第2引数には投稿のIDを記述することができます。詳細は下記にて説明いたします。

カスタム投稿タイプの設置

必要な箇所は以下の3点です。 -投稿タイプスラッグ -複数形のラベル -単数形のラベル

上記を設定すると、新たにカスタム投稿タイプ（ここでは共通パーツ）が表示されます。そこにボタン編集のための投稿を追加します。ボタン編集をホバーすると、下部に投稿のIDが表示されます。このIDが、投稿と値を紐付けるためのキー(ここでは22)となります。

ACFの設定で、フィールドの表示を明確にすることで管理がしやすくなります。ここでは先程作成した共通パールのボタン編集を選択しています。

index.php

<section>
 <div class="btn flex-row">
  <button><a href="<?php the_field("link1", 22); ?>"><?php the_field("btn1", 22); ?></a></button>
  <button><a href="<?php the_field("link2", 22); ?>"><?php the_field("btn2", 22); ?></a></button>
  <button><a href="">ボタン3</a></button>
  <button><a href="">ボタン4</a></button>
 </div>
 <!-- /.flex-row -->
</section>

このように記述することで、カスタムフィールドの値が反映され、編集がしやすくなります。

ACFの応用

ACFの応用では、WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投稿で編集のしやすいサイトを構築しよう #3/4を理解・実装するために必要な考え方と、作業時に確認したい点を整理します。最初に役割を把握してから、記事内の手順へ進みましょう。

ラジオボタンで表示と非表示を選択

ACFのラジオボタンを使って、ボタンを表示・非表示の選択ができるようにしました。これにより、まだリリース前のリンクなどを非表示にすることができ、便利な機能となっています。

実装動画

コードを編集せずに、ラジオボタンで操作できるようにすると、ユーザーアビリティが向上します。以下のコードを参考してみてください。また、こちらのコードをショートコードに組み込み、カスタムHTML内で使用することも可能です。ぜひチャレンジしてみてください。なお、ACFの値を取得する際はget_field()関数を使用しますので注意ください。参考コード

<?php $btn1 = get_field("radio-btn1", 22);
$link1 = get_field("link1", 22);
$txt = get_field("btn1", 22);
echo '<span>var_dumpの値: ';
print_r($btn1);
echo '</span>';

?>

<div class="btn flex-row">
 <?php
 if ($btn1 === '表示する') {
    echo '<button><a href="' . $link1 . '">' . $txt . '</a></button>';
 }
 ?>
</div>

実装前に確認しておきたいこと

ここでは、WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投…を実際の制作へ取り入れる前に、準備しておきたい内容を整理します。先に作業範囲と確認方法を決めておくと、既存ページへの影響を抑えながら進められます。

作業の目的と変更範囲を決める

WordPress標準機能、プラグインの機能、テーマ側の処理を分けて考えると、どこを変更すべきか判断しやすくなります。サンプルをそのまま貼り付ける前に、どのページ、どの要素、どの利用者へ影響するのかを書き出してください。目的が明確であれば、必要以上にコードや設定を増やさずに済みます。

元の状態へ戻せるようにする

テーマや設定を変更するときは、対象ファイルや設定値のコピーを残します。複数の変更を一度に行わず、一つ反映するたびに表示と動作を確認すると、問題が起きても原因を切り分けやすくなります。

よくあるつまずきと確認方法

WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投…が期待どおりに動かない場合は、コードを追加し続ける前に、読み込み順、対象要素、設定値、キャッシュの順で確認します。小さな入力ミスや確認条件の違いが原因になることも少なくありません。

変更が反映されない場合

保存したファイルと表示中のページが対応しているかを確認し、キャッシュを消して再読み込みします。ブラウザーの開発者ツールやWordPressのエラーログを確認すると、読み込み失敗や記述ミスを見つけやすくなります。

公開前の最終確認

ローカル環境で変更し、未ログイン状態と管理者状態の両方で表示を確認します。PHPを変更した場合は、エラーログ、権限、エスケープ処理も合わせて確認してください。

まとめ

開発中はキャッシュをクリアする方法を知っておくことが重要
キャッシュの削除にはシークレットモードでの確認や、スーパーリロードがある
セキュリティ面からもローカル環境で開発することは大切
ローカル環境の構築にはLocalが便利
WordPressは情報が豊富なため、適切な回答を得ることができる
情報の収集にはチャットGTPを活用
WordPressでは更新や編集作業など、様々な機能を追加するためのプラグインが豊富に存在する
上記を意識して、クライアントに対して意味のあるサイトを構築することが大切

WordPressオリジナルテーマの構築。カスタムフィールドとカスタム投稿で編集のしやすいサイトを構築しよう #3/4

目次