Cum de a crea personalizate WordPress Scrie / Meta Boxes

Crearea de meta cutii este o parte crucială a lui WordPress temă / dezvoltare plugin. Este o modalitate de a adăuga un editor atrăgător la ecranul post și evită forțarea utilizatorilor să se bazeze pe câmpurile personalizate. Dacă ați creat vreodată un tip de post personalizat în WordPress, probabil ați vrut să adăugați un fel de date suplimentare la acesta. Sigur, ai putea folosi câmpuri personalizate, dar e urât. Noțiuni de bază cu casete meta personalizate este ușor, deci hai să ne aruncăm în apă!


Ce sunt Meta Boxe particularizate?

O casetă meta (sau scrisă) particularizată este incredibil de simplă în teorie. Acesta vă permite să adăugați o piesă personalizată de date la o postare sau o pagină în WordPress.

Imaginați-vă că lucrați la o temă pentru un client care dorește să catalogheze o vastă colecție de postere de concerte. Începeți să căutați imediat funcționalitatea WordPress de bază pentru a vedea cum puteți organiza tema: Fiecare post va reprezenta un poster, care este perfect pentru adăugarea unei imagini, a unui titlu și a unei descrieri. Putem folosi, de asemenea, categorii și Etichete sistem în interiorul WordPress pentru a organiza postere. Dar dacă am vrea să adăugăm un nou tip de meta date pentru "artistul" fiecărui poster? Hmph. WordPress nu are nimic pentru acest drept din cutie? care ne aduce la meta cutii personalizate.

O casetă meta (sau scrisă) particularizată este incredibil de simplă în teorie. Acesta vă permite să adăugați o piesă personalizată într-un post sau o pagină în WordPress - ceea ce este mai bine este că se poate potrivi direct în majoritatea paginilor implicite din WP, astfel încât să puteți plasa cu ușurință în interiorul Post-Editor pentru a fi ușor de utilizat de către tipuri non-tehnice. Așa cum am spus în intro, puteți adăuga același tip de "meta date" la postarea dvs. utilizând built-in-ul câmpuri customizate pentru un post sau o pagină. Nu este nimic în neregulă cu acest persay, dar nu este foarte grațios sau ușor de utilizat.

În schimb, doriți să creați o casetă de metode personalizată care să conțină câmpuri pentru toate datele dvs. și să salveze toate aceste lucruri în momentul publicării postării. De asta acoperim aici. Acest lucru este împărțit în trei mari pași:

  • Adăugarea casetei meta
  • Transformarea casetei meta
  • Salvarea datelor ( dreapta mod - da, există un mod greșit)

Merită remarcat faptul că o mulțime de informații pot fi de asemenea utilizate în API-urile tip post post custom (vom ajunge la acel moment mai târziu!), Dar pentru a păstra lucrurile astăzi, vom adăuga acest lucru direct la editorul post implicit.

Pentru cititorii avansați din public: Da, tipurile personalizate de posturi reprezintă locul în care vom merge cu acest lucru în cele din urmă, dar este important să configurați mai întâi câteva elemente fundamentale. În plus, pe măsură ce puteți utiliza meta-boxurile personalizate în diverse locuri, este bine să știți oricine.

Orice în acest tutorial va funcționa într-o temă functions.php fişier. Dar acesta nu este locul potrivit pentru asta. Dacă adăugați date la o postare, este posibil să fie acolo, indiferent de designul din față. Ca atare, ar trebui să plasați acest cod pe un loc care nu depinde de designul dvs.: un fișier plugin.


Pasul 1 Adăugarea casetei Meta

În mod convenabil, WordPress oferă o funcție pentru adăugarea de casete meta la un anumit ecran de administrare: add_meta_box.

Intrarea codex este bine făcută pentru această funcție, dar aici este o scurtă prezentare generală. Prototipul său:

 

$ id este atributul html ID al casetei. Acest lucru este util dacă încărcați CSS sau Javascript personalizat pe pagina de editare pentru a gestiona opțiunile. În caz contrar, nu prea contează prea mult.

titlu $ este afișat în partea de sus a casetei meta.

$ apel invers este funcția care face efectiv meta-caseta. Vom sublinia acest lucru la pasul 2.

pagina $ este locul în care doriți să fie afișată caseta meta. Acesta ar trebui să fie un șir cu "post" sau "pagină" sau "some_custom_post_type".

$ context este locul în care doriți să fie afișată caseta meta. "normal" îl pune sub editorul postului. "lateral" muta caracterele meta la editarea bara laterală dreaptă a ecranului (după categorii și etichete etc.). "avansat" a pus, de asemenea, caseta în aceeași coloană ca editorul de post, dar mai jos.

prioritate $ spune wordpress în cazul în care pentru a plasa meta caseta în context. "înalt", "implicit" sau "scăzut" pune cutia mai aproape de partea superioară, în poziția sa normală sau spre partea inferioară. Din moment ce toate cutiile meta sunt capabile sa fie trasabile, prioritate $ nu este o afacere uriașă.

In cele din urma $ callback_args vă permite să transmiteți datele către dvs. $ apel invers funcție sub forma unei matrice. Nu vom folosi acest lucru aici, dar ar putea fi util să treci niște date în caseta meta. Spuneți, dacă plugin-ul a avut mai multe opțiuni care au influențat ceea ce a fost afișat în caseta meta. Puteți trece aceste valori de opțiuni prin $ callback_args mulțime.

Deci, ale noastre add_meta_box apelul va arăta astfel:

 

Nu putem face acest lucru doar în dosarul nostru de plugin-uri. Acest lucru va duce la ecranul alb al morții, iar eroarea fatală PHP: sunați la funcția nedefinită. De ce? Pentru că am sunat add_meta_box înainte de a fi încărcat WordPress. Deci, trebuie să folosim un cârlig WordPress, care face parte din plugin-ul api. Practic, funcțiile se cuplează într-o anumită acțiune WordPress sau cârlig de filtrare, atunci acele funcții sunt declanșate atunci când încărcați cârligul. Prin împachetarea apelului nostru add_meta_box într-o funcție, apoi cuplarea acestei funcții în add_meta_boxes cârlig de acțiune, evităm eroarea fatală.

Codul nostru pentru a adăuga meta caseta în ecranul nostru de postare ar arăta astfel:

 

Pasul 2 Realizarea metalei

Codul de mai sus este suficient pentru a adăuga caseta de meta, dar acum trebuie să facem lucrurile și să adăugăm câmpuri. Acesta este doar un cod HTML format amestecat cu un pic de PHP pentru a afișa datele salvate. Nu este nevoie să includeți etichetele de formular, așa cum face WordPress pentru noi.

Amintiți-vă de șirul pe care am trecut-o ca $ apel invers în add_meta_box? Acum vom crea o funcție cu același nume. Această funcție va avea grijă de tot ecranul din interiorul căsuței meta.

 

Vom adăuga mai multe câmpuri la meta-caseta noastră: o intrare de text, un meniu derulant și o căsuță de selectare. Să începem cu introducerea textului.

Adăugarea intrării de text

    

Dar cum ar fi de fapt afișarea datelor? După cum veți vedea în pasul 3, vom stoca aceste date în tabelul wp_postmeta utilizând funcția update_post_meta. Această funcție are două funcții sora numite get_post_meta și get_post_custom, care captează date din wp_postmeta. get_post_meta doar prinde datele dintr-o singură cheie, în timp ce get_post_custom o ia pe toate. Pentru că în acest moment folosim cu adevărat un singur câmp, să folosim get_post_meta.

De asemenea, rețineți că add_meta_box funcția trece o variabilă la apelul nostru invers: $ post, care este un obiect post.

 ID); $ text = isset ($ valori ['my_meta_box_text'])? esc_attr ($ valori ['my_meta_box_text'] [0]):?; $ select = isset ($ valori ['my_meta_box_select'])? esc_attr ($ valori ['my_meta_box_select'] [0]):?; $ check = isset ($ valori ['my_meta_box_check'])? esc_attr ($ valori ['my_meta_box_check'] [0]):?; ?> 

Adăugarea drop-ului

 ID); $ text = isset ($ valori ['my_meta_box_text'])? esc_attr ($ valori ['my_meta_box_text'] [0]):?; $ select = isset ($ valori ['my_meta_box_select'])? esc_attr ($ valori ['my_meta_box_select'] [0]):?; $ check = isset ($ valori ['my_meta_box_check'])? esc_attr ($ valori ['my_meta_box_check'] [0]):?; ?> 

Cu adăugarea unui al doilea câmp, am schimbat sau get_post_meta Sună la get_post_custom, care returnează o matrice asociativă a tuturor cheilor și valorilor personalizate ale postului. Apoi, accesăm doar câmpurile noastre prin numele lor. Declarațiile ternare ține codul nostru de la aruncarea avertismentelor PHP (indici nedefiniți și altele asemenea). Vom acoperi funcția esc_attr la pasul trei.

În drop-down, vom folosi una dintre cele mai utile funcții WordPress: selectate. Aceasta compară prima valoare, datele pe care le-am salvat, iar cea de-a doua atributul de valoare. Dacă acestea sunt la fel, funcția va ecou selected = "selectat", care face ca această valoare să se afișeze în meniul derulant. Destul de dulce, și ne salvează să scriem o grămadă de declarații terestre. De asemenea, puteți utiliza funcția selectat() cu butoane radio.

Adăugarea casetei de selectare

 & lt; php funcția cd_meta_box_cb () // $ post este deja setată și conține un obiect: postul global $ WordPress; $ valori = get_post_custom ($ post-> ID); $ text = isset ($ valori ['my_meta_box_text'])? $ valori ['my_meta_box_text']: "; $ select = isset ($ valori ['my_meta_box_select'])? esc_attr ($ values ​​['my_meta_box_select']):"; $ check = isset ($ valori ['my_meta_box_check'])? esc_attr ($ values ​​['my_meta_box_check']): "; // Folosim acest câmp nonce mai târziu atunci când salvăm wp_nonce_field ('my_meta_box_nonce', 'meta_box_nonce'); 

/>

Din nou, WordPress oferă funcția la îndemână (). Funcționează exact așa selectat() comparând prima valoare (datele salvate) cu cel de-al doilea și răsfoind verificat = „verificat“ dacă sunt aceleași.

wp_nonce_field adaugă două câmpuri ascunse în caseta meta. Unul dintre ele este un nonce. Acestea sunt numerele aleatoare ale numerelor care sunt valabile pe fiecare utilizator pe blog pentru 24 de ore. Noncesele sunt o modalitate de a verifica intenția și se asigură că WordPress nu face nimic decât dacă cererea a venit dintr-un loc foarte specific. Cu alte cuvinte, nu dorim să ne actualizăm datele în mod accidental prin trecerea într-o anumită măsură a funcției noastre de salvare (vezi pasul 3) într-o altă locație, în afară de cârligul save_post, așa că verificăm să ne asigurăm că nonce este valabil înainte de a face ceva.

Pasul 3 Salvarea datelor

Regula de numărul unu când puneți ceva în baza dvs. de date sau pe site-ul dvs. este nu aveți încredere în utilizator. Chiar dacă acel utilizator ești tu.

Pentru a salva datele noastre, ne vom baza pe un alt cârlig WordPress: save_post. Aceasta funcționează la fel ca și cârligul de acțiune de mai sus:

 

cd_meta_box_save funcția va primi un argument, post id, și să aibă grijă de curățarea și salvarea tuturor datelor noastre. save_post a apărut o focalizare după ce a fost lovit butonul de actualizare sau salvare. Așa că avem acces la toate $ _POST date, care include câmpurile meta-box, în cadrul funcției noastre de salvare. Înainte de a putea face ceva, totuși, trebuie să facem trei lucruri: verificați dacă postarea este salvată automat, verificați valoarea nonce creată mai devreme și verificați dacă utilizatorul curent poate edita efectiv postarea.

 

Acum, lucrurile distractive: de fapt, salvarea datelor noastre. Regula de numărul unu când puneți ceva în baza dvs. de date sau pe site-ul dvs. este nu aveți încredere în utilizator. Chiar dacă acel utilizator ești tu. În acest scop, înainte de a salva orice date, vrem să ne asigurăm că nu există nimic rău intenționat acolo. Din fericire, WordPress oferă o mulțime de funcții pentru validarea datelor.

Ai văzut deja esc_attr () de mai sus (etapa 2). Aceasta codifică "și" < > în entități HTML. De ce să folosiți acest lucru? Deci, utilizatorii nu au putut tasta aa

Cod