WordPressでAdvanced Custom Fieldsを使う!

Advanced Custom Fieldsで設定しているサブタイトルです。

はじめに

WordPressを使っていると、既存のタイトルやエディタ以外にも設定したい項目が出てくると思います。
例えばこちらのサイトではタイトルの下の部分、アイキャッチ画像の右側(スマートホンレイアウトではれば下側)にサブタイトルを設定しています。

また、DEMOページには元々のページに戻るボタンとして「記事に戻る」ボタンを配置しています。

これらを記事を書くたびにレイアウトを整えて配置するのは、不可能ではありませんが面倒ですよね。

記事のタイトルの下には、サブタイトルを。
DEMOページの終わりには「記事へ戻る」ボタンを。

こういったオリジナルな設定は、カスタムフィールドを使えばできるようになります。
Wordpressに元々ある機能(投稿画面上部、表示オプションからのカスタムフィールド)を使ってもできることなのですが、プラグインのAdvanced Custom Fieldsはカスタムフィールドを使い勝手よくしてくれるのでわたしはとても重宝しています。

今回はこのAdvanced Custom Fieldsのプラグイン導入方法をこちらのサイトでの例に沿ってご紹介します。

必要なスキル/環境

  • FTPソフト
  • HTML
  • CSS
  • PHP

1.プラグインのインストール

プラグイン-新規追加より、Advanced Custom Fieldsをインストールします。

注)wordpressのバージョンが4.9までしかサポートされていないので、今後バージョンアップがないようなら、他のプラグインも検討していかないといけないかもしれません。(2018年2月現在、最新版はWordPress 4.9.3)

プラグインのインストールが終わったら、有効化すると管理画面のサイドバーに「カスタムフィールド」という項目が出てきます。

2.プラグインの設定

カスタムフィールド-新規追加より、フィールドグループを設定します。

フィールドグループの名前を設定し、フィールドを追加します。
フィールドグループは、追加したい項目の設定対象ごとのグループです。
今回の例で言うと、サブタイトルとDEMOページの「記事へ戻る」ボタンは別の設定対象になります。
サブタイトルはすべての投稿記事に表示させたい項目ですが、「記事へ戻る」ボタンはカテゴリがDEMOの投稿のみに表示させたいので、別のフィールドグループとして作成します。

サブタイトルの設定


サブタイトルには、フィールドタイプ:テキストを使います。
テキストボックスのフィールドを投稿画面に追加することになります。


位置は、フィールドグループを表示する条件になります。
サブタイトルはすべての投稿に表示させたいので、投稿タイプがpostの場合に表示されるよう設定して、保存します。


投稿画面にカスタムフィールドが追加されました!

PHPの設定にすすみたい方はこちら↓

ボタン(リンクの挿入)の設定


リンク先のURLを取得するため、フィールドタイプ:ページリンクを使います。
投稿タイプで選んだタイプの一覧からリンクを取得できます。
DEMOページの元記事はすべて投稿ページなので、ここではpostを選択します。


このフィールドはカテゴリがDEMOの場合のみに表示させたいので、Post CategoryがDEMOに等しい条件に設定して、保存します。


カテゴリーがDEMOの投稿画面にページリンクを取得できるカスタムフィールドが追加されました!

PHPの設定にすすみたい方はこちら↓

ボタン(固定ページへのリンク)の設定

こちらのサイトではチェックボックスタイプの導入は今のところしていないのですが、クライアントさんのサイトで導入した例がありましたので、ご紹介がてらDEMOページも作成しました。

Salon Greenは「子宮美容トリートメント」というオリジナルメソッドに基づくトリートメントを行っているサロンです。子宮をケアする発酵ごはんの料理教室と子宮トリートメントの予約を承っていますので、お気軽にお問い合わせください。
  • 記事の終わりに特定のページへのリンクボタンを表示したい
  • さらにボタンの種類をその記事ごとに選びたい

というご要望でしたので、フィールドタイプ:チェックボックスを使うことにしました。
DEMO用に同じような条件でカスタムフィールドを用意したのが下記の通り。

選択し(選択肢?)には、値:ラベルの順で選択肢ごとに改行します。
この値はPHPで取得する値になるので、英数字のみです。


投稿画面に挿入したいボタンを選択できるチェックボックスが追加されました。

表示するためのphp修正

さて、それぞれ投稿画面のphpを修正していきます。
Simplicity2のテーマを使っている場合、投稿ページに関することが書かれているのはentry-body.phpなので、子テーマを使っている場合は親テーマからFTPソフトなどを使ってダウンロードします。
他のテーマを使っている場合は、投稿ページにあたるphpを探して、子テーマを使っている場合は親テーマからダウンロードします。
親テーマをそのまま修正されている方は、バックアップなどをとった上で、対象のphpを修正します。

サブタイトルの設定

サブタイトルはこちらのサイトの場合、アイキャッチの横に設定を入れています。
Simplicity2のテーマではアイキャッチに関する部分は別のphpで管理しているので、entry-eye-catch.phpも親テーマからダウンロードして修正しました。

entry-eye-catch.phpの修正(一部抜粋)
<figure class="eye-catch">
    <?php
        //アイキャッチの表示
		if (is_single()) {
		//投稿ページ
		the_post_thumbnail( 'medium' ); 
		 $txt = get_field('post-subtitle');
		 if($txt){
			echo '<div class="ref">' .$txt . '</div>';
		 }
		} else {
		// それ以外(固定ページ)
		 the_post_thumbnail();
		}
    ?>
</figure>

元々、

the_post_thumbnail();

のみだった部分に、

if (is_single()) {
//投稿ページの場合
}

という判定を入れて、サムネイルのサイズを半分にし、右隣に

$txt = get_field('post-subtitle');
 if($txt){
	echo '<div class="ref">' .$txt . '</div>';
}

post-subtitleというフィールドがある場合には、そのフィールドの値を取得して表示する、という流れになっています。
CSSもアイキャッチの横にくるように、下記の通り設定しています。

.eye-catch .ref{
	color: #999;
	background-color: #fff;
    padding: 10px 20px;
    border-radius: 2px;
    font-size: 18px;
}

.eye-catch:after {
  content: "";
  clear: both;
  display: block;
}
.eye-catch img{
 border:1px #dddddd solid;
 box-sizing: content-box;
 float: left;
 margin-right: 10px;
}

ボタン(リンクの挿入)の設定

本文のすぐ後ろの部分にボタンを挿入するようにします。

<div id="the-content" class="entry-content">
  <?php //記事本文の表示
    the_content( get_theme_text_read_more() ); //デフォルト:続きを読む?>
  </div>
  <?php 
  $pagelink = get_field('linktoparent');
  if($pagelink){ 
    foreach((array)$pagelink as $value) {
		echo '<div class="linkto"><a href="' .$value . '" class="square_btn">記事へ戻る</a></div>';
    }
 } ?>

記事本文が

 <div id="the-content" class="entry-content">
  <?php //記事本文の表示
    the_content( get_theme_text_read_more() ); //デフォルト:続きを読む?>
  </div>

で終わったあとに

<?php 
  $pagelink = get_field('linktoparent');
  if($pagelink){ 
    foreach((array)$pagelink as $value) {
		echo '<div class="linkto"><a href="' .$value . '" class="square_btn">記事へ戻る</a></div>';
    }
 } ?>

linktoparentというフィールドを取得し、あった場合にはURLを取得して、アンカータグのhref部分に挿入します。
そして、cssでアンカータグをボタンとして設定します。

.square_btn {
    margin:5px;
	display: inline-block;
    padding: 0.3em 2em;
    text-decoration: none;
    color: #fff;
    border: solid 2px #67c5ff;
    background: #67c5ff;
	border-radius: 3px;
    transition: .4s;
	font-size:1.2em;
}

.square_btn:hover {
    background: #fff;
    color: #67c5ff !important;
}

ボタン(固定ページへのリンク)の設定

本文のすぐ後ろの部分にチェックボックスでチェックしたボタンを挿入するようにします。

<?php //メニューへボタン追加
$field = get_field_object('test_check'); //フィールド情報を取得
$check = get_field('test_check'); //現在選択されている値
if($check):
	foreach($check as $value): 
		 if($value == 'btn1'){
			$btn_id = 'toggle1';
			$url = 'http://blog.pippuriric.com/';  //サイトトップへ
			$col = 'square_btn_pink'; //pink
		}else if($value == 'btn2'){
			$btn_id = 'toggle2';
			$url = 'http://blog.pippuriric.com/category/demo/';  //DEMO一覧へ 
			$col ='square_btn_green'; //green
		}else if($value == 'btn3'){
			$btn_id = 'toggle3';
			$url = 'http://blog.pippuriric.com/aboutme/';  //このサイトについてへ
			$col ='square_btn_grey'; //grey
		}else{
			$btn_id = 'toggle0';
			$url = 'http://blog.pippuriric.com/'; 
			$col ='square_btn'; //blue
		}
?>
<div class="menu_link" >
	<a href="<?php echo $url; ?>" class="<?php echo $col; ?>"><?php echo $field['choices'][ $value ]; ?></a>
</div>
<?php 
	endforeach;
endif; ?> 

まずは下記でフィールド情報全体と、選択されている値を取得します。

$field = get_field_object('btn_menu'); //フィールド情報を取得
$check = get_field('btn_menu'); //現在選択されている値

もし何かしら選択されていた場合

<?php if($check): ?>
//選択されている値がある場合
//ここで処理されます。
<?php endif ?>

現在選択されている値の個数分のループ

<?php foreach($check as $value): ?>
// チェックされた個数分のループです。
// チェックされた値を$valueへ入れて処理します。
<?php endforeach; ?>

※ループの中の処理
選択されている値に沿って、ボタンに挿入するリンクのurlを設定していきます。

<?php if($value == 'btn1'){
		$btn_id = 'toggle1';
		$url = 'http://blog.pippuriric.com/';  //サイトトップへ
		$col = 'square_btn_pink'; //ボタンの色:pink
	}else if($value == 'btn2'){
		$btn_id = 'toggle2';
		$url = 'http://blog.pippuriric.com/category/demo/';  //DEMO一覧へ 
		$col ='square_btn_green'; //ボタンの色:green
	}else if($value == 'btn3'){
		$btn_id = 'toggle3';
		$url = 'http://blog.pippuriric.com/aboutme/';  //このサイトについてへ
		$col ='square_btn_grey'; //ボタンの色:grey
	}else{
		$btn_id = 'toggle0';
		$url = 'http://blog.pippuriric.com/'; 
		$col ='square_btn'; //ボタンの色:blue
	}
?>

※ループの中の処理
urlの設定などが終わったら、実際にタグで書き出しの処理です。

<div class="menu_link" >
         <a href="<?php echo $url; ?>" class="<?php echo $col; ?>"><?php echo $field['choices'][ $value ]; ?></a>
</div>

チェックボックスで選択した値によって設定されたクラスを挿入しています。
オブジェクトとして取得した$fieldから$valueのラベルを取得しています。

関係するCSS
ボタンの色や形の設定をしています。

.square_btn {
    margin:5px;
	display: inline-block;
    padding: 0.3em 2em;
    text-decoration: none;
    color: #fff;
    border: solid 2px #67c5ff;
    background: #67c5ff;
	border-radius: 3px;
    transition: .4s;
	font-size:1.2em;
}

.square_btn:hover {
    background: #fff;
    color: #67c5ff !important;
}

.square_btn_green {
    margin:5px;
	display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #09b747;
    border: solid 2px #09b747;
    border-radius: 3px;
    transition: .4s;
}

.square_btn_green:hover {
    background:#09b747;
    color: #ffffff !important;
}

.square_btn_pink {
    margin:5px;
	display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color: #e479b9;
    border: solid 2px #e479b9;
    border-radius: 3px;
    transition: .4s;
}

.square_btn_pink:hover {
    background:#e479b9;
    color: #ffffff !important;
}

.square_btn_grey {
    margin:5px;
	display: inline-block;
    padding: 0.3em 1em;
    text-decoration: none;
    color:  #aaa;
    border: solid 2px #aaa;
    border-radius: 3px;
    transition: .4s;
}

.square_btn_grey:hover {
    background:#aaa;
    color: #ffffff !important;
}

【DEMO】カスタムフィールドのチェックボックスで設定したボタン

おわりに

少し長くなりましたが、便利なカスタムフィールド、ぜひ試してみてください!