WordPressのカスタムフィールドを簡単に使用できるプラグイン「Advanced Custom Fields」の有料版で使える「オプションページ」が便利です。この記事では、オプションページの使い方について具体的に紹介します。
前提条件
この記事の内容を理解するためには、Advanced Custom Fieldsの基本的な使い方を知っている必要があります。別の記事に詳しく書いているので参考にしてください。
Advanced Custom Fieldsには無料版と有料版(PRO)がありますが、オプションページは有料版の機能になります。そのため、有料版を購入していないと使用できません。
なお、カスタムフィールドを使えばやりたいことを実現できるからといって、それがベストな方法とは限りません。サイトを利用するユーザーの知識レベルなどに応じて検討してください。
オプションページとは
オプションページとは、「投稿に紐づかず、サイト全体で使うような情報(オプション情報)を登録して表示できる機能」です。
例えば、上のように記事の下にプロフィールを表示するケースを考えます。一人で全ての記事を書いている場合、プロフィールは記事ごとに変わりません。通常のカスタムフィールドであれば、記事ごとに内容が変わるので投稿ページで情報を入力しますが、プロフィールの場合は毎回入力する必要はありません。
オプションページを作成すると、上のようにWordPressの管理画面のメニューに新しく追加されます。ここでは、「プロフィール」というオプションページを作成しています。
「プロフィール」のメニューをクリックしてオプションページを開くと、上のようにプロフィールの説明と写真を登録する画面が表示されます。このように、サイト全体で使うような情報を登録して表示できるのがオプションページです。
オプションページの使い方
1. オプションページを作成する
オプションページを使うためには、まず最初にオプションページを作成します。
if(function_exists('acf_add_options_page')) {
acf_add_options_page(array(
'page_title' => 'プロフィールの設定',
'menu_title' => 'プロフィール',
'menu_slug' => 'profile-settings'
));
}
それには、上のように「acf_add_options_page」という関数をfunctions.phpに記載します。ここではプロフィールを例にしていますが、それぞれ内容はご自身の使いたいように書き換えてください。
正しく記載すると、上のようにWordPressの管理画面にオプションページのメニューが追加されます。メニューの文字は「menu_title」に設定したものが表示されます。
この段階ではまだ空のオプションページができただけなので、メニューをクリックすると「このオプションページにカスタムフィールドグループがありません。」というエラーが表示されます。2つ目の手順でカスタムフィールドを作成するとエラーが消えます。
ちなみに、オプションページは親子関係を作れます。
上の例では「基本設定」という親メニューの中に、「プロフィール」と「サイト概要」という2つの子メニュー(オプションページ)を作成しています。オプションページの数が多くなるときは、親子関係を作った方が管理しやすいでしょう。
if(function_exists('acf_add_options_page')) {
acf_add_options_page(array(
'page_title' => '基本の設定',
'menu_title' => '基本設定',
'menu_slug' => 'general-settings'
));
acf_add_options_sub_page(array(
'page_title' => 'プロフィールの設定',
'menu_title' => 'プロフィール',
'menu_slug' => 'profile-settings'
'parent_slug' => 'general-settings'
));
acf_add_options_sub_page(array(
'page_title' => 'サイト概要の設定',
'menu_title' => 'サイト概要',
'menu_slug' => 'site-settings',
'parent_slug' => 'general-settings'
));
}
親のオプションページは「acf_add_options_page」という関数で追加します。そして、子のオプションページは「acf_add_options_sub_page」という関数で追加して、「parent_slug」に親のオプションページの「menu_slug」を指定します。
2. カスタムフィールドを作成する
次に、オプションページで使うカスタムフィールドを作成します。
やり方は通常のカスタムフィールドと基本的に同じです。ここでは、「プロフィールの説明(profile_description)」と「プロフィールの写真(profile_image)」という2つのカスタムフィールドを作成しました。
オプションページで使うカスタムフィールドを作成するときの違いは一つだけです。それは、位置のルールを設定する際に、「オプションページ」「等しい」「○○(オプションページ名)」という条件を選ぶことです。
ここまでの作業が正常に終わると、オプションページのメニューをクリックすると上のようにカスタムフィールドの情報を登録する画面が表示されます。
3. オプションページで登録した情報を表示する
<?php the_field('profile_description', 'option'); ?>
<?php $profile_description = get_field('profile_description', 'option'); ?>
オプションページで登録した情報を表示するプログラムを書きます。通常のカスタムフィールドと基本的には同じで、表示するときは「the_field」、取得するときは「get_field」を使います。違う部分は、関数の引数に「option」を指定するところです。
(応用編)おすすめの記事を表示する
ここからは、今までの応用として、オプションページを使った具体例を紹介します。
まずは、サイトのトップページにおすすめの記事を表示するケースを考えます。
トップページの上部はとても目立つ場所です。そこに多くの人に読まれている人気の記事や収益につながる記事を表示することで、サイトのファンや収益を増やすことを期待できます。
カスタムフィールドの作成
「1. オプションページを作成する」の手順は同じなので省略します。
- フィールドラベル:おすすめの記事
- フィールド名:pickup_page
- フィールドタイプ:関連
- 必須か?:いいえ
- フィルター:検索、タクソノミー
- 返り値のフォーマット:投稿オブジェクト
オプションページを作成したら、上のようにカスタムフィールドを作成します。位置のルールでは該当するオプションページを選択してください。
オプションページとカスタムフィールドの作成が完了すると、オプションページには上のようなおすすめの記事を選択する項目が表示されます。このように、Webサイト制作の知識がない人でも簡単におすすめの記事を変更できることがオプションページを使うメリットの一つです。
オプションページの情報の表示
<?php
$pickup_page = get_field('pickup_page', 'option');
if ($pickup_page) :
?>
<h2>おすすめの記事</h2>
<?php
foreach ($pickup_page as $post) :
setup_postdata($post);
?>
<div>
<div>
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('medium'); ?>
</a>
</div>
<div>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
</div>
<?php
endforeach;
wp_reset_postdata();
endif;
?>
※HTMLやCSSなど細かい部分は省略しています。
get_fieldでオプションページの情報を取得して、foreachで順番に表示しています。setup_postdataは投稿の情報を変数に設定する関数で、これによりthe_permalink、the_post_thumbnail、the_titleといった関数を使えるようになります。記載するテンプレートはテーマによって異なりますが、例えば「index.php」や「front-page.php」になります。
(応用編)特定の記事を一覧から除外する
「(応用編)おすすめの記事を表示する」の補足です。このままでは、おすすめの記事に表示したものは、新着記事にも2重に表示されてしまいます。新着記事には重複して表示しないようにするには、functions.phpに以下のような処理を記載します。
function customize_main_query($query) {
if (is_front_page() || is_home()) {
$pickup_page_list = get_field('pickup_page', 'option');
foreach($pickup_page_list as $pickup_page) {
$pickup_page_id[] = $pickup_page->ID;
}
$query->set('post__not_in', $pickup_page_id);
return;
}
}
add_action('pre_get_posts', 'customize_main_query');
トップページの新着記事の一覧を取得する前に呼ばれる処理です。先ほどと同様にget_fieldでオプションページの情報を取得して、そこに登録されている投稿のIDは「post__not_in」で除外しています。
(応用編)カスタム投稿タイプでメタディスクリプションやOGPタグを設定する
カスタム投稿タイプの一覧(アーカイブ)ページにおいて、メタディスクリプションやOGPタグを設定します。メタディスクリプションは検索結果のスニペットとして表示される情報です。
また、OGPタグはツイッターやフェイスブックなどのSNSで記事が拡散されるときに表示される説明や画像のことです。
メタディスクリプションとOGPタグは、クリック率に影響する非常に重要な設定です。そこで、カスタム投稿タイプの一覧ページにおいて、これらの情報を設定できるようにオプションページを使って説明や画像を登録します。
上の図がオプションページの完成形のイメージです。「投稿タイプのID」にカスタム投稿タイプの文字列を入力し、それに対する説明と画像を登録します。
ちなみに、「CPT UI」というプラグインを使っていれば、わざわざオプションページに説明のカスタムフィールドを作らなくても、「投稿タイプの説明」という項目で設定できます。「投稿タイプの説明」は以下のように取得できます。
$post_type = get_query_var('post_type');
$post_type_object = get_post_type_object($post_type);
$post_type_description = $post_type_object->description;
カスタムフィールドの作成
フィールド
- フィールドラベル:投稿タイプのメタ情報一覧
- フィールド名:post_type_meta_list
- フィールドタイプ:繰り返しフィールド
サブフィールド1
- フィールドラベル:投稿タイプのID
- フィールド名:post_type_id
- フィールドタイプ:テキスト
- 必須か?:はい
サブフィールド2
- フィールドラベル:投稿タイプの説明
- フィールド名:post_type_description
- フィールドタイプ:テキストエリア
- 必須か?:はい
- 行数:4
- 改行:なにもしない
サブフィールド3
- フィールドラベル:投稿タイプの画像
- フィールド名:post_type_image
- フィールドタイプ:画像
- 必須か?:はい
- 返り値:画像URL
- プレビューサイズ:中
繰り返しフィールドを使わなくてもできますが、カスタム投稿タイプの数が多い場合を想定して使っています。なお、繰り返しフィールドについては以下の記事で詳しく説明しています。
オプションページの情報の表示
function customize_header_meta() {
$url = '';
$type = '';
$title = '';
$image = '';
$description = '';
$meta = '';
if(is_post_type_archive()) {
$post_type = get_query_var('post_type');
$url = get_post_type_archive_link($post_type);
$type = 'article';
$post_type_object = get_post_type_object($post_type);
if(!empty($post_type_object)) {
$title = $post_type_object->label;
}
$post_type_meta_list = get_field('post_type_meta_list', 'option');
if ($post_type_meta_list) {
foreach ($post_type_meta_list as $post_type_meta) {
if ($post_type_meta[post_type_id] == $post_type) {
$image = $post_type_meta[post_type_image];
$description = $post_type_meta[post_type_description];
}
}
}
}
if(is_post_type_archive()) {
$meta .= '<meta name="description" content="'.esc_textarea($description).'" />' . "\n";
$meta .= '<meta property="og:url" content="'.esc_url($url).'" />' . "\n";
$meta .= '<meta property="og:type" content="'.esc_html($type).'" />' . "\n";
$meta .= '<meta property="og:title" content="'.esc_html($title).'" />' . "\n";
$meta .= '<meta property="og:image" content="'.esc_url($image).'" />' . "\n";
$meta .= '<meta property="og:description" content="'.esc_textarea($description).'" />' . "\n";
$meta .= '<meta property="og:site_name" content="サイト名" />' . "\n";
$meta .= '<meta content="summary_large_image" name="twitter:card" />' . "\n";
}
}
add_action('wp_head', 'customize_header_meta');
※一部のタグや投稿タイプ以外の設定などは省略しています。
get_query_varで現在表示するカスタム投稿タイプを取得して、それがオプションページで登録した「post_type_id」と等しければ、「post_type_image」と「post_type_description」を変数に設定しています。後半はメタディスクリプションとOGPタグを生成する処理になります。
コメント(現在、質問は受け付けていません)