WordPress Meta Boxes – Un ghid rapid

Metaboxele WordPress sunt casete care pot fi trasabile care se afișează în ecranul dvs. de editare și sunt folosite pentru a gestiona date suplimentare, cum ar fi termenii taxonomiei. În acest articol, vom arunca o privire la metaboxele WordPress și vom vedea cum le putem proprii pe cele personalizate, vom afla cum să salvăm modificările pe care le facem și cum le putem afișa conținutul pe partea frontală a site-ului nostru.

Să începem!

Câmpuri personalizate, casete meta și metadate

Există multă confuzie cu privire la diferența dintre acești trei termeni. Să aruncăm o privire la toate trei pentru a înțelege mai bine ce sunt și cum funcționează.

Metadate

Metadatele unei postări sunt informații suplimentare despre o postare care sunt stocate în tabelul postmeta al bazei de date.

Fiecare pereche cheie/valoare este considerată un „câmp de postare”. Nu există limite cu privire la câte meta intrări poate avea acest tabel.

câmpuri customizate

Există câmpuri care sunt predefinite de WordPress, cum ar fi imaginea caracteristică, care sunt câmpuri personalizate din punct de vedere tehnic. Altele pot fi adăugate printr-un plugin sau cod personalizat și definite de utilizatorul administrator. Puteți afla mai multe despre câmpurile personalizate citind articolul nostru „Noțiuni introductive despre câmpurile personalizate WordPress”.

Metabox-uri

Când deschideți o postare WordPress pentru a o edita, veți vedea că pagina este împărțită în diferite secțiuni (dintre care multe sunt situate în bara laterală din partea dreaptă).

Toate aceste secțiuni sunt din punct de vedere tehnic „meta cutii”. Așadar, editorul de postare principal, containerele pentru alegerea categoriilor, publicarea postării, adăugarea de etichete, adăugarea unei imagini prezentate sunt toate metacasete care conțin elemente HTML care interacționează cu metadatele postării. În funcție de modul în care metadatele sunt gestionate de site-ul web, aceste casete vor apărea în diferite locații de pe ecran.

Cu titlu de exemplu suplimentar, să ne uităm la caseta meta Imagine prezentată. Acesta se găsește în mod normal în bara laterală din dreapta a ecranului de administrare al unei postări. Acolo, puteți schimba cu ușurință imaginea. Când faci asta, actualizezi de fapt _thumbnail_id -ul metadatelor postării respective.

O casetă meta câmp personalizat, cum ar fi „sursa” (pe care am adăugat-o în tutorialul nostru despre Câmpuri personalizate) , poate fi găsită de obicei sub editorul principal de postări.

Crearea unei casete meta pentru tipul nostru de postare personalizat

Acum avem o idee mai clară despre exact ce sunt meta-box-urile, putem trece mai departe și construim propria noastră meta-box personalizată pentru site-ul nostru. Acest tutorial urmează după tutorialul nostru despre tipurile de postări personalizate... dacă doriți să urmați pas cu pas, va trebui să consultați acel articol și să creați un tip de postare personalizat numit „rețete” și apoi să configurați câteva „rețete”. ' postări de testare cu o imagine prezentată selectată.

În acest tutorial vom extinde tipul nostru de postare personalizat prin adăugarea unei noi casete meta care va fi folosită pentru a defini dacă rețeta este vegană sau nu, bifând o casetă de selectare.

Pasul 1 – Înregistrați Meta Box

Pentru a adăuga o casetă meta în tipul nostru de postare personalizat, folosim funcția add_meta_box oferită de WordPress. Iată structura funcției cu argumentele pe care le vom folosi:

 add_meta_box( $id, $title, $callback, $screen, $context )

Pentru id-ul unic vom folosi is_vegan iar pentru titlul casetei meta șirul Is Vegan .

Funcția de apel invers pentru a afișa conținutul casetei va fi display_vegan_meta_box . Atributul $screen se referă la ecranul de administrare pe care va fi afișată caseta meta. În cazul nostru, aceasta este zona de editare a postării rețetei, deci va fi numele unic al tipului de postare care, așa cum s-a menționat anterior, este recipes . Parametrul $context variază în funcție de ecranul de administrare.

Contextele ecranului de editare post pe care le vom folosi aici includ normal, lateral și avansat ca valori de context disponibile. Vom folosi valoarea laterală pentru a afișa caseta meta în bara laterală a paginii de editare a postării.

Deci, în rezumat, folosind parametrii definiți mai sus, codul pe care ar trebui să-l adăugam în my-custom-post-type.php ar trebui să arate astfel:

 function my_metabox() { add_meta_box( 'is_vegan', 'Is Vegan', 'display_vegan_meta_box', 'recipes', 'side' ); } add_action( 'admin_init', 'my_metabox' );

După cum veți vedea, am folosit hook-ul admin_init care este declanșat înaintea oricărui alt hook atunci când un utilizator accesează zona de administrare.

Acum, dacă vizitați pagina de editare a unei postări de rețetă, ar trebui să vedeți caseta în bara laterală. Desigur, conținutul este momentan gol.

Următorul pas este să completați caseta cu conținutul dorit.

Pasul 2 – Afișați conținutul de bază al Meta Box

Vom păstra conținutul acestei casete simplu. Tot ce ne trebuie este o descriere și o casetă de selectare. După cum sa menționat, conținutul este returnat în funcția display_vegan_meta_box .

Continuați și adăugați fragmentul de cod de mai jos sub funcția my_metabox :

 function display_vegan_meta_box( $recipe ) { ?> <span class="title">Vegan recipe?</span> <span class="content"> <label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" /> </label> </span> <?php }

Ceea ce am făcut în această funcție a fost afișarea unei casete de selectare HTML care deocamdată este debifată. După ce introducem funcția de salvare, vom reveni la această secțiune de cod pentru a mai face câteva modificări, astfel încât, atunci când se încarcă pagina de editare a postării, caseta de validare va prelua starea casetei de selectare salvată.

Pasul 3 – Salvați valoarea Meta Box în baza de date

Pentru a salva valoarea câmpurilor de intrare ale metaboxului, folosim cârligul de acțiune save_post pe care WordPress îl oferă astfel:

 function update_vegan_box( $post_id ) { if( !current_user_can( 'edit_post' ) ) return; if ( 'recipes' == get_post_type() ) { if ( isset( $_POST['vegan_checkbox'] ) && $_POST['vegan_checkbox'] != '' ) { update_post_meta( $post_id, 'is_vegan', $_POST['vegan_checkbox'] ); }else { update_post_meta( $post_id, 'is_vegan', "no" ); } } } add_action( 'save_post', 'update_vegan_box' );

În cadrul update_vegan_bo x cu argumentul $post_id am inclus câteva condiții. Mai întâi dorim să verificăm dacă utilizatorul are permisiunea de a edita postarea și, de asemenea, să ne asigurăm că edităm un tip de postare cu recipes .

Deci, dacă postarea aparține tipului de recipes , examinăm valoarea casetei de selectare. Rețineți că, în mod implicit, atunci când caseta de selectare este bifată, valoarea bazei de date care este stocată este „da”, iar dacă nu, atunci valoarea este NULL. Am ajustat puțin acest lucru, astfel încât valoarea „nu” să fie salvată atunci când salvăm postarea cu caseta meta vegană nebifată.

Aici am folosit funcția WordPress update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

În argumentele sale, am definit ID-ul postării, cheia meta, valoarea meta. Totuși, funcția poate accepta încă un argument, $prev_value
în cazul în care dorim să verificăm valoarea anterioară înainte de actualizare și numai dacă este egală, continuați și actualizați.

Pasul 4 – Rafinați codul de conținut Meta Box

Acum să revenim la funcția anterioară care scoate conținutul metabox și să adăugăm mai multe linii de cod care recuperează datele aferente din baza de date.

 function display_vegan_meta_box( $recipe ) { $is_value = esc_html( get_post_meta( $recipe->ID, 'is_vegan', true ) ); $checked; if ( $is_value == "yes" ) { $checked = "checked"; } else if ( $is_value == "no" ) { $checked = ""; } else { $checked="";} ?> <span class="title">Vegan recipe?</span> <span class="content"><label for="vegan_checkbox"> <input type="checkbox" name="vegan_checkbox" value="yes" <?php echo $checked; ?> /> </label></span> <?php }

Deci, mai întâi, recuperăm is_vegan și apoi, dacă este cazul, valoarea checked va fi transmisă variabilei $checked și va fi ecou în rezultatul HTML.

Si asta e. Acum avem o casetă meta funcțională care poate fi folosită pentru a defini dacă rețeta din postarea noastră personalizată este vegană sau nu.

Concluzie

Cutiile meta oferă un nivel crescut de control și flexibilitate în postări și pot fi valorificate într-o varietate de moduri. Ceea ce este deosebit de drăguț la ei este că sunt separate de restul conținutului postării, în același timp rezidenți pe același ecran de administrare, ceea ce face gestionarea lor mult mai ușoară decât dacă ar fi fost localizate în altă parte în WordPress Admin.

Ca și în cazul majorității codificării WordPress, poate dura ceva timp pentru a vă familiariza cu utilizarea metabox-urilor. Sperăm că informațiile de mai sus sunt suficiente pentru a începe. Codare fericită!