Moderan razvoj WordPress stranica

Upali se računalo, upišu se 3 naredbe i nova moderna WordPress instanca je spremna. Zvuči super zar ne? Ali to je tek početak nove moderne ljubavne priče s WordPress-om u glavnoj ulozi.

http://e-laboratorij.carnet.hr/moderni-razvoj-wordpress-stranica-tomislav-cukelj/

17. WordPress Meetup Zagreb, Carnet, 31. svibnja 2017.

Transcript

1. Moderan razvoj WordPress stranica Tomislav Čukelj @ Krikstudio 17. WordPress Meetup Zagreb, Carnet, 31. svibnja 2017.
2. Teme • Valet • Projekt • Composer • Yarn • .env • Mix • Blade • Pravila
3. Laravel Valet • Lokalni NGINX server • Radi stalno u pozadini • Automatsko mapiranje foldera u domene • HTTPS • Ngrok • DBMS
4. Projekt
5. Composer • Instalacija WordPress-a • Instalacija WordPress proširenja (wpackagist.org) • Ažuriranje • Automatsko namještavanje WordPress projekta • Generiranje SALT ključeva • Kratki upitnik potreban za preimenovanja • Postavljanje 755 i 644 dozvola • Informativni zapis o potrebnim proširenjima - composer.json • Auto-load must-use plugins
6. Yarn • Dohvat i instalacija JavaScript i CSS proširenja • Jedan dio proširenja se koristi za razvoj, drugi dio za front-end • Informativni zapis o potrebnim proširenjima - package.json • NPM (Node)
7. .env • U rootu, a public je tek javno dostupan, sigurnost • Key-value parovi • Definiraniranje okruženja, domene, podataka za pristup bazi itd. • Ovisno o okruženju, učitavanje različitih logika i vrijednosti
8. Pravila • EditorConfig - .editorconfig • ESLint i Babel - .eslintrc i .babelrc • StyleLint - .stylelintrc • PHP_CodeSniffer - .ruleset.xml
9. Laravel Mix • Webpack • Podrška za ES6 i SASS • Učitavanje NPM paketa • JS i CSS minifikacija i verzioniranje za produkciju • Source maps tokom razvoja • Osvježavanje preglednika
10. Laravel Blade • Bolja PHP sintaksa @extends('layouts.default') @section('main') @if(have_posts()) @while(have_posts()) @php(the_post()) <h1> {{ 'Page' }} </h1> @endwhile @endif @endsection
11. Bonus slide • WP Password Bcrypt • Rsync • WP-CLI • PHP Chrome Console • BEM - nav, nav__link, nav__link--is-active • SASS - atoms, molecules, organisms i viruses • Auto log in • Graaf.space • Babun
12. DEMO
13. Inspiracije • Roots (roots.io) • WordPlate (wordplate.github.io)
14. Hvala :)