web-dev-qa-db-fra.com

Liste de contrôle des catégories sélectionnées

Sur mon blog, j'ai un grand nombre de catégories> 500, il me faut donc une sorte de liste de contrôle pour laquelle les catégories sont déjà sélectionnées.

Par exemple, si nous avons cat1, cat2, cat3 ... cat50 et que j'ai sélectionné cat3, cat5, cat7 et cat44, et que nous devons en sélectionner plusieurs autres, il me faut une liste de contrôle de ce qui est déjà sélectionné (quelque chose de similaire aux tags, lorsque vous sélectionnez une balise, il est automatiquement contrôlé et écrit sous la boîte à balises).

J'espère que vous comprenez de quoi je parle.

Ma question est donc la suivante: n’importe quelle suggestion sur la manière de développer cela (seulement une suggestion, pas un code complet) ou peut-être existe-t-il une sorte de plugin dont je ne suis pas au courant?

Je vous remercie

MODIFIER:

J'ai besoin de cela dans WordPress admin (ajouter un nouveau post) screen

categorieswp-adminpost-metatags
5
Eager2Learn

Voici un script que vous pouvez mettre en file d'attente dans votre panneau d'administration. Il ajoutera un nouvel onglet aux onglets de catégorie appelé "Actif". Lorsqu'une case à cocher est cochée, elle est ajoutée à la liste d'onglets "Actif". Vous pouvez également cliquer sur des liens dans la liste d'onglets "Actif" pour les supprimer (les décocher).

 Category Metabox with Active Tab 

Ajoutez ceci en tant que script externe, custom-tabs.js peut-être:

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' );
            } );

        } );

    }

} );

Ensuite, nous pouvons le mettre en file d'attente dans notre panneau d'administration:

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' );

Faites-moi savoir si vous rencontrez des problèmes avec elle.

7
Howdy_McGee

Le moyen le plus simple consiste à ajouter une méta-boîte et à utiliser get_the_category_list pour afficher les catégories déjà sélectionnées. Cela ne fonctionne que si vous enregistrez votre message, tout comme les tags ne sont affichés dans leur propre boîte que lorsque vous les avez confirmés.

Si vous voulez faire cela à la volée, vous aurez besoin de javascript pour remplir votre metabox. Placez un sélecteur sur toutes les cases à cocher à l'intérieur de la ul qui contient la liste des catégories et affichez l'étiquette dans votre métabox une fois que l'étiquette de la catégorie est cochée.

0
cjbj