Tabelele cu liste de administratori WordPress: extindeți funcția de editare rapidă

Până acum, în seria noastră de articole despre tabelele de administrare din WordPress, am analizat diferite moduri de personalizare a aspectului tabelelor de administrare WordPress, inclusiv cum să adăugați coloane noi. În acest articol final al seriei, vom arunca o privire la încă o personalizare pe care ați dori să o luați în considerare... extinderea funcției „Editare rapidă” găsită în tabelele de administrare.

Să începem!

Extinderea câmpului de editare rapidă

Pentru exemplul nostru din acest tutorial, vom adăuga un câmp personalizat care va afișa o adresă URL care va fi descrisă ca o „Sursă”, pe care o vom completa cu o adresă URL care va trimite la unele informații suplimentare referitoare la articolul nostru. Vom vedea cum poate fi adăugat în zona de editare rapidă a ecranului Posts Admin și cum să salvăm actualizările făcute în acest câmp.

Pasul unu: Adăugați câmpul personalizat

Am analizat cum să creați câmpul „Sursă” în articolul nostru Introducere cu câmpurile personalizate WordPress. Din motive de concizie, nu vom repeta aceste instrucțiuni aici. Desigur, puteți crea orice câmp personalizat doriți.

Dacă nu sunteți familiarizat cu modul în care adăugăm câmpul personalizat „Sursă” sau orice alt câmp personalizat, vă rugăm să aruncați o privire la articolul nostru despre aceasta. După ce ați adăugat un câmp personalizat adecvat, este timpul să treceți la pasul următor.

Pasul doi: Adăugați coloana personalizată

Trebuie să adăugăm o coloană personalizată la Tabelul nostru de administrare. Am explicat cum să facem acest lucru în profunzime în articolul nostru Personalizarea tabelelor de administrare WordPress: Noțiuni introductive. Aruncă o privire și urmează pașii.

În cele din urmă, ar trebui să ajungeți cu un cod în functions.php ale temei active care arată astfel:

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

Până acum, ar trebui să vedeți noua coloană în tabelul de administrare a postărilor.

Adăugați caseta de editare rapidă personalizată

Să mergem la tabelul nostru cu lista de postări și să facem clic pe linkul „Editare rapidă” de sub una dintre postările noastre.

Ceea ce vom vedea aici sunt toate opțiunile disponibile implicite pe care WordPress le oferă în ecranul Editare rapidă. Momentan nu vom vedea noul nostru câmp „Sursă”.

Vom adăuga acest lucru utilizând cârligul quick_edit_custom_box de WordPress. Această acțiune analizează toate acțiunile implicite în modul „Editare rapidă”, executând o dată pentru fiecare coloană, inclusiv coloanele personalizate.

Este structurat după cum urmează: do_action( 'quick_edit_custom_box', $column_name, $post_type, $taxonomy ) . Parametrii sunt $column_name care este numele coloanei de editat, $post_type care este tipul de post și $taxonomy pentru numele taxonomiei, dacă este necesar.

În fișierul functions.php , adăugați următoarele rânduri:

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

Vă rugăm să rețineți că obținem valoarea câmpului „sursă” în codul PHP prin ecou $post->source; .

Acum, dacă reîmprospătați pagina și faceți clic din nou pe „Editare rapidă”, ar trebui să vedeți câmpul „sursă” cu o valoare corectă.

Pasul trei: Salvați editarea inline

Pentru a salva datele introduse în câmpul nostru personalizat, vom folosi acțiunea save_post care este declanșată atunci când o postare este actualizată.

În exemplul nostru în care lucrăm la editări rapide, datele pentru postare sunt stocate în $_POST după executarea save_post .

Codul necesar pentru a realiza acest lucru este următorul și ar trebui să fie inserat în fișierul 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; }

Nu s-a făcut acest lucru, să încercăm să schimbăm valoarea de intrare a câmpului cu altceva, cum ar fi „https://random.url” și să apăsăm butonul de actualizare din dreapta jos.

Observați că valoarea din câmpul nostru sursă este actualizată conform așteptărilor. Cu toate acestea, dacă dați clic din nou pe butonul Editare rapidă și aruncați o altă privire la câmpul dvs. personalizat (în cazul nostru „Sursă”), veți vedea că valoarea nu s-a schimbat în caseta de editare.

De câte ori modificați valoarea, veți vedea întotdeauna modificarea în celula coloanei tabelului Administrator, dar această intrare nu se va reflecta în câmpul Editare rapidă.

Deci, de ce se întâmplă asta?

Amintiți-vă că obținem valoarea câmpului „sursă” prin ecou $post->source; . Conținutul de editare rapidă este populat atunci când utilizatorul apasă butonul „editare”, ceea ce înseamnă că este creat dinamic și nu pre-populat când este încărcat ecranul post-administrator. Nu putem afișa corect metadatele noastre regăsindu-le prin codul nostru PHP, deoarece vom vedea întotdeauna valoarea care a fost populată când am intrat în ecranul Administrator în loc de noua valoare.

În schimb, trebuie să ne colectăm valorile utilizând JavaScript. Deci, înainte de a continua, vom intra în codul nostru PHP anterior și vom elimina valoarea ecou prin înlocuirea acestei linii...

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

…Cu acesta:

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

Pasul patru: Preluarea valorilor de intrare folosind JS

Mai întâi, va trebui să includem scriptul nostru JS adăugând aceste linii în fișierul 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' )); }

Deci, dacă, de exemplu, creați un fișier extend-quick-edit.js și îl puneți în folderul cu tema activă, atunci în codul de mai sus ar trebui să înlocuiți „UNIQUE-SCRIPT-NAME” cu ceva de genul „extend-quick-edit-script”. ' și '/PATH-TO-YOUR-JS-FILE' cu 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' )); }

În array('jquery','inline-edit-post' ) am adăugat jQuery, deoarece scriptul nostru folosește jQuery și am definit că funcția inline-edit-post originală va fi modificată.

În extend-quick-edit.js , conținutul va arăta astfel:

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

Să dezvăluim un pic ce am făcut aici.

La început, luăm obiectul inlineEditPost.edit , care este introdus în fișierul principal WordPress /wp-admin/js/inline-edit-post.js , dacă doriți să căutați mai mult în el. Deci avem acum o copie a obiectului în variabila $inline_editor .

După aceea modificăm funcționalitatea inlineEditPost.edit aplicând pe cea existentă în $inline_editor.apply( this, arguments); și adăugând funcționalitatea suplimentară pe care o dorim imediat după.

Deci, în rândurile următoare ale codului nostru JS, ceea ce vom face în cele din urmă este să înlocuim valoarea câmpului de intrare „Sursă” din zona de editare rapidă cu valoarea celulei coloanei „Sursă”.

Acum totul ar trebui să funcționeze conform așteptărilor. Dacă salvați valoarea și redeschideți zona de editare rapidă, intrarea sursă ar trebui, de asemenea, modificată.

Cu condiția ca un câmp personalizat să fie deja înregistrat împreună cu coloana sa personalizată, fluxul nostru de lucru ar arăta astfel:

Concluzie

Adăugarea unui câmp personalizat la modulul de editare rapidă din tabelele listei de administrare nu este ușoară. Cu toate acestea, dacă adăugați un câmp care este actualizat în mod regulat, atunci, evident, poate economisi mult timp pe termen lung. Ca întotdeauna, ceea ce se poate realiza în WordPress este destul de nelimitat. Ieșit din cutie, permite personalizare extinsă, dar cu o codificare suplimentară nu există multe lucruri pe care să nu le puteți face!