Share
Săptămâna trecută am introdus modul de creare de casete meta personalizate în post-editor și salvați datele pe care le puneți în ele. Dar care sunt unele aplicații practice ale acestei tehnici? Astăzi, obiectivul este de a trece peste trei exemple din lumea reală de a utiliza casete meta personalizate pentru a îmbunătăți pagina postării.
În articolul introductiv, ați învățat totul despre modul de implementare a metaboxurilor și salvați / curățați datele pe care le accesează. Atât de bun! Dar este timpul să mergem dincolo de informațiile conceptuale și să punem acele meta cutii personalizate la dispoziție.
Scenariul: Porniți un site web care publică în primul rând conținut inspirat. Unul dintre lucrurile pe care le faceți în mod consecvent este să puneți citate în partea de sus a fiecărui post. Pentru a separa aceste citare de conținut, doriți să le mutați într-o casetă de metode personalizate.
În articolul "Cum să", ați învățat cum să implementați meta-boxes, dar iată o scurtă recenzie.
Închideți o funcție în add_meta_boxes care conține un apel către add_meta_box funcţie.
Creați o funcție cu același nume ca și $ apel invers specificate în add_meta_box. Aceasta este piesa care afișează de fapt conținutul meta-box.
Accentsconagua
ID, '_cd_quote_content', adevărat); $ autor = get_post_meta ($ post-> ID, '_cd_quote_author', adevărat); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); // Nonce pentru a verifica intenția mai târziu wp_nonce_field ('save_quote_meta', 'quote_nonce'); ?>
Activați o funcție save_post care se ocupă mai întâi de verificarea permisiunilor și intenției și apoi curăță și salvează datele.
array ()); dacă (isset ($ _POST ['_ cd_quote_content'])) update_post_meta ($ id, '_cd_quote_content', wp_kses ($ _POST ['cd_quote_content']; dacă (isset ($ _POST ['_ cd_quote_author'])) update_post_meta ($ id, '_cd_quote_author', esc_attr (strip_tags ($ _POST ['_ cd_quote_author']);); dacă (isset ($ _POST ['_ cd_quote_date'])) update_post_meta ($ id, '_cd_quote_date', esc_attr (strip_tags ($ _POST ['cd_quote_date']);); ?>
Am putea folosi datele salvate în casetele noastre de meta editând fișierele șablon ale temei noastre. Dar este prea ușor. Pentru a păstra codul nostru de cotă modular (un fișier de plugin), vom folosi cârlige de filtrare, parte a API-ului Plugin. Cârligele de filtrare sunt puțin diferite de acțiuni. Atunci când cârlig într-un filtru, scopul este, de cele mai multe ori, de a modifica modul în care o bucată de conținut apare pe o pagină. În cazul nostru, o să ne implicăm continutul, și dacă ne aflăm pe o singură pagină de postare care are un citat, o vom adăuga mai sus.
Un alt mod de a gandi la actiune fata de cârligele de filtrare este ca tu ecou lucrurile aflate în acțiuni (de ex., wp_head, a se vedea secțiunea 2), dar cu filtre luați în una sau mai multe variabile, modificați-le, apoi întoarcere lor.
Pentru a afișa citatul nostru, ne vom alătura continutul, care transmite în mod implicit o variabilă: conținutul unei postări date. În interiorul funcției noastre, vă vom asigura că suntem într-o singură postare și, dacă nu suntem, returnați conținutul corect (fără modificări).
În continuare, o să luăm pe noi $ postare variabil. Pentru că suntem în buclă, sunăm doar postare globală $. Apoi, vom obține citatul nostru, dacă nu se întoarce nicio valoare, știm că nu a fost introdusă nicio cotatie și vom returna conținutul încă o dată fără modificări.
ID, '_cd_quote_content', adevărat); // Bail dacă nu avem o cotă; dacă (gol ($ quote)) returnează $ content; ?>
Acum, că ne-am asigurat că suntem într-o singură postare și avem de fapt un citat, avem grijă să punem lucrurile împreună. Mai întâi o să sunăm pe autorul nostru și pe datele sale get_post_meta (), atunci putem începe construirea unui șir în $ out variabil. Mai întâi vom adăuga a și citatul nostru. Apoi verificăm dacă domeniul autorului a fost completat. Dacă a fost, vom începe un paragraf pentru autor, apoi verificați dacă a existat o dată și adăugați-o la paragraful de asemenea. În cele din urmă, vom adăuga închiderea noastră etichetă.
ID, '_cd_quote_content', adevărat); // Bail dacă nu avem o cotă; dacă (gol ($ quote)) returnează $ content; // Adunați citatul nostru $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = '". citat $; dacă (! gol ($ autor)) $ out. = '„; ?>-". autor $; dacă (! gol ($ date)) $ out. = '('. $ date. ')'; $ out = '
„; $ out. = '
Acum, cel mai important pas: revenirea combinației noului nostru produs $ out șir care conține citatul și conținutul original găsit în conținut $.
ID, '_cd_quote_content', adevărat); // Bail dacă nu avem o cotă; dacă (gol ($ quote)) returnează $ content; // Adunați citatul nostru $ author = get_post_meta ($ post-> ID, '_cd_quote_author', true); $ date = get_post_meta ($ post-> ID, '_cd_quote_date', true); $ out = '". citat $; dacă (! gol ($ autor)) $ out. = '„; // Returnați valorile: citați mai întâi, apoi conținutul returnează $ out. conținut de $; ?>-". autor $; dacă (! gol ($ date)) $ out. = '('. $ date. ')'; $ out = '
„; $ out. = '
Asta e! Puteți vedea rezultatul.
Scenariul: Aveți o comunitate activă de cititori care vă împărtășesc regulat articolele pe Facebook. Acest lucru este minunat și trimite o mulțime de trafic în felul tău. Dar începeți să observați că imaginile care apar cu articolele dvs. pe Facebook sunt mai puțin decât ideale. De asemenea, nu sunteți mulțumiți de modul în care apar titlurile postărilor dvs. Soluția este să adăugați meta tag-uri Open Graph pentru a controla afișarea articolelor dvs. Mai degrabă decât să vă îngrijiți de acest lucru în mod automat, decideți să implementați o meta-casetă personalizată pentru a avea grijă de aceasta.
Probabil că ai asta până acum, dar iată codul pentru a-ți găsi meta-box-ul.
ID, '_cd_opengraph_title', adevărat); $ desc = get_post_meta ($ post-> ID, '_cd_opengraph_desc', true); $ image = get_post_meta ($ post-> ID, '_cd_opengraph_image', adevărat); // Adăugați un câmp nonce wp_nonce_field ('save_opengraph_meta', 'opengraph_nonce'); ?>
Imaginile mici, pătrate funcționează cel mai bine.
Pentru a face ca butonul "Încărcați imaginea" să funcționeze, va trebui să adăugăm un pic de javascript care hijacks construit în WordPress uploader. Asta înseamnă că vom folosi încă un cârlig de acțiune. De data asta admin_print_script - pagina $.
Când adăugați scripturi și / sau stiluri în zona de administrare a WordPress, există o regulă de aur: adăugați doar script-urile / stilurile de unde aveți nevoie. Acest lucru împiedică pluginul / tema să spargă altceva în caz de accident. admin_print_scripts - pagina $ vă permite să inserați numai scripturi (prin funcția wp_enqueue_script) numai pe pagina $ specificate. În acest caz, trebuie să adăugăm scriptul nostru la post.php și post-new.php ecrane. Acest lucru necesită conectarea aceleiași funcții în ambele.
Și javascriptul.
jQuery ('ogfield = jQuery' ('input # og-image') .attr ('name' ); tb_show ("," media-upload.php? type = image & TB_iframe = true "); return_file;); window.send_to_editor_old = window.send_to_editor; window.send_to_editor = function (html) var ogimg; ! ogimg = jQuery ('img', html) .attr ('src'); jQuery ('input # og-image') .val (ogimg); tb_remove window.send_to_editor_old (html);;); Mai intai ne asiguram ca uploaderul cu grosime va aparea atunci cand faceti clic pe buton si am creat o variabila care spune WordPress ca este butonul nostru pe care a fost apasat. Apoi, salvăm window.send_to_editor funcția cu un nume nou. Aceasta este funcția care introduce de fapt imaginea HTML în zona de editare post. O să fugim de această funcție pentru a trimite atributul src propriului câmp de formular, dar numai dacă grosimea este ridicată de butonul nostru.
Vom cânta în wp_head acțiune pentru a adăuga meta tagurile noastre în secțiune. Mai întâi ne vom asigura că suntem într-o singură pagină de postare și apoi ne-am înființat $ postare variabil. $ postare nu ar trebui să fie goală în acest moment, deoarece WordPress a decis deja ce fel de obiect este redarea și ce fișier de șablon trebuie să folosească. Dar, în cazul în care este, vom prelua post cu get_queried_object ().
get_queried_object (); ?>
În continuare, putem trece prin fiecare variabilă Open Graph, preluând totul cu get_post_custom (), și, dacă este acolo, ecou-l în secțiunea cap a paginii noastre.
get_queried_object (); $ valori = get_post_custom ($ post-> ID); dacă (isset ($ values ['_ cd_opengraph_title'])) echo '"." \ n "; dacă (isset ($ valori ['_ cd_opengraph_desc'])) echo '". "\ N"; dacă (isset ($ valori ['_ cd_opengraph_image'])) echo '". "\ N"; ?>
Scenariul: Te bazezi foarte mult pe șablonul de pagină al barei laterale Twenty Eleven. Dar doriți să puteți comuta între barele laterale stânga și dreapta pentru fiecare pagină.
Următorul cod ar fi mai bine rămas în fișierul de funcții al unei teme. Acestea fiind spuse, pentru că folosim un plugin aici, ne putem conecta init și cu verificarea funcției noastre pentru a vă asigura că Twenty Eleven este tema curentă. Dacă nu, dezactivează pluginul. Mai întâi, totuși, vom defini o constantă care conține adresa URL a directorului în care se află plugin-ul nostru.
Aceeași rutină ca înainte: adăugați caseta meta, faceți-o și salvați datele. De data aceasta, însă, vom afișa caseta noastră meta din ecranul de editare pentru pagini. De asemenea, vom folosi o funcție de tip wordpress numită get_template_directory_uri, care returnează un șir care conține URI-ul directorului pentru tema curentă. Vom folosi acest lucru pentru a împrumuta câteva imagini pe care Twenty Eleven le folosește pe pagina opțiunilor tematice. De asemenea, vom folosi constanta pe care am definit-o mai devreme pentru a adauga o imagine proprie.
ID, '_cd_post_layout', adevărat); // Setați variabila aspectului nostru, chiar și pe posturile noi dacă (gol ($ layout)) $ layout = 'implicit'; // director tematic pentru împrumuturi 2011 imagini $ dir = get_template_directory_uri (); wp_nonce_field ('save_post_layout', 'layout_nonce'); ?> Pentru a ne preface puțin meta-box-ul, va trebui să adăugăm și propria noastră foaie de stil. Tine minte admin_print_scripts - pagina $ de la al doilea scenariu de mai sus? Are un frate, admin_print_styles - pagina $, care, după cum sugerează și numele, vă permite să adăugați foaie de stil administratorului wordpress pe anumite pagini. Va trebui să ne implicăm în această funcție post.php și post-new.php. Vom utiliza, de asemenea, wp_enqueue_style (); funcționează la fel ca și wp_enqueue_script (), pe care am folosit-o în al doilea exemplu de mai sus.
Și CSS.
div.cd-layout width: 200px; plutește la stânga; div.cd-layout input afișare: bloc; # cd-sidebar-pos .clearfix: după clar: ambele; : display-block: font-size: 0; line-height: 0; visibility: hidden; width: 0; 5px;
Douăzeci și unsprezece realizează poziționarea barei laterale prin blocarea într-un filtru numit body_class. Aceasta este o parte a funcției numite , care, dacă ați proiectat o temă înainte, probabil ați folosit. Dacă aspectul implicit este două coloane, Twenty Eleven adaugă unul din cele două elemente adiționale la body_class: bara din partea dreaptă sau bara laterală stângă. Puteți vedea codul pentru acest lucru în tema inc folderul din fișier temă-options.php.
Codul nostru propriu va fi, de asemenea, în cârlig body_class. În primul rând, ne vom asigura că suntem pe o pagină și că pagina respectivă folosește Șablon bara laterală. Apoi îl vom primi $ postare variabilă sau setată dacă este goală. Observați două argumente suplimentare pentru add_filter. 99 este prioritatea. Vrem ca acest lucru sa se termine ultimul, asa ca folosim un numar mai mare. 1 este numărul sau argumentele care trebuie trimise la funcția noastră.
body_class va trimite o serie de elemente care vor intra în body_class () ieșire. De aici, trebuie doar să obținem propriile meta-valori. Dacă valoarea noastră este "corectă", vom căuta "bara din stânga" în matricea corpului. Dacă este acolo, o vom dezactiva și o vom înlocui cu "bara laterală dreaptă". În caz contrar, dacă valoarea noastră este lăsată.
ID, '_cd_post_layout', adevărat); // dacă folosim aspectul potrivit, adăugăm dacă ($ layout == 'dreapta') $ key = array_search ('left-sidebar', $ classes); dacă ($ cheie) unset ($ classes [$ key]); $ classes [] = 'bara din dreapta'; elseif ($ layout = 'stânga') $ key = array_search ('right-sidebar', $ classes); dacă ($ cheie) unset ($ classes [$ key]); $ classes [] = 'bara laterală din stânga'; returnează clasele $; ?> Cele de mai sus ar funcționa, dar am lăsat puțin detalii. Dacă un utilizator a întâmpinat opțiunile temei Twenty Eleven setat la un afișaj cu o singură coloană, niciuna dintre opțiunile din caseta de meta nu va funcționa. Deci, permiteți modificarea add_meta_box sună puțin. Mai întâi vom primi opțiunile Twenty Eleven, apoi ne vom asigura că opțiunea de aspect al temei nu este setată la o coloană. Dacă tema este setată la o coloană, nu vom adăuga caseta meta.
După cum vă puteți imagina, există multe alte utilizări pentru casetele meta personalizate? acestea sunt doar câteva exemple practice pentru a vă ajuta mintea să funcționeze. Atunci când sunt combinate cu tipuri personalizate de posturi, ele vă permit să creați ecrane de editare extrem de personalizate. Cu toate acestea, puterea reală a meta-boxurilor personalizate constă în modul în care designerii temelor și dezvoltatorii de plugin-uri pot crea interfețe mai ușor de utilizat pentru setările de nivel post sau de pagină.
Sperăm să vă bucurați de tutorial!
