WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する:オリジナルカスタムフィールドの記述方法

Webの知識がない方でも簡単にページ作成や修正ができるよう、オリジナルのカスタムフィールドを使って投稿を管理できるようにしたサイトがあるのですが、便利にすればするほど『もっとこうしたい!ああしたい!』がでてきてしまうもんですよね。

WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する方法:オリジナルカスタムフィールドの記述方法

と言うわけで今回は『WordPressの管理画面で『タグ』のメタボックスを『カテゴリー』のように選択するタグメタボックスを設置し、一括で選択解除するボタンも設置する方法』です。

『タグ』のメタボックスを『カテゴリー』のようにする

流れとしては「デフォルトのタグメタボックスを削除」し、新たにオリジナルのカテゴリーのように「チェックボックスで選択が可能なタグメタボックスを作る」と言う流れになります。

WordPressの管理画面でタグをカテゴリーのように選択する&一括で選択解除するボタンも設置する方法:オリジナルカスタムフィールドの記述方法

デフォルトのタグメタボックスを削除する

まずはデフォルトのタグメタボックスを削除します。

//----------デフォルトの Tag MetaBoxを削除
function remove_post_tags_metabox() {
	$id = 'tagsdiv-post_tag'; // このIDはソースコードから確認
	$post_type = 'post'; // 投稿画面からのみ削除
	$position = 'side';
	remove_meta_box( $id, $post_type, $position );
}
add_action( 'admin_menu', 'remove_post_tags_metabox');

ちなみにこのデフォルトで入っているタグのメタボックスを編集してみよう色々と頑張ってみたのですが、残念ながらできませんでした。(もし方法をご存知の方いれば、是非教えてください!)

オリジナルのタグメタボックスを追加する

ちょっと長いですが、こんな感じです。
functions.phpに記述しているので、phpタグを閉じて htmlの記述を入れ込んだりしています。

//----------オリジナルの Tag MetaBoxを追加
function add_new_tags_metabox(){
	$id = 'abc-tagsdiv-post_tag'; // 任意の文字列
	$heading = 'タグ情報'; // メタボックスのヘッダー部に表示される文字
	$callback = 'abc_metabox_content'; // callback function の名前
	$post_type = 'post';
	$position = 'side';
	$pri = 'default'; // プライオリティー 'default' がよいようです
	add_meta_box( $id, $heading, $callback, $post_type, $position, $pri );
}
add_action( 'admin_menu', 'add_new_tags_metabox');
 
/*----- MetaBox内のhtml記述 -----*/
function abc_metabox_content($post) {  
	// すべての記事のタグをオブジェクトの配列として取得
	$all_tags = get_terms( array('taxonomy' => 'post_tag', 'hide_empty' => 0) ); 
	// 投稿に割り当てられたすべてのタグを取得
	$all_tags_of_post = get_the_terms( $post->ID, 'post_tag' );  
	// 投稿タグのIDの配列を作成
	$ids = array();
	if ( $all_tags_of_post ) {
		foreach ($all_tags_of_post as $tag ) {
			$ids[] = $tag->term_id;
		}
	}
?>
<style>.taxonomydiv .tabs-panel{max-height:450px!important;}</style><!--最低限のcssを記述-->
<div class="taxonomydiv">
  <p>タグ一覧</p>
  <div id="taxonomy-post_tag" class="tabs-panel">
    <input type="hidden" name="tax_input[post_tag][]" value="0" />
    <ul>
<?php
      foreach( $all_tags as $tag ){
        // デフォルトではチェックなし
        $checked = "";
        // ループ内のタグのIDが、割り当てられた投稿タグの配列にある場合、チェックボックスをオンにする
        if ( in_array( $tag->term_id, $ids ) ) {
          $checked = " checked='checked'";
        }
        $id = 'post_tag-' . $tag->term_id;
        echo "
        <li id='{$id}'>
          <label><input type='checkbox' name='tax_input[post_tag][]' id='in-$id'". $checked ." value='$tag->slug' /> $tag->name</label><br />
        </li>";
      }    
?>
    </ul>
  </div>
  <p class="clearBtn01"><a id="tag-clear" class="button">タグクリア</a></p><!--タグを全て消すボタン 以下の記述と連動 いらない場合は削除可-->
</div>
<?php
}

全てのタグをクリアするボタンを設置する

このボタンを設置することで、選択されたタグのチェックボックスが全てクリアになります。
この機能がいらない場合はこの記述は不要で、上記50行目の『タグクリア』ボタンも削除してください。

function add_field_clear_button() {
?>
<script>
(function($) {
  // 「タグクリアボタン」がクリックされた時の処理
  $(document).on('click', '#tag-clear', function(e) {
      if (window.confirm("「タグ情報」をクリアしますか?")) {
          // タグを全てクリアする
          var tagClear = document.getElementsByName('tax_input[post_tag][]');
          for (let i = 0; i < tagClear.length; i++) {
              tagClear[i].checked = false;
          }
      }
  });
}(jQuery));
</script>
<?php
}
// 投稿画面、編集画面に挙動を追加
add_action( 'admin_footer-post-new.php', 'add_field_clear_button' );//新規投稿画面にボタン追加
add_action( 'admin_footer-post.php', 'add_field_clear_button' );//投稿編集画面にボタン追加

まとめ

どんな方でも簡単にページ作成や修正ができるようにカスタマイズし、便利にすればするほど『もっとこうしたい!ああしたい!』がでてきてその都度機能を追加し、今ではだいぶ便利に使いやすくなったのですが、アパレルの商品ということで、カラー・種類などのタグ情報がかなりの数になり、管理がしづらい状態になってしまってたんです。

そんな訳で今回、カテゴリーのようなメタボックスにして、選択したチェックも一括でクリアできるようにしたのですが、機能を追加して便利にすればするほど、functions.phpを後からみた時に『これなんやったっけ?』ともなってもしまうので、今回も覚書でした!

Google AdS



関連記事

OPG設定_3

WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!


先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちら …

記事を読む▷


『reCAPTCHA v3』を問い合わせページのみ&左側に表示させる方法:その1


最近お問い合わせページにちょくちょく迷惑メールがくるようになりました。『Akismet Anti-Spam』も有効にした…

記事を読む▷


サーバー移転の手順 その3:移転後のトラブル


前回、前々回と書きましたが、サーバーの移転、少々、いや、かなりやいこしいです。できたあとは疲れ果てて『もーできたしえーわ…

記事を読む▷


WordPressのメニューを、footer等用に作成して追加する方法


WorPressのデフォルトでは、gnavi(グローバルナビ)にメニューを追加し、表示させることはできますが、foote…

記事を読む▷


app_id確認方法2

OGP設定で必要な『アプリID(app_id)』の確認方法:アプリの作成方法も「FACEBOOK for Developers」にて


以前書いていたOGPの設定方法の情報が古くなっていたので、【2021版】として『【2021】FacebookやTwitt…

記事を読む▷


Message

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP