Tabelle dell'elenco degli amministratori di WordPress: estendi la funzione di modifica rapida

Finora, nella nostra serie di articoli sulle tabelle di amministrazione in WordPress abbiamo esaminato vari modi per personalizzare il layout delle tabelle di amministrazione di WordPress, incluso come aggiungere nuove colonne. In questo ultimo articolo della serie daremo un'occhiata a un'altra personalizzazione che potresti prendere in considerazione... estendendo la funzione 'Modifica rapida' che si trova nelle Tabelle Admin.

Iniziamo!

Estendere il campo di modifica rapida

Per il nostro esempio in questo tutorial aggiungeremo un campo personalizzato che visualizzerà un URL che verrà descritto come una "Sorgente" che compileremo con un URL che collega ad alcune informazioni aggiuntive relative al nostro articolo. Vedremo come può essere aggiunto nell'area Modifica rapida della schermata Amministrazione post e come salvare gli aggiornamenti apportati a questo campo.

Passaggio uno: aggiungi il campo personalizzato

Abbiamo spiegato come creare il campo "Sorgente" nel nostro articolo Introduzione ai campi personalizzati di WordPress. Per motivi di brevità, non ripeteremo queste istruzioni qui. Ovviamente puoi creare qualsiasi campo personalizzato che ti piace.

Se non hai familiarità con il modo in cui aggiungiamo il campo personalizzato "Sorgente" o qualsiasi altro campo personalizzato per quella materia, dai un'occhiata al nostro articolo su questo. Dopo aver aggiunto un campo personalizzato appropriato, è ora di passare al passaggio successivo.

Passaggio due: aggiungi la colonna personalizzata

Dobbiamo aggiungere una colonna personalizzata alla nostra tabella di amministrazione. Abbiamo spiegato come farlo in modo approfondito nel nostro articolo Personalizzazione delle tabelle di amministrazione di WordPress: per iniziare. Dai un'occhiata e segui i passaggi.

Alla fine dovresti finire con del codice nel functions.php del tuo tema attivo che assomiglia a questo:

 add_filter('manage_posts_columns','add_custom_columns'); function add_custom_columns( $columns ) { $columns['source'] = 'Source'; return $columns; } add_action( 'manage_posts_custom_column','custom_columns_content', 10, 2 ); function custom_columns_content ( $column_id, $post_id ) { switch( $column_id ) { case 'source': echo get_post_field('source', $post_id); break; } }

A questo punto dovresti vedere la nuova colonna nella tabella Post Admin.

Aggiungi la casella di modifica rapida personalizzata

Andiamo alla nostra tabella dell'elenco dei post e fai clic sul link "Modifica rapida" sotto uno dei nostri post.

Quello che vedremo qui sono tutte le opzioni disponibili predefinite che WordPress fornisce nella schermata Modifica rapida. Al momento non vedremo il nostro nuovo campo 'Sorgente'.

Lo aggiungeremo usando l'hook quick_edit_custom_box da WordPress. Questa azione analizza tutte le azioni predefinite in modalità "Modifica rapida" eseguendo una volta per ogni colonna, comprese le colonne personalizzate.

È strutturato come segue: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . I parametri sono $column_name che è il nome della colonna da modificare, $post_type che è lo slug del tipo di post e $taxonomy per il nome della tassonomia, se necessario.

Nel tuo file functions.php , aggiungi le seguenti righe:

 add_action( 'quick_edit_custom_box', 'source_custom_edit_box', 10, 2 ); function source_custom_edit_box( $column_name, $post_type ) { global $post; switch ( $post_type ) { case 'post': if( $column_name === 'source' ): ?> <fieldset class="inline-edit-col-right"> <div class="inline-edit-col"> <label> <span class="title">Source</span> <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span> </label> </div> </fieldset> <?php endif; break; default: break; } }

Tieni presente che otteniamo il valore del campo 'source' nel codice PHP facendo eco $post->source; .

Ora, se aggiorni la pagina e fai di nuovo clic su "Modifica rapida", ora dovresti vedere il campo "fonte" con un valore corretto.

Passaggio tre: salva la modifica in linea

Per salvare i dati inseriti nel nostro campo personalizzato, utilizzeremo l'azione save_post che viene attivata quando un post viene aggiornato.

Nel nostro esempio in cui lavoriamo su modifiche rapide, i dati per il post vengono archiviati in $_POST dopo l'esecuzione di save_post .

Che il codice necessario per ottenere ciò sia il seguente e dovrebbe essere inserito nel file functions.php :

 add_action( 'save_post', 'update_source_custom_edit_box' ); function update_source_custom_edit_box() { if( isset( $_POST ) && isset( $_POST['source'] ) ) { update_post_meta($_POST['post_ID'], 'source', $_POST['source']); } return; }

No, questo è stato fatto, proviamo a cambiare il valore di input del campo in qualcos'altro come "https://random.url" e premi il pulsante di aggiornamento in basso a destra.

Nota che il valore nel nostro campo sorgente viene aggiornato come previsto. Tuttavia, se fai nuovamente clic sul pulsante Modifica rapida e dai un'altra occhiata al tuo campo personalizzato (nel nostro caso "Sorgente") vedrai che il valore non è cambiato nella casella di modifica.

Ogni volta che modifichi il valore, vedrai sempre la modifica nella cella della colonna della tabella di amministrazione, ma questo input non si rifletterà nel campo Modifica rapida.

Allora, perché sta succedendo questo?

Ricorda che otteniamo il valore del campo 'source' facendo eco $post->source; . Il contenuto di Modifica rapida viene popolato quando l'utente preme il pulsante "modifica", il che significa che viene creato dinamicamente e non precompilato quando viene caricata la schermata di post amministratore. Non possiamo mostrare correttamente i nostri metadati recuperandoli tramite il nostro codice PHP poiché vedremo sempre il valore che è stato compilato quando siamo entrati nella schermata di amministrazione invece del nuovo valore.

Invece, dobbiamo raccogliere i nostri valori usando JavaScript. Quindi, prima di procedere, andremo nel nostro codice PHP precedente e rimuoveremo il valore ripetuto sostituendo questa riga...

 <span class="input-text-wrap"><input type="text" name="source" value="<?php echo $post->source; ?>"></span>

…con questo:

 <span class="input-text-wrap"><input type="text" name="source" value=""></span>

Passaggio quattro: recupero dei valori di input utilizzando JS

Innanzitutto, dovremo includere il nostro script JS aggiungendo queste righe al file functions.php :

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('UNIQUE-SCRIPT-NAME', '/PATH-TO-YOUR-JS-FILE', array('jquery','inline-edit-post' )); }

Quindi, se ad esempio crei un file extend-quick-edit.js e lo metti nella cartella del tema attiva, nel codice sopra dovresti sostituire "UNIQUE-SCRIPT-NAME" con qualcosa come "extend-quick-edit-script ' e '/PATH-TO-YOUR-JS-FILE' con get_template_directory_uri() . '/extend-quick-edit.js' get_template_directory_uri() . '/extend-quick-edit.js'

 // RETRIEVE FIELDS with JS add_action( 'admin_enqueue_scripts', 'enqueue_admin_scripts_and_styles' ); function enqueue_admin_scripts_and_styles(){ wp_enqueue_script('extend-quick-edit-script', get_template_directory_uri() . '/extend-quick-edit.js', array('jquery','inline-edit-post' )); }

array('jquery','inline-edit-post' ) abbiamo aggiunto jQuery poiché il nostro script utilizza jQuery e definito che la funzione inline-edit-post originale verrà modificata.

In extend-quick-edit.js il contenuto sarà simile a questo:

 jQuery(document).ready(function($){ var $inline_editor = inlineEditPost.edit; inlineEditPost.edit = function(id){ $inline_editor.apply( this, arguments); var post_id = 0; if( typeof(id) == 'object'){ post_id = parseInt(this.getId(id)); } if(post_id != 0){ $post_modified_col_value = $('#post-' + post_id).find('.source').text(); $('#edit-' + post_id + ' input[name=source]').val($post_modified_col_value); } } });

Analizziamo un po' quello che abbiamo fatto qui.

All'inizio, prendiamo l'oggetto inlineEditPost.edit , che viene introdotto nel file principale di WordPress /wp-admin/js/inline-edit-post.js se desideri approfondire. Quindi ora abbiamo una copia dell'oggetto nella variabile $inline_editor .

Dopodiché modifichiamo la funzionalità inlineEditPost.edit applicando quella esistente in $inline_editor.apply( this, arguments); e aggiungendo le funzionalità extra che desideriamo subito dopo.

Quindi, nelle prossime righe del nostro codice JS ciò che alla fine faremo è sostituire il valore del campo di input "Sorgente" dell'area di modifica rapida con il valore della cella della colonna "Sorgente".

Ora tutto dovrebbe funzionare come previsto. Se si salva il valore e si riapre l'area di modifica rapida, anche l'input Sorgente dovrebbe essere modificato.

A condizione che un campo personalizzato sia già registrato insieme alla relativa colonna personalizzata, il nostro flusso di lavoro sarebbe simile al seguente:

Conclusione

Aggiungere un campo personalizzato al modulo Modifica rapida delle tabelle Elenco amministratori non è facile. Tuttavia, se si aggiunge un campo che viene aggiornato regolarmente, si può ovviamente risparmiare molto tempo a lungo termine. Come sempre, ciò che si può ottenere in WordPress è abbastanza illimitato. Direttamente pronto all'uso, consente un'ampia personalizzazione, ma con un po' di codice aggiuntivo non c'è molto che non puoi fare!