Lekce 11 - Vývoj WordPress pluginů a šablon, základy

V minulé lekci, PowerUser ve WordPressu, jsme měli téma PowerUsera ve Wordpress.

Dnes se společně ponoříme do mého oblíbeného tématu a tím jsou šablony a pluginy. My se budeme zabývat především šablonou. Rozdíl mezi šablonou a pluginem je pak jen v postupném načítání (WordPress → pluginy → šablona) a občas zápisu načítání různých zdrojů. Ale jinak je to jedno a to samé.

Úvod

Nejdříve trocha teorie. Proč třeba já tvořím vlastní šablony? Protože je dělám na míru svým klientům. Obecné šablony nemají to co chci a načítají zdroje, které nechci. Koupené šablony jsou pak doslova plné bordelu, který často nepotřebuji a zbytečně bych vypínal jednotky až desítky CSS a JS jen proto, aby vše fungovalo dle představ.

Další problematická část je, že z CSS mnohdy chci jen 5 %, tj. klidně 20 Kb a šablona načítá 400 Kb zdrojů. Je to logické, ale přece nebudu plýtvat zdroji, když nemusím.

Dalším tématem jsou pak funkce mých šablon, které vysvětlím. Nebudu se zaobírat mnoha variantami vývoje - sám jsem jich potkal od roku 2013 desítky až stovky. Zaměříme se na můj konkrétní vývoj a v potaz vezmeme mou nejnovější šablonu (z doby psaní článku).

Kódování

Než začnu na šabloně, nakóduji si podstatnou (důležitou) část webu. Téměř vždy to není 100%, většinou ani 90%. Není důvod. Mobilní verzi teď řešit nebudu. Tu odladím až potom, co mám data ve WordPress, do té doby mi stačí responsivní desktopová verze (do 1024px).

Pro vývoj používám Gulp. Ten mi minifikuje CSS a JS, dovoluje používat SASS a převádí ES6 (syntace JS) na starší verze pro zastaralé prohlížeče typu IE.

Poznámka: po pár letech už ani netestuji IE 10 a IE 11, protože až na minimální odchylky to je téměř vždy totožné. A těch pár rozdílů v padingu nebo marginu pak opravím během chvilky.

Vysvětlení gulpu

Nahoře si načítám nainstalovaná rozšíření. Následně v úkolu scripts provádím převod JS a v úkolu styles zase CSS,

Zakomentované řádky (browserSync) jsou při začátečním vývoji odkomentované a slouží pro automatickou obnovu stránky na níž pracuji. V editoru (VS Code) tak jen uložím (Ctrl + S) soubor a než přejdu do prohlížeče, načte se nová verze.

Díky gulp-sass pak mohu využívat proměnné v CSS (barvy, velikosti pixelů) a například i flex technologii. Ono SASS rozšíření pak za mě dodá prefix pro IE a podporu dalších prohlížečů.

Hierachie

Jak vidíte, WordPress má perfektní ukázku načítání obsahu, který teče až ke konkrétním souborům v šabloně.

Osobně používám tuto hierarchii a stačí mi:

• index.php - prázdný soubor, není potřeba v něm nic mít
• 404.php - zobrazení chybové stránky 404
• archive.php - archivy článků
• functions.php - funkce šablony (jen určitá část, obecná)
• header.php - hlavička webu
• footer.php - patička webu
• page.php - obecná stránka (Page)
• single.php - obecná stránka příspěvku (Post)
• home.php - výpis článků blogu

To je hrubý základ. Pak už se vše liší projekt od projektu. Například - potřebuji specifický design pro košík? Tudíž mám soubor page-cart.php s názvem, který v administraci stránce košíku přiřadím jako file template, neboli šablona stránky (nikoliv šablona webu).

V posledním roce a půl jsem se pak usídlil s věcmi navíc:

• /src - source zdroje pro šablonu při vývoji (kódování), čili CSS a JS
• /build - zdroje CSS, JS a obrázky pro načítání na webu
• /plugins - pluginy potřebné pro běh šablony
• /base - tato složka obsahuje všechna možná nastavení, rozepisuji níže
• /template-parts - obecné opakované elementy používané v šabloně
• /template-parts/blocks - bloky šablony plněné v administraci webu

Base složka

Tato složka obsahuje všemožná nastavení, která už mám otestovaná, že fungují a při vývoji a fungování webu jsou stejná a mění se jen minimum informací.

• acf-waring.php - v tomto souboru mám hlášku pro administraci, když uživatel vleze tam, kde by nic neměl dělat a já mu to chci dát vědět (ale nebráním mu v tom)

• Base.php - načítání souborů se složky /base

• class-tgm-plugin-activation.php - aktivuje a stará se o potřebné pluginy ze složky plugins/ v šabloně (tyto pluginy například automaticky instaluje, aktivuje nebo nedovolí vypnout)

• emojis.php - WordPress dovoluje vkládat emoji, které jsou dle mého názoru zbytečné a k ničemu a mají requesty na CSS. Čili deregistruji a nechci je na svých webech

• image-sizes.php - velikosti obrázků. WordPress a další pluginy generují různé velikosti. Já povoluji jen specifické, protože jinak by 1 obrázek měl klidně 15 velikostí a místo na disku + výkon serveru na tvorbu takových ořezů je stále cenná věc

• languages.php - soubor překladů pro šablonu (pole textů)

• plugins.php - určuje načítání pluginů pro šablonu (ze složky /plugins v šabloně)

• shotcodes.php - seznam shortcodů

• styles-scripts.php - registrace a deregistrace CSS a JS souborů

• theme.php - obecná nastavení pro šablonu (define proměnné apod.)

ACF a Blocks podsložka (načítání bloků šablony)

Dříve v šabloně jsem se zmínil o ACF a složce blocks (umístění v template parts). Já totiž weby tvořím pomocí pluginu ACF (Advanced Custom Fields). Je to builder pro administraci, který ale jen vykresluje pole tak, jak chci já. Například mu zadám blok s názvem gallery (galerie) a v editaci stránky pak vidím možnost vybrat obrázky z mediálních souborů WordPressu.

Následně mi pak při programování plugin vrátí $fields = get_field( ‘gallery’ ); obsah galerie ve formě pole s obrázky a daty a já jen tyto data dodám do nakódováného bloku gallery.php, který je umístěn právě ve složce blocks/.

A nyní obrázek přímo s ukázkou:

Jak vidíte, block Gallery má 2 pole - Text a Gallery. Doleva se vkládá běžný text (já tam mám shortcode, který vypisuje reference) a doprava pak sada obrázků.

Na front-endu to pak vidíte takto:

A v kódu takto:

Funkce is_gallery mi zajišťuje výpis galerie dle prostředí, ve kterém se na webu nachází. Ale to jen výpis obrázků do elementu. Nicméně díky tomuto způsobu mám web poskládaný z unikátních bloků, které klient v administraci nakliká a téměř nikdy nic nepokazí. Je to super, snadné a funkční.

A ještě menší rozbor. Na obrázku administrace bloku můžete vidět content a settings záložku. Každý blok totiž může mít specifické odsazení (margin/padding), pozadí (barvy, foto) nebo užší kontejner (místo 1200px třeba 990px na desktopové verzi).

Tudíž obecné věci mají všechny bloky stejné a jen obsah a kód se liší. Třešničkou na závěr je pak general_tempate.php, který načítá specifický blok, který je potřeba a dodává mu ona nastavení.

To je právě ten obecný, který načítá bloky pod sebe, viz:

A jak vypadá page.php? U někoho bordel, u kterého bych vypustil duši. Já tam mám 17 řádků, které načítají právě ony unikátní bloky.

Žádné kouzlo, snadná správa a vše přehledné, pokud by do projektu měl přijít další člověk. Snažím se jít co nejvíce přírodní cestou čistého WordPressu a weby tak díky tomu většinou vydrží i roky bez jakýchkoliv problémů plně aktualizovatelné.

To je k tomuto tématu vše. Zároveň to byl i poslední článek, který se v této sekci tématu WordPressu věnuje. Doufám, že se vám sekce líbila a zmíněné rady a poznatky vám budou užitečné .

Kdo stojí za článkem?

Ahoj, jmenuji se Pavel Mareš a od roku 2012 pracuji v digitálním prostředí. Prošel jsem si kódováním, vývojem webů, grafikou a v tuto chvíli pomáhám svým klientům tvořit kvalitní stránky na míru.

Nabízím služby - UX, UI (grafika), kódování (Gulp, SASS, HTML5, CSS3, JS) a nasazení webu na WordPress (vlastní šablony). Můžete se podívat na mé reference.

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