• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

ハイファイブクリエイト

東京都を拠点にしたWebサイト制作。WordPress構築やシステム構築、ウェブコンサルティング

  • SERVICE
  • ABOUT
  • WORKS
  • BLOG
  • NEWS
  • CONTACT
ホーム / ブログ / WordPress / カテゴリー一覧ページに管理画面から入力できる領域を作成する[ACF Pro]

カテゴリー一覧ページに管理画面から入力できる領域を作成する[ACF Pro]

池田祐太郎 | 2017年11月20日 公開 コメントを書く

WordPressは自由度の高いCMSですが、カスタマイズにはhtml, phpを利用してテンプレートファイルに直接修正する必要が出てくることがしばしばあります。

各カテゴリーページやカスタム投稿タイプの一覧ページにコンテンツを追加したい場合、テンプレートファイルに記載する方法で実現可能です。しかしその場合、テンプレートファイルに直接追加しなくてはいけないため、修正のたびにテンプレートファイルを修正する必要がでてきます。

そこで今回は、Advanced Custom Field Proプラグインを利用して簡単に管理画面から入力できる領域を作成する方法をご紹介します。

実現イメージとしては、以下のようにお客様の声の一覧ページの上部に見出しや画像、テキストを追加するイメージです。
Free content3

目次

  • 1 Advanced Custom Field Proプラグインのオプションページ機能
  • 2 前提条件や作成イメージ
  • 3 自由入力領域を作成
    • 3.1 functions.phpにコードを追加
    • 3.2 カスタム投稿用のテンプレートファイルを用意
    • 3.3 ACF設定
    • 3.4 ページの確認
  • 4 その他のカスタマイズ例

Advanced Custom Field Proプラグインのオプションページ機能

ACF Advanced Custom Fields Plugin for WordPress
Advanced Custom Field(以下ACF)は有名過ぎるプラグインかと思いますが、テーマ作成の際に管理画面のカスタムフィールドや自由なフィールドを制作するカスタマイズをするのに便利なプラグインです。
ACF | Advanced Custom Fields Plugin for WordPress

無料と有料があり無料でも十分利用できますが、今回は有料版の「オプションページ」機能を使って管理画面に管理画面を追加する方法と、どのようなページが生成されるのか、またサンプルコードをご紹介します。

オプションページの機能は以下で詳しく説明しています。英語ですが、ビデオ動画を見るだけでも十分どのような機能かわかるかと思います。
ACF | Options Page

前提条件や作成イメージ

今回は以下の設定、前提条件とします。

  • 「お客様の声」というカスタム投稿タイプ
  • 「お客様の声一覧ページ」にクライアントの方で自由に入力できる領域を作成
  • クライアントは管理画面からWYSIWYGエディタで見出しや画像、テキスト等変更できる
  • クライアントはテンプレートファイルを修正せず変更可能
  • ACF PROプラグインを導入し「Options Page」が使える状態
  • 「お客様の声」のslugはvoice
  • カスタム投稿のアーカイブページを有効にするため、「has_archiveはtrue」に設定しておく

コンテンツ部分に「自由に入力できる領域」を追加するので、下の画像の青い部分が管理画面から変更・修正できる領域となります。
Free content1

コンテンツ部分を拡大すると、記事詳細に遷移するコンテンツの上部に「見出し」「画像」「回り込んだテキスト」を追加するイメージです。
Free content2

自由入力領域を作成

functions.phpにコードを追加

管理画面に「自由入力領域」を表示させるため、以下のコードを追加します。
お客様の声のslug名は「voice」なので、ここは表示させるスラッグ名に合わせて適宜変更します。

if( function_exists('acf_add_options_page') ) {
	
	acf_add_options_sub_page(array(
		'page_title' 	=> '自由入力領域',
		'menu_title'	=> '自由入力領域',
		'menu_slug'		=> 'post-setting',
		'capability'	=> 'edit_posts',
		'parent_slug'	=> 'edit.php?post_type=voice',
		'position'		=> false,
		'icon_url'		=> false
	));
	
}

保存すると、管理画面の「お客様の声」内に「自由入力領域」が表示されました。
お客様の声 WORDPRESS TEST WEBSITE WordPress

カスタム投稿用のテンプレートファイルを用意

今回はお客様の声のカスタム投稿一覧ページの一部に表示したいため、「archive-voice.php」ファイルを作成します。
もともと用意されているarchive.phpファイルを複製します。
もちろん、archive.php ファイル内に条件分岐をしても構いません。

表示したい箇所に以下を記載します。


以下TwentySeventeenの場合の追加箇所例として、33行目のループの直前に追加しています。
Archive voice php
ちなみに、テーマをカスタマイズする際は子テーマを作成してカスタマイズしましょう。

記載したらファイルを保存します。

ACF設定

ACFから新規追加で「自由入力領域」を作成します。
フィールドグループを編集 WORDPRESS TEST WEBSITE WordPress

フィールドラベルは「エディタ」、フィールド名は「editor」に設定します。
フィールドタイプはビジュアルエディタを使いたいので、「Wysiwygエディタ」を選択しておきます。
フィールドはこの設定1つだけです。

次に「位置」の項目です。
表示条件として、「オプションページ」を選択し、「等しい」「自由入力領域」と設定します。
フィールドグループを編集 WORDPRESS TEST WEBSITE WordPress
ここのプルダウンに表示されていない場合、functions.phpに記載されていないか、記載コードが間違っている可能性が強いです。

設定できたら、これで保存します。

ページの確認

「自由入力領域」ページにアクセスするとエディタが表示されているため、このエディタに任意の内容を入力します。
今回は見出し、画像、テキストを設定しました。
自由入力領域 WORDPRESS TEST WEBSITE WordPress

これで保存し、実際のお客様の一覧ページにアクセスして確認すると、無事に自由入力領域に入力した項目が反映されていました。
お客様の声 WORDPRESS TEST WEBSITE

その他のカスタマイズ例

今回はビジュアルエディタを追加フィールドとして登録しましたが、ACFの全てが利用できるので色々な使いみちがあると思います。
リピーターフィールドやフレキシブルコンテンツ機能を使えばもっと簡単・柔軟にクライアントの方で追加するコンテンツを設定することも可能です。

highfivecreateではACFProを使ったテーマ作りを行っています。
「有料のPRO版を持っていない」という場合、サイト数無制限の開発版を利用可能です。

管理画面から更新できるコンテンツ作りでお悩みの場合はお気軽にご相談ください。

WordPress保守管理サービス

Filed Under: WordPress 関連タグ:WordPressカスタマイズ

池田祐太郎

WordPressをはじめとしたCMSの導入を10年以上にわたって手掛けており、中小企業から大企業までコーポレートサイト・ランディングページ・ECサイト・ブランドサイト等、幅広いWebサイトの企画・制作・開発・プロモーション業務などを行う。2012年にハイファイブクリエイトを創業し、現在はディレクションや開発業務などを担当している。 プロフィール詳細

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

I agree to these terms.

この記事と関連する記事

フレームワークを使ってWordPressサイトをリニューアルしたら表示速度が速くなった話
2018年6月4日
タグ: Webサイト高速化, WordPressカスタマイズ
カテゴリー: WordPress, ホームページ制作, モバイル
WP固定ページや投稿内でphpファイルを読み込むショートコード
2018年4月1日
タグ: WordPressカスタマイズ
カテゴリー: TIPS
一覧ページ等で、アイキャッチ画像がなかったら一番目の画像を取得し、さらに画像がなかったら定義した画像を表示するカスタマイズ方法
2018年3月22日
タグ: WordPressカスタマイズ
カテゴリー: TIPS

最初のサイドバー

WordPress保守管理サポート

Search

最近の投稿

  • Contact Form 7 に見つかったファイルアップロードの脆弱性はどのくらい危険なのか?
  • 2020-2021年末年始の営業のご案内
  • [WordPressサイト向け支援キャンペーン] WordPress保守管理の無料コンサルティングを実施
  • お名前.com レンタルサーバーでSSH接続する方法
  • WordPress保守管理サービスのメリット・デメリット

カテゴリー

  • CSS初心者
  • HTML初心者
  • TIPS
  • WooCommerce
  • WordPress
  • エステサロン
  • お知らせ
  • キュレーション
  • サイトマップ
  • システム会社
  • デベロッパーツール入門
  • ブログ
  • ホームページ制作
  • ホームページ制作無料講座
  • モバイル
  • 仕事のこと
  • 制作実績
  • 整体院
  • 美容院
  • 雑感

タグ

Android BtoC Chrome CMS css Fireworks Google+ HTML Illustrator iOS iPhone jQuery Mac mixi Photoshop初心者 php SEO SNS Webサイト高速化 WordPress WordPressカスタマイズ WordPressテーマ WordPress構築調査 お知らせ アクセス解析 アプリ カスタマイズ カフェ クラウド サーバー スマホサイト スマートフォン ソーシャル ツール フラットデザイン ブログ プラグイン マーケティング ライフログ リニューアル 保守管理 制作のご依頼 最適化 集客するサイト構築 飲食店

アーカイブ

CONTACT

お問い合わせはこちら

Footer

  • PRIVACY POLICY
  • 特定商取引法に基づく表示
  • 転載・引用について
  • Facebook

© 2021 high five create All rights reserved.