効率化！WordPressのクラシックエディタの投稿編集画面のタグを選択入力できる実装方法

みなさんこんにちは！エンジニアの高澤です！

今回はWordPressのクラシックエディタの投稿編集画面のタグを選択入力できる実装方法について解説していきたいと思います。

今回の内容は筆者自身が不便だなと感じた部分を筆者なりにカスタマイズした内容で、もし誰かのお役に立てるならといった意味合いで記事にいたしました。

使えそうであれば、お役立ていただけますと幸いです。

当記事で実装する内容

まずは当記事で実装する内容について解説しておきたいと思います。

当記事のコードの実装する前は下図のようにデフォルトの状態になっているかと思います。

タグの文字を入力して設定して「追加」ボタンをクリックする仕様となっております。

筆者的にはこのままではひと記事ずついちいちタグを入力しなければならない手間がかかってしまうことを解決したいと思いました。

そこで当記事の実装コードを適用することで、下図のように入力ボックスの上にすでにタグ設定ページで設定済みのタグを自動で出力してセレクトボックスから選択できるようになっております。

セレクトボックスを選択すると下図のように設定済みのタグを選択できます。

選択したら、自動で入力ボックスに入力されます。

「追加」ボタンをクリックすることでタグを追加できます。

最後に投稿画面の「保存」をクリックしていただければ無事タグを設定して記事を作成できるかと思います。

実装する方法

それでは早速実装について解説していきたいと思います。

以下のコードをfunctions.phpにコピー＆ペーストしてください。

<?php
function display_registered_tags_above_tag_box() {
	if(is_admin() && get_post_type() == 'blog'):
		$admin_post_type_blog_tags = array();
		// 登録されたタグを取得
		$tags = get_terms(array(
			'taxonomy' => 'post_tag',  // タグのタクソノミー
			'hide_empty' => false,
		));
		foreach($tags as $tag):
			array_push($admin_post_type_blog_tags, $tag->name);
		endforeach;
    ?>
    <script>
        jQuery(document).ready(function($) {
			$('.tagsdiv').before('<div class="admin_post_type_blog_tags_outputWrap" style="margin-top:17px;"><select id="admin_post_type_blog_tags_output"></select><input type="button" id="admin_post_type_blog_tags_output_remove" class="button" value="入力削除" style="margin-left:3px;"></div>');
			let jsArray = <?php echo json_encode($admin_post_type_blog_tags); ?>;
			// JavaScript（jQuery）でPHPの配列を利用
			$('#admin_post_type_blog_tags_output').append('<option value="">タグを選択する</option>');
			for (var i = 0; i < jsArray.length; i++) {
				// 配列の要素をページに表示
				$('#admin_post_type_blog_tags_output').append('<option value="' + jsArray[i] + '">' + jsArray[i] + '</option>');
			}
			$('#admin_post_type_blog_tags_output').change(function(){
				$('#new-tag-post_tag').val($('#admin_post_type_blog_tags_output option:selected').val());
			});
			$('#admin_post_type_blog_tags_output_remove').click(function(){
				$('#new-tag-post_tag').val('');
			});
        });
    </script>
    <?php
	endif;
}
// 管理画面の head セクションにスクリプトを追加するためのアクションフックを追加
add_action('admin_print_footer_scripts', 'display_registered_tags_above_tag_box');

上記コードは、WordPressの管理画面でブログ記事（投稿タイプ「blog」）を編集する際に、投稿タグの入力欄の上に、登録されたタグを表示し、そのタグを選択することで投稿タグを簡単に追加できるようにするものです。

上記実装コードについての内容は以下になります。

ご確認いただけましたら幸いです。

• display_registered_tags_above_tag_box 関数
  管理画面で登録されたタグを表示するためのメインの関数です。この関数は、admin_print_footer_scriptsアクションフックにフックされ、管理画面のフッター部分にスクリプトを追加します。
• is_admin() および get_post_type() == 'blog'
  条件文は、現在が管理画面かつブログ記事の編集画面である場合に処理が実行されるようにします。これにより、他の管理画面や投稿タイプの編集画面には影響が及びません。
• $admin_post_type_blog_tags
  登録されたタグ名を格納する配列です。
• get_terms() 関数
  タグのタクソノミーから登録されたタグを取得します。
• json_encode() 関数
  PHPの配列をJavaScriptで利用するためにJSON形式にエンコードします。
• JavaScript部分
  エンコードされたタグ名の配列を使用して、<select> 要素にオプションを追加し、選択したタグを投稿タグの入力欄に反映する処理が行われます。

当記事のサンプルコードでは、カスタム投稿タイプの「blog」を想定しておりますので、もし投稿「post」やご自身で作成されたカスタム投稿タイプ用にカスタマイズしたければ、コード中の「blog」を任意の投稿タイプ名に変更してください。

このコードを使用することで、WordPressの管理画面でブログ記事を編集する際に、登録されたタグを選択して簡単に追加できるようになります。

まとめ

WordPressのクラシックエディタの投稿編集画面のタグを選択入力できる実装方法についての解説は以上になります。

今やブロックエディタが主流かと思いますが、もし何か理由がありクラシックエディタを使用している場合で、かつタグを利用している場合は当記事の内容はお役立ていただけるかと思います。

よろしければぜひご活用いただけましたら幸いです。