プラグイン

WordPressのサイト基本設定をスマートに作るACF Proのオプションページ機能

2017.10.16

コーディング

WordPressをガチガチにカスタマイズすると既存のサイト設定だけでは色々項目が足りないかと思います。例えばカスタム投稿タイプのメタ系など・・・functions.phpを直接設定するのではメンテナンス性がなさすぎな気がします。そんな時にオススメなのがAdvanced Custom Fields Proのオプションページ機能です。

Advanced Custom Fields Proについてはこちらの記事を参照ください

ACF Proのオプションページとは?

オフィシャルによれば、オプションページを使えばWordPressに管理ページを追加することができ、管理ページから入力された項目は、どのページでも呼び出せるフィールドでヘッダーやフッターなどのサイトの共通項目を設定するのに適しています。とのことです。

オプションページで出来ること

簡潔にオプションページ機能で出来ることをまとめると

  • 管理ページを追加できる
  • 入力項目はどのページからでも呼び出せる

カスタマイズされたWordPressで管理画面を追加出来るのは地味にめっちゃ便利です。ACF Proのオプションページを使わずに出来る方法もありますが、手軽に実装できるアドバンテージがあります。

オプションページの実装

オプションページの実装はまずfunctions.phpに関数を追加します。

一番シンプルな実装例

下記は一番シンプルな実装例です。管理画面のサイドバーにデフォルトのオプションページが追加されます。

if( function_exists('acf_add_options_page') ) {
 acf_add_options_page();
}

ラベルや表示位置を変えた例

せっかく管理ページを追加してもデフォルトのままでは直感的ではありませんので、下記はラベルや表示位置を変更した例です。

if ( function_exists( 'acf_add_options_page' ) ) {
  acf_add_options_page( array(
    'page_title' => 'サイト設定',
    'menu_title' => 'サイト設定',
    'menu_slug' => 'site-options',
    'capability' => 'edit_posts',
    'position' => 4.5
  ) );
}

オプションページの親子関係も可能

下記は公式からの引用になりますが、オプションページは親子関係を持たせることも可能です。
親カテゴリー、子カテゴリーといった感じの実装です。1番使われる設定方法だと思います。当サイトの管理もこちらの方法で実装しています。

if( function_exists('acf_add_options_page') ) {

 acf_add_options_page(array(
  'page_title'  => 'Theme General Settings',
  'menu_title' => 'Theme Settings',
  'menu_slug'  => 'theme-general-settings',
  'capability' => 'edit_posts',
  'redirect'  => false
 ));

 acf_add_options_sub_page(array(
  'page_title'  => 'Theme Header Settings',
  'menu_title' => 'Header',
  'parent_slug' => 'theme-general-settings',
 ));

 acf_add_options_sub_page(array(
  'page_title'  => 'Theme Footer Settings',
  'menu_title' => 'Footer',
  'parent_slug' => 'theme-general-settings',
 ));

}

カスタムフィールドの追加

functions.phpに関数を追加後、管理画面のサイドバーに表示されたメニューからページ遷移するとNo Custom Field Groups found for this options page. Create a Custom Field Groupとカスタムフィールドがないので作ってくれと怒られてしまいまますので、早速リンクからカスタムフィールドを制作します。

投稿タイプをオプションページに設定

まず、投稿タイプをオプションページにしてから各フィールドを作成します。私はメタ系やアナリティクス、サイトごとにユニークになる項目を設定しています。カスタム投稿タイプのディスクリプションなんかもここで設定します。

ACF Proオプションページ

値の出力

下記は公式からの引用です。

フィールドを表示させる場合

<p><?php the_field('フィールド名', 'option'); ?></p>

フィールドを取得する場合

<?php
$variable = get_field('フィールド名', 'option');
?>

オプシンページを用いてタイトルをユニークにする例

WordPressはサイトタイトルは設定できますが、トップページ用、各ページの共通用とデフォルトでは複数のタイトルを設定する機能がありませんので、オプションページの機能を用いてそれぞれを設定し、カスタム投稿タイプを含む各ページのタイトルがユニークになるように設定しています。

カスタムポストはカスタム投稿タイプ名です。

<?php
$site_toptitle = get_field('site_toptitle', 'option'); //トップページタイトル
$site_commontitle = get_field('site_commontitle', 'option'); //共通タイトル

if (is_home()) {
	$metatitle = $site_toptitle;
}
elseif (get_post_type() === 'カスタムポスト' && is_year()) {
	$metatitle = get_query_var('カスタムポスト').'年'.'のカスタムポスト一覧';
}
elseif (get_post_type() === 'news' && is_month()) {
	$metatitle = get_query_var('year').'年'.get_query_var('monthnum').'月'.'のカスタムポスト一覧';
}
elseif (is_year()) {
	$metatitle = get_query_var('year').'年'.'の記事一覧';
}
elseif (is_month()) {
	$metatitle = get_query_var('year').'年'.get_query_var('monthnum').'月'.'の記事一覧';
}
elseif (is_search()) {
	$metatitle = wp_title('',false,'right').'一覧';
}
elseif (is_tag()) {
	$metatitle = single_tag_title('', false).'の記事一覧';
}
else{
	$metatitle = wp_title('',false,'right');
}
if (get_post_type() === 'post' && is_single()) {
	$category = get_the_category();
	$cat_name = $category[0]->cat_name;
	$metasubtit = '|'.$cat_name;
}
elseif(is_archive() || is_tax() || is_singular()) {
	$metasubtit = '|'.$site_commontitle; //共通title
}
?>
<title><?php echo $metatitle; ?><?php if(is_paged()){echo '|'. get_query_var('paged'). "ページ目";} ?><?php if ($metasubtit){echo $metasubtit;} ?></title>

ちょっと長いですが2ページ目がある場合はタイトルが重複しないように2ページ目と表示されるように設定しています。

オプションページと他のフィールドグループの組み合わせでディスクリプションをユニークにする

タイトルと同じような考え方で、ディスクリプションもユニークに設定することができます。各投稿ページにオプションページとは別にディスクリプションを追加できるフィールドグループを作成しておきます。

下の例では個別ディスクリプションをcst_descで制作し、カスタム投稿タイプをnewsで作成しています。

<?php
$site_topdesc = get_field('site_topdesc', 'option'); //トップページディスクリ
$news_desc = get_field('news_desc', 'option'); //ニュースディスクリ
$cst_desc = get_field('cst_desc'); //個別ディスクリ
$trmdesc = term_description(); //カテゴリやタームのディスクリプション
if (is_home()) {
$sitedesc = $site_topdesc;
}
elseif (is_tax() || is_tag() || is_category() && term_description()) {
$sitedesc = $trmdesc;
}
elseif (get_post_type() === 'news' && is_year()) {
$sitedesc = get_query_var('year').'年の'.$news_desc;
}
elseif (get_post_type() === 'news' && is_month()) {
$sitedesc = get_query_var('year').'年'.get_query_var('monthnum').'月の'.$news_desc;
}
elseif (get_post_type() === 'news' && is_post_type_archive()) {
$sitedesc = $news_desc;
}
elseif (get_post_type() === 'news' && is_single()){
$sitedesc = $cst_desc;
}
elseif (is_year()) {
$sitedesc = get_query_var('year').'年の記事一覧。'.$site_topdesc;
}
elseif (is_month()) {
$sitedesc = get_query_var('year').'年'.get_query_var('monthnum').'月の記事一覧。'.$site_topdesc;
}
elseif (is_single() || is_page()) {
$sitedesc = $cst_desc;
}
?>
<?php if ($sitedesc): ?>
<meta name="description" content="<?php echo $sitedesc; ?><?php if(is_paged()): echo '|'. get_query_var('paged'). "ページ目"; endif; ?>">
<?php endif; ?>

これらのカスタマイズをACF Proで行えばメタ系のプラグインを導入する必要もありませんし、その気になれば、さらに細やかにメタを設定することも可能です。

Advanced Custom Fields Proのライセンスは1サイト25ドルの個人ライセンスとサイト無制限100ドルの開発者ライセンスがあります。制作者であれば迷うことなく開発者ライセンスをおすすめします。きっと100ドル以上の時間節約になるのは間違いありませんので、費用対効果は抜群だと思います。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する