WordPressで投稿編集画面のカテゴリー欄をカスタマイズする

ワードプレスのテーマtwentytwentyを基盤に、投稿編集画面のカテゴリー欄の表示をカスタマイズする実装をしたので、備忘録的にこの記事を残す。

環境情報

PHP：version 7.3.12
WordPress：version 5.5.3
WPテーマ：twentytwenty

「よく使うもの」と「新規カテゴリーを追加」を非表示

「よく使うもの」タブと「新規カテゴリーを追加」リンクを同時に非表示にする方法をまず紹介します。

functions.php

// カテゴリーの「よく使うもの」と「新規カテゴリーを追加」を非表示
function my_admin_style() {
    echo '<style>
    div.categorydiv li.hide-if-no-js{
        display:none;
    }
    div.wp-hidden-children a.hide-if-no-js{
        display:none;
    }
    </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');

div.categorydiv li.hide-if-no-js で囲まれた部分が「よく使うもの」、div.wp-hidden-children a.hide-if-no-js で囲まれた部分が「新規カテゴリーを追加」をそれぞれ非表示にする内容です。使われる際は実装したい内容に合わせて適宜変更してください。

カテゴリーの選択を一つのみにする

カテゴリーで選択できるものを一つだけにする方法を紹介します。

functions.php

function category_one_select() {
?>
    <script type="text/javascript">
        jQuery(function($) {
            // 投稿画面のカテゴリー選択を制限
            var categorydiv = $( '#categorydiv input[type=checkbox]' );
            categorydiv.click( function() {
                $(this).parents( '#categorydiv' ).find( 'input[type=checkbox]' ).attr('checked', false);
                $(this).attr( 'checked', true );
            });
            // クイック編集のカテゴリー選択を制限
            var inline_edit_col_center = $( '.inline-edit-col-center input[type=checkbox]' );
            inline_edit_col_center.click( function() {
                $(this).parents( '.inline-edit-col-center' ).find( 'input[type=checkbox]' ).attr( 'checked', false );
                $(this).attr( 'checked', true );
            });
        });
    </script>
<?php
}
add_action( 'admin_print_footer_scripts', 'category_one_select' );

//タクソノミー選択画面で一つだけしか選択できないようにする（ラジオボタン）。
function select_to_radio_topic_category() {
    ?>
    <script type="text/javascript">
    jQuery( function( $ ) {
        // 投稿画面
        $( '#taxonomy-topic_category input[type=checkbox]' ).each( function() {
            $( this ).replaceWith( $( this ).clone().attr( 'type', 'radio' ) );
        } );

        // 一覧画面
        var topic_category_checklist = $( '.topic_category-checklist input[type=checkbox]' );
        topic_category_checklist.click( function() {
            $( this ).parents( '.topic_category-checklist' ).find( ' input[type=checkbox]' ).attr( 'checked', false );
            $( this ).attr( 'checked', true );
        } );
    } );
    </script>
    <?php
}
add_action( 'admin_print_footer_scripts', 'select_to_radio_topic_category' );

今回は投稿編集画面とクイック編集画面の両方でこの機能が実装されるように処理をまとめています。使われる際は実装したい内容に合わせて適宜変更してください。