Accentsconagua
Zona textului: ". $ Textarea."
"ecou"Caseta de selectare: ". $".
"ecou"Butoane radio: ". Radio".
"ecou"Dropdown: "$ select."
"ecou"Harta site-ului
"ecou"- "wp_list_pages (array ('title_li' =>")). "
Share
În partea 1 a acestei serii de tutorial am introdus conceptul de bază al șabloanelor dinamice ale paginilor și am creat un șablon standard de pagină ca fundație pentru o lucrare viitoare. O temă pentru copii WordPress bazată pe tema părintelui Twenty Seventeen a fost utilizată pentru a implementa șablonul de pagină.
În acest tutorial, veți afla mai multe detalii specifice despre șabloanele de pagini dinamice și despre modul în care le puteți utiliza în propriile proiecte WordPress.
De asemenea, vă vom arăta pas cu pas cum să extindeți șablonul de pagină din primul tutorial și să-l transformați în primul dvs. șablon de pagină dinamic de lucru!
Deci, cum putem face șabloanele de pagini mai flexibile și de ce ar fi util oricum?
Să presupunem că aveți un șablon de pagină de portofoliu care oferă o gamă de elemente de portofoliu individuale. Fiecare element ar fi o dimensiune fixă și doar atât de mulți ar putea să se potrivească fiecărui rând.
S-ar putea, desigur, să adăugăm un alt șablon de pagină pentru a afișa portofolii la diferite mărimi. Dar dacă am vrea să arătăm portofolii mici, medii sau mari? Pentru aceasta, am avea nevoie de trei șabloane separate de pagini, fiecare dintre ele având dimensiuni diferite pentru elementele de portofoliu.
Acest lucru ar putea deveni instantaneu mai flexibil prin adăugarea unui control drop-down pentru a selecta dimensiunea portofoliului (adică, Small, Medium sau Large). Acest lucru este mai convenabil pentru utilizator, deoarece caseta de șablon de pagină este mai puțin aglomerată cu alegeri inutile.
Are sens mai mult pentru dezvoltator, care are doar un șablon de pagină pentru a menține mai degrabă decât trei! Aceasta urmează principiul de dezvoltare a software-ului Do not Repeat Yourself (DRY).
Merită menționat că nu fiecare șablon de pagină ar beneficia neapărat de a fi dinamic. Dacă aveți un șablon de pagină care face un singur lucru și numai un singur lucru, atunci este bine. Nu ar fi logic să adăugați în acest caz comenzi personalizate și logică suplimentară la un șablon de pagină.
Dar, după cum veți vedea până la sfârșitul acestui tutorial, multe șabloane de pagini ar beneficia foarte mult de a fi mai flexibile.
Un alt exemplu util pentru un șablon de pagină dinamic ar fi un formular de contact. Există multe controale personalizate care ar putea fi adăugate pentru a face acest șablon de pagină extrem de flexibil.
De exemplu, mai degrabă decât de ieșire un set fix de câmpuri de formular, controale șablon de pagină ar putea fi adăugate pentru a vă permite să omiteți anumite câmpuri. Sau poate un câmp Captcha ar putea fi opțional afișat pentru a împiedica depunerea formularului de spam? Există atât de multe moduri în care puteți personaliza un formular de contact.
Voi crea un șablon de pagină din formular dinamic în partea a treia a acestei serii tutorial. Dar, mai întâi, să începem cu crearea unui șablon de pagină dinamic cu scop general.
În primul rând, vom crea un șablon de pagină dinamic de bază pentru a demonstra modul în care toate componentele se potrivesc împreună. Controalele personalizate vor fi adăugate editorului de pagini, care va fi folosit ulterior pentru a controla ieșirea șablonului de pagină.
Controalele personalizate pentru șabloanele de pagină pe care le vom adăuga în curând sunt:
În mod ideal, comenzile trebuie adăugate direct sub caseta drop-down a șablonului de pagină pentru a face evident că sunt legate de un șablon de pagină.
Cu toate acestea, WordPress nu oferă nici un fel de cârlige pentru acest lucru, așa că va trebui să faci (pentru moment) adăugarea controalelor personalizate ale șablonului de pagină într-o casetă de metode personalizată separată. În partea a treia a acestei serii de tutorial, vă voi arăta cum să obțineți această problemă.
Cârligele sunt fundamentale pentru dezvoltarea WordPress. Ele permit dezvoltatorilor să extindă baza de cod fără a trebui să recurgă la editarea fișierelor de bază, care este, în general, considerată o idee proastă. Acest lucru se datorează faptului că orice cod personalizat va fi șters ori de câte ori se efectuează o actualizare WordPress (care se poate întâmpla destul de regulat).
Pentru a afișa caseta meta din ecranul editorului de pagină, adăugați încărcare-post.php și încărcare-post-new.php cârlig la tema copilului init () metoda pe care am creat-o în partea 1.
Utilizăm două cârlige WordPress pentru a vă asigura că ferestrele meta afișează editorul de pagini, indiferent dacă creați o pagină nouă sau editați o pagină existentă. Este deasemenea o
save_postcârlig care se ocupă de salvarea datelor post-meta, pe care o voi acoperi mai târziu.Adăugați următoarele patru metode de clasă pentru a crea, afișa și salva date pentru caseta meta.
/ * Adăugați cârligul meta cutie. * / funcția publică page_template_meta_box () add_action ('add_meta_boxes', array ($ this, 'add_page_template_meta_box'));/ * Înregistrați meta box. * / funcția publică add_page_template_meta_box () add_meta_box ('page-template-meta-box', esc_html __ ('Template Meta Box', 'twenty-seventeen-child' "," partea "," implicit ");/ * Render meta box pe editorul de pagini. * / funcția publică display_page_template_meta_box ($ object) wp_nonce_field (numele de bază (__FILE__), 'page_template_meta_box_nonce');Nu voi intra in prea multe detalii aici despre cutiile meta WordPress, pentru ca ar putea fi un tutorial intreg, dar notati urmatoarele puncte despre codul pe care l-am adaugat mai sus:
page_template_meta_box () și add_page_template_meta_box () metodele de clasă înregistrează meta cu WordPress.add_page_template_meta_box (), 'pagină' parametru specifică faptul că această căsuță meta va fi afișată numai în editorul de tip post de pagină din administratorul WordPress.display_page_template_meta_box () metoda de clasă face meta box și stabilește un nonce pentru a face controalele de formă mai sigure.Dacă totul este bine, ar trebui să aveți acum o cartelă de meta afișată în editorul de pagini, după cum se arată mai jos.
În acest moment este puțin gol, totuși, să adăugăm niște controale.
Dacă vă amintiți din cele de mai sus, vom adăuga o casetă de text, o zonă de text, o casetă de selectare, un buton radio și veți selecta opțiuni de selectare a casetei în caseta meta. Începeți prin adăugarea următorului cod la display_page_template_meta_box () sub metoda nonce.
ID, "page_template_text", adevărat); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true);
Aceasta returnează valorile curente ale controalelor meta-box și le stochează în variabilele locale. Acum adăugați următorul cod HTML imediat după, pentru a reda controalele meta-box.
?>
/>
>
>
>
Fiecare control este conținut într-un etichetă de paragraf, iar valoarea curentă este actualizată prin intermediul variabilei locale pe care am creat-o mai devreme. Acest lucru asigură faptul că butoanele meta boxului afișează întotdeauna setările corecte.
Cu toate acestea, acest lucru nu se va întâmpla dacă nu salvăm datele curente de control al meta-boxului în baza de date WordPress.
Puțin mai devreme, am înregistrat un cârlig pentru a executa o metodă de clasă de fiecare dată când editorul de pagini a fost actualizat. Să adăugăm această metodă la clasa tematică a copilului acum.
post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['pagina-șablon-text'])? $ _POST ['pagina-șablon-text']: ";"; ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; -template-textarea "]:"; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['pagina-șablon-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align']) -template-align]: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['pagina-șablon-select'])? $ _POST ['page-template-select']: "; update_post_meta ($ post_id, 'page_template_select', $ page_template_select_value);
save_page_template_meta ()metoda de clasă se ocupă de salvarea datelor de control pentru meta-box. Salvează datele din meta-box numai dacă este verificată nonce, utilizatorii curenți pot edita posturile și suntem pe ecranul editorului de pagină.Dacă aceste condiții sunt îndeplinite, atunci extragem datele pentru fiecare control care este stocat în global
$ _POSTvariabil. Această variabilă este setată de fiecare dată când este trimis un formular.În cele din urmă, datele de control din meta-box sunt salvate în baza de date WordPress ca meta date pentru pagina curentă.
Cu ajutorul controalelor personalizate ale șablonului de pagină adăugate, caseta noastră meta ar trebui să arate așa.
Introduceți un text pentru caseta text și textarea și faceți selecții pentru caseta de selectare, butonul radio și caseta de selectare. Apăsați actualizarea pentru a salva modificările și atunci când editorul de pagini se reîncarcă, controalele din caseta meta ar trebui să afișeze datele pe care le-ați introdus.
Codul sursă complet pentru fișierul functions.php pentru tema copilului este prezentat mai jos.
ID, "page_template_text", adevărat); $ textarea = get_post_meta ($ object-> ID, 'page_template_textarea', true); $ checkbox = get_post_meta ($ object-> ID, 'page_template_chk', true); $ radio = get_post_meta ($ object-> ID, 'page_template_radio', true); $ select = get_post_meta ($ object-> ID, 'page_template_select', true); ?>post_type) return $ post_id; $ page_template_text_value = isset ($ _POST ['pagina-șablon-text'])? $ _POST ['pagina-șablon-text']: ";"; ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; ;; -template-textarea "]:"; update_post_meta ($ post_id, 'page_template_textarea', $ page_template_textarea_value); $ page_template_chk_value = isset ($ _POST ['pagina-șablon-chk'])? $ _POST ['page-template-chk']: "; update_post_meta ($ post_id, 'page_template_chk', $ page_template_chk_value); $ page_template_radio_value = isset ($ _POST ['page-template-align']) -template-align]: "; update_post_meta ($ post_id, 'page_template_radio', $ page_template_radio_value); $ page_template_select_value = isset ($ _POST ['pagina-șablon-select'])? $ _POST ['page-template-select']: ";"; $ ts_child_theme = new DPT_Twenty_Seventeen_Child (); $ ts_child_theme-> init ();
/>
>
>
>
Ultima piesă a puzzle-ului este folosirea datelor de control de tip meta-box în șablonul de pagină din capătul din față. Deschideți
test page-template.phpfișierul pe care l-am creat în partea 1 și înlocuim conținutul cu acest cod actualizat.Casetă text: ". $ Text"."ecou" Zona textului: ". $ Textarea."
"ecou"Caseta de selectare: ". $".
"ecou"Butoane radio: ". Radio".
"ecou"Dropdown: "$ select."
"ecou"Harta site-ului
"ecou""wp_list_pages (array ('title_li' =>")). "
", în cele din urmă; / / Sfârșitul buclaAsigurați-vă că "Șablonul de pagină de test" este șablonul de pagină selectat în prezent și vizualizați pagina de pe capătul din față.
După cum puteți vedea, șablonul de pagină include acum valorile setate doar pentru controalele meta-box din editorul de pagini. Acest lucru este esențial pentru restul tutorialului, pe măsură ce vom construi acest exemplu de bază și vom crea diverse exemple de șabloane de pagini dinamice care funcționează pe deplin pe care le puteți utiliza în propriile proiecte WordPress.
Concluzie
În acest tutorial, am abordat cum să construim un șablon de pagină dinamic funcțional. În prezent, chiar dacă este funcțional, șablonul de pagină de bază nu este extrem de util.
În cea de-a treia și ultima parte a acestei serii de tutorial, vă vom arăta cum să construiți diverse șabloane dinamice ale paginilor, de la început până la sfârșit, pe care le puteți utiliza (și extindeți) în propriile proiecte WordPress.
Dacă aveți întrebări, vă rugăm să lăsați un mesaj în comentariile de mai jos. Mi-ar plăcea să vă aud gândurile pe tutorial.
