ワードプレスのカスタムフィールドで文字出力するときに文字数制限をかける方法

本日はワードプレスのカスタムフィールド関連の覚え書きです。ワードプレスでは「カスタムフィールド」を使うと投稿画面をカスタマイズできます。カスタムフィールドは独自の入力項目を指します。たとえばワードプレスでは「投稿画面」に文字入力ができるフォームとして『タイトルと本文』が用意されていますよね。

もし仮にあなたが会社のブログを更新していて記事の終わりに毎度「管理人からのひと言」というメッセージを表示させているとしましょう。そんな状況であれば運営しているブログの投稿画面に「タイトルと本文」だけじゃなくて「管理人からのひと言」という入力ボックスもあったら便利だと思いませんか？

カスタムフィールドというのは名前の通り、カスタム（独自）のフィールド（入力項目）です。投稿ページにも追加できますし、当然ですが固定ページにも追加できます。また、投稿ページと同等の機能を持っているカスタム投稿ポストに対してもカスタムフィールドは設定できるのでとても柔軟に使えます。

ワードプレスのカスタムフィールドで文字出力するときに文字数制限をかける方法

少し本題とは逸れますが、ワードプレスでカスタムフィールドを追加する方法は少し難易度が高いです。普段から当たり前にワードプレスを触っていればカンタンですが、functions.phpをちょこっと編集する程度や大体の機能はプラグインのインストールがメインですという方には設定するハードルが若干高くなります。

そんなときに便利なのが「Advance Custom Field（通称ACF）」です。とても有名なプラグインなのでもしかしたらあなたも知っているかもしれません。ワードプレスではカスタムフィールドを追加するときに入力フォームの追加、値が保存できる命令、ページ側に出力する書き方などが全パターンが必要です。

しかし、ACFを使うと初心者の方でも扱いやすくなっています。プラグインを有効化するだけで専用の画面からカスタムフィールドが追加できるようになる仕組みです。専用画面で項目を選択していくとカスタムフィールド が有効になるので手軽にカスタムフィールドを扱えてしまうとても優秀なプラグインです。

ただ、１点だけ微妙な箇所があります。それはACFの有料版が「GPLライセンスではない」という点です。無料版でも相当多機能なので無料版で使っていく分には問題ありませんがもし無料版の範囲で満足できずに有料版を買うことになったらGPLではないという部分も念頭に置いてサイトを構築していく必要があります。

ライセンスに関しては使い方や解釈次第な部分もあるのですが、有料になった途端にGPLではないとなると話が変わってきますよね。となればやはり少し手間をかけてもプラグインは使わずにカスタムフィールドを追加した方が安全です。それほど難しくはないのでざっと解説させていただきますね。

カスタムフィールドを定義する方法

まずはカスタムフィールドを宣言するところから行います。以下はfunctions.phpに書きます。

// カスタムフィールドの入力フォームを定義する処理
function add_custom_field_post_input() {
	add_meta_box( 'custom-cfp_item_word_of_admin', '管理人のひと言', 'create_item_word_of_admin', 'post', 'normal' );
}
add_action( 'admin_menu', 'add_custom_field_post_input' );

この時点では投稿画面に「カスタムフィールド用の枠」しか表示されません。

管理画面にカスタムフィールドを表示させる方法

次にさきほど宣言したカスタムフィールドを「投稿画面（投稿ページ）」に追加します。

// カスタムフィールドのHTMLを管理画面に追加する時の処理
function create_item_word_of_admin() {
	$keyname = 'cfp_item_word_of_admin';
	global $post;
	$get_value = get_post_meta( $post->ID, $keyname, true );
	wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
	echo '<input type="text" class="cfp-forms" placeholder="例）今日も頑張った！" name="' . $keyname . '" value="' . $get_value . '">';
}

上記でようやく管理画面に入力フォームが設定されます。ただ、値の保存はできません。

管理画面に追加したカスタムフィールドを保存する方法

次にカスタムフィールド内に保存した文字を保存する設定が以下です。

- 新コースでワードプレスを学ぶ【AD】-

// カスタムフィールドの保存
add_action( 'save_post', 'save_custom_field' );
function save_custom_field( $post_id ) {
	$custom_fields = ['cfp_item_word_of_admin'];
	foreach( $custom_fields as $d ) {
		if ( isset( $_POST['nonce-' . $d] ) && $_POST['nonce-' . $d] ) {
			if( check_admin_referer( 'action-' . $d, 'nonce-' . $d ) ) {
				if( isset( $_POST[$d] ) && $_POST[$d] ) {
					update_post_meta( $post_id, $d, $_POST[$d] );
				} else {
					delete_post_meta( $post_id, $d, get_post_meta( $post_id, $d, true ) );
				}
			}
		}
	}
}

これで投稿画面に追加した新しい入力フォーム「管理人のひと言」が保存できる状態になりました。

ちなみに補足ですが「記事のタイトル」が空ではカスタムフィールドを保存できません。

カスタムフィールドを細かく仕上げたいならCSSでレイアウト調整を行えばより見た目も美しいです。下記では入力フォームの上下の隙間を統一して横幅が解像度に併せて目一杯広がるように設定しています。

管理画面側の設定は以上。次はホームページ側に表示させる設定に入ります。

保存したカスタムフィールドを記事側に表示させる方法

次がようやく管理画面内で保存したデータ（管理人のひと言）を記事側へ表示させる段階です。今回の想定はブログ記事の最後に「管理人のひと言」がある想定なので編集するファイルは「single.php」となります。

<?php
// 管理画面で保存されている各記事毎のカスタムフィールド（管理人のひと言）の値を取得する
$cfp_item_word_of_admin = get_post_meta($post->ID, cfp_item_word_of_admin, true);
?>

上記の命令文を使ってブログ側で値を出力する準備ができます。

管理人のひと言を表示する方法

表示させたい箇所に以下の命令文を差し込みましょう。

<p><?php echo esc_html( $cfp_item_word_of_admin ); ?></p>

ただ、この状態では「カスタムフィールド（管理人のひと言）が空でもpタグのみ出力」されてしまうので空の場合は出力しないという制御をかけます。以下が条件分岐を含んだ命令文です。

<?php $value = get_post_meta($post->ID, 'cfp_item_word_of_admin', true);?>
<?php if(empty($value)):?>
<!-- 管理画面の「管理人のひと言」欄が空だった場合 -->
<?php else:?>
<!-- 管理画面の「管理人のひと言」欄が入力されていた場合 -->
<p><?php echo esc_html( $cfp_item_word_of_admin ); ?></p>
<?php endif;?>

管理人のひと言に文字数制限をかける方法

ここからが本題のカスタムフィールドに文字数制限をかける処理。以下が100文字の制限をかけた状態です。

<?php $value = get_post_meta($post->ID, 'cfp_item_word_of_admin', true);?>
<?php if(empty($value)):?>
<!-- 管理画面の「管理人のひと言」欄が空だった場合 -->
<?php else:?>
<!-- 管理画面の「管理人のひと言」欄が入力されていた場合 -->
<p><?php echo mb_substr($post->cfp_item_word_of_admin, 0, 100); ?></p>
<?php endif;?>

もし文字数の制限まで制御するとしたらいっそのこと「カスタムフィールドをtextarea」で追加して、入力ボックスに「100文字までの文字制限機能」なども入れたりすればより快適に使いやすくなります。

文字数制限の実装はかなり複雑なので省略しますがカスタムフィールドを使えば色々な機能が実装できます。

まとめ

本日はざっとカスタムフィールドの使い方から応用までを解説させていただきました。カスタムフィールドを使えば投稿画面に項目を追加して専用の画面に変身させることも可能です。SEOランディングページでは各LPページ内で専用ボックスをディスクリプションとして読み込ませていたり細かいカスタムもしています。

カスタムフィールドも使い方と発想次第で化ける機能なのでぜひご活用くださいませ。