web-dev-qa-db-ja.com

選択したカテゴリのチェックリスト

私のブログには500以上のカテゴリがありますので、選択を続けるにはどのカテゴリがすでに選択されているかのチェックリストが必要です。

たとえば、cat1、cat2、cat3 ... cat50があり、cat3、cat5、cat7、およびcat44を選択し、さらにそれらを選択する必要がある場合は、既に選択されているもののチェックリストが必要です（タグに似たもの、あなたがタグを選択すると、彼は自動チェックによってチェックされ、タグボックスの下に書かれます）。

私が話していることを理解してください。

だから私の質問は - これをどのように開発するか（どんな提案でも、コード全体ではない）、あるいは多分私が気付いていないある種のプラグインがあるのか​​？です。

ありがとうございました

編集：

WordPress管理者（新しい投稿を追加）画面でこれが必要です

categorieswp-adminpost-metatags
5
Eager2Learn

これがあなたの管理パネルにエンキューできるスクリプトです。 「アクティブ」というカテゴリタブに新しいタブを追加します。チェックボックスがチェックされているときはいつでも、それは「アクティブ」タブリストに追加されます、あなたはそれらを削除するためにそれらを削除することもできます（チェックを外します）。

Category Metabox with Active Tab 

これを外部スクリプト、custom-tabs.jsとして追加します。

jQuery( document ).ready( function( $ ) {

    /* Ensure that there are category metaboxes */
    if( $( 'ul.category-tabs' ).length ) {
        var taxonomies = [ 'category', 'tag' ]; /* Taxonomy Slugs ( category and tag are built-in ) */

        /* Loop through each category metabox and add a new tab */
        $.each( taxonomies, function( key, taxonomy ) {

            /* Add a checkbox listener */
            /* Whenever a checkbox is checked or unchecked, remove 'Active' tab list item */
            $( '#taxonomy-' + taxonomy + ' ul.categorychecklist input[type="checkbox"]' ).change( function() {
                var label   = $( this ).parent().text().trim();     /* Grab checkbox label */
                var value   = $( this ).val();                      /* Grab checkbox value */

                /* IF it is checked, add it to the 'Active' tab */
                if( $( this ).is( ':checked' ) ) {
                    $( '#' + taxonomy + '-active ul' ).append( '<li data-val="' + value + '"><a href="javascript:void(0);"><span class="dashicons dashicons-no-alt" style="font-size:18px;text-decoration:none;margin-right:4px;"></span>' + label + '</a></li>' );

                /* IF it is unchecked, remove it from the 'Active' tab */
                } else {
                    $( '#' + taxonomy + '-active li[data-val="' + value +'"]' ).remove();
                }
            } );

            /* Add click listener to the newly added 'Active' tab links */
            $( 'div.inside' ).on( 'click', '#' + taxonomy + '-active a', function() {
                var value = $( this ).parent().attr( 'data-val' );

                /* Uncheck any values that have the clicked value */
                $( this ).parents( 'div.inside' ).find( 'input[value="' + value +'"]' ).prop( 'checked', false );

                /* Remove 'Active' tab link */
                $( this ).parent().remove();
            } );

            /* Append an 'Active' tab */
            $( '#' + taxonomy + '-tabs' ).append( '<li><a href="#' + taxonomy + '-active">Active</a></li>' );
            $parent = $( '#' + taxonomy + '-tabs' ).parents( 'div.inside' );

            /* Add the 'Active' tab panel and content - display none */
            $parent.find( 'div.tabs-panel:last' ).before( '<div id="' + taxonomy + '-active" class="tabs-panel" style="display: none;"><ul></ul></div>' );

            /* IF there are any checked values on load, trigger change. */
            $parent.find( '#' + taxonomy + '-all input:checked' ).each( function() {
                $( this ).trigger( 'change' );
            } );

        } );

    }

} );

次に、管理パネルにエンキューすることができます。

function load_custom_tabs_scripts() {
    wp_enqueue_script( 'custom_tabs', get_template_directory_uri() . '/scripts/custom-tabs.js' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_tabs_scripts' );

問題が発生した場合はお知らせください。

7
Howdy_McGee

最も簡単な方法は、メタボックスを追加し、既に選択されているカテゴリを表示するためにget_the_category_listを使用することです。確認後にタグが専用のボックスに表示されるように、投稿を保存した場合にのみ機能します。

あなたがその場でこれをしたい場合は、あなたのメタボックスを埋めるためにJavaScriptが必要になります。カテゴリのリストを保持するul内のすべてのチェックボックスにセレクタを置き、カテゴリボックスのラベルがチェックされるとメタボックス内のラベルを表示します。

0
cjbj