Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Dynamické stránkové šablóny vo WordPresse, Druhá časť

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 1
Dynamic Page Templates in WordPress, Part 3

Slovak (Slovenčina) translation by Ryan (you can also view the original English article)

V prvej časti tejto série sme si predstavili koncept dynamických stránkových šablón a vytvorili sme si štandardnú stránkovú šablónu ako základ pre ďalšie šablóny. Potomková téma je založená na rodičovskej téme Twenty Seventeen a bola použitá na pridanie stránkovej šablóny.

V tomto návode sa naučíme o určitých detailoch dynamických stránkových šablón a ako ich môžeme použiť vo WordPress projektoch.

Taktiež si ukážeme, ako krok za krokom rozšíriť stránkovú šablónu z prvého návodu, pretože z nej vytvoríme prvú funkčnú dynamickú stránkovú šablónu.

Dynamické stránkové šablóny: Pružnejší prístup

Takže, ako vieme urobiť stránkové šablóny pružnejšími, a prečo je to vlastne užitočné?

Povedzme, že máte stránkovú šablónu portfólia, ktorá vykresľuje galériu jednotlivých položiek portfólia. Každá položka bude mať danú veľkosť a iba niekoľko z nich sa zmestí do jedného riadku.

Samozrejme, mohli by sme pridať ďalšiu šablónu pre zobrazenie portfólia v rôznych veľkostiach. Ale čo keď chceme zobraziť malé, stredne veľké alebo veľké portfólio? Na to potrebujeme tri rôzne stránkové šablóny, každá s inou veľkosťou pre položky portfólia.

Táto šablóna môže byť pružnejšia, keď pridáme nastavenie na veľkosť portfólia (napríklad na malé, stredne veľké alebo veľké). Toto je praktickejšie pre používateľa, pretože šablóna nie je zaplnená zbytočnými možnosťami.

Taktiež je to zmysluplnejšie aj pre vývojára, pretože vývojár sa môže starať iba o jednu šablónu, namiesto troch. Toto nasleduje princíp softvérového vývoja Don't Repeat Yourself (Neopakuj sa).

Majú byť všetky stránkové šablóny dynamické?

Stojí za zmienku, že nie všetky stránkové šablóny by mali výhodu v tom, že sú dynamické. Ak máte stránkovú šablónu, ktorá vykonáva iba jednu jedinú vec, je to v poriadku. V tomto prípade nedáva zmysel pridávať vlastné nastavenia a logiku do tejto šablóny.

Ale na konci tohto návodu uvidíte, že množstvo stránkových šablón by malo výhodu z toho, že sú pružnejšie.

Ďalším užitočným príkladom pre dynamickú stránkovú šablónu je kontaktný formulár. Do tejto šablóny sa môže pridať kopec ovládacích prvkov, ktoré robia šablónu veľmi pružnou.

Napríklad, namiesto vykreslenia určitého počtu polí, môžeme pridať nastavenia, ktoré vám povoľuju vynechať niektoré polia. Alebo pole Captcha, ktoré môže byť voliteľne zobrazené, aby sa predišlo nevyžiadaným správam? Existuje kopec možností, ako by ste mohli prispôsobiť váš kontaktný formulár.

Stránku s dynamickým formulárom budeme vytvárať v tretej časti tejto série. Naprv začnime s tvorbou dynamickej stránkovej šablóny na všeobecný účel.

Naša prvá dynamická stránková šablóna

Na začiatok si vytvoríme jednoduchú dynamickú stránkovú šablónu, ktorá ukazuje, ako všetky komponenty zapadajú do seba. Vlastné nastavenia môžu byť pridané do editora, ktoré môžu byť neskôr použité vo výstupe stránkovej šablóny.

Vlastné nastavenia stránkovej šablóny, ktoré za chvíľu pridáme sú:

  • Textové pole
  • Textová oblasť
  • Zaškrtávacie políčko
  • Prepínač
  • Rozbaľovacie pole

Ideálne by sa mali tieto nastavenia zobraziť priamo pod rozbaľovacím políčkom, aby bolo jasné, že sa jedná o nastavenia stránkovej šablóny.

Avšak na toto WordPress neposkytuje žiadne hook funkcie, takže nateraz si budeme musieť vytvoriť vlastnú meta sekciu. V tretej časti tejto série si ukážeme, ako vyriešiť tento problém.

Hook funkcie sú základom WordPress vývoja. Umožňujú vývojárom rozšíriť základ bez toho, aby museli upravovať jadro, čo je všeobecne považovaný za zlý nápad. To je preto, pretože akýkoľvek vlastný kód by bol vymazaný kedykoľvek sa vykoná aktualizácia WordPressu (čo sa deje pravidelne).

Pre pridanie vlastnej meta sekcie do editora pridajte hook funkcie load-post.php a load-post-new.php do metódy init() potomkovej témy, ktorú sme vytvorili v prvej časti.

Používame dve hook funkcie na to, aby sme sa uistili, že sa meta sekcia zobrazí v editore, či vytvárate novú stránku alebo upravujete existujúcu. Taktiež je tam aj funkcia hook pre save_post, ktorá ma na starosti ukladanie informácií o stránke, na to sa pozrieme o chvíľu.

Pridajte tieto štyri metódy do triedy na vytvorenie, zobrazenie a ukladanie dát z meta sekcie.

Nebudem zachádzať do detailov o meta sekciách vo WordPresse, pretože o tom by mohol byť samo o sebe návod, ale tu je súhrn, čo sa stalo s kódom vypísaný vyššie:

  • Metódy page_template_meta_box() a add_page_template_meta_box() evidujú meta sekciu vo WordPresse.
  • V metóde add_page_template_meta_box() parameter "page" určuje, že táto meta sekcia sa zobrazí v editore iba na stránkach v administrácii WordPressu.
  • Metóda display_page_template_meta_box() vykreslí meta sekciu a nastaví nonce, aby boli ovládacie prvky zabezpečené.

Ak je všetko v poriadku, teraz by mala byť meta sekcia vykreslená v editore, ako je možné vidieť nižšie.

A new page meta box

Teraz je to tam trochu prázdne, takže tam pridajme nejaké ovládacie prvky.

Pridávanie vlastných ovládacích prvkov

Ako sme spomenuli vyššie, do meta sekcie budeme pridávať textové pole, textovú oblasť, zaškrtávacie políčko, prepínač a rozbaľovacie pole. Začnite pridaním nasledujúceho kódu do metódy display_page_template_meta_box() pod nonce funkciu.

Toto získa nastavené hodnoty ovládacích prvkov z meta sekcie a uloží ich do lokálnych premenných. Pod to pridajte nasledujúci HTML kód, ktorý vykreslí ovládacie prvky do meta sekcie.

Každý ovládací prvok sa nachádza vo vnútri značky odseku a ich aktuálna hodnota je aktualizovaná prostredníctvom lokálnej premennej, ktorú sme predtým vytvorili. To uisťuje, že ovládacie prvky stále zobrazujú správnu hodnotu nastavení.

Avšak sa to nestane, až pokým nezačneme ukladať ovládacie dáta do WordPress databázy.

Predtým sme si zaevidovali hook funkciu, aby spustil metódu, keď sa editor zaktualizuje. Teraz pridajme túto metódu do triedy potomkovej témy.

Metóda save_page_template_meta() má na starosti ukladanie dát z meta sekcie. Dáta ukláda iba ak nonce je overený ako platný, ak súčasný užívateľ vie upravovať stránky a ak sme v editore stránky.

Ak sú všetky tieto požiadavky splnené, vieme potom extrahovať všetky dáta pre každý ovládací prvok, ktorý je uložený v globálnej premennej $_POST. Táto premenná je nastavená zakaždým, keď je formulár odoslaný.

Nakoniec sú dáta z meta sekcie uložené do WordPress databázy ako metadáta pre súčasnú stránku.

S vlastnými ovládacími prvkami šablóny by mala meta sekcia vyzerať takto:

Adding controls to the meta box

Zadajte nejaký text do textového poľa a textovej oblasti, a začiarknite nejaké zaškrtávacie políčka, prepínače, vyberte položku z rozbaľovacieho políčka. Uložte zmeny, a pri ďalšom načítaní editora by sa mali zobraziť dáta, ktoré ste zadali.

Populating the meta box

Celý zdrojový kód pre súbor functions.php potomkovej témy súbor je zobrazený nižšie.

Poslednou časťou skladačky je použiť dáta z meta sekcie na verejne dostupnej časti stránky. Otvorte súbor test-page-template.php, ktorý sme vytvorili v prvej časti a nahraďte obsah súboru s týmto aktualizovaným kódom.

Uistite sa, že v rozbaľovacom menu je vybraná šablóna "Test Page Template" a pozrite sa na stránku vo viditeľnej časti stránky.

Viewing the output of the meta box

Ako môžete vidieť, stránková šablóna teraz obsahuje hodnoty nastavené z ovládacích prvkov z meta sekcie editora. Toto je základ pre zvyšok série, pretože plnefunkčné dynamické stránky budeme tvoriť na tomto jednoduchom príklade, ktorý je možný použiť vo vlastných WordPress projektoch.

Záver

V tomto tutoriáli sme sa pozreli na to, ako vytvoriť funkčnú dynamickú stránkovú šablónu. Síce je to funkčná šablóna, nie je až taká užitočná.

V tretej a poslednej časti tejto série sa pozrieme na to, ako vytvoriť rôzne dynamické stránkové šablóny, od začiatku po koniec, ktoré môžete využívať (a tvoriť na nich) vo vlastných WordPress projektoch.

Ak máte nejaké otázky, napíšte ich do komentárov. Chceme vedieť, čo si myslíte o tomto návode.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.