Șabloane dinamice ale paginilor în WordPress, Partea 3

În primele două părți ale acestei serii de tutorial, am analizat ce șabloane dinamice ale paginilor au fost și de ce au fost necesare. De asemenea, am analizat codul necesar pentru implementarea acestora. 

În acest tutorial al treilea și ultimul din seria, voi crea două exemple de șabloane de pagină dinamice care funcționează pe deplin pe care le puteți utiliza în proiectele proprii. Acestea au fost alese special pentru a fi ușor de extins pentru a se potrivi propriilor dvs. nevoi și sunt destinate ca inspirație pentru orice alt tip de template-uri dinamice de pagină pe care vă puteți gândi.

Cele două șabloane dinamice ale paginilor pe care le vom examina în curând sunt:

• Formular de contact simplu
• Arhiva postarilor de blog

Pe lângă punerea în aplicare a șabloanelor noastre de pagini, vă voi arăta, de asemenea, cum să adăugați poloneză suplimentară, prin CSS personalizat și JavaScript, pentru a face interacțiunea mult mai intuitivă pentru utilizatorii finali.

În plus, vom examina modul în care puteți utiliza șabloanele de pagini orice post tip. De la WordPress 4.7, puteți specifica tipul de post cu care este asociat un șablon de pagină. Vom vedea cum puteți modifica un șablon de pagină dinamic existent pentru a profita de această nouă funcție, astfel încât să funcționeze cu orice tip de postare.

Avem multe de acoperit în acest tutorial, așa că să începem!

Setarea temelor

Vom folosi din nou o temă de la WordPress Twenty Seventeen, la fel ca în partea a 2 a seriei tutorial, pentru a adăuga codul dinamic al șablonului de pagină. Să începem cu o temă fără copii.

Creați un folder tematic pentru copii numit twentyseventeen-copil și adăugați următoarele fișiere:

• functions.php
• style.css

Interior style.css, adăuga:

/ * Denumirea temei: Twenty Seventeen Child Descriere: Douăzeci și șaptezeci de temă pentru copii Autor: David Gwyer Format: twentyseventeen Versiune: 0.1 Licență: GNU General Public License v2 sau mai recent URI de licență: http://www.gnu.org/licenses/gpl- 2.0.html Domeniul text: twenty-seventeen-child * /

Și înăuntru functions.php, adăuga:

init (); 

Adăugați tema copilului în directorul de teme WordPress așa cum am făcut-o înainte. Dacă nu sunteți sigur (ă) cum să faceți acest lucru, consultați înapoi partea 2 din această serie de tutori.

Acum avem o temă de lucru (necompletată) pregătită de noi pentru a adăuga codul dinamic al șablonului de pagină.

Formatul paginii dinamice din formular

Prima noastră implementare reală a unui șablon dinamic al paginii este un simplu formular de contact. Vom adăuga următoarele câmpuri:

• rubrică
• Nume
• Subiect
• E-mail
• Numar de telefon

Acestea sunt câmpurile de introducere a textului, în afară de titlu, care este o etichetă standard de titlu HTML.

Înainte de a implementa șablonul de pagină real, trebuie să adăugăm controale personalizate editorului de pagini care să ne permită să modificăm ieșirea șablonului de pagină. Apoi, când creăm șablonul de pagină, acesta va fi redat în funcție de setările de control ale editorului de pagini.

În partea a doua a acestei serii de tutorial, am menționat că nu există nicio modalitate ușoară de a adăuga comenzi personalizate direct în caseta meta "Atribute pagină", ​​în care se află meniul drop down al șablonului de pagină.

Aceasta înseamnă că pentru moment trebuie să adăugăm controalele dinamice ale șabloanelor de pagină din altă parte. Vă voi arăta cum să depășiți această limitare mai târziu, cu un pic de magie CSS și JavaScript. Dar, pentru moment, va trebui să ne descurcăm cu adăugarea controalelor noastre personalizate într-o casetă meta separată.

În DPT_Twenty_Seventeen_Child clasa, înregistrați două cârlige de acțiune noi în init și o nouă metodă numită page_template_meta_boxes.

 încărcare-post.php și încărcare-post-new.php cârligele de acțiune rulează ori de câte ori un post (de orice tip) este editat sau creat. Când se întâmplă acest lucru, înregistrăm un alt cârlig de acțiune add_meta_boxes care va declansa crearea meta-box-ului nostru personalizat, care se face prin intermediul add_page_template_meta_boxes funcția de retur. Să implementăm această funcție acum.
Redarea efectivă a controalelor meta-box va fi gestionată prin intermediul display_form_page_template_meta_box callback funcția, care a fost specificată mai sus ca unul dintre argumentele add_meta_box ().
Adăugați controale aici ... 
Deocamdată, am adăugat un text cu substituent pentru a putea vedea noua noastră meta-casetă în editorul de pagini.
Rețineți mai devreme că șablonul de pagină al formularului nostru va avea o rubrică și patru câmpuri de text. Există mai multe modalități prin care putem alege să customizăm formularul de ieșire, dar, în cazul nostru, să adăugăm casete de selectare pentru fiecare câmp care ne va permite să ne schimbăm vizibilitatea. Actualizați display_form_page_template_meta_box () pentru a include următorul cod.
ID, "pt_chk_form_heading", adevărat); $ nume = get_post_meta ($ object-> ID, 'pt_chk_form_name', true); $ subject = get_post_meta ($ object-> ID, 'pt_chk_form_subject', true); $ email = get_post_meta ($ obiect-> ID, 'pt_chk_form_email', true); $ phone = get_post_meta ($ object-> ID, 'pt_chk_form_phone', true); ?> 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
  /> 
 
 
 
Includem un câmp nonce pentru securitate, care va fi verificat mai târziu, chiar înainte de a salva valorile formularului în baza de date.
Notă: Dacă, din orice motiv, valoarea nonce nu poate fi verificată, setările nu vor fi salvate. 
Apoi, valorile curente ale formularului sunt preluate din baza de date înainte ca câmpurile formularului personalizat să fie afișate în interiorul căsuței meta.
În prezent, căsuțele noastre de validare nu vor fi salvate atunci când postarea este actualizată. Pentru a face setările formularului să persiste, trebuie să înregistrați un nou cârlig în init () care declanșează în timpul unui proces save_post acțiune și apoi implementați apelul pentru a actualiza manual setările post meta.
post_type) return $ post_id;  $ heading = isset ($ _POST ['pt_chk_form_heading'])? $ _POST ['pt_chk_form_heading']: "; update_post_meta ($ post_id, 'pt_chk_form_heading', titlu $); $ name = isset ($ _POST ['pt_chk_form_name']) $ _POST ['pt_chk_form_name']; update_post_meta ($ post_id, 'pt_chk_form_name', $ name); $ subject = isset ($ _POST ['pt_chk_form_subject'])? $ _POST ['pt_chk_form_subject']: "; update_post_meta ($ post_id, 'pt_chk_form_subject', $ subiect); $ email = isset ($ _POST ['pt_chk_form_email']) $ _POST ['pt_chk_form_email']; update_post_meta ($ post_id, 'pt_chk_form_email', $ email); $ phone = isset ($ _POST ['pt_chk_form_phone'])? $ _POST ['pt_chk_form_phone']: "; update_post_meta ($ post_id, 'pt_chk_form_phone', $ phone); 
Odată ce valoarea formularului și a permisiunilor de utilizator au fost verificate, împreună cu o verificare pentru a ne asigura că suntem pe tipul corect de post, putem testa valorile formularului afișat și salvați în siguranță valorile în baza de date.
Casutele noastre de verificare sunt acum pe deplin funcționale, astfel încât să putem continua și să implementăm șablonul de pagină real! În interiorul directorului temă rădăcină copil, adăugați un nou dosar numit page-șabloane, și adăugați la el un nou fișier numit Formularul-page-template.php.
Adăugați următorul cod în fișierul nou pentru a crea un șablon de pagină gol.
 
 
 
  
 
 
 
Pentru a reduce complexitatea codului, formularul nostru de contact nu validează datele introduse de utilizatori și ne-am angajat verificările și validarea formularului obișnuit, deoarece vrem să ne concentrăm exclusiv pe realizarea dinamică a formularului fără cod străin.
În primul rând, trebuie să preluăm valorile căsuței din formularul dinamic de contact.
Apoi putem adăuga în formularul de cod. Acest lucru este foarte similar pentru fiecare câmp de formular. Să aruncăm o privire la Nume cod de câmp.
  
 
Testați valoarea căsuței de selectare din setările șablonului de pagină și extrageți câmpul formular numai dacă este bifată. În caz contrar, nu se emite nimic. Aceasta se repetă pentru fiecare câmp de formular.
După trimiterea formularului, trimitem un e-mail administratorului site-ului și afișăm un mesaj pe ecran. Cu toate acestea, avem ultimul cod al șablonului de pagină.
 
 
 
 Mesajul trimis a fost trimis cu succes!
";>> 
  
Formatul paginii dinamice din formular!
    
    
    
    
  
Acum, încercați să debifați unele dintre casetele de selectare a formularului de pagină. Numai câmpurile specificate sunt afișate. Aveți control total asupra modului în care este afișat formularul! În ecranul de mai jos, am debifat doar casetele de e-mail și telefon.
Notă: Dacă lucrați la un mediu WordPress local, atunci Poștă funcția nu poate trimite e-mailul. Acesta va funcționa numai dacă aveți un server de poștă electronică configurat și rulat.
Formularul ar putea fi ușor extins pentru a adăuga orice număr de controale de orice tip. De exemplu, ați putea adăuga un câmp opțional CAPTCHA în formularul dvs. sau puteți specifica ordinea câmpurilor afișate sau chiar textul pentru titlurile / titlurile formularului. Ideea aici este că puteți utiliza șabloane de pagini dinamice pentru a vă personaliza formularul oricum doriți. Posibilitățile sunt literalmente fără sfârșit!
Organizarea controalelor șablon de pagină
S-ar putea să fi observat că există câteva probleme de uzabilitate cu controalele de administrare pentru șablonul nostru dinamic de pagină. Funcțional este bine, dar, în mod ideal, controalele șablon dinamice ale paginii ar trebui să se afle în aceeași casetă de metadate cu meniul drop-down al șablonului de pagină. 
Rețineți că motivul pentru care a trebuit să adăugăm controalele șablonului de pagină la o casetă meta distinctă în primul rând a fost că nu există în prezent nici un cârlig WordPress disponibil pentru a adăuga comenzi personalizate direct în caseta de metadate a șablonului de pagină.
De asemenea, atunci când este selectat un șablon de pagină dinamic, dorim doar ca controalele asociate șablonului respectiv să fie vizibile. Putem completa ambele cerințe prin adăugarea unor cSS și JavaScript personalizate în editorul de pagini.
Mai exact, trebuie:
 
Ascundeți caseta meta formular.
 
Așteptați ca pagina editorului de admin să se încarce complet.
 
Deplasați comenzile formularului în caseta meta "Atribute pagină".
 
Afișați numai controalele din formularul de administrare dacă este selectat șablonul de pagină asociat.
 
Începeți prin adăugarea css și js folderelor în folderul rădăcină temă copil. În interiorul css director crea un style.css fișier, și în js director crea un script.js fişier. Poți să spui tot ce vrei tu, totuși. Nu uitați să notați numele fișierelor dacă este cazul și înlocuiți-le în codul scripturilor enqueue.
Apoi, trebuie să scoatem ambele fișiere numai pe ecranul editorului de pagini. Nu vrem să fie adăugați toate pagini de admin. Înregistrați un nou cârlig de acțiune în init () metoda de încărcare a scripturilor în paginile de administrare și adăugarea funcției de apel invers pentru a incripta fișierele de script.
Observați cum ne direcționăm pagină post tipul și apoi fie post-new.php sau post.php pagini de admin. Deci, practic, dacă nu suntem pe editorul de pagini, script-urile noastre nu vor fi încărcate, ceea ce ne dorim.
Să mergem acum și să începem să adăugăm CSS și JavaScript pentru a personaliza controalele pentru șabloanele de pagină. Mai întâi, ascundeți întreaga casetă de metode cu CSS adăugând acest lucru style.css:
# form-page-template-meta-box afișare: niciunul; 
Am fi putut face acest lucru cu JavaScript, dar dorim ca meta-caseta de formular să fie ascunsă imediat. Dacă am făcut-o prin JavaScript, va trebui să așteptăm până când pagina este încărcată și veți vedea un blitz mic ca caseta meta redată pe ecran și apoi ascunsă cu JavaScript. Deci, folosind CSS în acest caz este mai bine.
Acum pentru JavaScript. Adăugați acest lucru la script.js.
jQuery (document) .ready (funcția ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper"); (pt.tr) = pt.val ()) sel.hide (); altceva sel.toggle () ; // Apel pe pagina de încărcare displayControls ('template-uri pagină / form-page-template.php', form_controls); // Apelați de fiecare dată când derulați modificările pt.on ('change', function () displayControls this.value, form_controls);););
Nu voi intra într-o cantitate imensă de detalii legate de JavaScript, dar aici este prezentarea generală.
Mai întâi stocăm în memoria cache un număr de selectori CSS și mutați controalele formularului de admin la Atribute de pagină meta cutie. Apoi, avem a displayControls () care ascunde sau afișează comenzile formularului în funcție de valoarea curentă a drop-down-ului șablon de pagină. Noi sunam displayControls () la încărcarea paginii și apoi de fiecare dată când se modifică meniul derulant, pentru a vă asigura că suntem întotdeauna sincronizați.
Cu ajutorul funcțiilor CSS și JavaScript adăugate, comenzile pentru șabloanele de pagină ale formularului sunt acum afișate în caseta de metadate corecte și se afișează numai dacă este selectat șablonul de pagină asociat.
Acest lucru arată mult mai bine și este mult mai intuitiv pentru utilizator. Deoarece casetele meta pot fi mutate în jurul ecranelor de administrare WordPress, controalele dinamice ale șabloanelor de pagină nu ar fi fost neapărat aproape de lista drop-down a șablonului de pagină! Am rezolvat această problemă într-un mod elegant pentru a ne asigura că comenzile noastre apar mereu direct sub meniul derulant al șablonului de pagină!
Articole din blog Șablon dinamic al paginii
Următorul șablon de pagină dinamică afișează o listă cu cele mai recente postări de pe blog. Dar, mai degrabă decât listați toate postările, vom implementa o casetă de listă (similară cu un drop-down) pentru a vă permite să alegeți categoria de postare. Nu numai că veți putea selecta multiplu posturi categorii.
Începeți prin adăugarea unei noi casete meta în add_page_template_meta_boxes ().
Și acum trebuie să implementăm funcția de apel invers pentru a face meta caseta noastră.
ID, 'blog_category', adevărat); $ categories = get_categories (); ?> 
 :  % 3 $ s (% 4 $ s)', esc_attr ($ category-> cat_ID), esc_attr (selectat ($ category-> cat_ID, $ this-> q ($ category-> cat_ID, $ blog_category) $ category-> category_count)); ?>  
 
Hai să ne descurcăm. Mai întâi definim o variabilă care să mențină lista categoriilor postare selectate (dacă există) de la ultima actualizare a postării. O altă variabilă stochează o serie din toate categoriile existente.
Notă: Avem deja un câmp nonce din șablonul de pagină anterior al formularului, deci nu este nevoie să folosim altul aici, deoarece suntem pe aceeași pagină de administrare.
Apoi bifăm lista categoriilor de site-uri, populând un control drop-down pe măsură ce mergem. Orice categorie care a fost selectată anterior este selectată din nou pentru a păstra totul în sincronizare.
S-ar putea să fi observat, totuși, că unul dintre argumentele selectat() este un apel pentru funcții. În mod normal, pur și simplu folosim selectat() pentru a compara două valori pentru a determina dacă marcați elementul curent așa cum este selectat. Cu toate acestea, deoarece putem selecta mai mult de o categorie, setarea bazei noastre de date este întotdeauna o serie de valori (chiar dacă de fapt selectăm doar o categorie).
Functia q () este o funcție de ajutor care ne permite să verificăm elementul listei curente față de gama de categorii salvate.
Pentru fiecare categorie, ID-ul categoriei este transferat q () împreună cu matricea de categorii salvate. Dacă categoria curentă se află în lista categoriilor salvate, atunci categoria curentă este returnată selectat() și se va potrivi cu primul argument. Acest lucru va provoca selectat() pentru a marca categoria curentă așa cum este selectată. Acesta este un mod elegant de manipulare a mai multor opțiuni pentru un singur control.
Tot ce trebuie să facem acum este actualizarea save_page_template_meta () să se ocupe de salvarea categoriilor postului de blog. Adăugați acest cod pentru a face exact acest lucru.
Acum, trebuie să creați șablonul pentru paginile de bloguri. În interiorul temelor copilului tău page-șabloane folder, creați un fișier nou numit Blogul-page-template.php, și adăugați următorul cod.
 
 
 
  $ paged, 'cat' => $ cat, 'comanda' => 'data', 'comanda' => 'DESC', 'post_type' => 'post'); $ blog_posts = noul WP_Query ($ query_args); ?> have_posts ()):?> have_posts ()): $ blog_posts-> the_post (); ?>    
 
 
 
Singura diferență reală față de șablonul de pagină dinamic anterior este codul din interiorul 
 Etichetă HTML, deci, să aruncăm o privire mai atentă la asta acum.
Mai întâi setăm valoarea Paged interogare variabilă, care este utilizată pentru afișarea postărilor pe mai multe pagini, în funcție de numărul de pagini returnate din interogarea noastră WordPress. Apoi, vom obține toate categoriile selectate în caseta meta editorului de pagini. Matricea de categorii este convertită la un șir și are o valoare implicită dacă este goală. O nouă interogare WordPress este apoi creată și rezultatele sunt trimise într-o buclă standard.
Lucrul cheie aici este că putem controla exact categoriile care sunt transmise obiectului de interogare, prin selecțiile făcute în caseta de metadate a editorului de pagini. 
Tot ce trebuie să facem acum este să ascundeți meta boxul categoriilor de bloguri și să mutați controlul listei în Atribute de pagină meta cutie. La fel ca înainte.
Interior style.css actualizați stilurile pentru a ascunde caseta meta de postări pe blog:
# form-page-template-meta-box, # blog-page-template-meta-box afișare: niciunul; 
 script.js fișierul are nevoie de un cod mai mult pentru a fi adăugat. Aici este fișierul complet actualizat.
jQuery (document) .ready (funcție ($) var pt = $ ("#page_template"); var form_controls = $ ("#form_pt_wrapper" la caseta meta "atributele paginii" și le ascundeți în mod implicit form_controls.insertAfter ('#page_template') .hide (); blog_post_controls.insertAfter ('#page_template') .hide (); funcția displayControls (ptStr, sel) if  else sel.toggle (); // Apelați pe pagina de încărcare displayControls ("template-uri / form-page-template.php" form_controls); displayControls ('template-uri pagină / blog-page-template.php'; blog_post_controls); // apelați de fiecare dată când derulați modificările pt.on ('change', function === 'template-uri de pagină / form-page-template.php') controls = form_controls; blog_post_controls.hide (); else if (this.value === 'template-pages / blog-page-template.php ') controls = blog_post_controls; form_controls.hide () altceva // ascunde toate blog_post_controls.h ide () form_controls.hide ();  displayControls (această valoare, comenzi); ); );
Cele mai multe dintre schimbările care merită remarcate sunt în .cu privire la schimbările') funcţie. Deoarece acum avem mai mult de un șablon de pagină dinamic, trebuie să testați pentru a vedea care dintre ele au fost selectate din meniul derulant, apoi treceți-l în selectorul elementului corespunzător displayControls ().
De asemenea, trebuie să ascundem toate celelalte controale ale șablonului de pagină, în afară de cea selectată. Și dacă este afișat șablonul de pagină implicit, ascundem toate controalele șablonului de pagină. Codul JavaScript ar putea fi optimizat în continuare, dar având doar două șabloane dinamice de pagini active, acesta face o slujbă suficient de bună pentru nevoile noastre.
Cu ajutorul acestor modificări, avem acum două șabloane de pagini dinamice funcționale, fiecare dintre comenzile lor asociate fiind afișate direct sub meniul derulant al șablonului de pagină.
Șabloane de pagină pentru toată lumea
Înainte am făcut aluzie la modul în care, în WordPress 4.7+, acum puteți aloca șabloane de pagini orice post tip. Înainte de WordPress 4.7, puteai să le atribuiți paginilor, dar nu mai mult!
Tot ce trebuie să faceți este să adăugați o linie suplimentară în blocul de comentarii din antetul șablonului de pagină și să specificați o listă de tipuri de posturi separate de virgule pe care doriți ca șablonul de pagină să fie disponibil.
Numele tipului de post trebuie să fie același cu cel introdus când tipul de post este înregistrat pentru prima dată, altfel va fi ignorat.
Deci, putem afișa șabloane de pagină pentru orice tip de postare, dar ce despre șabloanele de pagini dinamice? Cu doar câteva modificări, acestea pot fi susținute și ele. Să aruncăm o privire la ceea ce este necesar.
Din fericire, în afară de adăugarea unei linii de cod în partea de sus a șablonului dvs. de pagină, toate modificările necesare sunt într-un singur fișier: functions.php.
În primul rând, trebuie să cuprindem șablonul dinamic al paginilor CSS și JavaScript nu doar pe pagini, ci și pentru toate tipurile de posturi pe care dorim să le acceptăm șabloanelor dinamice ale paginilor. Deci, în enqueue_editor_scripts (), putem face ceva de genul asta.
Acum, script-urile dinamice ale șabloanelor de pagină vor fi încărcate în pagini și tipul postului personalizat pentru filme.
În continuare, în add_page_template_meta_boxes (), actualizați fiecare instanță din add_meta_box () pe care doriți să le afișați într-un tip de post personalizat. În loc de a specifica pagină, putem trece într-o serie de tipuri de posturi necesare.
În cele din urmă, actualizaț



		
			
	   
	




Cod