WordPress na Bootstrap 3.x
April 3, 2018 | Author: RatkoŠolaja | Category: N/A
Short Description
Kako napraviti svoj prvi WordPress projekt koristeci Bootstrap Framework....
Description
WPB3 - Wordpress na Bootstrapu 3.x Kako napraviti svoj prvi Wordpress projekt koristeći Bootstrap Framework Igor Benić This book is for sale at http://leanpub.com/wpb3 This version was published on 2014-09-22
This is a Leanpub book. Leanpub empowers authors and publishers with the Lean Publishing process. Lean Publishing is the act of publishing an in-progress ebook using lightweight tools and many iterations to get reader feedback, pivot until you have the right book and build traction once you do. ©2014 Igor Benić
Tweet This Book! Please help Igor Benić by spreading the word about this book on Twitter! The suggested tweet for this book is: Upravo sam kupio knjigu WordPress na Bootstrap-u 3.x! The suggested hashtag for this book is #wpb3. Find out what other people are saying about the book by clicking on this link to search for this hashtag on Twitter: https://twitter.com/search?q=#wpb3
Sadržaj Predgovor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
1
Upoznavanje sa Bootstrap Frameworkom . . Korištenje Bootstrap-a . . . . . . . . . . . . Grid . . . . . . . . . . . . . . . . . . . . Responzivne slike . . . . . . . . . . . . CSS Komponente . . . . . . . . . . . . . Javascript . . . . . . . . . . . . . . . . . Prilagođen Boostrap . . . . . . . . . . . . . . Napredno prilagođavanje Bootstrapa . . . . Raspakirani Bootstrap Izvorni kod . . . Korištenje less-a . . . . . . . . . . . . . Prepros . . . . . . . . . . . . . . Kompajliranje Less-a . . . . . . . . . . Pozivanje i mapiranje Preprosom Izmjena Bootstrap.less-a . . . . . Odabir Template-a . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
2 2 2 4 4 5 7 9 11 12 12 13 16 22 23
Upoznavanje WordPress-a . . . . . . Koncept . . . . . . . . . . . . . . . Instalacija WordPress-a . . . . . . . Početne datoteke jedne teme . . . . Razumijevanje hijerarhije datoteka Glavna petlja - The Loop . . . . . . Action i Filter funkcije . . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
25 25 26 26 27 28 29
Izrada WordPress teme . . . . . . . . . . . . . . . . Instaliranje XAMPP-a i podešavanje WordPress-a Instalacija WordPress-a . . . . . . . . . . . . Početna struktura projekta . . . . . . . . . . . . . Functions.php . . . . . . . . . . . . . . . . . Header i footer . . . . . . . . . . . . . . . . . Objašnjenje . . . . . . . . . . . . . . . Povezivanje header-a i footer-a . . . . . . . . Izrada Bloga . . . . . . . . . . . . . . . . . . . . . Povezivanje CSS datoteka . . . . . . . . . . . Povezivanje Javascript datoteka . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
31 31 34 35 38 38 39 39 40 41 42
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
. . . . . . .
SADRŽAJ
Izrada Navigacije . . . . . . . . . . . . . . . Logo . . . . . . . . . . . . . . . . . . . WordPress Menu . . . . . . . . . . . . Prikaz WordPress Menu-a . . . . . . . Naziv stranice . . . . . . . . . . . . . . . . . Razmak između naslova i navigacije . . . . . Struktura bloga . . . . . . . . . . . . . . . . . Lista članaka . . . . . . . . . . . . . . . . . . WordPress Loop . . . . . . . . . . . . Slika članka . . . . . . . . . . . . . . . Prikazivanje slike članka . . . . . . . . Pojedini Članak . . . . . . . . . . . . . . . . Dijeljenje sadržaja . . . . . . . . . . . Sporedni sadržaj . . . . . . . . . . . . . . . . Pozivanje i prikaz sidebar-a . . . . . . Dodavanje widget-a . . . . . . . . . . Izrada Widgeta . . . . . . . . . . . . . Lista kategorija . . . . . . . . . Objašnjenje . . . . . . . . . . . Registriranje widgeta . . . . . . . . . . Prikaz Category widgeta . . . . . . . . Objašnjenje . . . . . . . . . . . Izrada widgeta za posljednje članke . . . . . . Prikazivanje naslova . . . . . . . . . . Objašnjenje . . . . . . . . . . . Prikazivanje posljednjih članaka . . . . Objašnjenje . . . . . . . . . . . Izrada Widgeta za Tagove . . . . . . . . . . . Footer . . . . . . . . . . . . . . . . . . . . . . Struktura footera i pozivanje sidebar-a Widget About . . . . . . . . . . . . . . Widget Social Links . . . . . . . . . . Polja za unos . . . . . . . . . . . Spremanje vrijednosti . . . . . . Prikaz widgeta . . . . . . . . . . Registriranje widgeta . . . . . . Unos Widgeta . . . . . . . . . . Widget Our Bunker . . . . . . . . . . . Bootstrap na blogu . . . . . . . . . . . . . . . . . Glavni Sadržaj . . . . . . . . . . . . . . . . . Footer . . . . . . . . . . . . . . . . . . . . . . Responzivne slike članka . . . . . . . . . . . . . . Promjena HTML kod od thumbnail-ova . . . Dodatni CSS za resize slike . . . . . . . . . . Dodatne datoteke stranica . . . . . . . . . . . . . Datoteka page.php . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
45 47 48 49 53 54 56 58 60 62 64 66 68 71 74 74 76 76 84 85 87 88 89 92 92 92 95 96 99 101 102 103 104 106 107 108 108 110 110 110 111 112 113 117 118 118
SADRŽAJ
Stranice bez sidebar-a Datoteka 404.php . . . . . . . Dodavanje komentara na članke . Sređivanje komentara . . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
. . . .
118 120 121 127
Napredna izrada WordPress teme: Portfolio . . . . . . Dizajn i funkcionalnost . . . . . . . . . . . . . . . . . Plan izrade . . . . . . . . . . . . . . . . . . . . . . . . Stranica koja prikazuje sve projekte . . . . . . . . Stranica pojedinog projekta . . . . . . . . . . . . Custom Post Type: portfolio . . . . . . . . . . . . . . Kategorija - Custom Taxonomy . . . . . . . . . . . . Tagovi - Custom Taxonomy . . . . . . . . . . . . . . Dodavanje Meta Box-a . . . . . . . . . . . . . . . . . Dodavanje polja za unos . . . . . . . . . . . . . . Spremanje unesenih vrijednosti . . . . . . . . . . Dodavanje slika za projekt . . . . . . . . . . . . Nova dimenzija slika . . . . . . . . . . . . . . . . . . Custom Template: Portfolio Home . . . . . . . . . . . Pretvorba SOLID Portfolia u WordPress Portfolio Pojedini projekt . . . . . . . . . . . . . . . . . . . . . Slider slika . . . . . . . . . . . . . . . . . . . . . Tekst projekta . . . . . . . . . . . . . . . . . . . Detalji projekta . . . . . . . . . . . . . . . . . . . Povezani projekti . . . . . . . . . . . . . . . . . . Responzivne slike . . . . . . . . . . . . . . . . . Filtriranje projekta . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
128 128 128 129 129 129 130 132 133 134 135 137 137 137 139 144 147 149 150 155 158 161
Napredna izrada WordPress teme: Business . . . . . . . . . . . . . . . . . . . . . . Plan izrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Početna stranica: Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Feature dio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dodavanje Metaboxa i polja za unos . . . . . . . . . . . . . . . . . . . Spremanje Metaboxa . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ispis feature-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ispis posljednjih projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . O agenciji, FAQ i posljednji članci . . . . . . . . . . . . . . . . . . . . . . . . Registracija novih prostora za widgete . . . . . . . . . . . . . . . . . . Postavljanje HTML-a i pozivanje prostora za widgete . . . . . . . . . . Widget za prikaz jedne stranice . . . . . . . . . . . . . . . . . . . . . . Widget za prikaz posljednjih članaka sa različitim post_type sadržajem FAQ post type . . . . . . . . . . . . . . . . . . . . . . . . . . . . Testimonials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ispis Testimoniala . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ispis Klijenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dodavanje polja u media uploader-u . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . .
165 165 165 169 171 172 174 176 178 178 179 181 184 188 189 194 199 200
SADRŽAJ
Spremanje polja u media uploader-u . . . . . Ispis slika za klijente . . . . . . . . . . . . . . Sređivanje uvodne slika . . . . . . . . . . . . . . . . Sređivanje Testimonial dijela . . . . . . . . . . . . . Custom Template: About . . . . . . . . . . . . . . . . . . Ispis sadržaja stranice . . . . . . . . . . . . . . . . . Članovi tima . . . . . . . . . . . . . . . . . . . . . . Dodavanje dodatnih unosa preko metaboxa . . . . . Spremanje dodatnog unosa . . . . . . . . . . . . . . Ispisivanje poruke prilikom greške kod unosa . Ispisivanje članova . . . . . . . . . . . . . . . . . . . Testimonials i slike klijenata . . . . . . . . . . . . . . Custom Template: Contact . . . . . . . . . . . . . . . . . Sporedni sadržaj . . . . . . . . . . . . . . . . . . . . Forma . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
201 201 203 203 205 206 208 209 210 212 213 215 217 218 220
Korištenje WordPress Customizer-a . . . . . . . . . . . . . . . . . . . . . . . . . . Izrada opcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Izrada Sekcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Izrada Kontrole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Ispis vrijednosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Promjene u stvarnom vremenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Customizer klasa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Promjena naslova stranice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dodavanje sekcije Header i opcije za pozadinu navigacije . . . . . . . . . . . . . . Dodavanje opcije za boju poveznica . . . . . . . . . . . . . . . . . . . . . . . . . . Dodavanje opcije za boju aktivne poveznice . . . . . . . . . . . . . . . . . . . . . . Dodavanje polja za otvoreni dropdown . . . . . . . . . . . . . . . . . . . . . . . . Dodavanje opcije za mijenjanje pozadine padajućih izbornika . . . . . . . . . . . . Dodavanje opcije za mijenjanje pozadine aktivne poveznice u padajućem izborniku Dodavanje sekcije za Footer i opciju za pozadinu footer-a . . . . . . . . . . . . . . Dodavanje opcije za boju teksta u footer-u . . . . . . . . . . . . . . . . . . . . . . Dodavanje opcije za heading u footer-u . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . .
223 223 224 224 225 225 226 229 229 231 232 234 235 236 237 238 239
Opcije (Settings API) . . . . . . . . . . . . . . Dodavanje sekcije (Settings Section) . . . . . Dodavanje polja (Settings Field) . . . . . . . Dodavanje opcije (Setting) . . . . . . . . . . Prikaz polja i sekcija . . . . . . . . . . . . . Izmjena prikaza testimonialsa i slike klijenata
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
241 242 243 245 245 246
Korištenje AJAX-a u WordPress-u . . . . AJAX u administrativnom dijelu . . . . . Dodavanje elemenata preko AJAX-a Prikaz dodanih elemenata u widgetu AJAX na javnoj strani (Front End) . . . . Postavljanje gumba za ocjenu . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
. . . . . .
248 249 249 254 256 256
. . . . . .
. . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
SADRŽAJ
Postavljanje jQuery funkcije za AJAX . . . . . . . . . . . . . . . . . . . . . . . . 257 Funkcije za povećavanje ili smanjivanje ocjene . . . . . . . . . . . . . . . . . . . 259 Sređivanje javnog dijela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262 A Dodatak: WordPress - Bootstrap NavWalker . . . . . . . . . . . . . . . . . . . . . . 264 B Dodatak: Osnove PHP-a . . . . . Varijable . . . . . . . . . . . . . . Polja . . . . . . . . . . . . . . . . Ključevi u poljima . . . . . . Izvlačenje vrijednosti iz polja Petlje . . . . . . . . . . . . . . . . For petlja . . . . . . . . . . . While petlja . . . . . . . . . Do-While petlja . . . . . . . Grananje . . . . . . . . . . . . . . Funkcije . . . . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
270 270 271 271 271 272 272 272 273 273 274
Popust na Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Predgovor WordPress je jedan od vodećih CMS sustava u Blogging svijetu pa i šire. Danas se WordPress sve više koristi kod izrada raznih web aplikacija koje su daleko kompleksnije od jednog bloga za što je WordPress u početku bio namijenjen. Ova knjiga namijenjena je za sve developere, a i dizajnere koji se žele okušati u WordPress-u i naučiti kako izraditi jedan mali projekt u WordPress-u. Knjiga WordPress na Bootstrapu 3.x može pomoći i iskusnijim developerima koji su već radili u WordPressu jer će uz izradu same WordPress teme biti korištene i neke druge korisne metode odnosno funkcije koje mijenjaju neke funkcije u samom CMS-u.
Upoznavanje sa Bootstrap Frameworkom Bootstrap je Framework za bržu izradu web stranica pomoću njegovih unaprijed definiranih stilova, elemenata, komponenti te funkcionalnosti. Kako bi mogli izraditi WordPress na Bootstrap-u potrebno je najprije upoznati se sa samim Frameworkom. Verzija Bootstrap-a u trenutku pisanja ove knjige je 3.2.0. Ovaj Framework možete skinuti ili se s njime pobliže upoznati na njegovoj stranici http://getbootstrap.com¹.
slika
Korištenje Bootstrap-a Bootstrap je veoma jednostavan za koristiti. Dovoljno je pozvati njegove datoteke i prizivati odnosno dodavati komponente koje su nam potrebne. Na takav način jednostavno je dodati par redaka sa strukturom koja sadrži klase koje Bootstrap koristi.
Grid Grid je naša struktura stranice. Njime se definira naš layout u koji se zatim dodaju razne komponente Bootstrap-a. Početna struktura sastoji se od tri dijelova - container, row i column. Unutar column-a unosimo sadržaj. ¹http://getbootstrap.com
Upoznavanje sa Bootstrap Frameworkom
3
Klasična struktura jednog bloga je lijevi dio s glavnim sadržajem i desnim dijelom s nekim dodatnim sporednim informacijama. To bi se postiglo sa sljedećim kodom: 1 2 3 4 5 6 7 8 9 10
Glavni sadržaj Sporedni sadržaj
Jedan redak sastoji se od 12 stupaca. Ovakvom strukturom rekli smo da naš glavni sadržaj koristi 8/12 prostora retka, dok sporedni sadržaj koristi 4/12 prostora, što ukupno daje 12 stupaca. Bootstrap je responzivan pa tako ima i svoje točke prekidanja (eng. breakpoint) na kojima se sadržaj lomi, presavija i sl. Te točke po default-u su < 768px, >= 768, >= 992px i >= 1200px. Ove točke prekidanja odnose se na širinu ekrana na kojemu se web prikazuje. Na način na koji je napravljen Bootstrap odnosno na način na koji su postavljene točke prekidanja, radi se s MobileFirst Frameworkom te zbog toga ne vidimo nigdje točke prekidanja koje gledaju na < 481px jer se smatra da se za to definira sadržaj u početku. Upravo zbog tih točaka prekidanja postoje različite klase xs, sm, md, lg. Klasu sm možete vidjeti u gornjem primjeru. To znači da će sadržaj iznad 768px biti prikazan upravo u ovakvoj strukturi, dok sadržaj ispod te širine, koji zahtjeva klasu xs za dodatnu definiciju strukture će biti jedan ispod drugog sa širinom namještenom na 12/12 odnosno svaki stupac biti će jednak širini 12 stupaca tj. na 100% širine jer nema definiranu strukturu za tu širinu. Isti učinak dobili bi kada bi napisali sljedeće: 1 2 3 4 5 6 7 8 9 10
Glavni sadržaj Sporedni sadržaj
Više o gridu možete saznati na Bootstrap Grid². ²http://getbootstrap.com/css/#grid
Upoznavanje sa Bootstrap Frameworkom
4
Responzivne slike Bootstrap 3 pruža jednostavan način za postizanje responzivnih slika. Dovoljno je za sliku dodatni klasu .responsive-img kako bi ona dobila širinu elementa u kojemu se nalazi te se skalirala tj. mijenjala dimenzija u ovisnosti o elementu u kojemu se nalazi. 1
O jednostavnim CSS dijelovima koje omogućuje Bootstrap 3 više možete pronaći na Bootstrap CSS³.
CSS Komponente Uz jednostavne CSS klase koje omogućuju lakše slaganje Bootstrap pruža i dodatne kompleksnije CSS komponente koje mogu poslužiti za što brži razvoj nekakvih modula kao što je npr. navigacija i još uz to, responzivna navigacija koja se na manjim ekranima otvara na klik. Sve što je potrebno je kopirati i zalijepiti sljedeći kod: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
Toggle navigation Logo Tekst ili Slika Link Još jedan Link Padajući izbornik Jedan link Drugi link Treći Link ³http://getbootstrap.com/css/
5
Upoznavanje sa Bootstrap Frameworkom
27 28 29 30 31 32 33 34 35 36
Odijeljeni Link Odijeljeni Link No. 2
Uz ovakav kod dobiti ćemo meni s padajućim izbornikom koji se otvara na klik mišem ili prstom ako koristimo mobitel ili tablet.
Bootstrap Navigacija
Ista navigacija s otvorenim padajućim izbornikom:
Bootstrap Navigacija i padajući zbornik
Kako bi ovaj padajući zbornik mogao funkcionirati kako spada potrebno je koristiti javascript pluginove koje pruža Bootstrap 3. Plugin koji se ovdje koristi je tzv. collapse. Sve ostale CSS Komponente možete pronaći na Bootstrap CSS Komponente⁴.
Javascript Kao što je prikazano u prethodnom poglavlju s navigacijom, Bootstrap dolazi zapakiran i s Javascript pluginovima koji daju dodatne funkcionalnosti. Na takav način možemo lako pozvati neke dijelove s CSS klasama i HTML atributima koje izvršavaju dodatne funkcionalnosti jer su usko povezane s pluginovima, kao što je npr. carousel plugin⁵. ⁴http://getbootstrap.com/components ⁵http://getbootstrap.com/javascript/#carousel
Upoznavanje sa Bootstrap Frameworkom
6
Dovoljno je uzeti njihov kod iz primjera, prilagoditi ga malo i dobiti ćemo funkcionalan slider. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
Ovo je slider ...sdasdsadada sadijasidjaidsjaidjas Ovo je slider ...sdasdsadada sadijasidjaidsjaidjas
7
Upoznavanje sa Bootstrap Frameworkom
Sada to izgleda kao ovo:
Carousel Slider
Uz takve pluginove moguće je nadodati dosta zanimljivih i korisnih funkcionalnosti. O njima možete više pročitati na Bootstrap Javascript⁶.
Prilagođen Boostrap Bootstrap na svojoj web stranici daje mogućnost prilagođavanja Bootstrap-a svojim željama i potrebama. Dakle, moguće je namještati razne varijable od boja do veličina fonta kako bi si kasnije olakšati izradu tema na Boostrap-u. To je moguće na njihovoj stranici: http://getbootstrap.com/customize/⁷. Ako poznajemo potrebe našeg projekta moguće je ovdje postaviti sve potrebne postavke te odabrati samo one Javascript pluginove koji su nam potrebni u tome projektu kako ne bi uzimali komponente koje nam nisu potrebne i tako podizali veličinu našeg projekta bez razloga. Recimo na primjer da sve što nam treba od Bootstrap-a je njegov Grid i nešto responzivnih css klasa. Dovoljno je kliknuti na Toggle All i odabrati samo Grid i Responsive utilities kao na slici ispod. ⁶http://getbootstrap.com/javascript ⁷http://getbootstrap.com/customize/
8
Upoznavanje sa Bootstrap Frameworkom
Prilagođeni Bootstrap
Ako su nam potrebne svi ili pojedini jQuery plugini malo ispod ovih Less datoteka potrebno je na isti način odabrati željene jQuery pluginove ili ostaviti kako je. Nakon toga možemo prilagoditi Grid našim potrebama mijenjajući vrijednosti varijabla koje se odnose na Grid.
9
Upoznavanje sa Bootstrap Frameworkom
Prilagođeni Bootstrap
Nakon što smo promijenili sve što je trebalo promijeniti treba pritisnuti na Compile and Download i dobiti ćemo u .zip formatu datoteku koju je potrebno skinuti te koja sadrži naše .css datoteke i .js datoteke. Nakon toga potrebno je polinkati našu web stranicu s tim datotekama i možemo je jednostavno razvijati na Bootstrap 3 Framework-u.
Napredno prilagođavanje Bootstrapa Uz njihov alat za prilagođavanje Bootstrap-a, moguće je skinuti Bootstrap u izvornom formatu odnosno u .less formatu. ### Što je Less? Less je pretprocesor za CSS koji omogućava jednostavnije pisanje CSS-a koristeći grananja, varijable i ostale razne pogodnosti kako bi se ubrzalo pisanje CSS-a. Nakon toga kompajlira se takva datoteka u .css format koja može biti i kompresirana na najmanju moguću veličinu. Time dobivamo brži i lako održivi CSS. Mali primjer Less-a .less datoteka
10
Upoznavanje sa Bootstrap Frameworkom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
@crvena_boja: red; a { color:black; &:hover { color: @crvena_boja; } } .lista { padding:0; li { float:left; display:block; } }
.css datoteka 1 2 3 4 5 6
a { color:black; } a:hover { color: red; } .lista { padding:0; } .lista li { float:left;
display:block;
}
Može se primijetiti da se grananjem i korištenjem varijabli uštedjelo na pisanju ponavljajućih klasa ili boja i sl. Uz Less, Bootstrap omogućuje korištenje Sass-a koji je također jedan od pretprocesora CSS-a, ali Less je njihov izvorni jezik pa ću se držati toga u ovoj knjizi. Kako bi dobili cijeli Bootstrap 3 u izvornom obliku sa less datotekama potrebno je odabrati Download Source.
11
Upoznavanje sa Bootstrap Frameworkom
.
Raspakirani Bootstrap Izvorni kod Ako ste skinuli tj. preuzeli Bootstrap izvorni kod i raspakirali njihovu .zip datoteku, dobili ste nešto slično ovome:
Izvorna datoteka
Ako otvorite prvi direktorij kao na slici dist vidjet ćete isto ono što bi dobili ako kompajlirate bootstrap preko njihovog alata na stranici (css,font i js direktorije) uz još neke dodatne datoteke koje Vam ne služe ako ne koristite Grunt ili nešto slično. Kako je ova knjiga zamišljena kao priručnik za početnike ili one koji se već bave ovom strukom, preskočit ćemo alate kao Grunt i fokusirati se na što jednostavniji pristup kako bi mogli obavljati ono najbitnije, a to je praviti WordPress temu iz Bootstrap-a.
12
Upoznavanje sa Bootstrap Frameworkom
Ako ponovno bacimo pogled na početni direktorij osvrnimo se na ono najbitnije u ovome poglavlju, a to je less direktorij. Kada bi uzeli taj direktorij uz fonts i js dobili bi pravi Bootstrapov nekompilirani kod jer u less direktoriju nalaze se razne less datoteke dok se u js direktoriju nalaze razne js datoteke. Sve te datoteke u sebi sadrži neki dio css-a odnosno js-a koji su potrebni bi Bootstrap bio Bootstrap.
Korištenje less-a Kako je less preprocesor CSS-a potrebno je koristiti dodatne stvari kako bi mogli iz less-a dobiti css. Iako je to moguću i preko obične javascript datoteke koja čita less datoteke i pretvara to u css radi produkcije bolje je odmah raditi pretvorbu less-a u css i to prikazati na webu bez dodatnih komplikacija. Kako to napraviti? Dosta jednostavno, mogu se koristiti alati poput Grunt-a⁸ koji rade preko terminala odnosno komande linije (command prompt) ili možete koristiti GUI (eng. Graphic User Interface) alate koji obavljaju istu stvar kao Grunt. Jedan takav alat je Prepros⁹. Prepros
Prepros
Za osobnu upotrebu dovoljna je i besplatna verzija. Skinite je i instalirajte kao svaki drugi program. Moguće da donja slika neće biti ista kao i vaša jer se verzija već podigla odnosno kao na gornjoj slici, verzija je 4.2 dok je moja instalacija 4.0. Razlike nisu prevelike.
Prepros Instalacija ⁸http://gruntjs.com/ ⁹http://alphapixels.com/prepros/
13
Upoznavanje sa Bootstrap Frameworkom
Nakon što ste instalirali prepros možete ga otvoriti i dobiti ćete prazan dashboard gdje se inače pokazuju svi otvoreni projekti. Lista projekata može izgledati kao sljedeća lista:
Prepros Lista Projekata
U lijevom stupcu nalaze se svi projekti dok u desnom stupcu se za odabrani projekt prikazuju sve datoteke koje Prepros prepoznaje i koje može kompajlirati. Uz sliku koja pokazuje vrstu datoteke, desno od nje pokazuje naslov datoteke, ispod naslova je putanja do te datoteke te zadnji red pokazuje gdje će se kompajlirati navedena less datoteka.
Kompajliranje Less-a Sada kada smo se upoznali malo s Less-om i načinom rada nema boljega nego pokušati upravo to i napraviti kako bi još bolje razumjeli ukupni proces rada. Kopirajte sada prethodno navedene direktorije iz vašeg Bootstrap-ovog izvornog direktorija, a te datoteke jesu less, js i fonts i prenesite ih u neki zasebni direktorij kao npr. test.
Bootstrap Test Direktorij
Upoznavanje sa Bootstrap Frameworkom
14
Sada prije kompajliranja less-a, otvorimo direktorij i u vašem najdražem editoru kao što je Notepad++, Brackets ili Sublime Text otvorite datoteku bootstrap.less. Može se primijetiti kako su sve ostale .less datoteke importirane unutar ove datoteke. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42
// Core variables and mixins @import "variables.less"; @import "mixins.less"; // Reset @import "normalize.less"; @import "print.less"; // Core @import @import @import @import @import @import @import
CSS "scaffolding.less"; "type.less"; "code.less"; "grid.less"; "tables.less"; "forms.less"; "buttons.less";
// Components @import "component-animations.less"; @import "glyphicons.less"; @import "dropdowns.less"; @import "button-groups.less"; @import "input-groups.less"; @import "navs.less"; @import "navbar.less"; @import "breadcrumbs.less"; @import "pagination.less"; @import "pager.less"; @import "labels.less"; @import "badges.less"; @import "jumbotron.less"; @import "thumbnails.less"; @import "alerts.less"; @import "progress-bars.less"; @import "media.less"; @import "list-group.less"; @import "panels.less"; @import "wells.less"; @import "close.less"; // Components w/ JavaScript @import "modals.less";
15
Upoznavanje sa Bootstrap Frameworkom
43 44 45 46 47 48 49
@import "tooltip.less"; @import "popovers.less"; @import "carousel.less"; // Utility classes @import "utilities.less"; @import "responsive-utilities.less";
To znači da će se kada kompajliramo bootstrap.less datoteku, u biti kompajlirate sve ovdje navedene .less datoteke. Jednako tako mogu se varijable koje su definirane na jednom mjestu koristiti i u drugim datotekama bez ponovnog definiranja, kao što su varijable unutar variable.less datoteke. Varijable su označene tako da počinju sa znakom @. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
// // Variables // --------------------------------------------------
//== Colors // //## Gray and brand colors for use across Bootstrap. @gray-darker: @gray-dark: @gray: @gray-light: @gray-lighter: @brand-primary: @brand-success: @brand-info: @brand-warning: @brand-danger:
lighten(#000, lighten(#000, lighten(#000, lighten(#000, lighten(#000,
13.5%); 20%); 33.5%); 60%); 93.5%);
// // // // //
#222 #333 #555 #999 #eee
#428bca; #5cb85c; #5bc0de; #f0ad4e; #d9534f;
...
Ovdje se mogu vidjeti neke varijable koje se koriste za boje iako se u daljem sadržaju ove datoteke nalaze varijable za sva ostala moguća css svojstva. Takve varijable se dalje koriste u drugim datotekama iako nisu opet definirane. Upravo zbog toga, ako pogledate u prethodno navedeni sadržaj datoteke bootstrap.less, može se primijetiti da je upravo datoteka variables.less navedena na početku. Ako sada otvorimo neku drugu datoteku poput navbar.less mogu se vidjeti i neke druge varijable koje su korištene a nisu definirane prije korištenja.
Upoznavanje sa Bootstrap Frameworkom
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
16
// // Navbars // --------------------------------------------------
// Wrapper and base class // // Provide a static navbar from which we expand to create full-width, fixed, \ and // other navbar variations. .navbar { position: relative; min-height: @navbar-height; // Ensure a navbar always shows (e.g., without \ a .navbar-brand in collapsed mode) margin-bottom: @navbar-margin-bottom; border: 1px solid transparent; // Prevent floats from breaking the navbar &:extend(.clearfix all); @media (min-width: @grid-float-breakpoint) { border-radius: @navbar-border-radius; } }
Pozivanje i mapiranje Preprosom Sada kada znamo kako će se kompajlirati less, pozovimo upravo bootstrap.less u Prepros-u i postavimo putanju gdje će se kompajlirati. Za početak, potrebno je dodati projekt klikom na Add New Project te zatim odabrati direktorij u kojem se nalaze less datoteke.
Upoznavanje sa Bootstrap Frameworkom
17
Dodavanje projekta u Prepros-u
Nakon što smo odabrali direktorij i kliknuli OK, Prepros je dodao taj direktorij kao novi projekt i odmah pokazao datoteke koje će kompajlirati uz automatski generirane putanje.
18
Upoznavanje sa Bootstrap Frameworkom
Dodani projekt
Ukoliko želimo imati neku drugu putanju to lako možemo i napraviti. Za ovaj primjer postavimo da bootstrap.less se kompajlira direktono u naš direktorij test u style.css. Potrebno je kliknuti prvo na putanju koja se automatski generirala ispod bootstrap.less datoteke. Nakon klika, dobiti ćemo direktorij unutar kojega se nalazi datoteka bootstrap.less.
19
Upoznavanje sa Bootstrap Frameworkom
Promjena putanje
Nakon toga, potrebno je otići u direktorij iznad i napisati da se sprema u style.css.
20
Upoznavanje sa Bootstrap Frameworkom
Definirana putanja
Sada kada kliknemo na save, promijeniti će se putanja u listi datoteka.
21
Upoznavanje sa Bootstrap Frameworkom
Promijenjena putanja
Sada je dovoljno odabrati bootsptrap.less i kliknuti na Compile ili istu tu datoteku Spremiti preko vašeg omiljenog editora.
22
Upoznavanje sa Bootstrap Frameworkom
Prepros Compile
Ako je sve ispravno napisano Prepros će spremiti nove promjene u style.css te ukoliko ne postoji stvoriti će tu datoteku umjesto Vas.
Kompilirana datoteka
Izmjena Bootstrap.less-a Što ako nam nešto nije potrebno sada u tome? To možemo jednostavno promijeniti bez potrebe za korištenjem njihovog alata za kompajliranje već je dovoljno samo maknuti neke .less datoteke koje nam ne trebaju. To je vezano za CSS, dok za JS isti postupak se koristi za kompajliranje JS-a sa Preprosom. Ako pogledamo novo kompajlirani style.css, na početku se vidi:
Upoznavanje sa Bootstrap Frameworkom
1 2 3 4 5 6 7 8 9 10 11 12 13
23
*! normalize.css v3.0.0 | MIT License | git.io/normalize */ html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } article, aside, details, ...
Sada ako zakomentiramo ili maknemo @import ‘normalize.less’ i kliknemo Compile ili Save preko našeg editora dobiti ćemo novi style.css ali bez tog dijela. Sada je početak style.css datoteke sljedeći dio koda: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
@media print { * { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } ...
Možete primijetiti kako je jednostavno korištenjem less-a i Preprosa micati i dodavati nove ili stare datoteke, a tako i dodavati ili brisati css dijelove koji nam nisu potrebni.
Odabir Template-a Kako sada malo bolje razumijemo kako raditi s Bootstrap-om, te ako ste malo proučili komponente Bootstrap-a upoznati ste i s nekim komponentama Bootstrap-a koje ćemo vidjeti u raznim template-ima. Iako postoje razni kvalitetni premium template-i, odabrat ćemo jednostavniji i jeftiniji pristup te uz kratku pretragu po Google-u mogu se pronaći kvalitetni besplatni template-i.
Upoznavanje sa Bootstrap Frameworkom
24
Ja sam u Google upisao Free Bootstrap Themes te naišao na puno različitih članaka i template-a. Nakon kratkog muvanja po raznim stranicama naišao sam na jedan simpatičan template koji ima više toga u sebi, a sadrži i Blog što odgovara našim potrebama. Iako nikakve potrebe nisu bile navedene, kako radimo s WordPress CMS-om koji je započeo kao nekakav blogging cms napravit ćemo i jedan klasičan blog dio na našoj stranici. Template koji sam pronašao zove se SOLID i može se naći ovdje¹⁰. Na toj istoj stranici možete pogledati DEMO tog template-a. Ja sam ga skinuo klikom na Download. Prije nego krenemo s izradom odnosno pretvorbom ovog template-a u WordPress temu, treba razumjeti da je ovo gotova tema te ovdje neće biti izrade s less jezikom iako je podrobno bio objašnjen u prethodnim poglavljima. To je bilo napravljeno iz razloga kako bi bolje razumjeli sam rad s Bootstrap-om te na koji način je ovaj template bio napravljen. ¹⁰http://www.blacktie.co/2014/05/solid-multipurpose-theme/
Upoznavanje WordPress-a WordPress je CMS koji je u početku bio zamišljen kao blog platforma. Nakon nekog vremena počeo se koristiti kao platforma za web stranice različitog tipa. Zbog njegove jednostavne uporabe mnogi ga uzimaju u obzir kada započinju svoje web projekte pa čak i ljudi koji nisu developeri već su upoznati s WordPress-om te klijenti znaju sami tražiti da se njihova web stranica radi u WordPress-u. U ovome poglavlju upoznati ćemo se s WordPress-om kao temeljem za izradu web projekta.
Koncept WordPress kao CMS koncipiran je u nekoliko segmenata. Sastoji se od članaka, stranica, komentara te uz cijeli taj sadržaj omogućava korištenje raznih tema i nadogradnju samog CMS-a pomoću njegovih dodataka. Članci - su zapisi poput nekih novosti i sl. koji se zatim listaju, često, na početnoj stranici. Moguće ih je kategorizirati pomoću kategorija i tagova. Stranice - su zapisi slični člancima ali oni se smatraju kao obične stranice koje se dodaju i u navigaciji WordPressa. Bez dodatne konfiguracije stranice su automatski dodane u navigaciji i tako predstavljaju stranice poput “O nama”, “Usluge” i sl. koje su dosta česte statične stranice. Komentari - su zapisi koje prave korisnici WordPress stranice. Komentare mogu pisati i korisnici koji nisu registrirani na stranici ako je tako omogućeno. Teme - su različiti predlošci dizajna koji se mogu skinuti i instalirati putem WordPress administracije ili direktno preko sistema direktorija. Sve instalirane teme moguće je pregledati preko WordPress administracije i uključivati po želji. Teme se nalaze u folderu wp-content/themes/. Dodaci - služe za proširivanje funkcija same WordPress stranice. Danas postoje različiti dodaci za svakakve potrebe. Dodaci se nalaze u folderu wp-content/plugins/.
26
Upoznavanje WordPress-a
Instalacija WordPress-a
Stranica za download WordPressa
WordPress se može skinuti sa stranice wordpress.org¹¹. Ako niste zadovoljni engleskom verzijom možete skinuti WordPress za neki drugi jezik. Klikom na download dovesti će vas na stranicu za skidanje WordPress-a u .zip ili .tar.gz formatu. Sam proces konfiguriranja WordPress-a na vašem lokalnom serveru biti će objašnjeno kasnije u knjizi kada se bude radila WordPress tema.
Početne datoteke jedne teme Kako bi izradili WordPress temu potrebno je razumjeti strukturu jedne teme. Potrebne datoteke za jednu temu kako bi funkcionirala jesu: • style.css - sadrži sva css pravila koja definiraju izgled teme • index.php - početna datoteka koja se uvijek prvo gleda ako drugačije nije postavljeno. Često se koristi za početnu stranica gdje se listaju svi članci. Obično uz ove datoteke imamo i sljedeće: • header.php - sadrži dijelove teme koji se ponavljaju kao npr. navigacija, logo i sl. na vrhu teme ¹¹http://www.wordpress.org
Upoznavanje WordPress-a
27
• footer.php - sadrži dijelove teme koji se ponavljaju u podnožju teme • sidebar.php - sadrži strukturu sidebar-a koji se koristi u temi, najčešće poziva dinamični sidebar • comments.php - sadrži strukturu komentara koji se dodaju svakom članku ili stranici gdje su omogućeni komentari Uz navedene datoteke dobro je imati i sljedeće: • single.php - prikazuje samo jedan članak kojeg se gleda • page.php - prikazuje sadržaj jedne stranice • archive.php - prikazuje listu članaka, često sadrži istu strukturu kao i index.php. Ovo se koristi pri listanju članaka iz pojedine kategorije, taga i sl. • functions.php - sadrži razne opcije i funkcije vezane uz temu, tu se mogu definirati novi post type-ovi, widgeti i sl. • 404.php - ova datoteka se koristi u slučaju da stranice ili članak nije pronađen. Ako je potrebno imati posebnu početnu stranicu za WordPress temu koristi se jedna od sljedećih datoteka: • home.php • front-page.php
Razumijevanje hijerarhije datoteka Moguće je koristiti još datoteka kako bi si olakšali održavanje. Cijelu hijerarhiju datoteka moguće je pogledati na Chip Bennett Template Hijerarhija¹². Ovdje neću objasniti svaku pojedinu ali iz nekoliko primjera biti će dovoljno jasno da se može čitati dijagram na gornjoj slici. Arhiva Arhiva članaka je jedan od najosnovnijih načina prikazivanja članaka u WordPress-u. Prilikom pristupanja nekoj arhivi, za primjer uzet ćemo kategoriju Auti ( slug od kategorije je auti, id od kategorije je 2), WordPress čini sljedeće: • Prepoznaje da se radi o arhivi • Prepoznaje da se radi o arhivi kategorije • Pregledava folder od teme da li postoji datoteka category-auti.php, ako postoji koristit će nju • Ukoliko nema prethodno navedene datoteke, pregledava folder da li postoji category-2.php, ako postoji koristiti će nju • Ukoliko nema category-2.php, pregledava se folder za category.php datotekom • Ukoliko nema ni category.php, pregledava se folder za archive.php ¹²http://www.chipbennett.net/themes/template-hierarchy/
Upoznavanje WordPress-a
28
• Ukoliko nema archive.php koristi se index.php Članak Članak je prikaz jednog članka koji se prikazuje na stranici jer smo kliknuli na njegov naslov ili neki link koji nas je doveo do njega. Taj članak se zatim preko njegovog URL-a ili ID-a prikazuje na stranici. WordPress radi sljedeće: • • • • •
Prepoznaje da se radi o stranici koja prikazuje samo sadržaj jednog posta ili stranice Prepoznaje da se radi o stranici koja prikazuje samo sadržaj jednog posta Pregledava koji tip članka Ukoliko je članak tipa “Post”, pregledava se folder za datotekom single-post.php Ukoliko je članak nekog našeg tipa koji je naknadno dodan, što je poznato kao “Custom Post Type”, pregledava se folder za datotekom single-auto.php ukoliko bi naš custom post type bio auto. • Ukoliko je članak nekog priloga kao npr. uploadane slike tada se pregledava folder za datotekom image.php ukoliko je to datoteka tipa image, zatim ako je nema gleda za png.php ako je slika u formatu .png, a nakon toga gleda ako postoji image_png.php datoteka. Ukoliko nema niti jedne od tih datoteka gleda attachment.php • Ukoliko nije pronađena neka od spomenutih datoteka pregledava se folder za datotekom single.php • Ukoliko nema ni single.php, koristi se index.php Prateći dijagram koji je gore naveden tema se može organizirati u hijerarhiju datoteka koja je lako održiva te je jednostavno shvatiti koja datoteka se odnosi na koji dio teme. Iz gore navedenih primjera može se primijetiti kako sve uvijek vodi na index.php ukoliko tražene datoteke ne postoje. Ako neke promjene nisu pretjerano velike mogu se napraviti i u index.php datoteci kao što je npr. naslov arhive za kategoriju. 1 2
//ovo je unutar petlje the_loop() if(is_category()){ single_cat_title("Članci iz kategorije: ", true); }
Glavna petlja - The Loop Glavna petlja ili The Loop je PHP kod koji se koristi za listanje sadržaja članka, stranica i sl. Ova petlja prikazuje svaki članak ili stranicu koji su dobiveni kriterijima postavljenim u glavnom query-u koji pristupa bazi. Taj query se npr. mijenja i ovisno o kategoriji kada se poziva categoryauto.php. Svaki HTML i PHP kod unutar petlje prikazat će se odnosno izvršiti za svaki članak unutar petlje. Koristeći razne Template Tagove možemo prikazati različite informacije. Jedne od osnovnih tagova kod prikaza informacija za članak unutar petlje jesu: • the_title() - prikazuje naslov članka
Upoznavanje WordPress-a
29
• the_content() - prikazuje sadržaj članka, ukoliko nije stranica pojedinog članka onda se prikazuje skraćeni tekst • the_category() - prikazuju se kategorija članka • the_date() - prikazuje se datum članka • the_permalink() - daje cijeli link na članak, ovaj dio se dodaje npr. u atribut href Razni tagovi mogu se pronaći na WordPress Codex-u¹³. Osnovna struktura petlje 1 2 3 4 5 6 7 8
Action i Filter funkcije Action i Filter funkcije služe za nadograđivanje naše teme ili admin-a. Njima se može određivati da se u određeno vrijeme ili na određenom mjestu neka funkcija izvrši. Action funkcije se izvršavaju kada se nešto dogodi odnosno izvrši kao što je npr. publish članka ili prikazivanje admin stranice. Filter funkcije su funkcije koje se izvršavaju kod podataka kao što je mijenjanje nekih podataka ili filtriranje istih prije nego se spremaju u bazu ili ispisuju korisniku stranice. Action funkcije Kako bi pozvali neku funkciju uz neku Action funkciju koristi se 1
add_action("ime_actiona", "ime_funkcije", prioritet, broj_parametara );
• ime_actiona predstavlja ime actiona pri kojem se poziva funkcija • ime_funkcije predstavlja ime funkcije koja se poziva kada se dogodi odgovarajući action • prioritet predstavlja broj, ukoliko ga ne unesemo postavlja se na 10. Što je manji broj to se prije izvršava dodana funkcija • broj_parametara predstavlja broj parametara koji dolaze uz funkciju, npr. function update_post($a,$b) - tu imamo broj 2 jer se prosljeđuju dva parametra Mjesto pozivanja te action funkcije određuje se sa
¹³http://codex.wordpress.org/Template_Tags
Upoznavanje WordPress-a
1
30
do_action("ime_actiona");
Filter funkcije Za pozivanje Filter funkcije koristi se slični poziv kao i za Action funkcije gdje parametri predstavljaju istu stvar kao i pozivanje Action funkcija: 1
add_filter("ime_filtera", "ime_funkcije", prioritet, broj_parametra);
Mjesto pozivanja filter funkcije određuje se sa 1
do_filter("ime_filtera",$vrijednost,$varijabla1,$varijabla2,....);
• $vrijednost predstavlja vrijednost koja se šalje u filter i koja se može mijenjati u filteru • $varijabla1, $varijabla2 predstavljaju parametre koji se šalju skupa s vrijednošću, moguće je dodavati još varijabla Brisanje povezanih funkcija na Action i Filter funkcije Brisanje povezanih funkcija može se izvršiti sa naredbama 1 2
remove_filter("ime_filtra","ime_funkcije_za_brisanje"); remove_action("ime_actiona","ime_funkcije_za_brisanje");
Izrada WordPress teme Instaliranje XAMPP-a i podešavanje WordPress-a Kako bi lokalno mogli koristiti WordPress potrebno je imati svoj lokalni server i bazu podataka. Pri izradi ove knjige koristit će se XAMPP paket koji se može skinuti sa stranice apachefriends.org¹⁴. Skinite njihov installer i instalirajte svoj XAMPP paket (pri instaliranju odaberite što sve hoćete instalirati, apache, mysql i php se moraju instalirati, poželjan je i phpmyadmin). Nakon instalacije XAMPP-a otiđite do svojeg skinutog WordPress-a i raspakirajte WordPress u XAMPP folder htdocs.
Raspakirani WordPress u folderu htdocs
Pripazite samo da WordPress folder nema u sebi još jedan folder već da je nakon njega cijeli WordPress. ¹⁴http://www.apachefriends.org/index.html
32
Izrada WordPress teme
Cjelokupni WordPress u folderu Wordpress
Nakon toga potrebno je upaliti XAMPP i pokrenuti APACHE i MySQL Server.
wordpre Zatim je potrebno otići na phpmyadmin¹⁵ te napraviti novu bazu za WordPress. Odemo na navigaciju Databases i upišemo željeni naziv baze podataka, odaberemo iz padajućeg izbornika utf8_general_ci i kliknemo na Create. ¹⁵http://localhost/phpmyadmin/
33
Izrada WordPress teme
Pravljenje nove baze podataka
Sada je potrebno otvoriti iz našeg raspakiranog WordPress foldera u htdocs folderu datoteku wp-config-sample.php. Kada ste otvorili wp-config-sample.php u vašem editoru, potrebno je promijeniti neke podatke, a oni jesu: 1 2 3 4 5 6 7 8 9 10 11 12
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', 'database_name_here'); /** MySQL database username */ define('DB_USER', 'username_here'); /** MySQL database password */ define('DB_PASSWORD', 'password_here'); /** MySQL hostname */ define('DB_HOST', 'localhost');
Zamijenimo li prve tri definicije sa svojim podacima dobiti ćemo sljedeće: 1 2 3 4 5 6 7 8 9 10 11 12
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', 'wordpress'); /** MySQL database username */ define('DB_USER', 'root'); /** MySQL database password */ define('DB_PASSWORD', ''); /** MySQL hostname */ define('DB_HOST', 'localhost');
Sada tu datoteku spremite kao wp-config.php.
34
Izrada WordPress teme
Instalacija WordPress-a Nakon što smo zamijenili potrebne podatke i podesili naš wp-config.php potrebno je instalirati WordPress na našem serveru. Ako pristupite sada adresi http://localhost/wordpress (ili kako ste već Vi nazvali Vaš web) dobiti ćete instalacijsku stranicu WordPress-a. Popunite je osnovim informacijama kao što je Vaše korisničko ime i lozinka.
WordPress Instalacijska stranica 1
Nakon što ispunite sve potrebne informacije kao username i password možete krenuti na sljedeći korak i kliknuti Install WordPress. Sada će WordPress napraviti sve potrebne tablice i napuniti osnovnim informacijama. Nakon što se sve to dogodi, trebali bi dobiti informaciju kako ste uspješno instalirali WordPress.
35
Izrada WordPress teme
WordPress Instalacijska stranica 2
Sada se možete prijaviti klikom na Log In. Ako posjetite opet svoju početnu stranicu http://localhost/wordpress/ dobiti ćete pravu web stranicu koju pogoni WordPress, te temu koju vidite je početna tema koja dolazi s WordPress-om.
WordPress Početna
Spremni ste za izradu teme na WordPress-u!
Početna struktura projekta U poglavlju Upoznavanje s WordPress-om saznali smo da za temu je dovoljno imati index.php i style.css sa svim informacijama vezanim uz temu. U folderu gdje smo kopirali cijeli WordPress, potrebno je otići u wp-content/themes i otvoriti novi folder kojeg ćemo nazvati wpb3.
36
Izrada WordPress teme
WordPress wp-content folder
Sada u tom folderu napravite folder wpb3 i otvorite ga.
WordPress wpb3 folder
Unutar tog foldera kopirat ćemo sadržaj Bootstrap 3 template SOLID koji smo skinuli u poglavlju Upoznavanje sa Bootstrap-om - Odabir Template-a. Ako ga niste skinuli, možete ga skinuti na ovdje¹⁶.
WordPress wpb3 folder sa kopiranim sadržajem SOLID-a
Kako bi ovu temu mogli odabrati u WordPress administraciji, potrebno je stvoriti index.php i style.css. Sadržaj index.php-a može trenutno biti samo nekakav tekst kao: 1
WordPress na Bootstrap 3.x
Nakon index.php-a, stvorite style.css i kopirajte sljedeći kod unutar te datoteke: ¹⁶http://www.blacktie.co/2014/05/solid-multipurpose-theme/
37
Izrada WordPress teme
1 2 3 4 5 6 7 8 9 10 11 12 13
/* Theme Name: WPB3 Theme URI: https://leanpub.com/wpb3/ Author: Igor Benić Author URI: https://leanpub.com/u/igorbenic Description: WordPress tema izrađena prema knjizi WordPress na Bootstrap-u 3.x Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: blue, gray, wite, flat, custom-post-type, portfolio, blog Text Domain: wpb3 */
Ove podatke WordPress će koristiti za prikazivanje u WordPress administraciji kod odabira teme te dodatne informacije kao tagovi bi koristio kod pretraživanja tema u WordPress-ovoj arhivi tema. Ulogirajte se, ako već niste, u WordPress administraciji (/wp-admin.php) i odite na Appearance > Themes. Trebali bi u popisu tema vidjeti jednu temu bez slike s nazivom WPB3. Ako pređete mišem preko nje, dobiti ćete sljedeću sliku:
Odabir tema u administraciji - WPB3 tema
Sada kada je možemo odabrati, aktivirajte je pritiskom na Activate. Sada ako otvorite vašu stranicu na front-u (npr. localhost/wordpress) dobiti ćete tekst koji smo unijeli u datoteci index.php.
WPB3 tema početna
Izrada WordPress teme
38
Functions.php Uz style.css i index.php najbolje je odmah na početku stvoriti još jednu datoteku, a to je functions.php koja po WordPress Codex-u, unutar teme služi kao plugin koji na frontu i u administraciji se učitava kako bi izvršila funkcije dodane unutar nje koje se direktno odnose na aktiviranu temu. To može biti dodavanje dodatnih opcija za definiranje izgleda teme unutar administracije, pravljenje različitih tipova članaka, definiranje dimenzija slika i sl. Neke od opcija za temu koju WordPress daje jesu tzv. Theme Features¹⁷. Stvorite functions.php i unutar te datoteke unesite sljedeće: 1 2 3 4 5 6 7 8 9 10 11
>
View more...
Comments
