Iată-mă că am revenit cu partea a doua a tutorialului de tip do-it-yourself pentru crearea unei teme simple pentru blogul tău WordPress.
Pentru că vrei ca totul să decurgă cât mai rapid, pentru că ai inspirație și idei, și te mănâncă buricele degetelor, recomand folosirea unui template de WordPress barebone, cu alte cuvinte, un schelet de temă cu strictul necesar, astfel încât doar instalându-l să-ți prezinte informațiile de așa natură încât să nu-ți trebuiască nicio secundă în plus ca să poți să-ți scrii primul articol.
Pasul I – accesează roots.io
roots.io este site-ul care îți oferă toate informațiile despre template-ul barebone roots, pentru WordPress. Toate informațiile adiționale de care ai nevoie legate de roots le găsești în secțiunea Docs. Eu o să-ți explic doar strictul necesar, pentru că ai și tu creier să sapi mai departe ce te interesează.
Pasul II – accesează github.com/roots/roots
La url-ul de mai sus poți găsi un repository cu codul sursă al template-ului, pe care va trebui să-l clonezi acolo unde ai WordPress-ul instalat. Ca să faci asta, presupunând că ai git instalat, și că linia de comandă nu ți-e chiar străină, deschizi git bash (în windows) sau o fereastra de terminal (linux, mac) și introduci următoarele comenzi:
cd /var/www/wordpress/wp-content/themes #presupunand ca aici ai wordpressul instalat git clone git://github.com/roots/roots.git
După ce a terminat de clonat repo-ul, trebuie să setezi tipul de environment pe care a fi instalată tema, în cazul nostru – development. Astfel încât, deschizi fișierul wp-config.php din directorul wordpress și adaugi linia
define("WP_ENV", "development");
În acest moment, majoritatea cerințelor pentru folosirea template-ului au fost îndeplinite.
Pasul III – compilează CSS-ul și JS-ul
Pentru că secolul 21 este denumit în cultura populară „secolul vitezei”, Roots folosește niște tehnici care sunt menite să îmbunătățească atât viteza de redare cât și cea de dezvoltare. Pentru asta ai nevoie de NodeJS, care trebuie să fie instalat, pentru a te folosi de Grunt (un tool care automatizează niște taskuri care ar dura prea mult fiind făcute de mână). Practic, cu ajutorul Grunt se compileaza scripturile LESS (un limbaj de scripting pentru CSS) în CSS, se verifică fișierele JS de erori, se minifică și se combină CSS-urile și JS-urile, astfel încât să se încarce cât mai puține fișiere, și cât mai mici cu putință, pentru a nu se genera overhead inutil.
Atât pe Windows cât și pe Linux, NodeJS se instalează foarte ușor, downloadând fișierul binar pentru Windows sau Mac, ori folosind package managerul distro-ului tău preferat de linux. Informații despre instalarea Node găsești aici.
Odată instalat, utilitarul npm va fi disponibil în linia de comandă. NPM este un package manager pentru nodejs, în genul lui Composer pentru PHP sau gem pentru Ruby. De el te vei folosi în continuare pentru a instala packetul Grunt, în felul următor:
npm install -g grunt-cli
După ce se execută scriptul de mai sus, te poți folosi de comenzile pentru Grunt pentru a începe dezvoltarea template-ului tău bazat pe Roots. În primă fază, pentru instalarea dependențelor, rulează npm install
Apoi singurul lucru care mai trebuie făcut este rularea comenzii grunt dev pentru a compila LESS-ul în CSS și a valida și minifica JS-ul.
Pasul IV – activează tema
Acum tema este instalată și ar trebui să funcționeze fără probleme, așa că nu îți mai rămâne de făcut decât logarea în interfața de administrator (http://www.your-website.com/wp-admin), accesarea listei de teme instalate (http://www.your-website.com/wp-admin/themes.php) și activarea temei Roots.
Ce ai reușit să faci?
- Ai instalat o temă de WordPress rudimentară, folosindu-te de tehnologii în vogă la ora actuală – NodeJS, Grunt, LESS
- Ai folosit de câteva ori linia de comandă
- Ai citit despre git, Node, Grunt, Less
Lasă un răspuns