Obiectivul acestui modul este de a descoperi modul în care putem dezvolta WordPress din perspectiva unui creator de site-uri web. Pentru parcurgerea acestui modul este nevoie de:
- modulul WordPress Starter;
- cunoștințe suficiente de HTML/CSS/JS sau modulul Web Design Training.
La finalul acestui modul, cursantul ar trebui să poată înțelege codul unui site WordPress atât din partea de front-end, cât și back-end, să cunoască structura internă a fișierelor unei teme, să deprindă cele mai bune practici de web design responsive, să creeze tipuri de conținut personalizate, să implementeze câmpuri personalizate, să poată utiliza editoare avansate precum Elementor sau Divi Builder.
Pentru acest modul, am planificat să acordăm cursantului posibilitatea să parcurgă o parte dintre pașii de urmat, folosind cunoștințele acumulate în WordPress Starter și Web Design Training.
Iată cuprinsul:
- Noțiuni HTML/CSS/JS (sau aducere la nivelul de înțelegere WordPress)
- PHP și WordPress
- Responsive design
- Structura internă a unei teme WordPress
- Advanced Custom Fields (ACF – câmpuri personalizate)
- CPT UI (Custom Post Types – tipuri de conținut personalizate)
- Editoare avansate
Noțiuni HTML/CSS/JS
Pentru a merge mai departe și parcurge materialul de WordPress Avansat este necesară experiența în construirea de site-uri statice. Prin urmare, această secțiune poate fi una introductivă pentru cursanții ce dovedesc cunoștințe existente de construire a site-urilor statice sau un întreg alt modul pentru cei ce nu se descurcă aproape deloc în HTML/CSS/JS. Pentru cea de-a doua categorie, există un alt modul – Web Design Training.
Dacă există deja elemente de HTML/CSS/JS, vom încerca să adaptăm aceste cunoștințe la platforma WordPress.
PHP
Pentru categoria de cursanți fără cunoștințe de PHP, vom discuta despre:
- Introducere în PHP;
- Variable PHP;
- Utilizarea împreună a HTML și PHP;
Dacă există deja cunoștințe despre PHP, caz în care vom discuta despre utilitatea PHP în WordPress și adaptarea acestor cunoștințe. Și am pregătit:
- Introducere în funcțiile built-in oferite de WordPress;
- Introducere în WordPress Hooks;
- Utilizarea unor Loops simple;
Responsive design
Mai mult de jumătate din traficul web este generat de pe platforme mobile: smart-phones sau tablete. Prin urmare, orice site construim trebuie să fie adaptat pentru dispozitivele mobile. Site-urile responsive nu mai sunt opționale, ci obligatorii; lipsa unei versiuni mobile duce la o experiență precară a utilizatorilor cu site-urile noastre, plus penalizarea de către motoarele de căutare. Vom discuta despre:
- Ce înseamnă responsive design;
- Cum schimbările de layout pot afecta performanța site-ului;
- Imagini responsive în WordPress și
srcset; - Media queries în CSS-ul WordPress;
- CSS critic.
Structura fișierelor unei teme
- Fișiere obligatorii într-o temă WordPress
- style.css
- index.php
- comments.php
- screenshot.png
- Fișiere ce nu ar trebui să lipsească
- header.php
- footer.php
- functions.php
- Fișiere opționale
- front-page.php
- home.php
- single.php
- page.php
- archive.php
- 404.php
- search.php
Advanced Custom Fields
WordPress se livrează cu câteva câmpuri standard – avem titlu, imagine reprezentativă, categorii, taguri sau zona de conținut. Însă ce se întâmplă dacă avem nevoie de câmpuri separate, dedicate, pentru fiecare „post” în parte? ACF este cel mai cunoscut modul de creare a câmpurilor personalizate. Ce învățăm:
- Introducere în ACF;
- Instalare și activare;
- Crearea unui grup de câmpuri;
- Configurarea unui câmp;
- Afișarea valorilor în temă;
- Exemple extinse cum se folosesc câmpurile personalizate.
CPT UI
Dacă avem nevoie de un alt tip de conținut decât „posts”, „pages”, „categories” sau „tags”, avem nevoie de CPT UI. Bineînțeles, noile tipuri de conținut se pot implementa „hard coded”, dar CPT UI face asta destul de bine „out of the box”. Iată cuprinsul:
- Introducere în CPT UI;
- Instalare și activare CPT UI;
- Interfața CPT UI;
- Adăugare de noi tipuri de conținut;
- Ierarhizare;
- Categorisire;
- Indexare;
- Inter-relaționarea diferitelor tipuri de conținut;
- Personalizare prin intermediul ACF;
- Afișarea în temă.
Editoare avansate
- Gutenberg îmbunătățit
- Recapitulare Gutenberg
- Atomic Blocks
- CoBlocks
- Alte editoare avansate
- Elementor
- Divi Builder