Come aggiungere un campo personalizzato alla modifica rapida in WordPress

Ci sono alcuni passaggi per creare la casella di modifica rapida personalizzata e la colonna personalizzata

1. creare una meta key personalizzata (si assume che ne abbiate già una)
2. aggiungere titolo e dati per la colonna personalizzata nell'amministrazione (si assume che vogliate mostrare la meta key personalizzata nella colonna, altrimenti potete modificare leggermente la logica per ottenere lo stesso risultato poiché il principio è lo stesso)
3. aggiungere la casella di modifica rapida personalizzata
4. aggiungere la logica di salvataggio
5. caricare lo script per modificare la funzione originale inline-edit-post per supportare il valore meta personalizzato
6. preparare il file dello script

Questo esempio aggiungerà una casella di input per la modifica rapida nel post type Page. Il seguente codice è stato testato e funziona inserendolo in functions.php.

1. creare una meta key personalizzata (si assume che ne abbiate già una)

Ho preparato una meta key personalizzata remark per il post type page

2. aggiungere titolo e dati per la colonna personalizzata nell'amministrazione

per i custom post type, potete usare

Aggiungere il titolo della colonna

• Per uno Screen ID specifico manage_{$screen->id}_columns
• Specifico per Pagine manage_pages_columns
• Specifico per generico (Post predefinito o custom post type) manage_posts_custom_column o per un post type specifico manage_{$post->post_type}_posts_custom_column per aggiungere i dati della colonna

Aggiungere il contenuto della colonna

• Generico (Post predefinito o custom post type) manage_posts_columns con controllo del post type usando l'argomento post type o per un post type specifico manage_{$post_type}_posts_columns per aggiungere il titolo della colonna

Di seguito un esempio per il post type Page così come per un custom post type + il Post predefinito come esempio per una configurazione con più post type.

// aggiungi titolo colonna personalizzata per il meta value personalizzato
add_filter('manage_edit-page_columns', 'ws365150_add_custom_columns_title' );
function ws365150_add_custom_columns_title( $columns ) {
    $columns['page_remark'] = 'Nota'; // potete usare __() in seguito per il supporto alla traduzione
    
    return $columns;
}
    
// aggiungi dati colonna personalizzata con meta value personalizzato
add_action('manage_pages_custom_column', 'ws365150_add_custom_column_data', 10, 2 );
function ws365150_add_custom_column_data( $column_name, $post_id ) {
    switch ( $column_name ) {
        case 'page_remark':
            echo get_post_meta( $post_id, 'remark', true );
            break;
        
        default:
            break;
    }
}

Di seguito un esempio per il custom post type episode + il Post predefinito con meta key summary

// aggiungi titolo colonna personalizzata per il meta value personalizzato
// 'manage_pages_columns' o 'manage_edit-post_columns' funzionano entrambi
add_filter('manage_posts_columns', 'ws365150_add_custom_columns_title_pt', 10, 2 );
function ws365150_add_custom_columns_title_pt( $columns, $post_type ) {
    switch ( $post_type ) {
        case 'post':
        case 'episode':
            $columns['ws365150_summary'] = 'Riassunto'; // potete usare __() in seguito per il supporto alla traduzione
            break;
        
        default:
            
            break;
    }
    
    return $columns;
}
    
// aggiungi dati colonna personalizzata con meta value personalizzato per custom post types
add_action('manage_posts_custom_column', 'ws365150_add_custom_column_data_pt', 10, 2 );
function ws365150_add_custom_column_data_pt( $column_name, $post_id ) {
    switch ( $column_name ) {
        case 'ws365150_summary': // specificato per questa colonna assegnata nel titolo della colonna
            echo get_post_meta( $post_id, 'summary', true );
            break;
        
        default:
            break;
    }
}

3. aggiungere la casella di modifica rapida personalizzata

// per page
add_action( 'quick_edit_custom_box', 'ws365150_custom_edit_box', 10, 3 );
function ws365150_custom_edit_box( $column_name, $post_type, $taxonomy ) {
    global $post;

    switch ( $post_type ) {
        case 'page':

        if( $column_name === 'page_remark' ): // stesso titolo colonna definito nel passo precedente
        ?>
                <?php // echo get_post_meta( $post->ID, 'remark', true ); ?>
            <fieldset class="inline-edit-col-right" id="#edit-">
                <div class="inline-edit-col">
                    <label>
                        <span class="title">Nota</span>
                        <span class="input-text-wrap"><input type="text" name="remark" class="inline-edit-menu-order-input" value=""></span>
                    </label>
                </div>
            </fieldset>
            <?php
        endif;
            // echo 'custom page field';
            break;
        
        default:
            break;
    }
}

// per Post + custom post type
add_action( 'quick_edit_custom_box', 'ws365150_custom_edit_box_pt', 10, 3 );
function ws365150_custom_edit_box_pt( $column_name, $post_type, $taxonomy ) {
    global $post;

    switch ( $post_type ) {
        case 'post':
        case 'episode':

        if( $column_name === 'ws365150_summary' ): // stesso titolo colonna definito nel passo precedente
        ?>
                <?php // echo get_post_meta( $post->ID, 'remark', true ); ?>
            <fieldset class="inline-edit-col-right" id="#edit-">
                <div class="inline-edit-col">
                    <label>
                        <span class="title">Riassunto</span>
                        <span class="input-text-wrap"><input type="text" name="summary" class="inline-edit-menu-order-input" value=""></span>
                    </label>
                </div>
            </fieldset>
            <?php
        endif;
            // echo 'custom page field';
            break;
        
        default:
            break;
    }
}

4. aggiungere la logica di salvataggio

add_action( 'save_post', 'ws365150_update_custom_quickedit_box' );
function ws365150_update_custom_quickedit_box() {
    // qualsiasi logica di controllo qui, saltata e mantenuta semplice per scopi illustrativi (nonce, esistenza di $_POST['remark'], salvataggio ajax e così via
    
    // remark in Page
    if( isset( $_POST ) && isset( $_POST['remark'] ) ) { // dove remark è definito in <input name="remark">
        update_post_meta($_POST['post_ID'], 'remark', $_POST['remark']);
    }

    // summary in Post, custom post type
    if( isset( $_POST ) && isset( $_POST['summary'] ) ) { // dove summary è definito in <input name="summary">
        update_post_meta($_POST['post_ID'], 'summary', $_POST['summary']);
    }
    
    // per debug nell'inspector, non necessario, abilitare questo interromperà il salvataggio ma permetterà di vedere il return ajax
    // wp_send_json_success( array(
    //  'message' => 'Save test!',
    //  'post_data' => $_POST,
    // ) );
    return; // termina la chiamata della funzione
}

5. caricare lo script per modificare la funzione originale inline-edit-post

add_action( 'admin_enqueue_scripts', function( $page ) {

    // aggiungi logica di controllo della pagina, questa è semplice, potete testare il post type e così via...
    if ( 'edit.php' != $page ) {
        return;
    }
    
    wp_enqueue_script( 'custom-quickedit-box', get_stylesheet_directory_uri() . '/ws365150_custom_quickedit_box.js', array( 'jquery', 'inline-edit-post' ) );
});

6. preparare il file dello script (ws365150_custom_quickedit_box.js, quando testate il codice sopra, mettetelo nella cartella del tema)

( function( $, wp ) {
    // clona dalla funzione originale in inline-post-edit.js per l'override
    // in realtà non è necessario creare un alias, tuttavia creare un alias può essere una nota e un segno di override senza dimenticare per la manutenzione futura
    window.customInlineEditPost = window.inlineEditPost;

    // override funzione: aggiungi custom meta value, la base è copiata dal sorgente
    customInlineEditPost.edit = function(id) {
            // console.log( 'custom edit' );
            var t = this, fields, editRow, rowData, status, pageOpt, pageLevel, nextPage, pageLoop = true, nextLevel, f, val, pw;
            t.revert();

            if ( typeof(id) === 'object' ) {
                id = t.getId(id);
            }

            fields = ['post_title', 'post_name', 'post_author', '_status', 'jj', 'mm', 'aa', 'hh', 'mn', 'ss', 'post_password', 'post_format', 'menu_order', 'page_template'];
            if ( t.type === 'page' ) {
                fields.push('post_parent');
            }

            // Aggiungi la nuova riga di edit con una riga vuota extra sotto per mantenere lo striping zebrato.
            editRow = $('#inline-edit').clone(true);
            $( 'td', editRow ).attr( 'colspan', $( 'th:visible, td:visible', '.widefat:first thead' ).length );

            $(t.what+id).removeClass('is-expanded').hide().after(editRow).after('<tr class="hidden"></tr>');

            // Popola i campi nella finestra di modifica rapida.
            rowData = $('#inline_'+id);
            if ( !$(':input[name="post_author"] option[value="' + $('.post_author', rowData).text() + '"]', editRow).val() ) {

                // L'autore del post non ha più capacità di modifica, quindi dobbiamo aggiungerlo alla lista degli autori.
                $(':input[name="post_author"]', editRow).prepend('<option value="' + $('.post_author', rowData).text() + '">' + $('#' + t.type + '-' + id + ' .author').text() + '</option>');
            }
            if ( $( ':input[name="post_author"] option', editRow ).length === 1 ) {
                $('label.inline-edit-author', editRow).hide();
            }

            // popola custom meta value
            if ( $( ':input[name="remark"]', editRow ).length === 1 ) {
                $( ':input[name="remark"]', editRow ).val( $('#post-' + id + ' .page_remark').text() );
            }

            if ( $( ':input[name="summary"]', editRow ).length === 1 ) {
                $( ':input[name="summary"]', editRow ).val( $('#post-' + id + ' .ws365150_summary').text() );
            }

            for ( f = 0; f < fields.length; f++ ) {
                val = $('.'+fields[f], rowData);

                /**
                 * Sostituisce l'immagine per un Twemoji (emoji di Twitter) con il suo testo alternativo.
                 *
                 * @returns Testo alternativo dall'immagine.
                 */
                val.find( 'img' ).replaceWith( function() { return this.alt; } );
                val = val.text();
                $(':input[name="' + fields[f] + '"]', editRow).val( val );
            }

            if ( $( '.comment_status', rowData ).text() === 'open' ) {
                $( 'input[name="comment_status"]', editRow ).prop( 'checked', true );
            }
            if ( $( '.ping_status', rowData ).text() === 'open' ) {
                $( 'input[name="ping_status"]', editRow ).prop( 'checked', true );
            }
            if ( $( '.sticky', rowData ).text() === 'sticky' ) {
                $( 'input[name="sticky"]', editRow ).prop( 'checked', true );
            }

            /**
             * Crea le select box per le categorie.
             */
            $('.post_category', rowData).each(function(){
                var taxname,
                    term_ids = $(this).text();

                if ( term_ids ) {
                    taxname = $(this).attr('id').replace('_'+id, '');
                    $('ul.'+taxname+'-checklist :checkbox', editRow).val(term_ids.split(','));
                }
            });

            /**
             * Ottiene tutte le tassonomie per i suggerimenti di auto-completamento quando si digita il nome
             * di un tag.
             */
            $('.tags_input', rowData).each(function(){
                var terms = $(this),
                    taxname = $(this).attr('id').replace('_' + id, ''),
                    textarea = $('textarea.tax_input_' + taxname, editRow),
                    comma = inlineEditL10n.comma;

                terms.find( 'img' ).replaceWith( function() { return this.alt; } );
                terms = terms.text();

                if ( terms ) {
                    if ( ',' !== comma ) {
                        terms = terms.replace(/,/g, comma);
                    }
                    textarea.val(terms);
                }

                textarea.wpTagsSuggest();
            });

            // Gestisce lo status del post.
            status = $('._status', rowData).text();
            if ( 'future' !== status ) {
                $('select[name="_status"] option[value="future"]', editRow).remove();
            }

            pw = $( '.inline-edit-password-input' ).prop( 'disabled', false );
            if ( 'private' === status ) {
                $('input[name="keep_private"]', editRow).prop('checked', true);
                pw.val( '' ).prop( 'disabled', true );
            }

            // Rimuove la pagina corrente e i figli dal dropdown del parent.
            pageOpt = $('select[name="post_parent"] option[value="' + id + '"]', editRow);
            if ( pageOpt.length > 0 ) {
                pageLevel = pageOpt[0].className.split('-')[1];
                nextPage = pageOpt;
                while ( pageLoop ) {
                    nextPage = nextPage.next('option');
                    if ( nextPage.length === 0 ) {
                        break;
                    }

                    nextLevel = nextPage[0].className.split('-')[1];

                    if ( nextLevel <= pageLevel ) {
                        pageLoop = false;
                    } else {
                        nextPage.remove();
                        nextPage = pageOpt;
                    }
                }
                pageOpt.remove();
            }

            $(editRow).attr('id', 'edit-'+id).addClass('inline-editor').show();
            $('.ptitle', editRow).focus();

            return false;
    };
})( jQuery, window.wp );

Quanto sopra è per la modifica rapida usando l'hook quick_edit_custom_box, e potreste aver bisogno di gestire anche la modifica in blocco. Potete esplorare di più leggendo e usando bulk_edit_custom_box.