11. diel - Vývoj WordPress pluginov a šablón, základy

V minulej lekcii, PowerUser vo WordPress , sme mali tému PowerUser vo Wordpress.

Dnes sa spoločne ponoríme do môjho obľúbeného téme a tým sú šablóny a pluginy. My sa budeme zaoberať predovšetkým šablónou. Rozdiel medzi šablónou a pluginom je potom len v postupnom načítaní (WordPress → pluginy → šablóna) a občas zápisu načítanie rôznych zdrojov. Ale inak je to jedno a to isté.

Úvod

Najskôr trocha teórie. Prečo napríklad ja tvorím vlastné šablóny? Pretože je robím na mieru svojim klientom. Všeobecné šablóny nemajú to čo chcem a načítavajú zdroje, ktoré nechcem. Zakúpené šablóny sú potom doslova plné bordelu, ktorý často nepotrebujem a zbytočne by som vypínal jednotky až desiatky CSS a JS len preto, aby všetko fungovalo podľa predstáv.

Ďalšia problematická časť je, že z CSS mnohokrát chcem len 5 %, tj. Pokojne 20 Kb a šablóna načítava 400 Kb zdrojov. Je to logické, ale predsa nebudem plytvať zdrojmi, keď nemusím.

Ďalšou témou sú potom funkcie mojich šablón, ktoré vysvetlím. Nebudem sa zaoberať mnohými variantmi vývoja - sám som ich stretol od roku 2013 desiatky až stovky. Zameriame sa na môj konkrétny vývoj a do úvahy vezmeme moju najnovšie šablónu (z doby písania článku).

Kódovanie

Než začnem na šablóne, nakódujeme si podstatnú (dôležitú) časť webu. Takmer vždy to nie je 100 %, väčšinou ani 90 %. Nie je dôvod. Mobilnej verzii teraz riešiť nebudem. Tú odladíte až potom, čo mám dáta vo WordPress, do tej doby mi stačí responsívna desktopová verzia (do 1024 px).

Pre vývoj používam Gulp. Ten mi minifikuje CSS a JS, dovoľuje používať SASS a prevádza ES6 (syntace JS) na staršie verzie pre zastarané prehliadača typu IE.

Poznámka: po pár rokoch už ani netestuje IE 10 a IE 11, pretože až na minimálnu odchýlky to je takmer vždy totožné. A tých pár rozdielov v padingu alebo margine potom opravím behom chvíľky.

Vysvetlenie GULP

Hore si sťahujem nainštalovaná rozšírenia. Následne v úlohe scripts vykonávam prevod JS a v úlohe styles zase CSS,

Zakomentované riadky (browserSync) sú pri začiatočným vývoji odkomentované a slúži pre automatickú obnovu stránky na ktorej pracujem. V editore (VS Code) tak len uložím (Ctrl + S) súbor a než prejdem do prehliadača, načíta sa nová verzia.

Vďaka Gulp-sass potom môžem využívať premenné v CSS (farby, veľkosti pixelov) a napríklad aj flex technológiu. Ono SASS rozšírenie potom za mňa dodá prefix pre IE a podporu ďalších prehliadačov.

Hierachie

Ako vidíte, WordPress má perfektné ukážku načítanie obsahu, ktorý tečie až ku konkrétnym súborom v šablóne.

Osobne používam túto hierarchiu a stačí mi:

• index.php - prázdny súbor, nie je potreba v ňom nič mať
• 404.php - zobrazenie chybové stránky 404
• archive.php - archívy článkov
• functions.php - funkcia šablóny (len určitá časť, všeobecná)
• header.php - hlavička webu
• footer.php - pätička webu
• page.php - všeobecná stránka (Page)
• single.php - všeobecná stránka príspevku (Post)
• home.php - výpis článkov blogu

To je hrubý základ. Potom už sa všetko líši projekt od projektu. Napríklad - potrebujem špecifický dizajn pre košík? Teda mám súbor page-cart.php s názvom, ktorý v administrácii stránke košíku priradíme ako file template, čiže šablóna stránky (nie šablóna webu).

V poslednom roku a pol som sa potom usídlil s vecami navyše:

• /src - source zdroje pre šablónu pri vývoji (kódovanie), čiže CSS a JS
• /build - zdroje CSS, JS a obrázky pre načítanie na webe
• /plugins - pluginy potrebné pre beh šablóny
• /base - táto zložka obsahuje všetky možné nastavenia, rozpisuje nižšie
• /template-parts - všeobecné opakované elementy používané v šablóne
• /template-parts/blocks - bloky šablóny plnené v administrácii webu

Base zložka

Táto zložka obsahuje všemožné nastavenia, ktoré už mám otestovaná, že fungujú a pri vývoji a fungovanie webu sú rovnaké a mení sa len minimum informácií.

• acf-waring.php - v tomto súbore mám hlášku pre administráciu, keď používateľ vlezie tam, kde by nič nemal robiť a ja mu to chcem dať vedieť (ale nebránim mu v tom)
• Base.php - načítanie súborov sa zložky /base

• class-tgm-plugin-activation.php - aktivuje a stará sa o potrebné pluginy z priečinka plugins/ v šablóne (tieto pluginy napríklad automaticky inštaluje, aktivuje alebo nedovolí vypnúť)

• emojis.php - WordPress dovoľuje vkladať emoji, ktoré sú podľa môjho názoru zbytočné ak ničomu a majú request na CSS. Čiže deregistruji a nechcem ich na svojich weboch
• image-sizes.php - veľkosti obrázkov. WordPress a ďalšie pluginy generujú rôzne veľkosti. Ja povoľujem len špecifické, pretože inak by 1 obrázok mal pokojne 15 veľkostí a miesto na disku + výkon servera na tvorbu takých odrezkov je stále cenná vec
• languages.php - súbor prekladov pre šablónu (pole textov)
• plugins.php - určuje načítanie pluginov pre šablónu (z priečinka / plugins v šablóne)
• shotcodes.php - zoznam shortcodů
• styles-scripts.php - registrácia a Zrušenie registrácie CSS a JS súborov
• theme.php - všeobecné nastavenia pre šablónu (define premenné a pod.)

ACF a Blocks podzložka (načítanie blokov šablóny)

Skôr v šablóne som sa zmienil o ACF a zložke blocks (umiestnenie v template parts). Ja totiž weby tvorím pomocou pluginu ACF (Advanced Custom Fields). Je to builder pre administráciu, ktorý ale len vykresľuje poľa tak, ako chcem ja. Napríklad mu zadám blok s názvom gallery (galéria) a v editácii stránky potom vidím možnosť vybrať obrázky z mediálnych súborov WordPress.

Následne mi potom pri programovaní plugin vráti $fields = get_field( 'gallery' ) ; obsah galérie vo forme poľa s obrázkami a dátami a ja len tieto dáta dodám do nakódováného bloku gallery.php, ktorý je umiestnený práve v priečinku blocks/.

A teraz obrázok priamo s ukážkou:

Ako vidíte, block Gallery má 2 polia - Text a Gallery. Doľava sa vkladá bežný text (ja tam mám shortcode, ktorý vypisuje referencie) a doprava potom sada obrázkov.

Na front-endu to potom vidíte takto:

A v kóde takto:

Funkcia is_gallery mi zaisťuje výpis galéria podľa prostredia, v ktorom sa na webe nachádza. Ale to len výpis obrázkov do elementu. Avšak vďaka tomuto spôsobu mám web poskladaný z unikátnych blokov, ktoré klient v administrácii naklikať a takmer nikdy nič nepokazí. Je to super, jednoduché a funkčné.

A ešte menšie rozbor. Na obrázku administrácia bloku môžete vidieť content a settings záložku. Každý blok totiž môže mať špecifické odsadenie (margin / padding), pozadia (farby, foto) alebo užšie kontajner (namiesto 1200 px treba 990 px na desktopové verziu).

Teda všeobecné veci majú všetky bloky rovnaké a len obsah a kód sa líšia. Čerešničkou na záver je potom general_tempate.php, ktorý načíta špecifický blok, ktorý je potreba a dodáva mu ona nastavenia.

To je práve ten obyčajný, ktorý načítava bloky pod seba, pozri:

A ako vyzerá page.php ? U niekoho bordel, u ktorého by som vypustil dušu. Ja tam mám 17 riadkov, ktoré načítavajú práve ony unikátny bloky.

Žiadne kúzlo, jednoduchá správa a všetko prehľadné, ak by do projektu mal prísť ďalší človek. Snažím sa ísť čo najviac prírodnou cestou čistého WordPress a weby tak vďaka tomu väčšinou vydrží aj roky bez akýchkoľvek problémov plne aktualizovateľné.

To je k tejto téme všetko. Zároveň to bol aj posledný článok, ktorý sa v tejto sekcii téme WordPress venuje. Dúfam, že sa vám sekcia páčila a spomínané rady a poznatky vám budú užitočné:) .

Kto stojí za článkom?

Ahoj, volám sa Pavol Mareš a od roku 2012 pracujem v digitálnom prostredí. Prešiel som si kódovaním, vývojom webov, grafikou a v tejto chvíli pomáham svojim klientom tvoriť kvalitné stránky na mieru.

Ponúkam služby - UX, UI (grafika), kódovanie (Gulp, SASS, HTML5, CSS3, JS) a nasadenie webu na WordPress (vlastné šablóny). Môžete sa pozrieť na moje referencie.

Rýchly kontakt: +420 776 256 020 / info @ --> mares-pavel.cz