footer東京都を拠点にしたWebサイト制作。phpを利用してテンプレートファイルに直接修正する必要が出てくることがしばしばあります。各カテゴリーページやカスタム投稿タイプの一覧ページにコンテンツを追加したい場合、テンプレートファイルに記載する方法で実現可能です。その場合、テンプレートファイルに直接追加しなくてはいけないため、修正のたびにテンプレートファイルを修正する必要がでてきます。Proプラグインを利用して簡単に管理画面から入力できる領域を作成する方法をご紹介します。実現イメージとしては、以下のようにお客様の声の一覧ページの上部に見出しや画像、テキストを追加するイメージです。Field(以下ACF)は有名過ぎるプラグインかと思いますが、テーマ作成の際に管理画面のカスタムフィールドや自由なフィールドを制作するカスタマイズをするのに便利なプラグインです。WordPress無料と有料があり無料でも十分利用できますが、今回は有料版の「オプションページ」機能を使って管理画面に管理画面を追加する方法と、どのようなページが生成されるのか、またサンプルコードをご紹介します。オプションページの機能は以下で詳しく説明しています。英語ですが、ビデオ動画を見るだけでも十分どのような機能かわかるかと思います。Page前提条件や作成イメージ今回は以下の設定、前提条件とします。「お客様の声」のslugはvoiceカスタム投稿のアーカイブページを有効にするため、「has_archiveはtrue」に設定しておくコンテンツ部分に「自由に入力できる領域」を追加するので、下の画像の青い部分が管理画面から変更・修正できる領域となります。コンテンツ部分を拡大すると、記事詳細に遷移するコンテンツの上部に「見出し」「画像」「回り込んだテキスト」を追加するイメージです。管理画面に「自由入力領域」を表示させるため、以下のコードを追加します。お客様の声のslug名は「voice」なので、ここは表示させるスラッグ名に合わせて適宜変更します。false));}保存すると、管理画面の「お客様の声」内に「自由入力領域」が表示されました。今回はお客様の声のカスタム投稿一覧ページの一部に表示したいため、「archive-voice.php」ファイルを作成します。用意されているarchive.phpファイルを複製します。ファイル内に条件分岐をしても構いません。表示したい箇所に以下を記載します。以下TwentySeventeenの場合の追加箇所例として、33行目のループの直前に追加しています。ちなみに、テーマをカスタマイズする際は子テーマを作成してカスタマイズしましょう。記載したらファイルを保存します。ACF設定ACFから新規追加で「自由入力領域」を作成します。フィールドラベルは「エディタ」、フィールド名は「editor」に設定します。フィールドタイプはビジュアルエディタを使いたいので、「Wysiwygエディタ」を選択しておきます。フィールドはこの設定1つだけです。次に「位置」の項目です。ここのプルダウンに表示されていない場合、functions.phpに記載されていないか、記載コードが間違っている可能性が強いです。設定できたら、これで保存します。ページにアクセスするとエディタが表示されているため、このエディタに任意の内容を入力します。今回は見出し、画像、テキストを設定しました。これで保存し、実際のお客様の一覧ページにアクセスして確認すると、無事に自由入力領域に入力した項目が反映されていました。今回はビジュアルエディタを追加フィールドとして登録しましたが、ACFの全てが利用できるので色々な使いみちがあると思います。リピーターフィールドやフレキシブルコンテンツ機能を使えばもっと簡単・柔軟にクライアントの方で追加するコンテンツを設定することも可能です。highfivecreateではACFProを使ったテーマ作りを行っています。「有料のPRO版を持っていない」という場合、サイト数無制限の開発版を利用可能です。管理画面から更新できるコンテンツ作りでお悩みの場合はお気軽にご相談ください。プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。コメントをキャンセルメールアドレスが公開されることはありません。