WordPress na Bootstrap 3.x
-
Upload
ratkosolaja -
Category
Documents
-
view
252 -
download
5
Transcript of WordPress na Bootstrap 3.x
-
7/24/2019 WordPress na Bootstrap 3.x
1/284
-
7/24/2019 WordPress na Bootstrap 3.x
2/284
WPB3 - Wordpress na Bootstrapu 3.xKako napraviti svoj prvi Wordpress projekt koristei
Bootstrap Framework
Igor Beni
This book is for sale athttp://leanpub.com/wpb3
This version was published on 2014-09-22
This is aLeanpubbook. Leanpub empowers authors and publishers with the Lean Publishingprocess.Lean Publishingis the act of publishing an in-progress ebook using lightweight toolsand many iterations to get reader feedback, pivot until you have the right book and buildtraction once you do.
2014 Igor Beni
http://leanpub.com/manifestohttp://leanpub.com/http://leanpub.com/wpb3 -
7/24/2019 WordPress na Bootstrap 3.x
3/284
Tweet This Book!Please help Igor Beni by spreading the word about this book onTwitter!
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 thishashtag on Twitter:
https://twitter.com/search?q=#wpb3
https://twitter.com/search?q=%23wpb3https://twitter.com/search?q=%23wpb3http://twitter.com/ -
7/24/2019 WordPress na Bootstrap 3.x
4/284
Sadraj
Predgovor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Upoznavanje sa Bootstrap Frameworkom . . . . . . . . . . . . . . . . . . . . . . . . . 2Koritenje Bootstrap-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Responzivne slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4CSS Komponente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Prilagoen Boostrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Napredno prilagoavanje Bootstrapa . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Raspakirani Bootstrap Izvorni kod . . . . . . . . . . . . . . . . . . . . . . . . . . 11Koritenje less-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Prepros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Kompajliranje Less-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Pozivanje i mapiranje Preprosom . . . . . . . . . . . . . . . . . . . . . . . 16
Izmjena Bootstrap.less-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Odabir Template-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Upoznavanje WordPress-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Koncept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Instalacija WordPress-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Poetne datoteke jedne teme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Razumijevanje hijerarhije datoteka . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Glavna petlja - The Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Action i Filter funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Izrada WordPress teme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Instaliranje XAMPP-a i podeavanje WordPress-a . . . . . . . . . . . . . . . . . . . . 31
Instalacija WordPress-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Poetna struktura projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Functions.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Header i footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Povezivanje header-a i footer-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Izrada Bloga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Povezivanje CSS datoteka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Povezivanje Javascript datoteka . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
-
7/24/2019 WordPress na Bootstrap 3.x
5/284
SADRAJ
Izrada Navigacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47WordPress Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Prikaz WordPress Menu-a . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Naziv stranice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Razmak izmeu naslova i navigacije . . . . . . . . . . . . . . . . . . . . . . . . . 54Struktura bloga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Lista lanaka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
WordPress Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Slika lanka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Prikazivanje slike lanka . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Pojedini lanak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Dijeljenje sadraja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Sporedni sadraj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
Pozivanje i prikaz sidebar-a . . . . . . . . . . . . . . . . . . . . . . . . . . 74Dodavanje widget-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Izrada Widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Lista kategorija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Registriranje widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Prikaz Category widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Izrada widgeta za posljednje lanke . . . . . . . . . . . . . . . . . . . . . . . . . . 89
Prikazivanje naslova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Prikazivanje posljednjih lanaka . . . . . . . . . . . . . . . . . . . . . . . . 92
Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Izrada Widgeta za Tagove . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Struktura footera i pozivanje sidebar-a . . . . . . . . . . . . . . . . . . . . 101Widget About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Widget Social Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Polja za unos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104Spremanje vrijednosti . . . . . . . . . . . . . . . . . . . . . . . . . . 106
Prikaz widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Registriranje widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . 108Unos Widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
Widget Our Bunker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Bootstrap na blogu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110
Glavni Sadraj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111
Responzivne slike lanka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Promjena HTML kod od thumbnail-ova . . . . . . . . . . . . . . . . . . . . . . . 113Dodatni CSS za resize slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Dodatne datoteke stranica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Datoteka page.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
-
7/24/2019 WordPress na Bootstrap 3.x
6/284
SADRAJ
Stranice bez sidebar-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118Datoteka 404.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
Dodavanje komentara na lanke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121Sreivanje komentara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
Napredna izrada WordPress teme: Portfolio . . . . . . . . . . . . . . . . . . . . . . . . 128Dizajn i funkcionalnost . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128Plan izrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128
Stranica koja prikazuje sve projekte . . . . . . . . . . . . . . . . . . . . . . . . . . 129Stranica pojedinog projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
Custom Post Type: portfolio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129Kategorija - Custom Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Tagovi - Custom Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Dodavanje Meta Box-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Dodavanje polja za unos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134Spremanje unesenih vrijednosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135Dodavanje slika za projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Nova dimenzija slika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Custom Template: Portfolio Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Pretvorba SOLID Portfolia u WordPress Portfolio . . . . . . . . . . . . . . . . . . 139Pojedini projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144
Slider slika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147Tekst projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149Detalji projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Povezani projekti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Responzivne slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Filtriranje projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Napredna izrada WordPress teme: Business . . . . . . . . . . . . . . . . . . . . . . . . 165Plan izrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Poetna stranica: Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Feature dio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169Dodavanje Metaboxa i polja za unos . . . . . . . . . . . . . . . . . . . . . 171Spremanje Metaboxa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172Ispis feature-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Ispis posljednjih projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176O agenciji, FAQ i posljednji lanci . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Registracija novih prostora za widgete . . . . . . . . . . . . . . . . . . . . 178Postavljanje HTML-a i pozivanje prostora za widgete . . . . . . . . . . . . 179Widget za prikaz jedne stranice . . . . . . . . . . . . . . . . . . . . . . . . 181Widget za prikaz posljednjih lanaka sa razliitim post_type sadrajem . . 184
FAQ post type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Testimonials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Ispis Testimoniala . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194Ispis Klijenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199
Dodavanje polja u media uploader-u . . . . . . . . . . . . . . . . . . . . . 200
-
7/24/2019 WordPress na Bootstrap 3.x
7/284
SADRAJ
Spremanje polja u media uploader-u . . . . . . . . . . . . . . . . . . . . . 201Ispis slika za klijente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Sreivanje uvodne slika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Sreivanje Testimonial dijela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Custom Template: About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205Ispis sadraja stranice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206lanovi tima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Dodavanje dodatnih unosa preko metaboxa . . . . . . . . . . . . . . . . . . . . . 209Spremanje dodatnog unosa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
Ispisivanje poruke prilikom greke kod unosa . . . . . . . . . . . . . . . . . 212Ispisivanje lanova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213Testimonials i slike klijenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Custom Template: Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217Sporedni sadraj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
Forma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Koritenje WordPress Customizer-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Izrada opcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Izrada Sekcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Izrada Kontrole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Ispis vrijednosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Promjene u stvarnom vremenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Customizer klasa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226Promjena naslova stranice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229
Dodavanje sekcije Header i opcije za pozadinu navigacije . . . . . . . . . . . . . . . . 229Dodavanje opcije za boju poveznica . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231Dodavanje opcije za boju aktivne poveznice . . . . . . . . . . . . . . . . . . . . . . . . 232Dodavanje polja za otvoreni dropdown . . . . . . . . . . . . . . . . . . . . . . . . . . 234Dodavanje opcije za mijenjanje pozadine padajuih izbornika . . . . . . . . . . . . . . 235Dodavanje opcije za mijenjanje pozadine aktivne poveznice u padajuem izborniku . . 236Dodavanje sekcije za Footer i opciju za pozadinu footer-a . . . . . . . . . . . . . . . . 237Dodavanje opcije za boju teksta u footer-u . . . . . . . . . . . . . . . . . . . . . . . . 238Dodavanje opcije za heading u footer-u . . . . . . . . . . . . . . . . . . . . . . . . . . 239
Opcije (Settings API) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Dodavanje sekcije (Settings Section) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242Dodavanje polja (Settings Field) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Dodavanje opcije (Setting) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Prikaz polja i sekcija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Izmjena prikaza testimonialsa i slike klijenata . . . . . . . . . . . . . . . . . . . . . . . 246
Koritenje AJAX-a u WordPress-u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248AJAX u administrativnom dijelu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Dodavanje elemenata preko AJAX-a . . . . . . . . . . . . . . . . . . . . . . . . . 249Prikaz dodanih elemenata u widgetu . . . . . . . . . . . . . . . . . . . . . . . . . 254
AJAX na javnoj strani (Front End) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256Postavljanje gumba za ocjenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256
-
7/24/2019 WordPress na Bootstrap 3.x
8/284
SADRAJ
Postavljanje jQuery funkcije za AJAX . . . . . . . . . . . . . . . . . . . . . . . . 257Funkcije za poveavanje ili smanjivanje ocjene . . . . . . . . . . . . . . . . . . . 259Sreivanje javnog dijela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
A Dodatak: WordPress - Bootstrap NavWalker . . . . . . . . . . . . . . . . . . . . . . 264
B Dodatak: Osnove PHP-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270Varijable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270Polja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Kljuevi u poljima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271Izvlaenje vrijednosti iz polja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Petlje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272For petlja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272While petlja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Do-While petlja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Grananje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274
Popust na Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
-
7/24/2019 WordPress na Bootstrap 3.x
9/284
PredgovorWordPress je jedan od vodeih CMS sustava u Blogging svijetu pa i ire. Danas se WordPresssve vie koristi kod izrada raznih web aplikacija koje su daleko kompleksnije od jednog bloga zato je WordPress u poetku bio namijenjen.
Ova knjiga namijenjena je za sve developere, a i dizajnere koji se ele okuati u WordPress-ui nauiti kako izraditi jedan mali projekt u WordPress-u. Knjiga WordPress na Bootstrapu 3.xmoe pomoi i iskusnijim developerima koji su ve radili u WordPressu jer e uz izradu sameWordPress teme biti koritene i neke druge korisne metode odnosno funkcije koje mijenjaju nekefunkcije u samom CMS-u.
-
7/24/2019 WordPress na Bootstrap 3.x
10/284
Upoznavanje sa BootstrapFrameworkomBootstrap je Framework za bru izradu web stranica pomou njegovih unaprijed definiranih sti-lova, elemenata, komponenti te funkcionalnosti. Kako bi mogli izraditi WordPress na Bootstrap-upotrebno je najprije upoznati se sa samim Frameworkom. Verzija Bootstrap-a u trenutku pisanjaove knjige je 3.2.0. Ovaj Framework moete skinuti ili se s njime poblie upoznati na njegovojstranicihttp://getbootstrap.com.
slika
Koritenje Bootstrap-a
Bootstrap je veoma jednostavan za koristiti. Dovoljno je pozvati njegove datoteke i prizivatiodnosno dodavati komponente koje su nam potrebne. Na takav nain jednostavno je dodati parredaka sa strukturom koja sadri klase koje Bootstrap koristi.
Grid
Grid je naa struktura stranice. Njime se definira na layout u koji se zatim dodaju raznekomponente Bootstrap-a. Poetna struktura sastoji se od tri dijelova - container,rowi column.Unutarcolumn-a unosimo sadraj.
http://getbootstrap.com
http://getbootstrap.com/http://getbootstrap.com/ -
7/24/2019 WordPress na Bootstrap 3.x
11/284
Upoznavanje sa Bootstrap Frameworkom 3
Klasina struktura jednog bloga je lijevi dio s glavnim sadrajem i desnim dijelom s nekimdodatnim sporednim informacijama. To bi se postiglo sa sljedeim kodom:
1 2
3
4 Glavni sadraj
5
6
7 Sporedni sadraj
8
9
10
Jedan redak sastoji se od 12 stupaca. Ovakvom strukturom rekli smo da na glavni sadraj koristi8/12 prostora retka, dok sporedni sadraj koristi 4/12 prostora, to ukupno daje 12 stupaca.
Bootstrap je responzivan pa tako ima i svoje toke prekidanja (eng. breakpoint) na kojima sesadraj lomi, presavija i sl. Te toke podefault-u su< 768px,>= 768,>= 992pxi>= 1200px. Ovetoke prekidanja odnose se na irinu ekrana na kojemu se web prikazuje. Na nain na koji jenapravljen Bootstrap odnosno na nain na koji su postavljene toke prekidanja, radi se s Mobile-First Frameworkom te zbog toga ne vidimo nigdje toke prekidanja koje gledaju na< 481pxjerse smatra da se za to definira sadraj u poetku.
Upravo zbog tih toaka prekidanja postoje razliite klasexs,sm,md,lg. Klasusmmoete vidjetiu gornjem primjeru. To znai da e sadraj iznad768pxbiti prikazan upravo u ovakvoj strukturi,dok sadraj ispod te irine, koji zahtjeva klasu xs za dodatnu definiciju strukture e biti jedanispod drugog sa irinom namjetenom na 12/12 odnosno svaki stupac biti e jednak irini 12stupaca tj. na 100% irine jer nema definiranu strukturu za tu irinu. Isti uinak dobili bi kada binapisali sljedee:
1
2
3
4 Glavni sadraj
5
6
7 Sporedni sadraj
8
9
10
Vie o gridu moete saznati naBootstrap Grid.
http://getbootstrap.com/css/#grid
http://getbootstrap.com/css/#gridhttp://getbootstrap.com/css/#grid -
7/24/2019 WordPress na Bootstrap 3.x
12/284
Upoznavanje sa Bootstrap Frameworkom 4
Responzivne slike
Bootstrap 3 prua jednostavan nain za postizanje responzivnih slika. Dovoljno je za slikudodatni klasu .responsive-imgkako bi ona dobila irinu elementa u kojemu se nalazi te se skaliralatj. mijenjala dimenzija u ovisnosti o elementu u kojemu se nalazi.
1
O jednostavnim CSS dijelovima koje omoguuje Bootstrap 3 vie moete pronai naBootstrapCSS.
CSS Komponente
Uz jednostavne CSS klase koje omoguuju lake slaganje Bootstrap prua i dodatne kompleksnijeCSS komponente koje mogu posluiti za to bri razvoj nekakvih modula kao to je npr. navigacijai jo uz to, responzivna navigacija koja se na manjim ekranima otvara na klik. Sve to je potrebnoje kopirati i zalijepiti sljedei kod:
1
2
3
4
5 7 Toggle navigation
8
9
10
11
12 Logo Tekst ili Slika
13
14
15
16
17
18 Link
19 Jo jedan Link
20
21
22 Padajui izbornik
23
24 Jedan link
25 Drugi link
26 Trei Link
http://getbootstrap.com/css/
http://getbootstrap.com/css/http://getbootstrap.com/css/http://getbootstrap.com/css/ -
7/24/2019 WordPress na Bootstrap 3.x
13/284
Upoznavanje sa Bootstrap Frameworkom 5
27
28 Odijeljeni Link
29
30 Odijeljeni Link No. 2
31
32
33
34
35
36
Uz ovakav kod dobiti emo meni s padajuim izbornikom koji se otvara na klik miem ili prstomako koristimo mobitel ili tablet.
Bootstrap Navigacija
Ista navigacija s otvorenim padajuim izbornikom:
Bootstrap Navigacija i padajui zbornik
Kako bi ovaj padajui zbornik mogao funkcionirati kako spada potrebno je koristiti javascriptpluginove koje prua Bootstrap 3. Plugin koji se ovdje koristi je tzv. collapse.
Sve ostale CSS Komponente moete pronai naBootstrap CSS Komponente.
Javascript
Kao to je prikazano u prethodnom poglavlju s navigacijom, Bootstrap dolazi zapakiran i sJavascript pluginovima koji daju dodatne funkcionalnosti. Na takav nain moemo lako pozvatineke dijelove s CSS klasama i HTML atributima koje izvravaju dodatne funkcionalnosti jer suusko povezane s pluginovima, kao to je npr.carousel plugin.
http://getbootstrap.com/componentshttp://getbootstrap.com/javascript/#carousel
http://getbootstrap.com/javascript/#carouselhttp://getbootstrap.com/componentshttp://getbootstrap.com/javascript/#carouselhttp://getbootstrap.com/components -
7/24/2019 WordPress na Bootstrap 3.x
14/284
Upoznavanje sa Bootstrap Frameworkom 6
Dovoljno je uzeti njihov kod iz primjera, prilagoditi ga malo i dobiti emo funkcionalan slider.
1 3
4
5
7
8
9
10
11
12
13
14
15 Ovo je slider
16
17 ...sdasdsadada
18
19
20 sadijasidjaidsjaidjas
21
22
23
24
25 Ovo je slider
26
27 ...sdasdsadada
28
29
30 sadijasidjaidsjaidjas
31
32
3334
35
37
38
39
41
42
43
-
7/24/2019 WordPress na Bootstrap 3.x
15/284
Upoznavanje sa Bootstrap Frameworkom 7
Sada to izgleda kao ovo:
Carousel Slider
Uz takve pluginove mogue je nadodati dosta zanimljivih i korisnih funkcionalnosti. O njimamoete vie proitati naBootstrap Javascript.
Prilagoen Boostrap
Bootstrap na svojoj web stranici daje mogunost prilagoavanja Bootstrap-a svojim eljamai potrebama. Dakle, mogue je namjetati razne varijable od boja do veliina fonta kakobi si kasnije olakati izradu tema na Boostrap-u. To je mogue na njihovoj stranici: ht-
tp://getbootstrap.com/customize/.
Ako poznajemo potrebe naeg projekta mogue je ovdje postaviti sve potrebne postavke teodabrati samo one Javascript pluginove koji su nam potrebni u tome projektu kako ne bi uzimalikomponente koje nam nisu potrebne i tako podizali veliinu naeg projekta bez razloga.
Recimo na primjer da sve to nam treba od Bootstrap-a je njegov Grid i neto responzivnih cssklasa. Dovoljno je kliknuti na Toggle All i odabrati samoGridiResponsive utilitieskao na sliciispod.
http://getbootstrap.com/javascripthttp://getbootstrap.com/customize/
http://getbootstrap.com/customize/http://getbootstrap.com/javascripthttp://getbootstrap.com/customize/http://getbootstrap.com/customize/http://getbootstrap.com/javascript -
7/24/2019 WordPress na Bootstrap 3.x
16/284
Upoznavanje sa Bootstrap Frameworkom 8
Prilagoeni Bootstrap
Ako su nam potrebne svi ili pojedini jQuery plugini malo ispod ovihLess datotekapotrebno jena isti nain odabrati eljene jQuery pluginove ili ostaviti kako je.
Nakon toga moemo prilagoditiGridnaim potrebama mijenjajui vrijednosti varijabla koje seodnose na Grid.
-
7/24/2019 WordPress na Bootstrap 3.x
17/284
Upoznavanje sa Bootstrap Frameworkom 9
Prilagoeni Bootstrap
Nakon to smo promijenili sve to je trebalo promijeniti treba pritisnuti na Compile andDownloadi dobiti emo u .zip formatu datoteku koju je potrebno skinuti te koja sadri nae.css datoteke i .js datoteke.
Nakon toga potrebno je polinkati nau web stranicu s tim datotekama i moemo je jednostavnorazvijati na Bootstrap 3 Framework-u.
Napredno prilagoavanje Bootstrapa
Uz njihov alat za prilagoavanje Bootstrap-a, mogue je skinuti Bootstrap u izvornom formatu
odnosno u .less formatu. ### to je Less? Less je pretprocesor za CSS koji omoguava jednostavni-je pisanje CSS-a koristei grananja, varijable i ostale razne pogodnosti kako bi se ubrzalo pisanjeCSS-a. Nakon toga kompajlira se takva datoteka u .css format koja moe biti i kompresirana nanajmanju moguu veliinu. Time dobivamo bri i lako odrivi CSS.
Mali primjer Less-a
.less datoteka
-
7/24/2019 WordPress na Bootstrap 3.x
18/284
Upoznavanje sa Bootstrap Frameworkom 10
1 @crvena_boja: red;
2
3 a { color:black;
4
5 &:hover {
6 color: @crvena_boja;
7 }
8
9 }
10
11 .lista {
12 padding:0;
13
14 li {
15 float:left;16 display:block;
17 }
18 }
.css datoteka
1 a { color:black; }
2
3 a:hover { color: red; }
4
5 .lista { padding:0; }
6 .lista li { float:left; display:block; }
Moe se primijetiti da se grananjem i koritenjem varijabli utedjelo na pisanju ponavljajuihklasa ili boja i sl.
Uz Less, Bootstrap omoguuje koritenjeSass-a koji je takoer jedan od pretprocesora CSS-a, aliLessje njihov izvorni jezik pa u se drati toga u ovoj knjizi.
Kako bi dobili cijeli Bootstrap 3 u izvornom obliku sa lessdatotekama potrebno je odabratiDownload Source.
-
7/24/2019 WordPress na Bootstrap 3.x
19/284
Upoznavanje sa Bootstrap Frameworkom 11
.
Raspakirani Bootstrap Izvorni kod
Ako ste skinuli tj. preuzeli Bootstrap izvorni kod i raspakirali njihovu .zip datoteku, dobili steneto slino ovome:
Izvorna datoteka
Ako otvorite prvi direktorij kao na slicidistvidjet ete isto ono to bi dobili ako kompajliratebootstrap preko njihovog alata na stranici (css,fonti jsdirektorije) uz jo neke dodatne datotekekoje Vam ne slue ako ne koristite Grunt ili neto slino. Kako je ova knjiga zamiljena kaoprirunik za poetnike ili one koji se ve bave ovom strukom, preskoit emo alate kaoGrunt
i fokusirati se na to jednostavniji pristup kako bi mogli obavljati ono najbitnije, a to je pravitiWordPress temu iz Bootstrap-a.
-
7/24/2019 WordPress na Bootstrap 3.x
20/284
Upoznavanje sa Bootstrap Frameworkom 12
Ako ponovno bacimo pogled na poetni direktorij osvrnimo se na ono najbitnije u ovomepoglavlju, a to jelessdirektorij. Kada bi uzeli taj direktorij uzfontsijsdobili bi pravi Bootstrap-ov nekompilirani kod jer ulessdirektoriju nalaze se raznelessdatoteke dok se ujs direktorijunalaze raznejsdatoteke. Sve te datoteke u sebi sadri neki dio css-a odnosno js-a koji su potrebnibi Bootstrap bio Bootstrap.
Koritenje less-a
Kako je less preprocesor CSS-a potrebno je koristiti dodatne stvari kako bi mogli iz less-a dobiticss. Iako je to moguu i preko obine javascript datoteke koja ita less datoteke i pretvara to u cssradi produkcije bolje je odmah raditi pretvorbu less-a u css i to prikazati na webu bez dodatnihkomplikacija.
Kako to napraviti?Dosta jednostavno, mogu se koristiti alati poput Grunt-akoji rade preko
terminala odnosno komande linije (command prompt) ili moete koristiti GUI (eng. GraphicUser Interface) alate koji obavljaju istu stvar kao Grunt. Jedan takav alat jePrepros.
Prepros
Prepros
Za osobnu upotrebu dovoljna je i besplatna verzija. Skinite je i instalirajte kao svaki drugiprogram. Mogue da donja slika nee biti ista kao i vaa jer se verzija ve podigla odnosnokao 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/
http://alphapixels.com/prepros/http://gruntjs.com/http://alphapixels.com/prepros/http://gruntjs.com/ -
7/24/2019 WordPress na Bootstrap 3.x
21/284
Upoznavanje sa Bootstrap Frameworkom 13
Nakon to ste instalirali prepros moete ga otvoriti i dobiti ete prazandashboardgdje se inaepokazuju svi otvoreni projekti. Lista projekata moe izgledati kao sljedea lista:
Prepros Lista Projekata
U lijevom stupcu nalaze se svi projekti dok u desnom stupcu se za odabrani projekt prikazuju svedatoteke koje Prepros prepoznaje i koje moe kompajlirati. Uz sliku koja pokazuje vrstu datoteke,desno od nje pokazuje naslov datoteke, ispod naslova je putanja do te datoteke te zadnji redpokazuje gdje e se kompajlirati navedena less datoteka.
Kompajliranje Less-a
Sada kada smo se upoznali malo s Less-om i nainom rada nema boljega nego pokuati upravoto i napraviti kako bi jo bolje razumjeli ukupni proces rada. Kopirajte sada prethodno navedenedirektorije iz vaeg 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
-
7/24/2019 WordPress na Bootstrap 3.x
22/284
Upoznavanje sa Bootstrap Frameworkom 14
Sada prije kompajliranja less-a, otvorimo direktorij i u vaem najdraem editoru kao to jeNotepad++,BracketsiliSublime Textotvorite datotekubootstrap.less. Moe se primijetiti kakosu sve ostale .less datotekeimportiraneunutar ove datoteke.
1 // Core variables and mixins
2 @import "variables.less";
3 @import "mixins.less";
4
5 // Reset
6 @import "normalize.less";
7 @import "print.less";
8
9 // Core CSS
10 @import "scaffolding.less";
11 @import "type.less";
12 @import "code.less";
13 @import "grid.less";
14 @import "tables.less";
15 @import "forms.less";
16 @import "buttons.less";
17
18 // Components
19 @import "component-animations.less";
20 @import "glyphicons.less";
21 @import "dropdowns.less";22 @import "button-groups.less";
23 @import "input-groups.less";
24 @import "navs.less";
25 @import "navbar.less";
26 @import "breadcrumbs.less";
27 @import "pagination.less";
28 @import "pager.less";
29 @import "labels.less";
30 @import "badges.less";
31 @import "jumbotron.less";32 @import "thumbnails.less";
33 @import "alerts.less";
34 @import "progress-bars.less";
35 @import "media.less";
36 @import "list-group.less";
37 @import "panels.less";
38 @import "wells.less";
39 @import "close.less";
40
41 // Components w/ JavaScript
42 @import "modals.less";
-
7/24/2019 WordPress na Bootstrap 3.x
23/284
Upoznavanje sa Bootstrap Frameworkom 15
43 @import "tooltip.less";
44 @import "popovers.less";
45 @import "carousel.less";
46
47 // Utility classes
48 @import "utilities.less";
49 @import "responsive-utilities.less";
To znai da e se kada kompajliramo bootstrap.less datoteku, u biti kompajlirate sve ovdjenavedene .less datoteke. Jednako tako mogu se varijable koje su definirane na jednom mjestu ko-ristiti i u drugim datotekama bez ponovnog definiranja, kao to su varijable unutar variable.lessdatoteke. Varijable su oznaene tako da poinju sa znakom @.
1 //2 // Variables
3 // --------------------------------------------------
4
5
6 //== Colors
7 //
8 //## Gray and brand colors for use across Bootstrap.
9
10 @gray-darker: lighten(#000, 13.5%); // #222
11 @gray-dark: lighten(#000, 20%); // #333
12 @gray: lighten(#000, 33.5%); // #555
13 @gray-light: lighten(#000, 60%); // #999
14 @gray-lighter: lighten(#000, 93.5%); // #eee
15
16 @brand-primary: #428bca;
17 @brand-success: #5cb85c;
18 @brand-info: #5bc0de;
19 @brand-warning: #f0ad4e;
20 @brand-danger: #d9534f;
21
22 ...
Ovdje se mogu vidjeti neke varijable koje se koriste za boje iako se u daljem sadraju ove datotekenalaze varijable za sva ostala mogua css svojstva. Takve varijable se dalje koriste u drugimdatotekama iako nisu opet definirane.
Upravo zbog toga, ako pogledate u prethodno navedeni sadraj datoteke bootstrap.less, moe seprimijetiti da je upravo datoteka variables.less navedena na poetku. Ako sada otvorimo nekudrugu datoteku poputnavbar.lessmogu se vidjeti i neke druge varijable koje su koritene a nisudefinirane prije koritenja.
-
7/24/2019 WordPress na Bootstrap 3.x
24/284
Upoznavanje sa Bootstrap Frameworkom 16
1 //
2 // Navbars
3 // --------------------------------------------------
4
5
6 // Wrapper and base class
7 //
8 // Provide a static navbar from which we expand to create full-width, fixed, \
9 and
10 // other navbar variations.
11
12 .navbar {
13 position: relative;
14 min-height: @navbar-height; // Ensure a navbar always shows (e.g., without \
15 a .navbar-brand in collapsed mode)16 margin-bottom: @navbar-margin-bottom;
17 border: 1px solid transparent;
18
19 // Prevent floats from breaking the navbar
20 &:extend(.clearfix all);
21
22 @media (min-width: @grid-float-breakpoint) {
23 border-radius: @navbar-border-radius;
24 }
25 }
Pozivanje i mapiranje Preprosom
Sada kada znamo kako e se kompajlirati less, pozovimo upravo bootstrap.less u Prepros-u ipostavimo putanju gdje e se kompajlirati. Za poetak, potrebno je dodati projekt klikom naAdd New Projectte zatim odabrati direktorij u kojem se nalazelessdatoteke.
-
7/24/2019 WordPress na Bootstrap 3.x
25/284
Upoznavanje sa Bootstrap Frameworkom 17
Dodavanje projekta u Prepros-u
Nakon to smo odabrali direktorij i kliknuliOK, Prepros je dodao taj direktorij kao novi projekti odmah pokazao datoteke koje e kompajlirati uz automatski generirane putanje.
-
7/24/2019 WordPress na Bootstrap 3.x
26/284
Upoznavanje sa Bootstrap Frameworkom 18
Dodani projekt
Ukoliko elimo imati neku drugu putanju to lako moemo i napraviti. Za ovaj primjer postavimodabootstrap.lessse kompajlira direktono u na direktorijtestu style.css. Potrebno je kliknutiprvo na putanju koja se automatski generirala ispod bootstrap.lessdatoteke. Nakon klika, dobitiemo direktorij unutar kojega se nalazi datotekabootstrap.less.
-
7/24/2019 WordPress na Bootstrap 3.x
27/284
Upoznavanje sa Bootstrap Frameworkom 19
Promjena putanje
Nakon toga, potrebno je otii u direktorij iznad i napisati da se sprema u style.css.
-
7/24/2019 WordPress na Bootstrap 3.x
28/284
Upoznavanje sa Bootstrap Frameworkom 20
Definirana putanja
Sada kada kliknemo na save, promijeniti e se putanja u listi datoteka.
-
7/24/2019 WordPress na Bootstrap 3.x
29/284
Upoznavanje sa Bootstrap Frameworkom 21
Promijenjena putanja
Sada je dovoljno odabrati bootsptrap.less i kliknuti na Compile ili istu tu datoteku Spremitiprekovaeg omiljenog editora.
-
7/24/2019 WordPress na Bootstrap 3.x
30/284
Upoznavanje sa Bootstrap Frameworkom 22
Prepros Compile
Ako je sve ispravno napisano Prepros e spremiti nove promjene u style.css te ukoliko ne postojistvoriti e tu datoteku umjesto Vas.
Kompilirana datoteka
Izmjena Bootstrap.less-a
to ako nam neto nije potrebno sada u tome? To moemo jednostavno promijeniti bez potrebeza koritenjem njihovog alata za kompajliranje ve je dovoljno samo maknuti neke .less datotekekoje nam ne trebaju.To je vezano za CSS, dok za JS isti postupak se koristi za kompajliranjeJS-a sa Preprosom.
Ako pogledamo novo kompajlirani style.css, na poetku se vidi:
-
7/24/2019 WordPress na Bootstrap 3.x
31/284
Upoznavanje sa Bootstrap Frameworkom 23
1 *! normalize.css v3.0.0 | MIT License | git.io/normalize */
2 html {
3 font-family: sans-serif;
4 -ms-text-size-adjust: 100%;
5 -webkit-text-size-adjust: 100%;
6 }
7 body {
8 margin: 0;
9 }
10 article,
11 aside,
12 details,
13 ...
Sada ako zakomentiramo ili maknemo @import normalize.less i kliknemo CompileiliSavepreko naeg editora dobiti emo novi style.css ali bez tog dijela. Sada je poetak style.css datotekesljedei dio koda:
1 @media print {
2 * {
3 text-shadow: none !important;
4 color: #000 !important;
5 background: transparent !important;
6 box-shadow: none !important;
7 }
8 a,
9 a:visited {
10 text-decoration: underline;
11 }
12 a[href]:after {
13 content: " (" attr(href) ")";
14 }
15 ...
Moete primijetiti kako je jednostavno koritenjem less-a i Preprosa micati i dodavati nove ilistare 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 prouili kompo-nente Bootstrap-a upoznati ste i s nekim komponentama Bootstrap-a koje emo vidjeti u raznimtemplate-ima.
Iako postoje razni kvalitetnipremiumtemplate-i, odabrat emo jednostavniji i jeftiniji pristup teuz kratku pretragu po Google-u mogu se pronai kvalitetni besplatni template-i.
-
7/24/2019 WordPress na Bootstrap 3.x
32/284
Upoznavanje sa Bootstrap Frameworkom 24
Ja sam u Google upisaoFree Bootstrap Themeste naiao na puno razliitih lanaka i template-a.Nakon kratkogmuvanjapo raznim stranicama naiao sam na jedan simpatian template kojiima vie toga u sebi, a sadri i Blog to odgovara naim potrebama.
Iako nikakve potrebe nisu bile navedene, kako radimo s WordPress CMS-om koji je zapoeo kaonekakavblogging cmsnapravit emo i jedan klasian blog dio na naoj stranici. Template kojisam pronaao zove se SOLID i moe se naiovdje.
Na toj istoj stranici moete pogledati DEMO tog template-a. Ja sam ga skinuo klikom naDownload.
Prije nego krenemo s izradom odnosno pretvorbom ovog template-a u WordPress temu, trebarazumjeti da je ovo gotova tema te ovdje nee biti izrade s less jezikom iako je podrobno bioobjanjen u prethodnim poglavljima.
To je bilo napravljeno iz razloga kako bi bolje razumjeli sam rad s Bootstrap-om te na koji nain
je ovaj template bio napravljen.http://www.blacktie.co/2014/05/solid-multipurpose-theme/
http://www.blacktie.co/2014/05/solid-multipurpose-theme/http://www.blacktie.co/2014/05/solid-multipurpose-theme/ -
7/24/2019 WordPress na Bootstrap 3.x
33/284
Upoznavanje WordPress-aWordPress je CMS koji je u poetku bio zamiljen kao blog platforma. Nakon nekog vremenapoeo se koristiti kao platforma za web stranice razliitog tipa. Zbog njegove jednostavneuporabe mnogi ga uzimaju u obzir kada zapoinju svoje web projekte pa ak i ljudi koji nisudeveloperi ve su upoznati s WordPress-om te klijenti znaju sami traiti da se njihova webstranica radi u WordPress-u. U ovome poglavlju upoznati emo se s WordPress-om kao temeljemza izradu web projekta.
KonceptWordPress kao CMS koncipiran je u nekoliko segmenata. Sastoji se od lanaka, stranica,komentara te uz cijeli taj sadraj omoguava koritenje raznih tema i nadogradnju samog CMS-apomou njegovih dodataka.
lanci - su zapisi poput nekih novosti i sl. koji se zatim listaju, esto, na poetnoj stranici. Mogueih je kategorizirati pomou kategorija i tagova.
Stranice- su zapisi slini lancima ali oni se smatraju kao obine stranice koje se dodaju i unavigaciji WordPressa. Bez dodatne konfiguracije stranice su automatski dodane u navigaciji itako predstavljaju stranice poput O nama, Usluge i sl. koje su dosta este statine stranice.
Komentari- su zapisi koje prave korisnici WordPress stranice. Komentare mogu pisati i korisnicikoji nisu registrirani na stranici ako je tako omogueno.
Teme- su razliiti predloci dizajna koji se mogu skinuti i instalirati putem WordPress admi-nistracije ili direktno preko sistema direktorija. Sve instalirane teme mogue je pregledati prekoWordPress administracije i ukljuivati po elji. Teme se nalaze u folderuwp-content/themes/.
Dodaci- slue za proirivanje funkcija same WordPress stranice. Danas postoje razliiti dodaciza svakakve potrebe. Dodaci se nalaze u folderuwp-content/plugins/.
-
7/24/2019 WordPress na Bootstrap 3.x
34/284
Upoznavanje WordPress-a 26
Instalacija WordPress-a
Stranica za download WordPressa
WordPress se moe skinuti sa stranicewordpress.org. Ako niste zadovoljni engleskom verzijommoete skinuti WordPress za neki drugi jezik. Klikom na download dovesti e vas na stranicu zaskidanje WordPress-a u .zip ili .tar.gz formatu.
Sam proces konfiguriranja WordPress-a na vaem lokalnom serveru biti e objanjeno kasnije uknjizi kada se bude radila WordPress tema.
Poetne datoteke jedne teme
Kako bi izradili WordPress temu potrebno je razumjeti strukturu jedne teme. Potrebne datotekeza jednu temu kako bi funkcionirala jesu:
style.css - sadri sva css pravila koja definiraju izgled teme index.php - poetna datoteka koja se uvijek prvo gleda ako drugaije nije postavljeno.
esto se koristi za poetnu stranica gdje se listaju svi lanci.
Obino uz ove datoteke imamo i sljedee:
header.php - sadri dijelove teme koji se ponavljaju kao npr. navigacija, logo i sl. na vrhuteme
http://www.wordpress.org
http://www.wordpress.org/http://www.wordpress.org/ -
7/24/2019 WordPress na Bootstrap 3.x
35/284
Upoznavanje WordPress-a 27
footer.php - sadri dijelove teme koji se ponavljaju u podnoju teme
sidebar.php - sadri strukturu sidebar-a koji se koristi u temi, najee poziva dinaminisidebar
comments.php - sadri strukturu komentara koji se dodaju svakom lanku ili stranici gdjesu omogueni komentari
Uz navedene datoteke dobro je imati i sljedee:
single.php - prikazuje samo jedan lanak kojeg se gleda
page.php - prikazuje sadraj jedne stranice
archive.php - prikazuje listu lanaka, esto sadri istu strukturu kao i index.php. Ovo sekoristi pri listanju lanaka iz pojedine kategorije, taga i sl.
functions.php - sadri 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 sluaju da stranice ili lanak nije pronaen.
Ako je potrebno imati posebnu poetnu stranicu za WordPress temu koristi se jedna od sljedeihdatoteka:
home.php
front-page.php
Razumijevanje hijerarhije datoteka
Mogue je koristiti jo datoteka kako bi si olakali odravanje. Cijelu hijerarhiju datoteka mogueje pogledati naChip Bennett Template Hijerarhija. Ovdje neu objasniti svaku pojedinu ali iznekoliko primjera biti e dovoljno jasno da se moe itati dijagram na gornjoj slici.
Arhiva
Arhiva lanaka je jedan od najosnovnijih naina prikazivanja lanaka u WordPress-u. Prilikompristupanja nekoj arhivi, za primjer uzet emo kategoriju Auti ( slug od kategorije je auti, id odkategorije je 2), WordPress ini sljedee:
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 enju
Ukoliko nema prethodno navedene datoteke, pregledava folderda 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/
http://www.chipbennett.net/themes/template-hierarchy/http://www.chipbennett.net/themes/template-hierarchy/ -
7/24/2019 WordPress na Bootstrap 3.x
36/284
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 ilineki link koji nas je doveo do njega. Taj lanak se zatim preko njegovog URL-a ili ID-a prikazujena stranici. WordPress radi sljedee:
Prepoznaje da se radi o stranici koja prikazuje samo sadraj jednog posta ili stranice
Prepoznaje da se radi o stranici koja prikazuje samo sadraj jednog posta
Pregledava koji tip lanka
Ukoliko je lanak tipa Post, pregledava se folder za datotekom single-post.php
Ukoliko je lanak nekog naeg tipa koji je naknadno dodan, to je poznato kao Custom
Post Type, pregledava se folder za datotekom single-auto.php ukoliko bi na custom posttype bio auto.
Ukoliko je lanak nekog priloga kao npr. uploadane slike tada se pregledava folder zadatotekom image.php ukoliko je to datoteka tipa image, zatim ako je nema gleda za png.phpako 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 pronaena neka od spomenutih datoteka pregledava se folder za datotekomsingle.php
Ukoliko nema ni single.php, koristi se index.php
Pratei dijagram koji je gore naveden tema se moe organizirati u hijerarhiju datoteka koja jelako odriva te je jednostavno shvatiti koja datoteka se odnosi na koji dio teme. Iz gore navedenihprimjera moe se primijetiti kako sve uvijek vodi na index.php ukoliko traene datoteke nepostoje. Ako neke promjene nisu pretjerano velike mogu se napraviti i u index.php datoteci kaoto je npr. naslov arhive za kategoriju.
1 //ovo je unutar petlje the_loop()
2 if(is_category()){ single_cat_title("lanci iz kategorije: ", true); }
Glavna petlja - The LoopGlavna petlja ili The Loop je PHP kod koji se koristi za listanje sadraja lanka, stranica i sl. Ovapetlja prikazuje svaki lanak ili stranicu koji su dobiveni kriterijima postavljenim u glavnomquery-u koji pristupa bazi. Taj query se npr. mijenja i ovisno o kategoriji kada se poziva category-auto.php.
Svaki HTML i PHP kod unutar petlje prikazat e se odnosno izvriti za svaki lanak unutar petlje.Koristei razne Template Tagove moemo prikazati razliite informacije. Jedne od osnovnihtagovakod prikaza informacija za lanak unutar petlje jesu:
the_title() - prikazuje naslov lanka
-
7/24/2019 WordPress na Bootstrap 3.x
37/284
Upoznavanje WordPress-a 29
the_content() - prikazuje sadraj lanka, ukoliko nije stranica pojedinog lanka onda seprikazuje skraeni 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 atributhref
Raznitagovimogu se pronai naWordPress Codex-u.
Osnovna struktura petlje
1
Action i Filter funkcije
Action i Filter funkcije slue za nadograivanje nae teme ili admin-a. Njima se moe odreivatida se u odreeno vrijeme ili na odreenom mjestu neka funkcija izvri. Action funkcije se
izvravaju kada se neto dogodi odnosno izvri kao to je npr. publish lanka ili prikazivanjeadmin stranice. Filter funkcije su funkcije koje se izvravaju kod podataka kao to je mijenjanjenekih 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 odgovarajui action
prioritet predstavlja broj, ukoliko ga ne unesemo postavlja se na 10. to je manji broj to seprije izvrava dodana funkcija
broj_parametara predstavlja broj parametara koji dolaze uz funkciju, npr. function upda-te_post($a,$b) - tu imamo broj 2 jer se prosljeuju dva parametra
Mjesto pozivanja te action funkcije odreuje se sa
http://codex.wordpress.org/Template_Tags
http://codex.wordpress.org/Template_Tagshttp://codex.wordpress.org/Template_Tags -
7/24/2019 WordPress na Bootstrap 3.x
38/284
-
7/24/2019 WordPress na Bootstrap 3.x
39/284
-
7/24/2019 WordPress na Bootstrap 3.x
40/284
Izrada WordPress teme 32
Cjelokupni WordPress u folderu Wordpress
Nakon toga potrebno je upaliti XAMPP i pokrenuti APACHE i MySQL Server.
wor-dpre Zatim je potrebno otii naphpmyadminte napraviti novu bazu za WordPress. Odemo nanavigacijuDatabasesi upiemo eljeni naziv baze podataka, odaberemo iz padajueg izbornikautf8_general_cii kliknemo naCreate.
http://localhost/phpmyadmin/
http://localhost/phpmyadmin/http://localhost/phpmyadmin/ -
7/24/2019 WordPress na Bootstrap 3.x
41/284
-
7/24/2019 WordPress na Bootstrap 3.x
42/284
Izrada WordPress teme 34
Instalacija WordPress-a
Nakon to smo zamijenili potrebne podatke i podesili na wp-config.php potrebno je instaliratiWordPress na naem serveru. Ako pristupite sada adresi http://localhost/wordpress (ili kako steve Vi nazvali Va web) dobiti ete instalacijsku stranicu WordPress-a. Popunite je osnoviminformacijama kao to je Vae korisniko ime i lozinka.
WordPress Instalacijska stranica 1
Nakon to ispunite sve potrebne informacije kao username i password moete krenuti na sljedeikorak i kliknutiInstall WordPress. Sada e WordPress napraviti sve potrebne tablice i napuniti
osnovnim informacijama. Nakon to se sve to dogodi, trebali bi dobiti informaciju kako steuspjeno instalirali WordPress.
-
7/24/2019 WordPress na Bootstrap 3.x
43/284
Izrada WordPress teme 35
WordPress Instalacijska stranica 2
Sada se moete prijaviti klikom na Log In. Ako posjetite opet svoju poetnu stranicu ht-tp://localhost/wordpress/dobiti ete pravu web stranicu koju pogoni WordPress, te temu kojuvidite je poetna tema koja dolazi s WordPress-om.
WordPress Poetna
Spremni ste za izradu teme na WordPress-u!
Poetna struktura projekta
U poglavlju Upoznavanje s WordPress-om saznali smo da za temu je dovoljno imati index.php istyle.css sa svim informacijama vezanim uz temu. U folderu gdje smo kopirali cijeli WordPress,potrebno je otii uwp-content/themesi otvoriti novi folder kojeg emo nazvatiwpb3.
-
7/24/2019 WordPress na Bootstrap 3.x
44/284
Izrada WordPress teme 36
WordPress wp-content folder
Sada u tom folderu napravite folderwpb3i otvorite ga.
WordPress wpb3 folder
Unutar tog foldera kopirat emo sadraj Bootstrap 3 templateSOLIDkoji smo skinuli u poglavljuUpoznavanje sa Bootstrap-om- Odabir Template-a. Ako ga niste skinuli, moete ga skinuti na
ovdje.
WordPress wpb3 folder sa kopiranim sadrajem SOLID-a
Kako bi ovu temu mogli odabrati u WordPress administraciji, potrebno je stvoritiindex.phpistyle.css. Sadraj index.php-a moe trenutno biti samo nekakav tekst kao:
1 WordPress na Bootstrap 3.x
Nakon index.php-a, stvoritestyle.cssi kopirajte sljedei kod unutar te datoteke:
http://www.blacktie.co/2014/05/solid-multipurpose-theme/
http://www.blacktie.co/2014/05/solid-multipurpose-theme/http://www.blacktie.co/2014/05/solid-multipurpose-theme/ -
7/24/2019 WordPress na Bootstrap 3.x
45/284
Izrada WordPress teme 37
1 /*
2 Theme Name: WPB3
3 Theme URI: https://leanpub.com/wpb3/
4 Author: Igor Beni
5 Author URI: https://leanpub.com/u/igorbenic
6 Description: WordPress tema izraena prema knjizi WordPress na Bootstrap-u 3.x
7 Version: 1.0
8 License: GNU General Public License v2 or later
9 License URI: http://www.gnu.org/licenses/gpl-2.0.html
10 Tags: blue, gray, wite, flat, custom-post-type, portfolio, blog
11 Text Domain: wpb3
12
13 */
Ove podatke WordPress e koristiti za prikazivanje u WordPress administraciji kod odabira temete dodatne informacije kao tagovibi koristio kod pretraivanja tema u WordPress-ovoj arhivitema.
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 nazivomWPB3. Ako preetemiem preko nje, dobiti ete sljedeu sliku:
Odabir tema u administraciji - WPB3 tema
Sada kada je moemo odabrati, aktivirajte je pritiskom na Activate. Sada ako otvorite vaustranicu na front-u (npr. localhost/wordpress) dobiti ete tekst koji smo unijeli u datoteciindex.php.
WPB3 tema poetna
-
7/24/2019 WordPress na Bootstrap 3.x
46/284
Izrada WordPress teme 38
Functions.php
Uz style.css i index.php najbolje je odmah na poetku stvoriti jo jednu datoteku, a to jefunctions.phpkoja po WordPress Codex-u, unutar teme slui kao plugin koji na frontu i uadministraciji se uitava kako bi izvrila funkcije dodane unutar nje koje se direktno odnosena aktiviranu temu. To moe biti dodavanje dodatnih opcija za definiranje izgleda teme unutaradministracije, pravljenje razliitih tipova lanaka, definiranje dimenzija slika i sl. Neke od opcijaza temu koju WordPress daje jesu tzv.Theme Features.
Stvoritefunctions.phpi unutar te datoteke unesite sljedee:
1
-
7/24/2019 WordPress na Bootstrap 3.x
47/284
Izrada WordPress teme 39
1
2
-
7/24/2019 WordPress na Bootstrap 3.x
48/284
Izrada WordPress teme 40
1
2
3 WordPress na Bootstrap 3.x
4
5
Sada kada opet otvorimo nau stranicu neemo vidjeti promjene, osim ako smo prijavljen u naojadministrativnom dijelu WordPress-a. Tada emo dobiti na vrhu stranice jedantoolbars raznimopcijama.
WPB3 toolbar
Upravo taj toolbar je izgeneriran zbog funkcije wp_head(). Ako pogledamo sada izvorni kodstranice koji je prije bio samo obian tekst WordPress na Bootstrap 3.xvidjet emo razne pozivekoje mi nismo napisali jer su izgenerirani preko funkcija wp_headiliwp_footer.
Izvorni kod stranice nakon poziva headera i footera
Izrada Bloga
U ovome poglavlju krenut emo s poetnom strukturom WordPress teme i izraditi jednu klasinutemu, a to je tema za blog. Bootstrap Template SOLID dolazi s ve definiranim izgledom straniceBlog, pa emo taj raspored HTML-a i koristiti.
Ako ste slijedili sve korake u prolom poglavlju trebali bi sada imati neto slino ovome:
-
7/24/2019 WordPress na Bootstrap 3.x
49/284
-
7/24/2019 WordPress na Bootstrap 3.x
50/284
-
7/24/2019 WordPress na Bootstrap 3.x
51/284
Izrada WordPress teme 43
1 wp_enqueue_script(
2 $naziv_poziva,
3 $putanja,
4 $potrebne_datoteke,
5 $verzija,
6 $u_footer );
gdje navedene varijable su:
$naziv_poziva - naziv pod kojim pozivamo skriptu, ukoliko bi koristiti wp_register_script()tada bi pri koritenju gore navedene funkcije bilo dovoljno samo upisati naziv poziva
$putanja - putanja do skripte
$potrebne_datoteke - upisuju se uarray()sve potrebne skripte koje treba pozvati prije kako
bi skripta obavljala funkcije ovisne o tim skriptama, kao to je npr. jquery $verzija - verzija skripte, mogue je pustiti inullpa nema verzioniranja ili ostaviti prazno
pa e WordPress sam dodati broj svoje verzije
$u_footer - ako je ova varijabla truedodaje se na kraj elementa body, u suprotnom sepostavlja uhead
Javascript datoteke koje treba povezati jesu sljedee:
1
4
5
6
7
8
9
10
Nakon definicije povezivanja CSS datoteka, kopirajte sljedei dio koda ufunctions.php:
1 /*=============
2 Povezivanje JS-a
3 =============*/
4
5 function wpb3_js_datoteke() {
6 if(!is_admin()){
7 wp_enqueue_script(
8 'wpb3-bootstrap-js',
9 get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js',
10 array( 'jquery' ),
-
7/24/2019 WordPress na Bootstrap 3.x
52/284
-
7/24/2019 WordPress na Bootstrap 3.x
53/284
Izrada WordPress teme 45
57 get_stylesheet_directory_uri() . '/assets/js/custom.js',
58 array( 'jquery' ),
59 '',
60 true
61 );
62 }
63 }
64
65
66
67 add_action( 'wp_enqueue_scripts', 'wpb3_js_datoteke' );
Za svaku JS datoteku zahtjevali smo pozivanje jQuery i tako maknuli mogunost pojavljivanjapogreke pri pozivanju jQuery plugin-a bez jQuery-a. Sada e WordPress prije pozivanja svihnavedenih JS datoteka pozvati jQuery koji dolazi zapakiran sa WordPress-om. Verzija svakedatoteke nije navedena te je ostavljeno prazno kako bi WordPress dodao svoju verziju na svakudatoteku.
Ako ponovno pokrenemo nau stranicu i pogledamo izvorni kod, vidjet emo da su sve skripte,osim jQuery-a pozvane na kraju elementa bodyjer je postavljena vrijednosttruekod opcije dali poziv ide uheadili na kraj elementabody.
JS datoteke na kraju elementa body
Izrada Navigacije
Bootstrap 3 ima CSS komponentunavbarkoja omoguuje i responzivni izgled navigacije gdje sesama navigacija sakrije na manjim ekranima te pritiskom na ikonu za navigaciju ona se otvara
ispod ikone i logotipa. Za sada, kopirajmo direktno iz SOLID template-a tu komponentu te jepostavimo uheader.phpodmah nakon otvorenog elementabody.
1 ...
2
3
4
5
6
7
8
-
7/24/2019 WordPress na Bootstrap 3.x
54/284
Izrada WordPress teme 46
10 Toggle navigation
11
12
13
14
15 SOLID.
16
17
18
19 HOME
20 ABOUT
21 CONTACT
22
23 PAGES
24 25
26 BLOG
27 SINGLE POST
28 PORTFOLIO
29 SINGLE PROJECT
30
31
32
33
34 35
Kako bi pogledali promjenu, otvorite opet Vau stranicu odnosno osvjeite je ukoliko Vam jeotvorena. Dobiti ete ovo:
Navigacija u header-u
Izgleda kao da nam se na tekst koji je unesen unutarindex.php-aizgubio, ali zapravio sve tose dogodilo jeste da je ova navigacija fiksna te zbog takvog css svojstva na tekst je ostao upoetnoj poziciji kao i prije dok se navigacija prikazuje preko svega i ne utjee na rasporeddrugih elemenata.
-
7/24/2019 WordPress na Bootstrap 3.x
55/284
Izrada WordPress teme 47
Navigacije ne utjee na raspored elemenata
Da bi mogli vidjeti opet ovaj tekst i slijediti strukturu stranice blog.html potrebno je dodatiostale elemente koji ine osnovnu strukturu u datoteci blog.html. Kako ne bi preskakali dio podio, srediti emo prvo navigaciju pa zatim krenuti na sljedei dio.
Logo
Kao to vidimo na template-u zamiljen je logo kao tekst. Kako ve imamo ime naeg blogaodnosno stranice, moemo odmah to iskoristiti kao tekst logo-a. Za takvo neto koristiti e namfunkcija bloginfo()koju definira sam WordPress i koja slui za povlaenje nekih informacija
koje se zapisuju ili definiraju u generalnim postavkama WordPress-a. Sada zamijenite
1 SOLID.
Sa
1
-
7/24/2019 WordPress na Bootstrap 3.x
56/284
Izrada WordPress teme 48
gdje - $path oznaava putanju, te je mogue kao vrijednost postaviti / pa bi umjestolocalhost/wordpress dobili localhost/wordpress/ - $scheme definira kakav tip poveznice ebiti tako da je mogue postaviti http, https ili relative gdje bi po tom redoslijedu dobilihttp://localhost/wordpress, https://localhost/wordpressili/wordpress.
Kako nam funkcija samo vraa vrijednost, ona je ne ispisuje pa je potrebno koristiti php funkcijuechokako bi je ispisali.
Funkcija bloginfo sa name kao vrijednost, daje nam ime nae stranice koje je postavljeno ugeneralnim postavkama WordPress-a. Sada kada ponovno osvjeimo nau stranicu trebali bidobiti kao logo nae ime bloga te kada kliknemo na logo, trebalo bi nas vratiti na poetnu stranicu.
Dinamiki logo u navigaciji
WordPress Menu
WordPress Menu dodaje se u WordPress administraciji pod Appearance > Menus. Ako sadapogledamo taj dio u administraciji moemo primijetiti daMenusne postoji. Kako bi to moglopostojati i kako bi mi mogli postavljati nae menije potrebno je dodati podrku tih menijaunutar nae teme. To se radi pozivom funkcije register_nav_menuili register_nav_menus. Unaem template-u samo navigacijskih menija ima u headeru pa emo iskoristiti prvu spomenutufunkciju koja je dovoljna ako elimo registrirati samo jedan menu. Poziv te funkcije je sljedei:
1
gdje
$locationoznaava lokaciju koju mi sami definiramo, kao npr. header-menu i zatim sepri pozivanju tog menija koristi lokacija navedena kao vrijednost varijable $location
$descriptionoznaava opis te lokacije kako bi nam bilo lake snalaziti se po lokacijamamenija, kao npr. Menu u header-u
Sada kada znamo to pojedina varijabla oznauje, ufunctions.phpdodajte sljedei dio koda nakonpozivanja JS datoteka.
1 ...
2 register_nav_menu( "header-menu", "Menu u Header-u" );
Ako opet otvorimo administraciju i pogledamo pod Appearancevidjeti e se nova navigacijaMenus.
http://codex.wordpress.org/Function_Reference/register_nav_menu
http://codex.wordpress.org/Function_Reference/register_nav_menus
http://codex.wordpress.org/Function_Reference/register_nav_menushttp://codex.wordpress.org/Function_Reference/register_nav_menuhttp://codex.wordpress.org/Function_Reference/register_nav_menushttp://codex.wordpress.org/Function_Reference/register_nav_menu -
7/24/2019 WordPress na Bootstrap 3.x
57/284
-
7/24/2019 WordPress na Bootstrap 3.x
58/284
Izrada WordPress teme 50
1
2
3
4 HOME
5 ABOUT
6 CONTACT
7
8 PAGES
9
10
11
12 BLOG
13 SINGLE POST
14 PORTFOLIO
15 SINGLE PROJECT16
17
18
19
napiite sljedee:
1
Sada smo u tompoljudali parametartheme_locationkoji ima vrijednost nae lokacije. Ukolikoto spremite i otvorite ponovno nau stranicu, vidjet ete da to nije navigacija kao to jepostavljena u originalu template-a. Kako bi jednostavno postigli isti izgled sa mogunoustvaranja padajuih izbornika potrebno je koristiti tzv. Walkerekoji tada generiraju potrebansadraj na nain kakav je definiran u tomWalkeru. Takav Walker je iwp-bootstrap-navwalkerkojeg moete skinuti sa te stanice. Ukoliko Vam se ne skida moete slobodno u Dodatatku:WordPress - Bootstrap NavWalker na kraju knjige kopirati cijeli kod togWalkera.
Taj kod kopirajte u zasebnu datoteku pod nazivom npr. wpb-navwalker.php te je spremite u novifolder pod nazivominc.
https://github.com/twittem/wp-bootstrap-navwalker
https://github.com/twittem/wp-bootstrap-navwalkerhttps://github.com/twittem/wp-bootstrap-navwalker -
7/24/2019 WordPress na Bootstrap 3.x
59/284
Izrada WordPress teme 51
Walker dodan u zaseban folder pod nazivom inc
Sada na poetku datoteke functions.php dodajte sljedee:
1 require_once 'inc/wpb-navwalker.php';
Time zahtijevamo tu datoteku unutar foldera inc. Sada kada smo to uinili moemo stvaratiprave Bootstrap 3 navigacije s Menu-ima iz WordPress-a. To radimo tako da promijenimo joneke parametre u pozivu funkcijewp_nav_menu.
1 wp_nav_menu(
2 array(
3 'menu' => 'header-menu',
4 'theme_location' => 'header-menu',
5 'depth' => 2,
6 'container' => 'div',
7 'container_class' => 'navbar-collapse collapse navbar-right',
8 'container_id' => 'header-menu',
9 'menu_class' => 'nav navbar-nav',
10 'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
11 'walker' => new wp_bootstrap_navwalker()
12 )
13 );
Kada smo i to promijenili moramo jo neto promijeniti kod cijele komponente navbar-a kakobi to radilo, tako da treba zamijeniti:
1
sa
1
Objanjenje
Parametri uwp_nav_menu:
-
7/24/2019 WordPress na Bootstrap 3.x
60/284
Izrada WordPress teme 52
menuoznaava eljeni meni depthoznaava koliko duboko e meni ii, odnosno kolika dubina izbornika moe biti, kako
je ovdje postavljeno 2, imamo prvu razinu koja je glavni izbornik, a zatim druga razina jepadajui izbornik tog menu-a
containeroznaava to e se koristiti, kako je kod Bootstrap todiv, onda e se to i koristiti container_idje ID tog navbara, te se on koristi i u gornjoj zamjeni poddata-targetpa smo
zbog toga i sambuttonpromijenili menu_classje klasa koja e se koristiti sa elementomul fallback_cbje funkcija koja e se koristiti ukoliko ne postoji eljeni menu walkerje klasa koju koristimo za izradu cjelokupne navigacije
Ako sada otvorite stranicu vidjet ete kako su se prikazale poveznice na pravi nain kao i uoriginalnom template predloku.
Dodamo li u administraciji jednu poveznicu kao padajui izbornik moe se vidjeti i Bootstrap-ovpadajui zbornik na frontu. Padajui izbornik dodajemo tako da:
1. Dodamo poveznicu u izbornik tako da odaberemo to sve elimo dodati i kliknemo na Addto Menu,
2. Nakon dodavanja izborniku potrebno je povui eljenu poveznicu ispod poveznice za kojuelimo da bude padajui izbornik,
3. Nakon postavljanja ispod eljenog padajueg izbornika, potrebno ju je malo uvui udesno
Izrada padajueg izbornika
Nakon dodavanja i rasporeivanja poveznica potrebno je spremiti promjenom pritiskom na SaveMenu. Sada imamo Bootstrap-ov izbornik na naoj stranici.
Padajui zbornik na frontu
-
7/24/2019 WordPress na Bootstrap 3.x
61/284
Izrada WordPress teme 53
Naziv stranice
Naziv stranice u template-u
Prema template-u moe se vidjeti da sam naziv trenutne stranice koju gledamo ima svoj dio gdjese prikazuje i malo se odvaja od drugog teksta. Ako pogledamo izvorni kod vidjet emo sljedee:
1
6
7
8
9 Blog List.
10
11
12
Ovaj dio template-a se jednako tako ponavlja na svakoj stranici pa moemo zakljuiti da ga trebapostaviti u header.phpkako ga ne bi morali kopirati u svakoj datoteci koja prikazuje sadraj.Kopirajte ovaj dio u datotekuheader.phpnakon navigacije.
1 ...
2
3
4
9
10
11
12 Blog List.
13
14
15
-
7/24/2019 WordPress na Bootstrap 3.x
62/284
Izrada WordPress teme 54
Kako ovo zapravo predstavlja naslov stranice dovoljno je koristiti ponovno funkcijuwp_titlepaumjestoBlog List.postavimowp_title()ovako:
1 2
3
4
5
6
7
Postavljanjem poziva wp_titlena svakoj stranici ispisat e se naslov stranice na kojoj se nalazimo.
Naziv stranice u WordPress temi
Moemo i primijetiti kako se sada opet vidi i na tekst iz datoteke index.phpjer smo ga pomaknuliza dovoljno razmaka kako je i predvieno u template-u.
Razmak izmeu naslova i navigacije
Ako uoite jedan mali razmak izmeu naziva stranice i navigacije dok ste prijavljeni nastranicu,kao to je prikazano na sljedeoj slici, tada je dovoljno samo napisati dodatni CSS kojie ispraviti prikaz ili maknuti prikazivanje admin trake.
-
7/24/2019 WordPress na Bootstrap 3.x
63/284
Izrada WordPress teme 55
Razmak
Ispravljanje je mogue sljedeim kodom unutarfunctions.php:
1 function wpb3_admin_css() {
2 if ( is_user_logged_in() && is_admin_bar_showing() ) {
3 ?>
4
5 .navbar-fixed-top {
6 top:32px;
7 }
8
9
-
7/24/2019 WordPress na Bootstrap 3.x
64/284
Izrada WordPress teme 56
Struktura bloga
Struktura bloga
Iz gornje slike moemo vidjeti kako e izgledati otprilike poetna naeg bloga. Vidimo da seveinski dio prostora koristi za glavni sadraj bloga odnosno za listu lanaka dok se preostali dioprostora koristi za tzv. sidebaru kojemu se prikazuju neke sporedne informacije ili opcije kaoto je trailica.
Ako otvorimo blog.htmlod template-a vidjet emo da je struktura podijeljena u dva stupcaveliinecol-lg-8icol-lg-4.
1
2 3
4
5
6
7
8
9 Time to change your apps.
10
11
12 Posted: April 25, 2014. |13 By: Admin - 3 Comments
14 ....
15
16
17
18
19
20 ...
21
22
23
-
7/24/2019 WordPress na Bootstrap 3.x
65/284
Izrada WordPress teme 57
24
25
26
27 ...
U datoteciindex.phpprikazivat emo listu lanaka dok emo sidebarpozivati preko funkcijeget_sidebarkojeg zatim definiramo u zasebnoj datoteci sidebar.php. Prvo emo samo postavitistrukturu, a glavni sadraj e nam biti tekst koji smo prethodno unijeli uindex.php.
1
2
3
4
56
7
8 WordPress na Bootstrap 3.x
9
10
11
12
13
14
15
16
17
18
19
20
Stvorite u folderu temewpb3novu datotekusidebar.phpi samo upiiteSporedni sadraj. Zatimu datoteciindex.phpgdje se poziva sidebar promijenite u:
1 2
3
4
-
7/24/2019 WordPress na Bootstrap 3.x
66/284
Izrada WordPress teme 58
Glavni i sporedni sadraj
Lista lanaka
Lista lanaka
Kod listanja odnosno prikazivanja lanaka treba primijetiti to se sve prikazuje. Iz gornje slikemoemo vidjeti da se prikazuje slika, naslov, datum i autor, broj komentara te saetak sadrajauz poveznicu koja nas alje na stranicu tog lanka kako bi proitali sav sadraj. Cijeli kod jednoglanka pri listanju je sljedei:
-
7/24/2019 WordPress na Bootstrap 3.x
67/284
Izrada WordPress teme 59
1
2
3
4
5
6 Time to change your apps.
7
8
9 Posted: April 25, 2014. |
10 By: Admin - 3 Comments
11
12
13 Lorem Ipsum is simply dummy text of the printing and typesetting industry.
14 Lorem Ipsum has been ....
15
1617
18 [Read More]
19
20
21
22
23
Dovoljno je kopirati samo taj dio unutar sekcije za glavni sadraj tako da sada dio za glavnisadraj unutar datotekeindex.phpizgleda ovako:
1
2
3
4
5
6
7
8 Time to change your apps.9
10
11 Posted: April 25, 2014. |
12 By: Admin - 3 Comments
13
14
Lorem Ipsum is simply dummy text of the printing and typesetting industr\
15 y. Lorem Ipsum has been the industry's standard dummy text ever since the 150\
16 0s, when an unknown printer took a galley of type and scrambled it to make a \
17 type specimen book.
18
It has survived not only five centuries, but also the leap into electron\
19 ic typesetting, remaining essentially unchanged.
-
7/24/2019 WordPress na Bootstrap 3.x
68/284
-
7/24/2019 WordPress na Bootstrap 3.x
69/284
Izrada WordPress teme 61
25
26
27
28
29
Ovim kodom postavili smo glavni sadraj unutar WordPress Loop-a ime se provjera da li postojeikakvi lanci te ako postoje, za svaki lanak prikai mi sadraj unutar whilepetlje. Nakon toga,potrebno je dijelove sa sadrajem zamijeniti WordPress funkcijama kako bi se prikazao pravisadraj. Zamijenite gornji sadraj sa sljedeim:
1
2
3 4
-
7/24/2019 WordPress na Bootstrap 3.x
70/284
Izrada WordPress teme 62
comments_numberje funkcija koja prikazuje broj komentara na pojedinom lanku, te uzto se mogu namjestiti tri razna ispisa (kada imamo nula komentara, kada je jedan komentarili kada je vie komentara).
the_contentprikazuje sadraj. Ako je na stranici gdje se listaju lanci onda se prikazujesamo sadraj dodijela u lanku, ukoliko je stranica lanka, tada se prikazujecijeli sadraj.
Sada kada smo to napravili, ako se malo bolje pogleda template SOLID i njegovu blog stranicu(blog.html), vidjet emo da lanak kada je na svojoj stranici, nema crnu liniju ispod sebe. Ako nepravimo datoteku koja je posebno napravljena za prikaz pojedinog lanka ve se koristi index.phponda moemo dodatno to napraviti tako da odredimo da se ta linija prikazuje ako nije na stranicipojedinog lanka. To se radi ovako:
1 2
3
Funkcijomis_singulargledamo da li smo na stranici lanka ili neke stranice (page), a sa znakom! ispred oznaujeNEpa moemo to proitatiako nije stranica ili lanak ui u ovu granu iprikai liniju.
Slika lanka
Slika lanka je tzv.thumbnailte se on dodaje prilikom unosa lanka. Svaka WordPress temaodluuje za sebe ako e se moi unositi slika lanka, pa tako sada bez ikakve promjene nemamomogunost unosa slike lanka.
http://codex.wordpress.org/Post_Thumbnails
http://codex.wordpress.org/Post_Thumbnailshttp://codex.wordpress.org/Post_Thumbnails -
7/24/2019 WordPress na Bootstrap 3.x
71/284
Izrada WordPress teme 63
Ne postoji opcija za unos slike
WordPress-u moramo preko nae teme rei da omogui unos slike. To se omoguuje pozivom:
1 add_theme_support('post-thumbnails' );
Upiite to negdje na poetak datoteke functions.php kao npr. iznad postavljanja varijable$content_width. Ako ste to napravili pokuajte opet posjetiti stranicu za unos novog lanka iliauriranja postojeeg.
-
7/24/2019 WordPress na Bootstrap 3.x
72/284
Izrada WordPress teme 64
Opcija za unos slike
Klikom naSet featured imageotvorit e se prozor za unos slike gdje imate mogunost odabiraiz ve postojeih slika ili unos nove slike. Prije nego unesemo sliku za probu, moramo odrediti idimenzije samog thumbnail-a. Dimenzije thumbnail-a, bez mijenjanja, postavljene su na 150pxx 150px (irina x visina). Izmjerimo li dimenzije slika u datoteci blog.htmlodnosno u folderuassets/imgvidjet emo da su te slike lanaka dimenzija 850x400, to se mnogo razlikuje odosnovnih dimenzija thumbnail-a.
Stoga je bolje napraviti novi tip slike kojeg emo nazvatislika-clanka. To je mogue pozivomfunkcijeadd_image_sizeija definicija je:
1 add_image_size( $name, $width, $height, $crop );
gdje
$name- oznauje ime verzije slike koju emo koristiti kada elimo prikazati tu verziju slike $width- irina u pikselima $height- visina u pikselima $crop- postavlja se nafalse- nema rezanja odnosno proporcionalno se slika ree,true-
slika se ree te moe biti tipapolje (array)gdje se onda napiu x i y koordinate podrujaza kropanje (poetak kropa, a zatim koristi za ostale koordinate, namjetene dimenzije)
Za nau sliku lanka imamo dimenzije i imamo ime, moemo i postaviti mogunost rezanja kakobi osigurali prikazivanje kvalitetne slike ako se postavi slika koja nije tih dimenzija. Ispod naefunkcijeadd_theme_supportza omoguavanje unosa slike lanka, postavite sljedee:
1 add_image_size('slika-clanka', 750, 353, true);
Prikazivanje slike lanka
Kako bi bilo mogue prikazati sliku lanka kod svakog lanka potrebno je pozvati funkciju zaprikaz slike, a ona je the_post_thumbnaildok njena definicija glasi:
http://codex.wordpress.org/Function_Reference/add_image_sizehttp://codex.wordpress.org/Function_Reference/the_post_thumbnail
http://codex.wordpress.org/Function_Reference/the_post_thumbnailhttp://codex.wordpress.org/Function_Reference/add_image_sizehttp://codex.wordpress.org/Function_Reference/the_post_thumbnailhttp://codex.wordpress.org/Function_Reference/add_image_size -
7/24/2019 WordPress na Bootstrap 3.x
73/284
-
7/24/2019 WordPress na Bootstrap 3.x
74/284
Izrada WordPress teme 66
Osvjeite poetnu stranicu i pogledajte promjenu.
Slika lanka u WordPress temi
Dodajte sada lanke koje hoete kako bi vidjeli kako e Vam se ponaati listanje lanaka. Ja uunijeti jo jedan lanak sa slikompost02.jpgte tekstom iz datotekeblog.html.
Pojedini lanak
Pojedini lanak se prikazuje ako kliknemo na naslovjednog lanka. Iako nismo napravili datotekuza ispis pojedinog lanka,single.php, prisjetimo se da smo u poglavljuUpoznavanje s WordPress-omsaznali kako se WordPress ponaa te da ako ne postojisingle.phpprikazuje sadraj definiranu index.php. Na ovaj nain, mi sada ipak moemo vidjeti samo sadraj jednog lanka prekodatotekeindex.php.
Otvorite sada datoteku iz SOLID template-a pod nazivomsingle-post.htmlte ako pogledate maloizgled zasebnog lanka, na kraju teksta moe se primijetiti da postoji podruje za dijeljenje tog
lanka preko drutvenih mrea.Kako bi bolje shvatili pozivanje single.php iindex.php stvorite novu datoteku uz index.php inazovite jesingle.phpte kopirajte cijeli sadraj izindex.php-a.
Datoteka single.php
Ukoliko ste kopirali cijeli sadraj, moete obrisati ono to nam nije potrebno, a to je:
-
7/24/2019 WordPress na Bootstrap 3.x
75/284
Izrada WordPress teme 67
1
2
3
To briemo jer se u ovoj datoteci prikazuje samo jedan lanak, a na stranicama lanaka neispisujemo crnu liniju.
Otvorite sada u Vaem editoru single-post.html i pogledajte kraj sadraja tog lanka. Dio zadrutvene mree izgleda ovako:
1 ...
2
There are many variations of passages of Lorem Ipsum available, but the ma\
3 jority have suffered alteration in some form, by injected humour, or randomis\
4 ed words which don't look even slightly believable.
5
6 SHARE:
7
8
9
10
11
12
Kopirajte dio nakonspacing-a i upiite ga usingle.phpna isto mjesto.
1 ...
2
3
4
5 SHARE:
6
7
8
9
10 11
Spremite ovu promjenu i pogledajte stranicu vaeg lanka.
-
7/24/2019 WordPress na Bootstrap 3.x
76/284
Izrada WordPress teme 68
Drutvene mree na pojedinom lanku
Dijeljenje sadraja
Svaka drutvena mrea ima svoje API-e te koritenjem njihovih biblioteka uz dijeljenje, moetevriti puno vie. Nama trenutno to nije potrebno te je dovoljno samo proslijediti parametrepotrebne za dijeljenje sadraja. Za takvo neto, koristit emo funkcije u Javascript-u.
Otvorite u Vaem editoruassets/js/custom.js. Ova datoteka e nam posluiti za pisanje svojihfunkcija.
Facebook
Kopirajte sljedeu funkciju ispod dijela})(jQuery);:
1 function share_facebook_post(link) {
23 u=link.getAttribute('href');
4 // t=document.title;
5 t=link.getAttribute('title');
6 window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'\
7 &t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436'\
8 );
9 return false;
10
11 }
Objanjenje
Pozivom ove funkcije u nekoj poveznici kao npr.:
1
izvriti e se sljedee:
1. uzima se vrijednost za varijabluui to je vrijednost atributahrefto je u biti poveznica na
na sadraj
-
7/24/2019 WordPress na Bootstrap 3.x
77/284
Izrada WordPress teme 69
2. uzima se vrijednost za varijablut, a to je vrijednost atributatitleunutar poveznice t