WordPress Na Bootstrap 3.x

WPB3 - Wordpress na Bootstrapu 3.
x
Kako napraviti svoj prvi Wordpress projekt koristei
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
Sadraj
Predgovor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Upoznavanje sa Bootstrap Frameworkom . .

Koritenje Bootstrap-a . . . . . . . . . . . .
Grid . . . . . . . . . . . . . . . . . . . .
Responzivne slike . . . . . . . . . . . .
CSS Komponente . . . . . . . . . . . . .
Javascript . . . . . . . . . . . . . . . . .
Prilagoen Boostrap . . . . . . . . . . . . . .
Napredno prilagoavanje Bootstrapa . . . .
Raspakirani Bootstrap Izvorni kod . . .
Koritenje 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 . . . . . . .
Poetne 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 podeavanje WordPress-a
Instalacija WordPress-a . . . . . . . . . . . .
Poetna struktura projekta . . . . . . . . . . . . .
Functions.php . . . . . . . . . . . . . . . . .
Header i footer . . . . . . . . . . . . . . . . .
Objanjenje . . . . . . . . . . . . . . .
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
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SADRAJ
Izrada Navigacije . . . . . . . . . . . . . . .
Logo . . . . . . . . . . . . . . . . . . .
WordPress Menu . . . . . . . . . . . .
Prikaz WordPress Menu-a . . . . . . .
Naziv stranice . . . . . . . . . . . . . . . . .
Razmak izmeu naslova i navigacije . . . . .
Struktura bloga . . . . . . . . . . . . . . . . .
Lista lanaka . . . . . . . . . . . . . . . . . .
WordPress Loop . . . . . . . . . . . .
Slika lanka . . . . . . . . . . . . . . .
Prikazivanje slike lanka . . . . . . . .
Pojedini lanak . . . . . . . . . . . . . . . .
Dijeljenje sadraja . . . . . . . . . . .
Sporedni sadraj . . . . . . . . . . . . . . . .
Pozivanje i prikaz sidebar-a . . . . . .
Dodavanje widget-a . . . . . . . . . .
Izrada Widgeta . . . . . . . . . . . . .
Lista kategorija . . . . . . . . .
Objanjenje . . . . . . . . . . .
Registriranje widgeta . . . . . . . . . .
Prikaz Category widgeta . . . . . . . .
Objanjenje . . . . . . . . . . .
Izrada widgeta za posljednje lanke . . . . . .
Prikazivanje naslova . . . . . . . . . .
Objanjenje . . . . . . . . . . .
Prikazivanje posljednjih lanaka . . . .
Objanjenje . . . . . . . . . . .
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 Sadraj . . . . . . . . . . . . . . . . .
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
SADRAJ
Stranice bez sidebar-a

Datoteka 404.php . . . . . . .
Dodavanje komentara na lanke .
Sreivanje 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 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Poetna 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 razliitim post_type sadrajem
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
SADRAJ
Spremanje polja u media uploader-u . . . . .

Ispis slika za klijente . . . . . . . . . . . . . .
Sreivanje uvodne slika . . . . . . . . . . . . . . . .
Sreivanje Testimonial dijela . . . . . . . . . . . . .
Custom Template: About . . . . . . . . . . . . . . . . . .
Ispis sadraja stranice . . . . . . . . . . . . . . . . .
lanovi tima . . . . . . . . . . . . . . . . . . . . . .
Dodavanje dodatnih unosa preko metaboxa . . . . .
Spremanje dodatnog unosa . . . . . . . . . . . . . .
Ispisivanje poruke prilikom greke kod unosa .
Ispisivanje lanova . . . . . . . . . . . . . . . . . . .
Testimonials i slike klijenata . . . . . . . . . . . . . .
Custom Template: Contact . . . . . . . . . . . . . . . . .
Sporedni sadraj . . . . . . . . . . . . . . . . . . . .
Forma . . . . . . . . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
201
201
203
203
205
206
208
209
210
212
213
215
217
218
220
Koritenje 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 padajuih izbornika . . . . . . . . . . . .
Dodavanje opcije za mijenjanje pozadine aktivne poveznice u padajuem 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
Koritenje 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
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
SADRAJ
Postavljanje jQuery funkcije za AJAX . . . . . . . . . . . . . . . . . . . . . . . . 257

Funkcije za poveavanje ili smanjivanje ocjene . . . . . . . . . . . . . . . . . . . 259
Sreivanje javnog dijela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
A Dodatak: WordPress - Bootstrap NavWalker . . . . . . . . . . . . . . . . . . . . . . 264
B Dodatak: Osnove PHP-a . . . . .
Varijable . . . . . . . . . . . . . .
Polja . . . . . . . . . . . . . . . .
Kljuevi u poljima . . . . . .
Izvlaenje 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 vodeih CMS sustava u Blogging svijetu pa i ire. Danas se WordPress
sve vie koristi kod izrada raznih web aplikacija koje su daleko kompleksnije od jednog bloga za
to je WordPress u poetku bio namijenjen.
Ova knjiga namijenjena je za sve developere, a i dizajnere koji se ele okuati u WordPress-u
i nauiti kako izraditi jedan mali projekt u WordPress-u. Knjiga WordPress na Bootstrapu 3.x
moe pomoi i iskusnijim developerima koji su ve radili u WordPressu jer e uz izradu same
WordPress teme biti koritene i neke druge korisne metode odnosno funkcije koje mijenjaju neke
funkcije u samom CMS-u.
Upoznavanje sa Bootstrap
Frameworkom
Bootstrap je Framework za bru izradu web stranica pomou 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 moete skinuti ili se s njime poblie upoznati na njegovoj
stranici http://getbootstrap.com.
slika
Koritenje Bootstrap-a
Bootstrap je veoma jednostavan za koristiti. Dovoljno je pozvati njegove datoteke i prizivati
odnosno dodavati komponente koje su nam potrebne. Na takav nain jednostavno je dodati par
redaka sa strukturom koja sadri klase koje Bootstrap koristi.
Grid
Grid je naa struktura stranice. Njime se definira na layout u koji se zatim dodaju razne
komponente Bootstrap-a. Poetna struktura sastoji se od tri dijelova - container, row i column.
Unutar column-a unosimo sadraj.
http://getbootstrap.com
Upoznavanje sa Bootstrap Frameworkom
Klasina struktura jednog bloga je lijevi dio s glavnim sadrajem i desnim dijelom s nekim
dodatnim sporednim informacijama. To bi se postiglo sa sljedeim kodom:
1
2
3
4
5
6
7
8
9
10
<div class="container">
<div class="row">
<div id="primary-content" class="col-sm-8">
Glavni sadraj
</div>
<aside id="secondary-content" class="col-sm-4">
Sporedni sadraj
</aside>
</div>
</div>
Jedan redak sastoji se od 12 stupaca. Ovakvom strukturom rekli smo da na glavni sadraj koristi
8/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 se
sadraj lomi, presavija i sl. Te toke po default-u su < 768px, >= 768, >= 992px i >= 1200px. Ove
toke prekidanja odnose se na irinu ekrana na kojemu se web prikazuje. Na nain na koji je
napravljen Bootstrap odnosno na nain na koji su postavljene toke prekidanja, radi se s MobileFirst Frameworkom te zbog toga ne vidimo nigdje toke prekidanja koje gledaju na < 481px jer
se smatra da se za to definira sadraj u poetku.
Upravo zbog tih toaka prekidanja postoje razliite klase xs, sm, md, lg. Klasu sm moete vidjeti
u gornjem primjeru. To znai da e sadraj iznad 768px biti prikazan upravo u ovakvoj strukturi,
dok sadraj ispod te irine, koji zahtjeva klasu xs za dodatnu definiciju strukture e biti jedan
ispod drugog sa irinom namjetenom na 12/12 odnosno svaki stupac biti e jednak irini 12
stupaca tj. na 100% irine jer nema definiranu strukturu za tu irinu. Isti uinak dobili bi kada bi
napisali sljedee:
1
2
3
4
5
6
7
8
9
10
<div class="row">
<div id="primary-content" class="col-sm-8 col-xs-12">
Glavni sadraj
</div>
<aside id="secondary-content" class="col-sm-4 col-xs-12">
Sporedni sadraj
</aside>
</div>
</div>
Vie o gridu moete saznati na Bootstrap Grid.

http://getbootstrap.com/css/#grid
Responzivne slike
Bootstrap 3 prua jednostavan nain 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
<img src="..." class="img-responsive" alt="Responsive image">
O jednostavnim CSS dijelovima koje omoguuje Bootstrap 3 vie moete pronai na Bootstrap
CSS.
CSS Komponente
Uz jednostavne CSS klase koje omoguuju lake slaganje Bootstrap prua i dodatne kompleksnije
CSS komponente koje mogu posluiti za to bri 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 sljedei 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
<nav class="navbar navbar-default" role="navigation">

<div class="container-fluid">

<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo Tekst ili Slika</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link</a></li>
<li><a href="#">Jo jedan Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Padajui izbornik <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Jedan link</a></li>
<li><a href="#">Drugi link</a></li>
<li><a href="#">Trei Link</a></li>
http://getbootstrap.com/css/
27
28
29
30
31
32
33
34
35
36
<li class="divider"></li>
<li><a href="#">Odijeljeni Link</a></li>
<li class="divider"></li>
<li><a href="#">Odijeljeni Link No. 2</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
Uz ovakav kod dobiti emo meni s padajuim izbornikom koji se otvara na klik miem ili prstom
ako 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 javascript
pluginove koje prua Bootstrap 3. Plugin koji se ovdje koristi je tzv. collapse.
Sve ostale CSS Komponente moete pronai 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 nain moemo lako pozvati
neke dijelove s CSS klasama i HTML atributima koje izvravaju dodatne funkcionalnosti jer su
usko povezane s pluginovima, kao to je npr. carousel plugin.
http://getbootstrap.com/components
http://getbootstrap.com/javascript/#carousel
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
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel\

">

<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>

<div class="carousel-inner">
<div class="item active">
<h1>Ovo je slider</h1>
<div class="carousel-caption">
...sdasdsadada
<br/>
sadijasidjaidsjaidjas
</div>
</div>
<div class="item ">
<h1>Ovo je slider</h1>
<div class="carousel-caption">
...sdasdsadada
<br/>
sadijasidjaidsjaidjas
</div>
</div>

<a class="left carousel-control" href="#carousel-example-generic"
role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic"
role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
Sada to izgleda kao ovo:
Carousel Slider
Uz takve pluginove mogue je nadodati dosta zanimljivih i korisnih funkcionalnosti. O njima

moete vie proitati na Bootstrap Javascript.
Prilagoen Boostrap
Bootstrap na svojoj web stranici daje mogunost prilagoavanja Bootstrap-a svojim eljama
i potrebama. Dakle, mogue je namjetati razne varijable od boja do veliina fonta kako
bi si kasnije olakati izradu tema na Boostrap-u. To je mogue na njihovoj stranici: http://getbootstrap.com/customize/.
Ako poznajemo potrebe naeg projekta mogue 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 veliinu naeg projekta bez razloga.
Recimo na primjer da sve to nam treba od Bootstrap-a je njegov Grid i neto 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/
Prilagoeni Bootstrap
Ako su nam potrebne svi ili pojedini jQuery plugini malo ispod ovih Less datoteka potrebno je
na isti nain odabrati eljene jQuery pluginove ili ostaviti kako je.
Nakon toga moemo prilagoditi Grid naim potrebama mijenjajui vrijednosti varijabla koje se
odnose na Grid.
Prilagoeni 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 sadri nae
.css datoteke i .js datoteke.
Nakon toga potrebno je polinkati nau web stranicu s tim datotekama i moemo je jednostavno
razvijati 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 jednostavnije pisanje CSS-a koristei grananja, varijable i ostale razne pogodnosti kako bi se ubrzalo pisanje
CSS-a. Nakon toga kompajlira se takva datoteka u .css format koja moe biti i kompresirana na
najmanju moguu veliinu. Time dobivamo bri i lako odrivi CSS.
Mali primjer Less-a
.less datoteka
10
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;
Moe se primijetiti da se grananjem i koritenjem varijabli utedjelo na pisanju ponavljajuih

klasa ili boja i sl.
Uz Less, Bootstrap omoguuje koritenje Sass-a koji je takoer jedan od pretprocesora CSS-a, ali
Less je njihov izvorni jezik pa u se drati toga u ovoj knjizi.
Kako bi dobili cijeli Bootstrap 3 u izvornom obliku sa less datotekama potrebno je odabrati
Download Source.
11
Raspakirani Bootstrap Izvorni kod

Ako ste skinuli tj. preuzeli Bootstrap izvorni kod i raspakirali njihovu .zip datoteku, dobili ste
neto slino 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 slue ako ne koristite Grunt ili neto slino. Kako je ova knjiga zamiljena kao
prirunik za poetnike ili one koji se ve bave ovom strukom, preskoit 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
Ako ponovno bacimo pogled na poetni 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 sadri neki dio css-a odnosno js-a koji su potrebni
bi Bootstrap bio Bootstrap.
Koritenje less-a
Kako je less preprocesor CSS-a potrebno je koristiti dodatne stvari kako bi mogli iz less-a dobiti
css. Iako je to moguu i preko obine 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 moete 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. Mogue da donja slika nee biti ista kao i vaa 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
Nakon to ste instalirali prepros moete ga otvoriti i dobiti ete prazan dashboard gdje se inae
pokazuju 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 sve
datoteke 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 red
pokazuje 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 upravo
to i napraviti kako bi jo bolje razumjeli ukupni proces rada. Kopirajte sada prethodno navedene
direktorije 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
14
Sada prije kompajliranja less-a, otvorimo direktorij i u vaem najdraem editoru kao to je
Notepad++, Brackets ili Sublime Text otvorite datoteku bootstrap.less. Moe 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
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 znai 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 oznaene tako da poinju 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 sadraju ove datoteke
nalaze varijable za sva ostala mogua css svojstva. Takve varijable se dalje koriste u drugim
datotekama iako nisu opet definirane.
Upravo zbog toga, ako pogledate u prethodno navedeni sadraj datoteke bootstrap.less, moe se
primijetiti da je upravo datoteka variables.less navedena na poetku. Ako sada otvorimo neku
drugu datoteku poput navbar.less mogu se vidjeti i neke druge varijable koje su koritene a nisu
definirane prije koritenja.
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 poetak, potrebno je dodati projekt klikom na
Add New Project te zatim odabrati direktorij u kojem se nalaze less datoteke.
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
Dodani projekt
Ukoliko elimo imati neku drugu putanju to lako moemo 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
Promjena putanje
Nakon toga, potrebno je otii u direktorij iznad i napisati da se sprema u style.css.
20
Definirana putanja
Sada kada kliknemo na save, promijeniti e se putanja u listi datoteka.
21
Promijenjena putanja
Sada je dovoljno odabrati bootsptrap.less i kliknuti na Compile ili istu tu datoteku Spremiti preko
vaeg omiljenog editora.
22
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 neto nije potrebno sada u tome? To moemo jednostavno promijeniti bez potrebe
za koritenjem 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 poetku se vidi:
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 naeg editora dobiti emo novi style.css ali bez tog dijela. Sada je poetak style.css datoteke
sljedei 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) ")";
}
...
Moete primijetiti kako je jednostavno koritenjem 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 prouili 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 pronai kvalitetni besplatni template-i.
24
Ja sam u Google upisao Free Bootstrap Themes te naiao na puno razliitih lanaka i template-a.
Nakon kratkog muvanja po raznim stranicama naiao sam na jedan simpatian template koji
ima 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 kao
nekakav blogging cms napravit emo i jedan klasian blog dio na naoj stranici. Template koji
sam pronaao zove se SOLID i moe se nai ovdje.
Na toj istoj stranici moete 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 nee biti izrade s less jezikom iako je podrobno bio
objanjen 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/
Upoznavanje WordPress-a
WordPress je CMS koji je u poetku bio zamiljen kao blog platforma. Nakon nekog vremena
poeo se koristiti kao platforma za web stranice razliitog tipa. Zbog njegove jednostavne
uporabe mnogi ga uzimaju u obzir kada zapoinju svoje web projekte pa ak i ljudi koji nisu
developeri ve su upoznati s WordPress-om te klijenti znaju sami traiti 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 sadraj omoguava koritenje raznih tema i nadogradnju samog CMS-a
pomou njegovih dodataka.
lanci - su zapisi poput nekih novosti i sl. koji se zatim listaju, esto, na poetnoj stranici. Mogue
ih je kategorizirati pomou kategorija i tagova.
Stranice - su zapisi slini lancima ali oni se smatraju kao obine 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 statine stranice.
Komentari - su zapisi koje prave korisnici WordPress stranice. Komentare mogu pisati i korisnici
koji nisu registrirani na stranici ako je tako omogueno.
Teme - su razliiti predloci dizajna koji se mogu skinuti i instalirati putem WordPress administracije ili direktno preko sistema direktorija. Sve instalirane teme mogue je pregledati preko
WordPress administracije i ukljuivati po elji. Teme se nalaze u folderu wp-content/themes/.
Dodaci - slue za proirivanje funkcija same WordPress stranice. Danas postoje razliiti dodaci
za svakakve potrebe. Dodaci se nalaze u folderu wp-content/plugins/.
26
Instalacija WordPress-a
Stranica za download WordPressa
WordPress se moe skinuti sa stranice wordpress.org. Ako niste zadovoljni engleskom verzijom
moete 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 vaem lokalnom serveru biti e objanjeno kasnije u
knjizi kada se bude radila WordPress tema.
Poetne 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 - 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 vrhu
teme
http://www.wordpress.org
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 dinamini
sidebar
comments.php - sadri strukturu komentara koji se dodaju svakom lanku ili stranici gdje
su 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 se
koristi 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 sljedeih
datoteka:
home.php
front-page.php
Razumijevanje hijerarhije datoteka

Mogue je koristiti jo datoteka kako bi si olakali odravanje. Cijelu hijerarhiju datoteka mogue
je pogledati na Chip Bennett Template Hijerarhija. Ovdje neu objasniti svaku pojedinu ali iz
nekoliko 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. Prilikom
pristupanja nekoj arhivi, za primjer uzet emo kategoriju Auti ( slug od kategorije je auti, id od
kategorije 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 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/
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 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 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 pronaena neka od spomenutih datoteka pregledava se folder za datotekom
single.php
Ukoliko nema ni single.php, koristi se index.php
Pratei dijagram koji je gore naveden tema se moe organizirati u hijerarhiju datoteka koja je
lako odriva te je jednostavno shvatiti koja datoteka se odnosi na koji dio teme. Iz gore navedenih
primjera moe se primijetiti kako sve uvijek vodi na index.php ukoliko traene 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 sadraja 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 izvriti za svaki lanak unutar petlje.
Koristei razne Template Tagove moemo prikazati razliite informacije. Jedne od osnovnih
tagova kod prikaza informacija za lanak unutar petlje jesu:
the_title() - prikazuje naslov lanka
29
the_content() - prikazuje sadraj lanka, ukoliko nije stranica pojedinog lanka onda se
prikazuje 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 atribut href
Razni tagovi mogu se pronai na WordPress Codex-u.
Osnovna struktura petlje
1
2
3
4
5
6
7
8
<?php
if( have_posts() ) {
while( have_posts() ) {
the_post();
//Ostali sadraj
}
}
?>
Action i Filter funkcije

Action i Filter funkcije slue za nadograivanje nae teme ili admin-a. Njima se moe odreivati
da 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 prikazivanje
admin stranice. Filter funkcije su funkcije koje se izvravaju 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 odgovarajui action
prioritet predstavlja broj, ukoliko ga ne unesemo postavlja se na 10. to je manji broj to se
prije izvrava dodana funkcija
broj_parametara predstavlja broj parametara koji dolaze uz funkciju, npr. function update_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
30
do_action("ime_actiona");
Filter funkcije
Za pozivanje Filter funkcije koristi se slini 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 odreuje se sa

1
do_filter("ime_filtera",$vrijednost,$varijabla1,$varijabla2,....);
$vrijednost predstavlja vrijednost koja se alje u filter i koja se moe mijenjati u filteru
$varijabla1, $varijabla2 predstavljaju parametre koji se alju skupa s vrijednou, mogue
je dodavati jo varijabla
Brisanje povezanih funkcija na Action i Filter funkcije
Brisanje povezanih funkcija moe se izvriti 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 podeavanje 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 moe skinuti sa stranice apachefriends.org. Skinite njihov installer i instalirajte svoj XAMPP paket (pri instaliranju odaberite to
sve hoete instalirati, apache, mysql i php se moraju instalirati, poeljan je i phpmyadmin).
Nakon instalacije XAMPP-a otiite 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
Cjelokupni WordPress u folderu Wordpress
Nakon toga potrebno je upaliti XAMPP i pokrenuti APACHE i MySQL Server.
wordpre Zatim je potrebno otii na phpmyadmin te napraviti novu bazu za WordPress. Odemo na
navigaciju Databases i upiemo eljeni naziv baze podataka, odaberemo iz padajueg izbornika
utf8_general_ci i kliknemo na Create.
http://localhost/phpmyadmin/
33
Pravljenje nove baze podataka
Sada je potrebno otvoriti iz naeg raspakiranog WordPress foldera u htdocs folderu datoteku
wp-config-sample.php.
Kada ste otvorili wp-config-sample.php u vaem 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 sljedee:

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
Instalacija WordPress-a
Nakon to smo zamijenili potrebne podatke i podesili na wp-config.php potrebno je instalirati
WordPress na naem 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 Vae korisniko ime i lozinka.
WordPress Instalacijska stranica 1
Nakon to ispunite sve potrebne informacije kao username i password moete krenuti na sljedei
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
uspjeno instalirali WordPress.
35
WordPress Instalacijska stranica 2
Sada se moete prijaviti klikom na Log In. Ako posjetite opet svoju poetnu stranicu http://localhost/wordpress/ dobiti ete pravu web stranicu koju pogoni WordPress, te temu koju
vidite 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 i
style.css sa svim informacijama vezanim uz temu. U folderu gdje smo kopirali cijeli WordPress,
potrebno je otii u wp-content/themes i otvoriti novi folder kojeg emo nazvati wpb3.
36
WordPress wp-content folder
Sada u tom folderu napravite folder wpb3 i otvorite ga.
WordPress wpb3 folder
Unutar tog foldera kopirat emo sadraj Bootstrap 3 template SOLID koji smo skinuli u poglavlju
Upoznavanje 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 stvoriti index.php i
style.css. Sadraj index.php-a moe trenutno biti samo nekakav tekst kao:
1
WordPress na Bootstrap 3.x
Nakon index.php-a, stvorite style.css i kopirajte sljedei kod unutar te datoteke:

http://www.blacktie.co/2014/05/solid-multipurpose-theme/
37
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 izraena 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 pretraivanja 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 preete
miem 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 vau
stranicu na front-u (npr. localhost/wordpress) dobiti ete tekst koji smo unijeli u datoteci
index.php.
WPB3 tema poetna
38
Functions.php
Uz style.css i index.php najbolje je odmah na poetku stvoriti jo jednu datoteku, a to je
functions.php koja po WordPress Codex-u, unutar teme slui kao plugin koji na frontu i u
administraciji se uitava kako bi izvrila funkcije dodane unutar nje koje se direktno odnose
na aktiviranu temu. To moe biti dodavanje dodatnih opcija za definiranje izgleda teme unutar
administracije, pravljenje razliitih 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 sljedee:
1
2
3
4
5
6
7
8
9
10
11
<?php
/**************
*
* WPB3 Funkcije
*
**************/
if ( ! isset( $content_width ) ) {
$content_width = 600;
}
Na ovaj nain definirali smo maksimalnu irinu svega to se unese unutar naih lanaka. Tako
ni slike ne mogu prijei preko 600px. Dok budemo razvijali nau temu, mogue je da e se ova
irina morati promijeniti ali za sada ostavimo je ovakvu kakva je. Sve o toj varijabli moete
saznati ovdje.
Header i footer
esto ili bolje rei, gotovo uvijek, stranice imaju ponavljajue elemente, od kojih nisu iznimke
header i footer gdje su najee prikazani logotipi, navigacije i neke dodatne informacije.
WordPress podrava odvojene datoteke koje slue kao header i footer koji se zatim pozivaju
u ostalim datotekama koje slue za prikaz nekakvog sadraja.
Stvorite dvije nove datoteke header.php i footer.php, a pratei WordPress standarde za Header
u header.php kopirajte sljedee:
http://codex.wordpress.org/Theme_Features
http://codex.wordpress.org/Content_Width
http://codex.wordpress.org/Theme_Development#Document_Head_.28header.php.29
1
2
3
4
5
6
7
8
9
10
11
12
13
14
39
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php wp_title(); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"
type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php if ( is_singular() && get_option( 'thread_comments' ) )
wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
</head>
<body>
Nakon toga, potrebno je isto tako napraviti izmjene i za Footer, pa emo sljedei dio kopirati u
footer.php:
1
2
3
<?php wp_footer(); ?>

</body>
</html>
Objanjenje
Header.php sadri klasine html elemente koji se dodaju na svakoj web stranici pa tako i kod
WordPress tema. S funkcijom bloginfo() dohvaa informacije koje su unesene u administraciji,
najee pod Settings, iako ima informacija i od drugih podruja administracije koje su vezane
uz sam WordPress, ne uz temu.
Dalje u toj datoteci spominje se i get_stylesheet_uri(). Ta funkcija prikazuje putanju do nae
style.css datoteke. Zatim imamo pingback_url koji nam slui ako netko spomene na lanak i
ima isto tako ukljuen pingback, alje nama informaciju da su nas pingali i WordPress zapisuje
tu informaciju kao vrstu komentara za na lanak. To se moe imati, ali i nije potrebno.
Ako smo na pojedinom lanku ili stranici te je ukljueno povezivanje komentara odnosno
nekakav nain hijerarhiziranja komentara ukljui skriptu gdje se pri kliku na Reply | Odgovor
otvara se forma koja za odgovaranje na taj komentar.
I na kraju vri se poziv funkcije wp_head() koji slui za izvravanje nekih funkcija ili ispisivanje
raznih skripti ili css datoteka koje su poslane u wp_head preko funkcije add_action. Jednako tako
koristi se i wp_footer.
Povezivanje header-a i footer-a

Nakon to smo stvorili nae header i footer datoteke potrebno ih je povezati ili barem vidjeti
kako se to ini. Kako je naa poetna stranica obian index.php, otvorite emo tu datoteku i malo
je izmijeniti.
http://codex.wordpress.org/Theme_Development#Footer_.28footer.php.29
40
1
2
3
4
5
<?php get_header(); ?>

<?php get_footer(); ?>
Sada kada opet otvorimo nau stranicu neemo vidjeti promjene, osim ako smo prijavljen u naoj
administrativnom dijelu WordPress-a. Tada emo dobiti na vrhu stranice jedan toolbar s raznim
opcijama.
WPB3 toolbar
Upravo taj toolbar je izgeneriran zbog funkcije wp_head(). Ako pogledamo sada izvorni kod
stranice koji je prije bio samo obian tekst WordPress na Bootstrap 3.x vidjet emo razne pozive
koje mi nismo napisali jer su izgenerirani preko funkcija wp_head ili wp_footer.
Izvorni kod stranice nakon poziva headera i footera
Izrada Bloga
U ovome poglavlju krenut emo s poetnom strukturom WordPress teme i izraditi jednu klasinu
temu, a to je tema za blog. Bootstrap Template SOLID dolazi s ve definiranim izgledom stranice
Blog, pa emo taj raspored HTML-a i koristiti.
Ako ste slijedili sve korake u prolom poglavlju trebali bi sada imati neto slino ovome:
41
WPB3 tema struktura
Bitno je napomenuti da nam ne slui datoteke u .html ekstenziji odnosno da ih WordPress

ne gleda, ali ostavit emo ih ovdje za referencu dok pravimo nau temu
Povezivanje CSS datoteka

Prvo to je potrebno uiniti jest povezati sve css datoteke koje imamo kako bi se pojavile na
frontu nakon to se izvri wp_head(). Jednostavnije rjeenje bi moda bilo kopirati sve sadraje
iz tih CSS datoteka i staviti ih unutar style.css datoteke, ali elim Vam pokazati kako da poveete
sve CSS datoteke na frontu, a da ne dotiemo niti style.css niti te datoteke. Za takvo neto koristit
e nam funkcija wp_enqueue_style().
Ako pogledamo izvorni kod na stranici blog.html od naeg SOLID template-a vidjet emo da se
poziva samo nekolicina css-a datoteka, ali ne i sve. Tako da emo i mi pozvati samo te koje nam
trebaju za na blog.
1
2
3
<link rel="stylesheet" href="assets/css/bootstrap.css">

<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
U naoj datoteci functions.php zalijepite sljedei sadraj:
http://codex.wordpress.org/Function_Reference/wp_enqueue_style
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
42
/*=============
Povezivanje CSS-a
=============*/
function wpb3_css_datoteke() {
wp_enqueue_style( 'wpb3-bootstrap',
get_template_directory_uri() . '/assets/css/bootstrap.css' );
wp_enqueue_style( 'wpb3-fontAwesome',
get_template_directory_uri() . '/assets/css/font-awesome.min.css' );
wp_enqueue_style( 'wpb3-style',
get_template_directory_uri() . '/assets/css/style.css' );
}
add_action( 'wp_enqueue_scripts', 'wpb3_css_datoteke' );
Kako ne bi nepotrebno pozivali ove css datoteke i u administrativnom dijelu stranice, jer ako
se prisjetite, function.php je kao dodatak temi pa e se izvriti funkcije i u administrativnom
dijelu ako drugaije nije navedena, koristi se WordPress akcija wp_enqueue_scripts ija verzija
za administrativni dio ima naziv admin_enqueue_scripts. Ali radi dodatne sigurnosti malom
izmjenom nae funkcije dobiti emo sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
function wpb3_css_datoteke() {
if(!is_admin()){
wp_enqueue_style( 'wpb3-bootstrap',
get_template_directory_uri() . '/assets/css/bootstrap.css' );
wp_enqueue_style( 'wpb3-fontAwesome',
get_template_directory_uri() . '/assets/css/font-awesome.min.css' );
wp_enqueue_style( 'wpb3-style',
get_template_directory_uri() . '/assets/css/style.css' );
}
}
Sada e se ove css datoteke povezati samo na front-u nae stranice, a ne i u administrativnom
dijelu, ako sluajno doe do greke pri radu.
Povezivanje Javascript datoteka

SOLID template koristi nekolicinu JS datoteka te sve su smjetene u assets/js. Sve te datoteke
potrebno je povezati na slian nain na koji smo povezali i CSS datoteke. Dovoljno je samo malo
proiriti nau funkciju ili moemo koristit drugu funkciju za JS datoteke kako bi bilo preglednije.
Za ovaj primjer koristiti u drugu funkciju kako bi lake pratili i razumjeli to se dogaa. Funkcija
za povezivanje JS-a se zove wp_enqueue_script(), te se koristi na sljedei nain:
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
1
2
3
4
5
6
43
wp_enqueue_script(
$naziv_poziva,
$putanja,
$potrebne_datoteke,
$verzija,
$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 u array() 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 i null pa nema verzioniranja ili ostaviti prazno
pa e WordPress sam dodati broj svoje verzije
$u_footer - ako je ova varijabla true dodaje se na kraj elementa body, u suprotnom se
postavlja u head
Javascript datoteke koje treba povezati jesu sljedee:
1
2
3
4
5
6
7
8
9
10
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></s\
cript>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/retina-1.1.0.js"></script>
<script src="assets/js/jquery.hoverdir.js"></script>
<script src="assets/js/jquery.hoverex.min.js"></script>
<script src="assets/js/jquery.prettyPhoto.js"></script>
<script src="assets/js/jquery.isotope.min.js"></script>
<script src="assets/js/custom.js"></script>
Nakon definicije povezivanja CSS datoteka, kopirajte sljedei dio koda u functions.php:
1
2
3
4
5
6
7
8
9
10
/*=============
Povezivanje JS-a
=============*/
function wpb3_js_datoteke() {
if(!is_admin()){
wp_enqueue_script(
'wpb3-bootstrap-js',
get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js',
array( 'jquery' ),
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
44
45
46
47
48
49
50
51
52
53
54
55
56
44
'',
true
);
wp_enqueue_script(
'wpb3-retina-js',
get_stylesheet_directory_uri() . '/assets/js/retina-1.1.0.js',
array( 'jquery' ),
'',
true
);
wp_enqueue_script(
'wpb3-hoverdir-js',
get_stylesheet_directory_uri() . '/assets/js/jquery.hoverdir.js',
array( 'jquery' ),
'',
true
);
wp_enqueue_script(
'wpb3-hoverex-js',
get_stylesheet_directory_uri() . '/assets/js/jquery.hoverex.min.js',
array( 'jquery' ),
'',
true
);
wp_enqueue_script(
'wpb3-prettyPhoto-js',
get_stylesheet_directory_uri() . '/assets/js/jquery.prettyPhoto.js',
array( 'jquery' ),
'',
true
);
wp_enqueue_script(
'wpb3-isotope-js',
get_stylesheet_directory_uri() . '/assets/js/jquery.isotope.min.js',
array( 'jquery' ),
'',
true
);
wp_enqueue_script(
'wpb3-custom-js',
45
57
58
59
60
61
62
63
64
65
66
67
get_stylesheet_directory_uri() . '/assets/js/custom.js',
array( 'jquery' ),
'',
true
);
}
}
add_action( 'wp_enqueue_scripts', 'wpb3_js_datoteke' );
Za svaku JS datoteku zahtjevali smo pozivanje jQuery i tako maknuli mogunost pojavljivanja
pogreke pri pozivanju jQuery plugin-a bez jQuery-a. Sada e WordPress prije pozivanja svih
navedenih JS datoteka pozvati jQuery koji dolazi zapakiran sa WordPress-om. Verzija svake
datoteke nije navedena te je ostavljeno prazno kako bi WordPress dodao svoju verziju na svaku
datoteku.
Ako ponovno pokrenemo nau stranicu i pogledamo izvorni kod, vidjet emo da su sve skripte,
osim jQuery-a pozvane na kraju elementa body jer je postavljena vrijednost true kod opcije da
li poziv ide u head ili na kraj elementa body.
JS datoteke na kraju elementa body
Izrada Navigacije
Bootstrap 3 ima CSS komponentu navbar koja omoguuje i responzivni izgled navigacije gdje se
sama 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 je
postavimo u header.php odmah nakon otvorenog elementa body.
1
2
3
4
5
6
7
8
9
...
</head>
<body>

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="navbar-header">
data-target=".navbar-collapse">
46
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
<span class="sr-only">Toggle navigation</span>

</button>
<a class="navbar-brand" href="index.html">SOLID.</a>
</div>
<div class="navbar-collapse collapse navbar-right">
<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">PAGES
<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="blog.html">BLOG</a></li>
<li><a href="single-post.html">SINGLE POST</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="single-project.html">SINGLE PROJECT</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Kako bi pogledali promjenu, otvorite opet Vau stranicu odnosno osvjeite je ukoliko Vam je
otvorena. Dobiti ete ovo:
Navigacija u header-u
Izgleda kao da nam se na tekst koji je unesen unutar index.php-a izgubio, ali zapravio sve to
se dogodilo jeste da je ova navigacija fiksna te zbog takvog css svojstva na tekst je ostao u
poetnoj poziciji kao i prije dok se navigacija prikazuje preko svega i ne utjee na raspored
drugih elemenata.
47
Navigacije ne utjee na raspored elemenata
Da bi mogli vidjeti opet ovaj tekst i slijediti strukturu stranice blog.html potrebno je dodati
ostale elemente koji ine osnovnu strukturu u datoteci blog.html. Kako ne bi preskakali dio po
dio, 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 bloga
odnosno stranice, moemo odmah to iskoristiti kao tekst logo-a. Za takvo neto koristiti e nam
funkcija 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
<a class="navbar-brand" href="index.html">SOLID.</a>
Sa
1
2
3
<a class="navbar-brand" href="<?php echo home_url(); ?>">

<?php echo bloginfo( "name" ); ?>
</a>
Objanjenje
Funkcija home_url() vraa adresu nae stranice koja je postavljena u WordPress postavkama.
Uz to, za tu funkciju je mogue definirati dodatne opcije jer je njezin poziv:
1
<?php home_url( $path, $scheme ); ?>

http://codex.wordpress.org/Function_Reference/bloginfo
http://codex.wordpress.org/Function_Reference/home_url
48
gdje - $path oznaava putanju, te je mogue kao vrijednost postaviti / pa bi umjesto

localhost/wordpress dobili localhost/wordpress/ - $scheme definira kakav tip poveznice e
biti tako da je mogue postaviti http, https ili relative gdje bi po tom redoslijedu dobili
http://localhost/wordpress, https://localhost/wordpress ili /wordpress.
Kako nam funkcija samo vraa vrijednost, ona je ne ispisuje pa je potrebno koristiti php funkciju
echo kako bi je ispisali.
Funkcija bloginfo sa name kao vrijednost, daje nam ime nae stranice koje je postavljeno u
generalnim postavkama WordPress-a. Sada kada ponovno osvjeimo nau stranicu trebali bi
dobiti 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 sada
pogledamo taj dio u administraciji moemo primijetiti da Menus ne postoji. Kako bi to moglo
postojati i kako bi mi mogli postavljati nae menije potrebno je dodati podrku tih menija
unutar nae teme. To se radi pozivom funkcije register_nav_menu ili register_nav_menus. U
naem template-u samo navigacijskih menija ima u headeru pa emo iskoristiti prvu spomenutu
funkciju koja je dovoljna ako elimo registrirati samo jedan menu. Poziv te funkcije je sljedei:
1
<?php register_nav_menu( $location, $description ); ?>
gdje
$location oznaava lokaciju koju mi sami definiramo, kao npr. header-menu i zatim se
pri pozivanju tog menija koristi lokacija navedena kao vrijednost varijable $location
$description oznaava opis te lokacije kako bi nam bilo lake snalaziti se po lokacijama
menija, kao npr. Menu u header-u
Sada kada znamo to pojedina varijabla oznauje, u functions.php dodajte sljedei dio koda nakon
pozivanja JS datoteka.
1
2
...
register_nav_menu( "header-menu", "Menu u Header-u" );
Ako opet otvorimo administraciju i pogledamo pod Appearance vidjeti e se nova navigacija
Menus.
http://codex.wordpress.org/Function_Reference/register_nav_menu
http://codex.wordpress.org/Function_Reference/register_nav_menus
49
Menu u Administraciji
Sada moemo na tom dijelu administracije izraditi na Menu. Nazvat emo ga Header Menu, a
poveznice unutar menu-a moemo ostaviti kao na slici gdje je prva poveznica dodana izbornikom
Links, a druga poveznica je dodana iz izbornika Pages. Nakon toga dovoljno je pritisnuti Create
Menu.
Kada je na Header Menu stvoren potrebno ga je dodati i lokaciji koju smo stvorili prije.
Dodavanje Menu-a lokaciji
Zatim pritisnemo samo na Save Menu kako bi se nove promjene spremile.

Prikaz WordPress Menu-a
WordPress Menu prikazuje se pozivom funkcije wp_nav_menu koji pri pozivanju uzima
razliite parametre koje se definiraju u varijabli koja je polje (eng. array). U tom polju se
mogu definirati razliiti parametri. Trenutno, nama je potreban samo parametar lokacije kako bi
prikazali Menu koji smo pridodali toj lokaciji.
Umjesto
http://codex.wordpress.org/Function_Reference/wp_nav_menu
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
50
<div class="navbar-collapse collapse navbar-right">

<li><a href="index.html">HOME</a></li>
<li><a href="about.html">ABOUT</a></li>
<li><a href="contact.html">CONTACT</a></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">PAGES
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="blog.html">BLOG</a></li>
<li><a href="single-post.html">SINGLE POST</a></li>
<li><a href="portfolio.html">PORTFOLIO</a></li>
<li><a href="single-project.html">SINGLE PROJECT</a></li>
</ul>
</li>
</ul>
</div>
napiite sljedee:
1
2
3
4
5
6
7
8
9
<?php
wp_nav_menu(
array(
'theme_location' => 'header-menu'
)
);
?>
Sada smo u tom polju dali parametar theme_location koji ima vrijednost nae lokacije. Ukoliko
to spremite i otvorite ponovno nau stranicu, vidjet ete da to nije navigacija kao to je
postavljena u originalu template-a. Kako bi jednostavno postigli isti izgled sa mogunou
stvaranja padajuih izbornika potrebno je koristiti tzv. Walkere koji tada generiraju potreban
sadraj na nain kakav je definiran u tom Walkeru. Takav Walker je i wp-bootstrap-navwalker
kojeg moete skinuti sa te stanice. Ukoliko Vam se ne skida moete slobodno u Dodatatku:
WordPress - Bootstrap NavWalker na kraju knjige kopirati cijeli kod tog Walkera.
Taj kod kopirajte u zasebnu datoteku pod nazivom npr. wpb-navwalker.php te je spremite u novi
folder pod nazivom inc.
https://github.com/twittem/wp-bootstrap-navwalker
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 stvarati
prave Bootstrap 3 navigacije s Menu-ima iz WordPress-a. To radimo tako da promijenimo jo
neke parametre u pozivu funkcije wp_nav_menu.
1
2
3
4
5
6
7
8
9
10
11
12
13
wp_nav_menu(
array(
'menu' => 'header-menu',
'theme_location' => 'header-menu',
'depth'
=> 2,
'container'
=> 'div',
'container_class'
=> 'navbar-collapse collapse navbar-right',
'container_id'
=> 'header-menu',
'menu_class'
=> 'nav navbar-nav',
'fallback_cb'
=> 'wp_bootstrap_navwalker::fallback',
'walker'
=> new wp_bootstrap_navwalker()
)
);
Kada smo i to promijenili moramo jo neto promijeniti kod cijele komponente navbar-a kako
bi to radilo, tako da treba zamijeniti:
1
2

data-target=".navbar-collapse">
sa
1
2

data-target="#header-menu">
Objanjenje
Parametri u wp_nav_menu:
52
menu oznaava eljeni meni

depth oznaava 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 je
padajui izbornik tog menu-a
container oznaava to e se koristiti, kako je kod Bootstrap to div, onda e se to i koristiti
container_id je ID tog navbara, te se on koristi i u gornjoj zamjeni pod data-target pa smo
zbog toga i sam button promijenili
menu_class je klasa koja e se koristiti sa elementom ul
fallback_cb je funkcija koja e se koristiti ukoliko ne postoji eljeni menu
walker je klasa koju koristimo za izradu cjelokupne navigacije
Ako sada otvorite stranicu vidjet ete kako su se prikazale poveznice na pravi nain kao i u
originalnom template predloku.
Dodamo li u administraciji jednu poveznicu kao padajui izbornik moe se vidjeti i Bootstrap-ov
padajui zbornik na frontu. Padajui izbornik dodajemo tako da:
1. Dodamo poveznicu u izbornik tako da odaberemo to sve elimo dodati i kliknemo na Add
to Menu,
2. Nakon dodavanja izborniku potrebno je povui eljenu poveznicu ispod poveznice za koju
elimo 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 Save

Menu. Sada imamo Bootstrap-ov izbornik na naoj stranici.
Padajui zbornik na frontu
53
Naziv stranice
Naziv stranice u template-u
Prema template-u moe se vidjeti da sam naziv trenutne stranice koju gledamo ima svoj dio gdje
se prikazuje i malo se odvaja od drugog teksta. Ako pogledamo izvorni kod vidjet emo sljedee:
1
2
3
4
5
6
7
8
9
10
11
12

<div id="blue">
<div class="row">
<h3>Blog List.</h3>
</div>
</div> 
</div>
Ovaj dio template-a se jednako tako ponavlja na svakoj stranici pa moemo zakljuiti da ga treba
postaviti u header.php kako ga ne bi morali kopirati u svakoj datoteci koja prikazuje sadraj.
Kopirajte ovaj dio u datoteku header.php nakon navigacije.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
...


<div id="blue">
<div class="row">
<h3>Blog List.</h3>
</div>
</div>
54
Kako ovo zapravo predstavlja naslov stranice dovoljno je koristiti ponovno funkciju wp_title pa
umjesto Blog List. postavimo wp_title() ovako:
1
2
3
4
5
6
7
<div id="blue">
<div class="row">
<h3><?php wp_title(); ?></h3>
</div>
</div>
Postavljanjem poziva wp_title na 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.php jer smo ga pomaknuli
za 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 na
stranicu,kao to je prikazano na sljedeoj slici, tada je dovoljno samo napisati dodatni CSS koji
e ispraviti prikaz ili maknuti prikazivanje admin trake.
55
Razmak
Ispravljanje je mogue sljedeim kodom unutar functions.php:

1
2
3
4
5
6
7
8
9
10
11
function wpb3_admin_css() {
if ( is_user_logged_in() && is_admin_bar_showing() ) {
?>
<style type="text/css">
.navbar-fixed-top {
top:32px;
}
</style>
<?php }
}
add_action('wp_head', 'wpb3_admin_css');
Objanjenje
Funkcija wpb3_admin_css provjerava da li je korisnik prijavljen na stranici, te ukoliko ima
postavljenu opciju za prikaz admin trake tada dodajemo dodatan CSS koji pomie nau cijelu
navigaciju za 32px od vrha jer je upravo za toliko piksela pomaknuta i cijela naa stranica, ali
kako je navigacija u CSS-u postavljena na position:fixed, na nju se ne odnose pozicije ostalih
elemenata. Definiranu funkciju zatim pozivamo unutar wp_head kako bi se izvrila kada se sve
funkciju unutar wp_head-a izvravaju. Dodatnim provjeravanjem da li korisnik ima ukljuenu
opciju za prikazivanje admin trake osigurava nam dobar CSS jer inae bi se iako je korisnik
prijavljen a ne prikazuje admin traku, naa navigacija pomaknula za 32px od vrha.
Drugi sluaj je potpuno brisanje CSS nae admin trake, bez obzira na postavljene opcije.
1
2
3
4
add_action('get_header', 'wpb3_remove_admin_login_header');
function wpb3_remove_admin_login_header() {
remove_action('wp_head', '_admin_bar_bump_cb');
}
Ovime se u potpunosti brie CSS admin trake. Ja u ostati pri ovome izboru te u to kopirati
unutar nae functions.php nakon definicije varijable $content_width.
56
Struktura bloga
Struktura bloga
Iz gornje slike moemo vidjeti kako e izgledati otprilike poetna naeg bloga. Vidimo da se
veinski dio prostora koristi za glavni sadraj bloga odnosno za listu lanaka dok se preostali dio
prostora koristi za tzv. sidebar u kojemu se prikazuju neke sporedne informacije ili opcije kao
to je trailica.
Ako otvorimo blog.html od template-a vidjet emo da je struktura podijeljena u dva stupca
veliine col-lg-8 i col-lg-4.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="container mtb">

<div class="row">
<! -- BLOG POSTS LIST -->
<div class="col-lg-8">
<! -- Blog Post 1 -->
<p><img class="img-responsive" src="assets/img/post01.jpg"></p>
<a href="single-post.html">
<h3 class="ctitle">Time to change your apps.</h3>
</a>
<p>
<csmall>Posted: April 25, 2014.</csmall> |
<csmall2>By: Admin - 3 Comments</csmall2></p>
....
</p>
<div class="hline"></div>
<div class="spacing"></div>
...
</div><! --/col-lg-8 -->
57
24
25
26
27
<! -- SIDEBAR -->

...
U datoteci index.php prikazivat emo listu lanaka dok emo sidebar pozivati preko funkcije
get_sidebar kojeg zatim definiramo u zasebnoj datoteci sidebar.php. Prvo emo samo postaviti
strukturu, a glavni sadraj e nam biti tekst koji smo prethodno unijeli u index.php.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="row">

</div>


</div>
</div>
</div>
Stvorite u folderu teme wpb3 novu datoteku sidebar.php i samo upiite Sporedni sadraj. Zatim
u datoteci index.php gdje se poziva sidebar promijenite u:
1
2
3
4


<?php get_sidebar(); ?>
</div>
58
Glavni i sporedni sadraj
Lista lanaka
Lista lanaka
Kod listanja odnosno prikazivanja lanaka treba primijetiti to se sve prikazuje. Iz gornje slike
moemo vidjeti da se prikazuje slika, naslov, datum i autor, broj komentara te saetak sadraja
uz poveznicu koja nas alje na stranicu tog lanka kako bi proitali sav sadraj. Cijeli kod jednog
lanka pri listanju je sljedei:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
59
<! -- Blog Post 1 -->

<p>
<img class="img-responsive" src="assets/img/post01.jpg">
</p>
</a>
<p>
<csmall2>By: Admin - 3 Comments</csmall2>
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been ....
</p>
<p>
[Read More]
</a>
</p>
Dovoljno je kopirati samo taj dio unutar sekcije za glavni sadraj tako da sada dio za glavni
sadraj unutar datoteke index.php izgleda ovako:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<! -- Blog Post 1 -->
<p>
<img class="img-responsive" src="assets/img/post01.jpg">
</p>
</a>
<p>
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industr\
y. Lorem Ipsum has been the industry's standard dummy text ever since the 150\
0s, when an unknown printer took a galley of type and scrambled it to make a \
type specimen book.</p>
<p>It has survived not only five centuries, but also the leap into electron\
ic typesetting, remaining essentially unchanged.</p>
60
20
21
22
23
24
25
26
27
28
<p>
[Read More]
</a>
</p>
</div>
Sliku pustimo za sada za kraj. Prvo emo prikazati osnovne informacije tog lanka, pa tek onda
sliku. Zakomentirajmo sliku:
1

WordPress Loop
U poglavlju Upoznavanje s WordPress-om saznali smo to je to WordPress Loop i kako se koristi.
Sada to trebamo primijeniti ovdje, pa dio gdje je jedan lanaka u datoteci index.php zamijenimo
sa sljedeim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

<! -- Blog Post 1 -->

</a>
<p>
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. L\
orem Ipsum has been the industry's standard dummy text ever since the 1500s, \
when an unknown printer took a galley of type and scrambled it to make a type\
specimen book.</p>
<p>
It has survived not only five centuries, but also the leap into electronic \
typesetting, remaining essentially unchanged.
</p>
<p>
<a href="single-post.html">[Read More]</a>
</p>
25
26
27
28
29
61
<?php endwhile; else: ?>
<p><?php _e('Nema lanaka.'); ?></p>
<?php endif; ?>
Ovim kodom postavili smo glavni sadraj unutar WordPress Loop-a ime se provjera da li postoje
ikakvi lanci te ako postoje, za svaki lanak prikai mi sadraj unutar while petlje. Nakon toga,
potrebno je dijelove sa sadrajem zamijeniti WordPress funkcijama kako bi se prikazao pravi
sadraj. Zamijenite gornji sadraj sa sljedeim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>



<a href="<?php the_permalink(); ?>">
<h3 class="ctitle"><?php the_title(); ?></h3>
</a>
<p>
<csmall>Posted: <?php echo get_the_date(); ?></csmall> |
<csmall2>By: <?php the_author(); ?> - <?php comments_number(); ?> </csmall2>
</p>
<?php the_content( "[Read More]" ); ?>
<p><?php _e('Nema lanaka.'); ?></p>
<?php endif; ?>
Sve funkcije koje se ovdje koriste mogu se samo koristiti u WordPress Loop-u.
Objanjenje
the_permalink daje nam adresu na kojoj moemo doi do cijelog sadraja tog lanka. Ova
funkcija provjerava nae postavke permalinka te na temelju toga napravi poveznicu do tog
lanka
the_title ispisuje naslov lanka
get_the_date vraa vrijednost datuma iji format je postavljan u WordPress administraciji,
takoer u postavkama. Iako postoji jo jedna funkcija za datum the_date nju nismo koristili
zato to ukoliko se prikazuju lanci koji su postavljeni na isti datum, samo kod prvog ispisa
lanka s tim datumom, e se sam datum prikazati. Inae e biti taj dio prazan. Funkcijom
get_the_date smo izbjegli ovaj nain prikaza, te osigurali da se svaki put prikae datum.
the_author ispisuje naziv autora po postavkama koje je sam autor za sebe postavio. Moe
se postaviti da se prikazuje nadimak, username ili pravo ime i prezime autora.
62
comments_number je funkcija koja prikazuje broj komentara na pojedinom lanku, te uz

to se mogu namjestiti tri razna ispisa (kada imamo nula komentara, kada je jedan komentar
ili kada je vie komentara).
the_content prikazuje sadraj. Ako je na stranici gdje se listaju lanci onda se prikazuje
samo sadraj do <!more -> dijela u lanku, ukoliko je stranica lanka, tada se prikazuje
cijeli 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 ne
pravimo datoteku koja je posebno napravljena za prikaz pojedinog lanka ve se koristi index.php
onda moemo dodatno to napraviti tako da odredimo da se ta linija prikazuje ako nije na stranici
pojedinog lanka. To se radi ovako:
1
2
3
<?php if(!is_singular()){ ?>

<?php } ?>
Funkcijom is_singular gledamo da li smo na stranici lanka ili neke stranice (page), a sa znakom
! ispred oznauje NE pa moemo to proitati ako nije stranica ili lanak ui u ovu granu i
prikai liniju.
Slika lanka
Slika lanka je tzv. thumbnail te se on dodaje prilikom unosa lanka. Svaka WordPress tema
odluuje za sebe ako e se moi unositi slika lanka, pa tako sada bez ikakve promjene nemamo
mogunost unosa slike lanka.
http://codex.wordpress.org/Post_Thumbnails
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 ili
auriranja postojeeg.
64
Opcija za unos slike
Klikom na Set featured image otvorit e se prozor za unos slike gdje imate mogunost odabira
iz ve postojeih slika ili unos nove slike. Prije nego unesemo sliku za probu, moramo odrediti i
dimenzije samog thumbnail-a. Dimenzije thumbnail-a, bez mijenjanja, postavljene su na 150px
x 150px (irina x visina). Izmjerimo li dimenzije slika u datoteci blog.html odnosno u folderu
assets/img vidjet emo da su te slike lanaka dimenzija 850x400, to se mnogo razlikuje od
osnovnih dimenzija thumbnail-a.
Stoga je bolje napraviti novi tip slike kojeg emo nazvati slika-clanka. To je mogue pozivom
funkcije add_image_size ija 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 na false - nema rezanja odnosno proporcionalno se slika ree, true slika se ree te moe biti tipa polje (array) gdje se onda napiu x i y koordinate podruja
za 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 kako
bi osigurali prikazivanje kvalitetne slike ako se postavi slika koja nije tih dimenzija. Ispod nae
funkcije add_theme_support za 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 za
prikaz slike, a ona je the_post_thumbnail dok njena definicija glasi:
http://codex.wordpress.org/Function_Reference/add_image_size
http://codex.wordpress.org/Function_Reference/the_post_thumbnail
65
the_post_thumbnail( $size, $attr );
gdje
$size - oznauje ili ime slike kao npr. slika-clanka ili varijablu tipa polje (array) koje sadri
irinu i visinu.
$attr - oznauje dodatne parametre koji se postavljaju isto u varijablu tipa polje (array), a
to polje se postavlja ovako:
$attr = array( src $src, class attachment-$size, alt trim(strip_tags( $wp_postmeta->_wp_attachment_image_alt )), );
Obje varijablu nisu potrebne da bi se funkcija uspjeno izvrila, ali tada bi ona prikazala vrstu
slike koja spada pod tip thumbnail. Mi smo stvorili novi tip slike te emo tu funkciju tada pozvati
ovako:
1
the_post_thumbnail( 'slika-clanka' );
Otvorite index.php i na mjesto gdje smo sakrili sliku:

1

Napiite sljedee:
1
2
3
4
5
6
7
8
9
10
<?php
if ( has_post_thumbnail() ) {
echo "<p>";
the_post_thumbnail('slika-clanka', array(
'class' => 'img-responsive'
));
echo "</p>";
}
?>
Objanjenje
Prvo provjeravamo da li postoji slika lanka, tog tipa slike te ako postoji slijedimo istu shemu
kao u datoteci blog.html te sliku postavljamo unutar elementa p. Zatim nakon otvarajueg dijela
elementa p pozivamo funkciju za prikaz slike i to tako da pozivamo funkciju s nazivom tipa
slike slika-clanka te uz to prosljeujemo i klasu koja e se postaviti na toj slici, a to je imgresponsive.
Sada dodajmo sliku lanka. Ja sam uploadao novu sliku za ve postojei lanak Hello World.
Sliku sam odabrao iz SOLID template-a koja se nalazi u folderu assets/img te naziv post01.jpg.
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 u
unijeti jo jedan lanak sa slikom post02.jpg te tekstom iz datoteke blog.html.
Pojedini lanak
Pojedini lanak se prikazuje ako kliknemo na naslov jednog lanka. Iako nismo napravili datoteku
za ispis pojedinog lanka, single.php, prisjetimo se da smo u poglavlju Upoznavanje s WordPressom saznali kako se WordPress ponaa te da ako ne postoji single.php prikazuje sadraj definiran
u index.php. Na ovaj nain, mi sada ipak moemo vidjeti samo sadraj jednog lanka preko
datoteke index.php.
Otvorite sada datoteku iz SOLID template-a pod nazivom single-post.html te ako pogledate malo
izgled 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 i index.php stvorite novu datoteku uz index.php i
nazovite je single.php te kopirajte cijeli sadraj iz index.php-a.
Datoteka single.php
Ukoliko ste kopirali cijeli sadraj, moete obrisati ono to nam nije potrebno, a to je:
1
2
3
67
<?php if(!is_singular()){ ?>

<?php } ?>
To briemo jer se u ovoj datoteci prikazuje samo jedan lanak, a na stranicama lanaka ne
ispisujemo crnu liniju.
Otvorite sada u Vaem editoru single-post.html i pogledajte kraj sadraja tog lanka. Dio za
drutvene mree izgleda ovako:
1
2
3
4
5
6
7
8
9
10
11
12
...
<p>There are many variations of passages of Lorem Ipsum available, but the ma\
jority have suffered alteration in some form, by injected humour, or randomis\
ed words which don't look even slightly believable.</p>
<h6>SHARE:</h6>
<p class="share">
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-tumblr"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</p>
Kopirajte dio nakon spacing-a i upiite ga u single.php na isto mjesto.

1
2
3
4
5
6
7
8
9
10
11
...
<h6>SHARE:</h6>
<p class="share">
</p>
Spremite ovu promjenu i pogledajte stranicu vaeg lanka.
68
Drutvene mree na pojedinom lanku
Dijeljenje sadraja
Svaka drutvena mrea ima svoje API-e te koritenjem njihovih biblioteka uz dijeljenje, moete
vriti puno vie. Nama trenutno to nije potrebno te je dovoljno samo proslijediti parametre
potrebne za dijeljenje sadraja. Za takvo neto, koristit emo funkcije u Javascript-u.
Otvorite u Vaem editoru assets/js/custom.js. Ova datoteka e nam posluiti za pisanje svojih
funkcija.
Facebook
Kopirajte sljedeu funkciju ispod dijela })(jQuery);:
1
2
3
4
5
6
7
8
9
10
11
function share_facebook_post(link) {
u=link.getAttribute('href');
// t=document.title;
t=link.getAttribute('title');
window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'\
&t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436'\
);
return false;
}
Objanjenje
Pozivom ove funkcije u nekoj poveznici kao npr.:
1
<a onclick="share_facebook_post(this);return false;">
izvriti e se sljedee:
1. uzima se vrijednost za varijablu u i to je vrijednost atributa href to je u biti poveznica na
na sadraj
69
2. uzima se vrijednost za varijablu t, a to je vrijednost atributa title unutar poveznice te emo

ovdje postaviti naslov naeg lanka
3. otvaramo novi prozor sa poveznicom koja prikazuje share prozor od facebook-a uz
prosljeene vrijednosti za potrebne parametre u i t.
4. Nakon to se funkcija izvri, postavljen je i return:false; kako se ne bi klik na ovu poveznice
izvrio.
Promijenimo sada dio:
1
sa:
1
2
3
4
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"

onclick="share_facebook_post(this);return false;">
<i class="fa fa-facebook"></i>
</a>
Funkcija the_permalink ispisuje cijelu poveznicu za otvoreni lanak, dok funkcija the_title
ispisuje naslov lanka. Na klik e se upravo dogoditi ono opisano iznad.
Twitter
Nakon funkcije za facebook, kopirajte u custom.js sljedee:
1
2
3
4
5
6
7
8
function share_twitter_post(link) {
window.open('https://www.twitter.com/share?url='+encodeURIComponent(u),'shar\
er','toolbar=0,status=0,width=626,height=436');
return false;
}
Ovdje se slijedi princip rada sa funkcijom share_facebook_post, ali pri izvravanju funkcije se ne
uzima atribut title pa stoga ni to nije potrebno koristiti u toj poveznici. Stoga je potrebno dio:
1
zamijeniti sa:
1
2
3
4
70
<a href="<?php the_permalink(); ?>"

onclick="share_twitter_post(this);return false;">
<i class="fa fa-twitter"></i>
</a>
Google+
Nakon funkcije za twitter, kopirajte sljedee:
1
2
3
4
5
6
7
8
function share_google_post(link) {
window.open('https://plus.google.com/share?url='+encodeURIComponent(u),'shar\
er','toolbar=0,status=0,width=626,height=436');
return false;
}
Funkcija za google+ radi na istom principu kao i funkcija za twitter, pa je stoga potrebno
zamijeniti dio kod drutvenih mrea:
1
sa sljedeim:
1
2
3
4

onclick="share_google_post(this);return false;">
<i class="fa fa-google-plus"></i>
</a>
Thumblr
Funkcija za thumblr je veoma slina funkciji za facebook:
1
2
3
4
5
6
7
8
9
10
function share_thumblr_post(link) {
// t=document.title;
t=link.getAttribute('title');
window.open('http://www.tumblr.com/share/link?url='+encodeURIComponent(u)+'\
&name='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=4\
36');
return false;
}
Kopirajte ju na kraju datoteke custom.js. Thumblr omoguuje i postavljenje opisa, ali trenutno
emo slati samo poveznicu i naslov lanka.
Nakon kopiranja potrebno je zamijeniti dio:
71
sa:
1
2
3
4

onclick="share_thumblr_post(this);return false;">
<i class="fa fa-tumblr"></i>
</a>
Zavreni dio za dijeljenje na drutvenim mreama

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<h6>SHARE:</h6>
<p class="share">
<i class="fa fa-twitter"></i>
</a>
<i class="fa fa-facebook"></i>
</a>
<i class="fa fa-tumblr"></i>
</a>
<i class="fa fa-google-plus"></i>
</a>
</p>
Sporedni sadraj
Sporedni sadraj ili sidebar se koristi za razliite sporedne informacije kao to su posljednji lanci,
komentari ili za nekakve sporedne funkcionalnosti kao to je trailica. Takvi sadraji koji se
pridodaju naem sidebar-u se nazivaju Widgeti.
Widgeti dodaju razliite sadraje ili funkcionalnosti u sidebar te svaki je zasebno definiran.
Mogue je izraivati i svoje widgete.
http://codex.wordpress.org/WordPress_Widgets
72
Ako elimo dodavati widgete, moramo otii u administrativni dio WordPress-a te pod Appearance > Widgets moemo odabirati koji widgeti idu u koji sidebar. Da, moemo ih imati vie te
ne nuno na istome mjestu. Moemo imati jedan sidebar uz glavni sadraj, dok drugi mogu biti
u footer-u. Shvatite sidebar-e kao prostore za prikazivanje i dodjeljivanje widgeta.
Nema opcije za dodavanje widgeta
Na gornjoj slici moe se vidjeti trenutno stanje. Mogunost dodavanja widget-a takoer se
definira za svaku temu posebnu kao i izbornici. Registracijom sidebar-a otvara se mogunost
dodavanja widget-a. Registracija se vri preko funkcije register_sidebar ili register_sidebars.
Trenutno koristimo samo jedan sidebar i to uz glavni sadraj pa emo koristiti prvu spomenutu
funkciju register_sidebar. Definicija naveden funkcije je:
1
register_sidebar( $args );
gdje varijabla $args predstavlja

1
2
3
4
5
6
7
8
9
$args = array(
'name'
'id'
'description'
'class'
'before_widget'
'after_widget'
'before_title'
'after_title'
=>
=>
=>
=>
=>
=>
=>
=>
__( 'Sidebar name', 'theme_text_domain' ),

'unique-sidebar-id',
'',
'',
'<li id="%1$s" class="widget %2$s">',
'</li>',
'<h2 class="widgettitle">',
'</h2>' );
Registrirati emo sporedni sadraj te emo funkciju pozvati na sljedei nain:
http://codex.wordpress.org/Function_Reference/register_sidebar
http://codex.wordpress.org/Function_Reference/register_sidebars
73
1
2
3
4
5
6
7
8
9
10
11
register_sidebar(array(
'name'
'id'
'description'
'class'
'before_widget'
'after_widget'
'before_title'
'after_title'
=>
=>
=>
=>
=>
=>
=>
=>
__( 'Sporedni sadraj', 'wpb3' ),

'sporedni-sadrzaj',
'Prostor za postavljanja sporednog sadraja',
'',
'',
'<div class="spacing"></div>',
'<h4>',
'</h4><div class="hline"></div>'
));
Objanjenje
name - Ime naeg sidebar-a koje se prikazuje u Administraciji

id - koristi se pri pozivanju sidebar-a prilikom ispisa
description - Opis koji opisuje ulogu sidebar-a u Administraciji
before_widget i after_widget - sadraj koji bi se ispisao nakon svakog widget-a, ovdje je
prazan jer nai widgeti nemaju nikakav html element oko njega. Jedino to je dodano jeste
.spacing kao to je u blog.html-u
before_title i after_title - sadraj koji e se ispisati nakon svakog naslova, ovdje je to h4, te
nakon svakog naslove se ispisuje i crna linija pa sam zbog toga dodao da se nakon kraja
naslova widgeta, ispisuje i crna linija
Primjer widgeta u blog.html-u
1
2
3
4
5
6
7
8
//Uzeto sa blog.html
<h4>Categories</h4>
<p>
<a href="#"><i class="fa fa-angle-right"></i>Wordpress</a>
<span class="badge badge-theme pull-right">9</span>
</p>
<div class="spacing"></div> 
Kopirajte gornji dio za registraciju sidebar-a na kraj datoteke functions.php i pogledajte opet
administrativni dio WordPress-a.
Omogueno dodavanje widget-a
74
Pozivanje i prikaz sidebar-a

Prije nego to ponemo dodavati razne widget-e i isprobavati njihov izgled potrebno je pozvati
i prikazati taj sidebar. To emo uiniti tako da u datoteci sidebar.php tekst Sporedni sadraj
zamijenimo ovime:
1
2
3
4
5
6
<?php
if ( is_active_sidebar( 'sporedni-sadrzaj' ) ){
dynamic_sidebar('sporedni-sadrzaj' );
}
?>
Objanjenje
Prvo gledamo da li je takav sidebar aktivan te ako je, pokai cijeli sadraj odnosno widgete koji
su dodani tome sidebar-u.
Dodavanje widget-a
Widgeti se dodaju tako da povlaimo widget koji hoemo u sidebar na kojem hoemo to prikazati.
Jo je mogue i dodati widget tako da se klikne na eljeni widget i odabere u koji sidebar elimo
da ode.
Dodavanje widgeta
Nakon toga je potrebno, ako se to eli, podesiti postavke za taj widget. Neki widgeti imaju samo
mogunost mijenjanja naslova na prikazu, dok neki imaju i ostale opcije i odabire.
75
Dodani widget
Dodani widget Search ne izgleda kako bi trebao po template-u.
Lijevo: Trenutni search. Desno: Search widget kakav bi trebao izgledati
U ovom widgetu poziva se search forma te ako ne postoji datoteka searchform.php, uvijek poziva
ono to je WordPress-u postavljeno. Stoga, stvorite novu datoteku pod nazivom searchform.php
i kopirajte sljedee:
1
2
3
4
5
6
7
8
<br>
<br>
<form role="search" method="get" class="search-form"
action="<?php echo home_url( '/' ); ?>">
<input type="search" class="form-control" placeholder="Search Something"
value="" name="s" title="Search Something" />
</form>
Search forma je malo promijenjena od template-a zato to u template-u ne postoji element form.
Zbog toga je ostavljen element forma. dok je element p unutar kojeg se nalazio input obrisan.
Time smo dobili priblino isti razmak izmeu naslova i forme.
76
Lijevo: Trenutni sreeni search. Desno: Search widget kakav bi trebao izgledati
Izrada Widgeta
Widgeti se izrauju preko WordPress Widget API-a te koristei njihov predloak moe se
jednostavno izraditi novi Widget za bilo kakvu potrebu.
Prema SOLID template-u, uz widget Search imamo Categories, Recent Posts i Tags. Ako
pogledamo u dostupne widgete u administrativnom dijelu WordPress-a, moemo vidjeti da
ve postoje takvi widgeti, ali ako ih dodamo na nau stranicu to nee izgledati kao i u SOLID
template-u.
Postavljeni widgeti ne izgledaju kako bi trebali
Zato to funkcionalnosti koje imaju ovi widgeti su jednake onima koje nama trebaju, uzeti emo
njihov kod i doraditi svaki za nae potrebe. Definicije svih tih widgeta mogu se pronai pod
wordpress/wp-includes/default-widgets.php. Unutar te datoteke pronaite WP_Widget_Categories i zatim kopirajte cijelu klasu:
http://codex.wordpress.org/Widgets_API
Lista kategorija
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
44
/**
* Categories widget class
*
* @since 2.8.0
*/
class WP_Widget_Categories extends WP_Widget {
function __construct() {
$widget_ops = array(
'classname' => 'widget_categories',
'description' => __( "A list or dropdown of categories." )
);
parent::__construct('categories', __('Categories'), $widget_ops);
}
function widget( $args, $instance ) {
extract( $args );
$title = apply_filters('widget_title',
empty( $instance['title'] ) ? __( 'Categories' ) : $instance['title'],
$instance, $this->id_base);
$c = ! empty( $instance['count'] ) ? '1' : '0';
$h = ! empty( $instance['hierarchical'] ) ? '1' : '0';
$d = ! empty( $instance['dropdown'] ) ? '1' : '0';
echo $before_widget;
if ( $title )
echo $before_title . $title . $after_title;
$cat_args = array(
'orderby' => 'name',
'show_count' => $c,
'hierarchical' => $h
);
if ( $d ) {
$cat_args['show_option_none'] = __('Select Category');
wp_dropdown_categories(apply_filters('widget_categories_dropdown_args',
$cat_args));
?>
<script type='text/javascript'>
/* <![CDATA[ */
77
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
var dropdown = document.getElementById("cat");

function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo home_url(); ?>/?cat="+
dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
/* ]]> */
</script>
<?php
} else {
?>
<ul>
<?php
$cat_args['title_li'] = '';
wp_list_categories(apply_filters('widget_categories_args', $cat_args));
?>
</ul>
<?php
}
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
$instance = $old_instance;
$instance['title'] = strip_tags($new_instance['title']);
$instance['count'] = !empty($new_instance['count']) ? 1 : 0;
$instance['hierarchical'] = !empty($new_instance['hierarchical']) ? 1 : 0;
$instance['dropdown'] = !empty($new_instance['dropdown']) ? 1 : 0;
return $instance;
}
function form( $instance ) {
//Defaults
$instance = wp_parse_args( (array) $instance, array( 'title' => '') );
$title = esc_attr( $instance['title'] );
$count = isset($instance['count']) ? (bool) $instance['count'] :false;
$hierarchical = isset( $instance['hierarchical'] ) ? (bool)
$instance['hierarchical'] : false;
$dropdown = isset( $instance['dropdown'] ) ? (bool)
$instance['dropdown'] : false;
?>
78
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
79
<p>
<label for="<?php echo $this->get_field_id('title'); ?>">
<?php _e( 'Title:' ); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>"
name="<?php echo $this->get_field_name('title'); ?>"
type="text" value="<?php echo $title; ?>" /
></p>
<p>
<input type="checkbox" class="checkbox"
id="<?php echo $this->get_field_id('dropdown'); ?>"
name="<?php echo $this->get_field_name('dropdown'); ?>"
<?php checked( $dropdown ); ?> />
<label for="<?php echo $this->get_field_id('dropdown'); ?>">
<?php _e( 'Display as dropdown' ); ?>
</label>
<br />
id="<?php echo $this->get_field_id('count'); ?>"
name="<?php echo $this->get_field_name('count'); ?>"
<?php checked( $count ); ?> />
<label for="<?php echo $this->get_field_id('count'); ?>">
<?php _e( 'Show post counts' ); ?>
</label>
<br />
id="<?php echo $this->get_field_id('hierarchical'); ?>"
name="<?php echo $this->get_field_name('hierarchical'); ?>"
<?php checked( $hierarchical ); ?> />
<label for="<?php echo $this->get_field_id('hierarchical'); ?>">
<?php _e( 'Show hierarchy' ); ?>
</label>
</p>
<?php
}
}
Unutar nae teme stvorite novu datoteku u folderu inc pod nazivom widget-categories.php.
Unutar te datoteke otvorite php sa
1
<?php
80
i zatim kopirajte cijelu gornju klasu prije nego napravimo nekoliko izmjena. sada emo promijeniti naziv klase:
1
class WP_Widget_Categories
u
1
class WPB3_Widget_Categories
U metodi odnosno funkciji _construct definiramo naziv koji e se prikazati u administraciji pri
odabiru widgeta, te kratki opis. Malom izmjenom naslova i opisa sada funkcija _construct izgleda
ovako:
1
2
3
4
5
6
7
8
'description' => __( "A list of categories for WPB3 theme.", 'wpb3' ) );
parent::__construct('wpb3_categories',
__('WPB3 Categories','wpb3'),
$widget_ops);
}
Unutar ove funkcije preko varijable $widget_ops definirali smo neke informacije kao to je klasa
koja se moe koristiti pri prikazu widgeta te opis. Nakon toga koristi se funkcija _construct od
klase koju mi proirujemo, a to je klasa WP_Widget gdje mi onda definiramo ID naeg widgeta,
naslov te na kraju prosljeujemo i informacije koje su definirane u varijabli $widget_ops.
Kod ove liste kategorija neemo koristiti dodatne opcije napravljene u prvobitnom widgetu pa
takve stvari moemo i obrisati kao npr.:
1
2
$h = ! empty( $instance['hierarchical'] ) ? '1' : '0';

$d = ! empty( $instance['dropdown'] ) ? '1' : '0';
zatim je potrebno i
1
2
3
4
$cat_args = array(
'show_count' => $c,
'hierarchical' => $h);
zamijeniti sa
81
$cat_args = array('orderby' => 'name', 'show_count' => $c);
Kako nee biti mogunost prikaza kategorija kao u nekakvom padajuem izborniku cijeli taj dio
koda potrebno je obrisati:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
if ( $d ) {
$cat_args['show_option_none'] = __('Select Category');
wp_dropdown_categories(apply_filters('widget_categories_dropdown_args',
$cat_args));
?>
<script type='text/javascript'>
/* <![CDATA[ */
var dropdown = document.getElementById("cat");
function onCatChange() {
if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
location.href = "<?php echo home_url(); ?>/?cat="+
dropdown.options[dropdown.selectedIndex].value;
}
}
dropdown.onchange = onCatChange;
/* ]]> */
</script>
<?php
} else {
te je potrebno obrisati i zatvarajuu zagradu prije varijable $after_widget. Zatim je potrebno

promijeniti i funkcije odnosno metode update i form kako bi se izbjeglo upisivanje neega to
nije potrebno, pa stoga u funkciji update obriite sljedee:
1
2
$instance['hierarchical'] = !empty($new_instance['hierarchical']) ? 1 : 0;
$instance['dropdown'] = !empty($new_instance['dropdown']) ? 1 : 0;
dok u funkciji odnosno metodi form obriite:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$hierarchical = isset( $instance['hierarchical'] ) ? (bool)

$instance['hierarchical'] : false;
$dropdown = isset( $instance['dropdown'] ) ? (bool)
$instance['dropdown'] : false;
<p>
id="<?php echo $this->get_field_id('dropdown'); ?>"
name="<?php echo $this->get_field_name('dropdown'); ?>"
<?php checked( $dropdown ); ?> />
<label for="<?php echo $this->get_field_id('dropdown'); ?>">
<?php _e( 'Display as dropdown' ); ?>
</label>
<br />
id="<?php echo $this->get_field_id('hierarchical'); ?>"
name="<?php echo $this->get_field_name('hierarchical'); ?>"
<?php checked( $hierarchical ); ?> />
<label for="<?php echo $this->get_field_id('hierarchical'); ?>">
<?php _e( 'Show hierarchy' ); ?>
</label>
</p>
Sada bi, ako ste sve pratili kako treba, novi widget trebao izgledati neto slino ovome:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class WPB3_Widget_Categories extends WP_Widget {

'description' => __( "A list of categories for WPB3 theme.", 'wpb3' ) );
parent::__construct('wpb3_categories',
__('WPB3 Categories','wpb3'),
$widget_ops);
}
extract( $args );
empty( $instance['title'] ) ? __( 'Categories' ) : $instance['title'],
$instance,
$this->id_base);
82
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
$c = ! empty( $instance['count'] ) ? '1' : '0';

if ( $title )
$cat_args = array(
'show_count' => $c);
?>
<ul>
<?php
?>
</ul>
<?php
echo $after_widget;
}
$instance['count'] = !empty($new_instance['count']) ? 1 : 0;
return $instance;
}
//Defaults
$count = isset($instance['count']) ? (bool) $instance['count'] :false;
?>
<p>
<?php _e( 'Title:' ); ?>
</label>
<input class="widefat"
83
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
84
id="<?php echo $this->get_field_id('title'); ?>"

type="text" value="<?php echo $title; ?>" />
</p>

id="<?php echo $this->get_field_id('count'); ?>"
name="<?php echo $this->get_field_name('count'); ?>"
<?php checked( $count ); ?> />
<label for="<?php echo $this->get_field_id('count'); ?>">
<?php _e( 'Show post counts' ); ?>
</label>
<br />
<?php
}
}
Objanjenje
Funkcija _construct slui za registriranje widgetovog naslova, opisa, ID-a te klase

Funkcija widget slui za ispisivanje widgeta na stranici gdje je widget postavljen
Funkcija update slui za spremanje vrijednosti widgeta unesenih u administraciji
Funkcija form slui za definiranje prikaza za unos informacija u administraciji
Funkcija widget
1. Funkcijom extract svi tzv. kljuevi u polju postaju varijable, a vrijednosti kljueva postaju
vrijednostima varijabli. Tako moemo koristiti $title i sl.
2. Varijabli title pridjeljuju se nove vrijednosti. Ako polje instance, koje sadri sve informacije, nema u sebi definiran klju title, tada se pridjeljuje vrijednost Categories.
3. Varijabli c daje se 0 ili 1 ovisno o tome da li je izabrana opcija prikaza brojeva lanaka za
svaku kategoriju
4. Nakon toga ispisuje se definiran sadraj prije poetka widgeta
5. Ispisuje se vrijednost varijable title, ako postoji.
6. Definiraju se parametri koji e se gledati pri vraanju svih kategorija koje zadovoljavaju
te parametre
7. Nakon toga se otvara lista i ispisuju kategorije koristei funkciju wp_list_categories
8. Zatim se zatvara lista i ispisuje definirani sadraj nakon widgeta
http://php.net/manual/en/function.extract.php
85
Fukcija update
1. Prosljeuje dvije varijable i to new_instance i old_instance to oznaava vrijednosti koje
su nove uneene i stare
2. Deklarira se varijable instance i pridodaju joj se stare vrijednosti
3. Zatim se kljuevima title i count pridodaju nove vrijednosti
4. Na kraju se promijenjene vrijednosti vraaju kako bi se mogle i spremiti
Funkcija form
1. Deklariraju se varijable instance, title i count. Varijabla instance se definirala kako bi se
vrijednost kljueva mogla dodijeliti ostalim varijablama.
2. Nakon toga ispisuju se polja za unos vrijednosti te se ukoliko postoje ispisuju prethodno
unesene vrijednosti
Registriranje widgeta
Kako bi se widget mogao vidjeti u administraciji potrebno ga je prvo registrirati. To emo uiniti
odmah nakon te klase u istoj datoteci.
Na kraju datoteke widget-categories.php upiite sljedee:
1
2
3
4
5
6
7
function wpb3_category_register() {
register_widget('WPB3_Widget_Categories');
do_action('widgets_init');
}
add_action('init', 'wpb3_category_register', 1);
Time smo registrirali na widget.

Kako bi se to sve moglo izvriti potrebno je tu datoteku zahtjevati unutar functions.php.
1
2
3
4
5
<?php
require_once 'inc/wpb-navwalker.php';
require_once 'inc/widget-categories.php';
86
Vidi se novi widget i dodan je u sidebar
87
Prikaz Category widgeta
Prikaz naeg widgeta
Iz prethodne slike mogue je zakljuiti da nam se ispis samih kategorija nije promijenio te kako
bi mogli koristiti izgled definiran SOLID template-om, moramo otii dublje u mijenjanje naeg
widgeta. Funkcija wp_list_categories sama izrauje svoj HTML to nama ne odgovara.
Kako bi mi imali potpunu kontrolu nad ispisom, a tako i generiranim HTML-om potrebno je
samo dobiti sve kategorije i zatim ih ispisati kako mi hoemo. To nam omoguuje funkcija get_categories.
Najprije emo promijeniti varijablu cat_args koja sada samo uzima jedan parametar:
1
$cat_args = array('orderby' => 'name');
Ispod te definicije dodajmo sljedee:

1
$wpb3_categories = get_categories( $cat_args );
Time smo sada dobili varijablu koja sprema sve kategorije. Sada moramo za svaku kategoriju
ispisati HTML koji je koriten na SOLID template-u:
http://codex.wordpress.org/Function_Reference/get_categories
88
1
2
3
4
5
6
<p>
<a href="#">
<i class="fa fa-angle-right"></i> Wordpress
</a>
<span class="badge badge-theme pull-right">9</span>
</p>
Zamijenimo
1
2
sa sljedeim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
foreach ($wpb3_categories as $category) {

?>
<p>
<a href="<?php echo get_category_link( $category->term_id ); ?>">
<i class="fa fa-angle-right"></i> <?php echo $category->name; ?>
</a>
<?php if($c) { ?>
<span class="badge badge-theme pull-right">
<?php echo $category->count; ?>
</span>
<?php } ?>
</p>
<?php
}
Objanjenje Sa funkcijom foreach prolazimo kroz svaki zapis unutar varijable wpb3_categories. Za svaku kategoriju ispisujemo isti HTML samo to se dinamiki mijenja naziv kategorije,
broj lanaka pod tom kategorijom te poveznica na stranicu arhive za tu kategoriju. Poveznica se
ispisuje pomou funkcije get_category_link koja prema ID-u kategoriju generira poveznicu.
Broj lanaka se ispisuje ovisno o vrijednosti varijable c ija se vrijednost definira unutar
administracije.
Izgled nakon promjene prikaza kategorija
89
Izrada widgeta za posljednje lanke

WordPress ve dolazi s widgetom koji prikazuje posljednje lanke, ali sve to dobijemo iz tog
widgeta jeste naslov lanka i poveznica na taj lanak. Nama je, prema SOLID template-u,
potrebna jo slika lanka i datum objave lanka.
Za poetak, potrebno je stvoriti novu datoteku u folderu wpb3/inc pod nazivom widget-posts.php.
Kopirajte sljedei sadraj u tu datoteku:
1
2
3
4
5
6
7
8
9
<?php
/**
* Recent Posts Widget
*
* Theme: WPB3
*
* @since 2.8.0
*/
class WPB3_Widget_Recent_Posts extends WP_Widget { }
Nakon to smo postavili nau klasu za widget trebamo tom widgetu dati i naziv. Stoga utipkajte
sljedee:
1
2
3
4
5
6
7
8
9
10
11
class WPB3_Widget_Recent_Posts extends WP_Widget {

'classname' => 'widget_recentPosts',
'description' => __( "A list of recent Posts for WPB3.", 'wpb3' ) );
parent::__construct('wpb3_recentPosts', __('WPB3 Recent Posts','wpb3'),
$widget_ops);
}
}
Kada je widget dobio svoj ID, naziv i opis, potrebno je napraviti i mogunost namjetanja opcija
za taj widget. Neka postoji mogunost da se odabire prikaz slike.
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
90

//Defaults
$picture = isset($instance['picture']) ? (bool) $instance['picture'] :false;
?>
<p>
<?php _e( 'Title:' ); ?>
</label>
name="<?php echo $this->get_field_name('title'); ?>" type="text"
value="<?php echo $title; ?>" />
</p>
id="<?php echo $this->get_field_id('picture'); ?>"
name="<?php echo $this->get_field_name('picture'); ?>"
<?php checked( $picture ); ?> />
<label for="<?php echo $this->get_field_id('picture'); ?>">
<?php _e( 'Show thumbnails' ); ?>
</label>
<br />
<?php
}
Ovom funkcijom dodali smo mogunost postavljanja naslova widgeta koji e se prikazivati u
sporednom sadraju te mogunost odabira hoe li e se prikazivati slika uz lanak ili ne. Nakon
toga potrebna je jo jedna funkcija, koja je usko povezana s funkcijom form, a to je funkcija
update koja slui za spremanje tih informacija.
1
2
3
4
5
6
7
8

$instance['picture'] = !empty($new_instance['picture']) ? 1 : 0;
return $instance;
}
Sljedea funkcija je funkcija koja slui za prikaz na stranici. Ta funkcija naziva se view te za sada
neka samo izbaci van obian Pozdrav iz Widgeta.
91
1
2
3

echo "Pozdrav iz Widgeta";
}
Na kraju, kako bi mogli dodavati taj widget u WordPress-u, potrebno ga je registrirati. Izvan
klase dodajte sljedee:
1
2
3
4
5
6
7
8
9
function wpb3_recentPosts_register() {
register_widget('WPB3_Widget_Recent_Posts');
}
add_action('init', 'wpb3_recentPosts_register', 1);
Nakon svega toga, potrebno je i tu datoteku zahtjevati unutar functions.php kako bi WordPress
mogao proitati tu datoteku koja sadri novi widget.
1
2
3
4
...
require_once 'inc/widget-categories.php';
require_once 'inc/widget-posts.php';
...
Widget posljednjih lanaka dodan u Sporedni sadraj
Ako pogledate sada stranicu trebali bi vidjeti samo na pozdrav iz widgeta.
92
Tekst iz widgeta
Prikazivanje naslova
Umjesto teksta kojeg smo napisali unutar funkcije view u widget-u kopirajte sljedee:
1
2
3
4
5
6
7
extract( $args );
empty( $instance['title'] ) ? __( 'Recent Posts' ) : $instance['title'],
$instance, $this->id_base);
if(!empty($title))
Objanjenje Najprije uzimamo sve iz polja i pretvaramo u varijable. Zatim uzimamo varijablu
title i WordPress filter punimo s Recent Posts (ako nije nita uneseno kao naslov za widget) ili s
Naslovom (ako je uneseno neto kao naslov).
Zatim provjeravamo da li postoji varijabla title odnosno da li ta varijabla sadri nekakvu vrijednost, te ako sadri ispisujemo sadraj, koji smo unijeli pri registraciji sidebar-a u before_title,
title te sadraj koji smo unijeli pri registraciji sidebar-a u after_title (ovo su varijable koje smo
dobili s funkcijom extract).
Naslov widgeta
Prikazivanje posljednjih lanaka

Prije nego ponemo s prikazom lanaka, trebamo imati informaciju da li prikazujemo slike uz
lanke ili ne. To emo uiniti na sljedei nain:
1
2
3
4
5
93
...
if($title)
$showThumbs = !empty($instance["picture"]) ? true : false;
Provjeravamo da li postoji vrijednost u polju instance pod kljuem picture te ako postoji
postavljamo vrijednost varijable showThumbs na true. U suprotnom je false.
Zatim je potrebno dobiti posljednje lanke. To emo uiniti ovako:
1
2
3
4
5
6
7
8
9
...
$recentPosts = new WP_Query(
apply_filters( 'wpb3_widget_posts_args', array(
'posts_per_page'
=> 4,
'no_found_rows'
=> true,
'post_status'
=> 'publish',
'ignore_sticky_posts' => true
) ) );
Ovakvim pozivom dobiti emo 4 zadnja lanka koja su objavljena. Funkcijom apply_filters
ostavljamo mogunost prosljeivanja dodatnih parametara ako to bude potrebno bez potrebe
mijenjanja izvornog koda. Ukoliko bi sada negdje trebalo promijeniti broj lanaka, to bi se
jednostavno moglo napraviti na sljedei nain:
1
2
3
4
function different_post_per_page_in_widget(){
return array('posts_per_page' => 5);
}
add_filter('wpb3_widget_posts_args','different_post_per-page_in_widget');
Dakle, sada kada imamo nae posljednje lanke u varijabli recentPosts, potrebno ih je i ispisati.
Prije ispisivanja dodati emo prije ispisivanja naslova, ispis varijable before_widget, te na kraju
funkcije view dodati emo ispis varijable after_widget.
1
2
3
4
5
6
7
8
9
10
...
if($title)
$recentPosts = new WP_Query( apply_filters( 'wpb3_widget_posts_args',
array(
'posts_per_page'
=> 4,
11
12
13
14
15
16
17
18
94
'no_found_rows'
=> true,
'post_status'
=> 'publish',
) ) );
echo $after_widget;
...
Ako pogledamo na SOLID template i HTML kod koji se koristi za listu posljednjih lanaka
vidjeti emo sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
<ul class="popular-posts">
<li>
<a href="#">
<img alt="Popular Post" src="assets/img/thumb01.jpg">
</a>
<p>
<a href="#">
Lorem ipsum dolor sit amet consectetur adipiscing elit
</a>
</p>
<em>Posted on 02/21/14</em>
</li>
...
Gore navedeni HTML kod treba postaviti u funkciju view na dio gdje e se to dinamiki puniti
podacima lanaka. To emo napraviti ovako:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
$recentPosts = new WP_Query(
apply_filters( 'wpb3_widget_posts_args',
array(
'posts_per_page'
=> 4,
'no_found_rows'
=> true,
'post_status'
=> 'publish',
) ) );
if($recentPosts->have_posts()) : ?>
<?php while($recentPosts->have_posts()) : $recentPosts->the_post(); ?>
<li>
<?php if(has_post_thumbnail() && $showThumbs) { ?>
95
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

<?php the_post_thumbnail(array(70,70)); ?>
</a>
<?php } ?>
<p>
<?php the_title(); ?>
</a>
</p>
<em>Posted on <?php echo get_the_date(); ?></em>
</li>
<?php endwhile; ?>
</ul>
<?php
endif;
echo $after_widget;
...
Objanjenje Prvo smo s varijablom recentPosts dohvatili zadnja 4 objavljena lanka. Nakon
toga, provjeravamo da li postoje lanci te ako postoji ispisujemo element ul.popular-posts.
Zatim u while petlji prolazimo kroz svaki lanak u varijabli recentPosts te od svake postavljamo
lanak preko funkcije the_post kako bi mogli koristiti funkcije kao npr. the_title.
Prije nego ispisujemo sliku lanka ispitujemo da li postoji dodana slika tome lanku te da li je
u opcijama widgeta doputeno prikazivanje slika (preko varijable showThumbs). Ako su uvjeti
ispunjeni slika se ispisuje s dimenzijama 70px x 70px kao to je u SOLID template-u. Uz to, slika
je ujedno i poveznica na lanak kako bi korisnik klikom na sliku odmah bio prebaen na lanak.
Nakon tog ispitivanja prelazi se na daljnji tijek izvoenja gdje se ispisuje naslov lanka koji je
ujedno i poveznica na lanak te uz to se ispisuje i datum objave lanka.
Prikazana lista posljednjih lanaka skupa sa slikom
96
Izrada Widgeta za Tagove

Prema SOLID template-u, preostaje nam samo jo jedan widget, a to su popularni tagovi. Na
nain kao to je napravljen prethodni widget napravit emo i ovaj. Prvo je potrebno napraviti
datoteku widget-tags.php unutar wpb3/inc te pozvati tu istu datoteku unutar functions.php.
1
2
3
4
...
require_once 'inc/widget-posts.php';
require_once 'inc/widget-tags.php';
...
Za poetak, neka sadraj u widget-tags.php bude:

1
2
3
4
5
6
7
8
9
10
11
class WPB3_Widget_Popular_Tags extends WP_Widget {

'classname' => 'widget_popularTags',
'description' => __( "A list of popular Tags for WPB3.", 'wpb3' ) );
parent::__construct('wpb3_popularTags', __('WPB3 Popular Tags','wpb3'),
$widget_ops);
}
}
U gornjem dijelu dodane su osnovne informacije kao to je Naziv, opis te ID widgeta. Nakon
toga, ispod funkcije _construct() dodati emo funkciju za unos naslova u administrativnom dijelu
WordPress-a.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

//Defaults
?>
<p>
<?php _e( 'Title:' ); ?>
</label>
type="text" value="<?php echo $title; ?>" /></p>
<?php
}
Kada je napravljena forma za unos naslova widgeta, potrebno je dodati funkciju update kako bi
mogli spremiti uneseni naslov. Dodajte ispod gornje funkcije sljedeu:
1
2
3
4
5
6
97

return $instance;
}
Napravili smo funkciju koja definira osnovne informacije, funkciju koja dodaje mogunost unosa
naslova te zatim i funkciju koja unesene informacije, to je u ovome sluaju naslov widgeta pa
je sada jo ostalo napravili funkciju koja e prikazati taj widget odnosno popularne tagove.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

extract($args);
if ( !empty($instance['title']) ) {
$title = $instance['title'];
} else {
$title = _("Popular Tags","wpb3");
}
/** This filter is documented in wp-includes/default-widgets.php */
$title = apply_filters(
'widget_title',
$title, $instance,
$this->id_base );
if ( !empty($title) )
//Ovdje ide ostali sadraj
echo $after_widget;
}
Ovu funkciju postavite na kraj klase. Uspjeno smo definirali sve potrebne funkcije kako bi ovaj
widget radio u administrativnom dijelu te na samoj stranici. Jedino to nam nedostaje jesu upravo
popularni tagovi.
Prema SOLID template-u popularni tagovi izgledaju ovako:
1
2
3
4
5
98
<p>
<a class="btn btn-theme" href="#" role="button">Design</a>
<a class="btn btn-theme" href="#" role="button">Wordpress</a>
<a class="btn btn-theme" href="#" role="button">Flat</a>
</p>
Ovakav HTML kod stvoriti emo na sljedei nain:

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
...
if ( !empty($title) )
$tags = get_tags(
array(
"orderby" => "count",
"order" => "DESC",
"number" => 14
));
$html = "";
if(!empty($tags)){
$html = '<p>';
foreach ( $tags as $tag ) {
$tag_link = get_tag_link( $tag->term_id );
$html .= "<a href='{$tag_link}' title='{$tag->name} Tag' ";
$html .= " role='button' class='{$tag->slug} btn btn-theme'>";
$html .= "{$tag->name}</a>";
}
$html .= '</p>';
}
echo $html;
echo $after_widget;
...
Objanjenje
Varijabli tags dajemo tagove koje dobivamo preko funkcije get_tags kojoj prosljeujemo
parametre koji definiraju vraenu vrijednost. Uvjete koje smo dali jesu da se dobiju tagovi koji su
poredani po njihovom spominjanju i to od vie spomenutih do manje spomenutih tagova. Uzima
se maksimalno 14 tagova.
Nakon toga deklarirali smo varijablu html koja e spremiti cijeli HTML kod u sebi i na kraju
prikazati cijeli kod. Zatim provjeravamo da li je varijabla tags prazna, te ako nije stvaramo cijeli
HTML kod.
http://codex.wordpress.org/Function_Reference/get_tags
99
Za svaki tag pravimo HTML kod kojeg spajamo s ve postojeom vrijednosti varijable html.
Na poetku te petlje definiramo poveznicu do taga i spremamo je u varijablu tag_link te zatim
ponemo stvarati HTML kod.
Kada se stvori HTML kod za svaki tag spajamo trenutnu vrijednost varijable html sa </ p> te
zatim ispisujemo cijelu vrijednost varijable html.
Kako bi mogli vidjeti bilo kakve tagove, potrebno ih je dodati u WordPress administraciji. Moete
otii pod Posts > Tags ili pod neki postojei lanak kao npr. Hello world! te u desnom stupcu,
na mjestu gdje se dodaju tagovi, dodajte tagove koje hoete te zatim aurirajte lanak pritiskom
na Update.
Popularni tagovi
Footer
Prikazuju se lanci i pojedini lanci. Sporedni sadraj je takoer napravljen i sreen s widgetima
te je preostao samo footer kojeg treba napraviti. U ovom kratkom poglavlju napravit emo footer
kojim e se moi upravljati i preko administracije.
Footer iz SOLID template-a
Ako malo bolje pogledamo sliku odnosno footer u SOLID template-u moe se primijetiti da su
sva tri sadraja veoma slina widgetima tj. imaju istu strukturu gdje se prikazuje prvo naslov,
zatim linija ispod naslova te tek onda tekst.
Ako sve ove sadraje promatramo kao widgete, jasno je da bi trebali stvoriti i prostor za njih.
Za ovaj footer stvorit emo tri dodatna prostora za widgete zato to je tako praktino upravljati
njima i lake ih je odravati.
Ove prostore za widgete moemo jednostavno numerirati kao Footer 1, Footer 2 i Footer 3.
Kada imamo takve numerirajue prostore moemo koristiti funkciju register_sidebars. Ja ipak
preferiram izradu jednog sidebar-a po jednog jer time odreujem i toan ID po kojemu ga
pozivam. Stoga, na kraju datoteke functions.php upiite sljedee:
100
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
register_sidebar(
array(
'name'
'id'
'description'
'class'
'before_widget'
'after_widget'
'before_title'
'after_title'
=>
=>
=>
=>
=>
=>
=>
=>
__("Footer Lijevo"),
"footer-left",
'',
'',
'',
'',
'<h4>',
'</h4><div class="hline-w"></div>' ) );
register_sidebar(
array(
'name'
'id'
'description'
'class'
'before_widget'
'after_widget'
'before_title'
'after_title'
=>
=>
=>
=>
=>
=>
=>
=>
__("Footer Sredina"),
"footer-mid",
'',
'',
'',
'',
'<h4>',
register_sidebar(
array(
'name'
'id'
'description'
'class'
'before_widget'
'after_widget'
'before_title'
'after_title'
=>
=>
=>
=>
=>
=>
=>
=>
__("Footer Desno"),
"footer-right",
'',
'',
'',
'',
'<h4>',
Objanjenje
Kako bi shvatili zato je ovo tako uraeno treba pogledati na izvorni kod iz SOLID template-a.
Sadraj je strukturiran ovako:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
101
...
<h4>About</h4>
<div class="hline-w"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industr\
y. Lorem Ipsum has been the industry's standard dummy text ever since the 150\
0s.</p>
</div>
<h4>Social Links</h4>
<div class="hline-w"></div>
<p>
<a href="#"><i class="fa fa-dribbble"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
</p>
</div>
...
Ovdje div.col-lg-4 predstavlja jedan prostor gdje se spremaju widgeti. Ako je sadraj About jedan
widget on nema nita to ga okruuje kao nekakav div.widget ve jedino to svaki widget ima
je sadraj i naslov te nakon naslova slijedi bijela linija. Zbog toga je u parametru after_title uz
zatvarajui element h4 dodana i ta linija.
Struktura footera i pozivanje sidebar-a
Nakon to smo pozvali funkciju register_sidebars, stvorili smo 3 footer sidebar-a koji e koristiti
za prikazivanje widgeta dodanih preko administracije. Sljedei kod kopirajte prije funkcije wp_footer unutar datoteke footer.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="footerwrap">
<div class="row">
<?php if ( is_active_sidebar( "footer-left" ) ){
dynamic_sidebar("footer-left" );
}?>
</div>
<?php if ( is_active_sidebar( "footer-mid" ) ){
dynamic_sidebar("footer-mid" );
}?>
102
15
16
17
18
19
20
21
22
23
24
</div>
<?php if ( is_active_sidebar( "footer-right" ) ){
dynamic_sidebar("footer-right" );
}?>
</div>
</div><! --/row -->
</div><! --/container -->
</div><! --/footerwrap -->
U gornjem kodu prizvali smo svaki sidebar u svojem stupcu. Sada je samo potrebno otii u
administraciju i dodati widgete.
Widget About
Kako bi dodali widget za About Me, WordPress dolazi upakiran sa widgetom koji se koristi za
dodavanje jednostavnih tekstova.
Widget za unos teksta
Dodati emo taj widget u Footer 1 sidebar i unijeti naslov About i tekst Lorem Ipsum is simply
dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys
standard dummy text ever since the 1500s.
103
Text widget za unesenim tekstom
Na gornjoj slici moe se primijetiti da je i odabrano automatsko dodavanje elementa p oko teksta.
Time smo dobili identian izgled kao na SOLID template-u.
Widget Social Links
Widget pomou kojeg prikazujemo poveznice na drutvene mree ne postoji pri instalaciji
WordPress-a te ga stoga moramo napraviti. Za ovaj widget imat emo polja u koja emo unositi
poveznice odnosno url adrese na profile pojedinih drutvenih mrea. Prema SOLID Template-u
imamo 5 drutvenih mrea, a to su dribbble, facebook, twitter, instagram i thumblr.
Stvorimo novu datoteku widget-social.php i spremimo je u wpb3/inc. Poveimo je u datoteku
functions.php te definirajmo naziv, ID i opis widget-a. Unutar novo otvorene datoteke unesite
sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php
/**
* Social Links Widget
*
* Theme: WPB3
*
* @since 2.8.0
*/
class WPB3_Widget_Social_Links extends WP_Widget {
'classname' => 'widget_socialLinks',
'description' => __( "A list of social links for WPB3.", 'wpb3' ) );
15
16
17
18
104
parent::__construct('wpb3_socialLinks', __('WPB3 Social Links','wpb3'),

$widget_ops);
}
}
Kako pi povezali ovu datoteku sa datotekom functions.php, u functions.php unesite ovo:

1
require_once 'inc/widget-social.php';
Polja za unos Nakon definiranja naziva widgeta i povezivanja s datotekom functions.php

potrebno je definirati ostalo. Najprije emo definirati funkciju form koja e prikazati sva polja
za unos url adresa do profila drutvenih mrea.
Nakon funkcije _construct treba dodati sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//Defaults
$instance = wp_parse_args(
(array) $instance,
array(
'title' => '',
'dribbble' => '',
'facebook' => '',
'twitter' => '',
'instagram' => '',
'thumblr' => ''
)
);
$dribbble = esc_attr( $instance['dribbble'] );
$facebook = esc_attr( $instance['facebook'] );
$twitter = esc_attr( $instance['twitter'] );
$instagram = esc_attr( $instance['instagram'] );
$thumblr = esc_attr( $instance['thumblr'] );
}
Trenutno nema polja za unos, to e se dodati nakon objanjenja. Najprije smo definirali varijablu
instance i za njenu vrijednost koristili smo funkciju wp_parse_args koja uzima dvije varijable
koje predstavljaju polja. Prvo polje usporeuje s drugim poljem, te ako u prvom polju nema
jednog kljua koji je postavljen u drugom polju, dodaje taj klju i vrijednost tog kljua u prvo
polje. Zbog toga moemo varijablama postavljati njihove vrijednosti s istoimenim kljuem iako
to polje prije dolaska u funkciju form nije u sebi imalo taj klju.
http://codex.wordpress.org/Function_Reference/wp_parse_args
105
Nakon toga definiramo 6 varijabli, jednu za naslov, a ostale za sve drutvene mree koje
koristimo. Nakon to smo tim varijablama dodijelili vrijednosti, potrebno ih je prikazati i
omoguiti zamjenu tih vrijednosti.
Nakon varijable thumblr dodajte ostali dio kao ovdje:
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
...
$thumblr = esc_attr( $instance['thumblr'] );
//Kopirati od tuda
?>
<p>
<?php _e( 'Title:' ); ?>
</label>
type="text" value="<?php echo $title; ?>" />
</p>
<p>
<strong>Social Links: </strong>
</p>
<p>
<label for="<?php echo $this->get_field_id('dribbble'); ?>">
<?php _e( 'Dribbble:' ); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('dribbble'); ?>"
name="<?php echo $this->get_field_name('dribbble'); ?>"
type="text" value="<?php echo $dribbble; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('facebook'); ?>">
<?php _e( 'Facebook:' ); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('facebook'); ?>"
name="<?php echo $this->get_field_name('facebook'); ?>"
type="text" value="<?php echo $facebook; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('twitter'); ?>">
<?php _e( 'Twitter:' ); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('twitter'); ?>"
name="<?php echo $this->get_field_name('twitter'); ?>"
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
106
type="text" value="<?php echo $twitter; ?>" />

</p>
<p>
<label for="<?php echo $this->get_field_id('instagram'); ?>">
<?php _e( 'Instagram:' ); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('instagram'); ?>"
name="<?php echo $this->get_field_name('instagram'); ?>"
type="text" value="<?php echo $instagram; ?>" />
</p>
<p>
<label for="<?php echo $this->get_field_id('thumblr'); ?>">
<?php _e( 'Thumblr:' ); ?>
</label>
<input class="widefat" id="<?php echo $this->get_field_id('thumblr'); ?>"
name="<?php echo $this- >get_field_name('thumblr'); ?>"
type="text" value="<?php echo $thumblr; ?>" />
</p>
<?php
//Kopirati do tuda
}
...
Spremanje vrijednosti Funkcija za spremanje vrijednosti je update i u njoj e se spremati nove

vrijednosti sa kljuevima kao to su postavljene u funkciji form.
1
2
3
4
5
6
7
8
9
10
11

$instance['dribbble'] = strip_tags($new_instance['dribbble']);
$instance['facebook'] = strip_tags($new_instance['facebook']);
$instance['twitter'] = strip_tags($new_instance['twitter']);
$instance['instagram'] = strip_tags($new_instance['instagram']);
$instance['thumblr'] = strip_tags($new_instance['thumblr']);
return $instance;
}
Varijabla new_instance dostavlja novo unesene vrijednosti, dok je varijabla old_instance polje
koje sadri stare unesene vrijednosti. Najprije stare vrijednosti prosljeujemo u varijablu
instance te zatim za odreene kljueve unosimo nove vrijednosti ili stare (ako nisu promijenjene).
Na kraju funkcija vraa promijenjene vrijednosti koje se zatim spremaju u bazu.
107
Prikaz widgeta Za prikaz, koristit emo funkciju view koja e uzimati vrijednosti te emo
prikazivati poveznice na drutvene mree ovisno o tome da li imaju unesenu vrijednost. Nakon
ostalih funkcija, unesite ovu funkciju za prikaz:
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

extract($args);
if ( !empty($instance['title']) ) {
$title = $instance['title'];
} else {
$title = _("Social Links");
}
$dribbble = empty($instance['dribbble']) ? '' : $instance['dribbble'];
$facebook = empty($instance['facebook']) ? '' : $instance['facebook'];
$twitter = empty($instance['twitter']) ? '' : $instance['twitter'];
$instagram = empty($instance['instagram']) ? '' : $instance['instagram'];
$tumblr = empty($instance['tumblr']) ? '' : $instance['tumblr'];
/** This filter is documented in wp-includes/default-widgets.php */
$title = apply_filters( 'widget_title', $title, $instance, $this->id_base );
if ( $title )
$html = "<p>";
if($dribbble != ''){
$html .= "<a href='".$dribbble."'><i class='fa fa-dribbble'></i></a>";
}
if($facebook != ''){
$html .= "<a href='".$facebook."'><i class='fa fa-facebook'></i></a>";
}
if($instagram != ''){
$html .= "<a href='".$instagram."'><i class='fa fa-instagram'></i></a>";
}
if($twitter != ''){
$html .= "<a href='".$twitter."'><i class='fa fa-twitter'></i></a>";
}
if($tumblr != ''){
$html .= "<a href='".$tumblr."'><i class='fa fa-tumblr'></i></a>";
}
$html .= "</p>";
echo $html;
echo $after_widget;
108
43
Najprije provjeravamo da li postoji klju title u unesenim vrijednostima kod widgeta te ako ne
postoji postavljamo opi naslov Social Links. Nakon toga deklariramo varijable za drutvene
mree i pridodajemo im vrijednosti. Ako su te vrijednosti prazne ili ne postoje onda varijabla
dobiva praznu vrijednost, a u suprotnom vrijednost iz tog polja.
Nakon svega tog, prikazujemo naslov i html kod koji se stvara u ovisnosti o vrijednostima
pojedinih varijabli.
Registriranje widgeta Kako bi mogli unositi vrijednosti u widget i dodavati ga u sidebar-e
potrebno ga je i registrirati unutar WordPress-a. Da bi to uinili, moramo sljedei kod upisati na
kraju datoteke widget-social.php, izvan klase WPB3_Widget_Social_Links:
1
2
3
4
5
6
7
8
9
function wpb3_socialLinks_register() {
register_widget('WPB3_Widget_Social_Links');
}
add_action('init', 'wpb3_socialLinks_register', 1);
Unos Widgeta U administraciji kod widgeta stvorio se novi widget WPB3 Social Links.
Widget Social Links
Odvucimo ga u sidebar Footer Sredina i unesimo razne vrijednosti za drutvene mree.
109
Popunjena polja za Social Links
Potrebno je sada spremiti vrijednosti polja i zatim provjeriti nau web stranicu da li se widget
prikazuje.
Popunjena polja za Social Links
110
Widget Our Bunker

Widget Our Bunker moe se napraviti na vie naina. Jedan od naina je da koristimo isti widget
Text i unesemo vrijednosti sa HTML kodom.
Our Bunker sa Text Widgetom
Drugi nain bio bi izraditi novi custom widget sa dodatnim poljima gdje bi se unosile informacije
o adresi, potanskim brojem, gradom i dravom.
Bootstrap na blogu
Nakon to je cijela tema gotova, potrebno ju je malo bolje pregledati. to se tie Bootstrapa i bloga,
mogue je napraviti nekoliko dodatnih izmjena. U sluaju da korisnik ima dekstop raunalo i
gleda na irini iznad 991px ali ispod 1200px, dobio bi isti izgled kao na ostalim manjim irinama.
Na cilj je pruati slino iskustvo svim desktop korisnicima te je stoga potrebno i srediti neke
klase ili dodati neke klase kako bi iskustvo koritenja stranice bilo to bolje.
Glavni Sadraj
Glavni sadraj trebao bi ostati istog izgleda, ali ako se gleda na manjoj irini od 1200px, sve
se rasporeuje jedno ispod drugog. Nama je cilj to prikazivati tek ispod 991px. Za takvo neto,
posluiti e Bootstrap css klasa za grid col-md koja postavlja irinu za 992px i iznad, te ukoliko
nije definirana klasa col-lg na tom stupcu, ostati e irina dobivena sa klasom col-md.
Potrebno je otvoriti sve datoteke koje definiraju strukturu sadraja. Ako ste slijedili cijeli sadraj
do ovog teksta, imat ete datoteke index.php i single.php te njih treba promijeniti. Klase col-lg
treba zamijeniti s col-md i ostaviti iste irine stupaca.
1
2
3
4
5
6
7
8
9
111

...
</div>

</div>
Gornji kod treba promijeniti u:

1
2
3
4
5
6
7
8
9

<div class="col-md-8">
...
</div>

</div>
Sada e se i pri irini od 992px ili vie prikazivati sadraj na isti nain.
Footer
Footer treba isto tako promijeniti da na irini izmeu 992px i 1200px se prikazuju slino kao i na
irinama od 1200px i iznad. Kako je sadraj widgeta Our Bunker kratak i malen, moe se ponuditi
i manja veliina stupca, dok zatim za istu veliinu poveati irinu stupca gdje je widget About.
Kako bi to uinili treba sljedei kod:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?php if ( is_active_sidebar( "Footer 1" ) ){
dynamic_sidebar("Footer 1" );
} ?>
</div>
}?>
</div>
15
16
17
112
}?>
</div>
promijeniti u:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div class="col-md-5 col-lg-4">

} ?>
</div>
}?>
</div>
<div class="col-md-3 col-lg-4">
}?>
</div>
Ovim smo dobili to da pri irini manjoj od 991px, stupci u footeru prelaze svaki u novi red kako
bi se raspodijelili jedan ispod drugog, ali na veoj irini stupac gdje je widget About bude najiri,
a stupac od Our Bunker bude najui jer ima kratak sadraj. Zbroj tih stupaca na toj irini je 5 +
4 + 3 = 12. Kada irina postane 1200px ili ira, tada se stupac od About promijeni, kao i stupac
od Our Bunker i tako ostanu svi na istim irinama pa je tada zbroj 4 + 4 + 4 = 12.
Responzivne slike lanka

Ako je stranica responzivna tada treba poraditi i na responzivnim slikama to je jedan od najveih
problema vezanih uz responzivne web stranice. Zbog velike zajednice koja radi na tome, postoje
nekoliko rjeenja. Jedan od njih je tzv. BttrLazyLoading, a taj dodatak je napravljen za Bootstrap
3 tj. za njegov poetni Grid. Skinite ga i postavite jquery.bttrlazyloading.min.js u wpb3/assets/js,
a bttrlazyloading.min.css u wpb3/assets/css.
Nakon postavljanja BttrLazyLoading-a u odgovarajue foldere, potrebno ga je i povezati sa
WordPress-om na nain kao to smo ve povezali datoteke CSS i JS. Otvorite datoteku functions.php i pronaite funkciju za dodavanje JS datoteka pod nazivom wpb3_js_datoteke. Zatim
iznad:
http://bttrlazyloading.julienrenaux.fr/
1
2
3
4
5
6
7
113
wp_enqueue_script(
'wpb3-custom-js',
get_stylesheet_directory_uri() . '/assets/js/custom.js',
array( 'jquery' ),
'',
true
);
upiite sljedee:
1
2
3
4
5
6
7
wp_enqueue_script(
'wpb3-lazyLoading-js',
get_stylesheet_directory_uri() . '/assets/js/jquery.bttrlazyloading.min.js',
array( 'jquery' ),
'',
true
);
Ostavljamo da custom.js bude zadnji po redu u sluaju da tamo piemo funkcije i naredbe koje
se mogu odnositi i na jquery.bttrlazyloading.min.js.
Zatim otvorite custom.js i nakon (function($) { kopirajte sljedee:
1
$(".bttrLazyLoading").bttrlazyloading();
Tim pozivom e se za svaku sliku koja u sebi ima ovu klasu pozvati BttrLazyLoading jQuery
dodatak. Nakon sreivanja poziva javascript datoteke, potrebno je srediti i pozivanje css-a tog
dodatka. Stoga pronaite funkciju wpb3_css_datoteke u datoteci functions.php te iznad poziva
wpb3-style kopirajte sljedee:
1
2
wp_enqueue_style( 'wpb3-lazyLoading',
get_template_directory_uri() . '/assets/css/bttrLazyLoading.css' );
Promjena HTML kod od thumbnail-ova

HTML kod od bttrLazyLoading koji se odnosi samo na razliite slike, iako se moe i vie toga
napraviti, je sljedei:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
114
<img id="yourImageId" class="bttrlazyloading"

data-bttrlazyloading-xs-src="img/768x200.gif"
data-bttrlazyloading-xs-width="768"
data-bttrlazyloading-xs-height="200"
data-bttrlazyloading-sm-src="img/345x250.gif"
data-bttrlazyloading-sm-width="345"
data-bttrlazyloading-sm-height="250"
data-bttrlazyloading-md-src="img/455x350.gif"
data-bttrlazyloading-md-width="455"
data-bttrlazyloading-md-height="350"
data-bttrlazyloading-lg-src="img/360x300.gif"
data-bttrlazyloading-lg-width="360"
data-bttrlazyloading-lg-height="300"
/>
Trenutni thumbnail koji se generira funkcijom the_thumbnail vraa samo jedan obian HTML
element img sa putanjom do slike. Kako bi mogli dobiti responzivne slike lanka moramo to
promijeniti. Za promjenu HTML-a od thumbnaila moe se koristiti WordPress filter post_thumbnail_html. Njegovo koritenje moe se pronai ovdje pod example 2.
Prije nego promijenimo HTML kod thumbnaila, potrebno je odrediti sve verzije slike lanka.
Prvu verziju smo napravili u poglavlju Slika lanka gdje smo za postavljanje novih verzija slika
koristili funkciju add_image_size. Nama se slike mijenjaju ovako:
1. Ako je manja od 991px daj mi jednu koja se dalje smanjuje proporcionalno
2. Ako je vea od 991px ali manja od 1200px prikai sliku sa malo drugaijim dimenzijama
3. Ako je vea od 1200px prikai mi default veliinu slike
Nama je potrebna malo drugaija logika. Prvo treba razmotriti gledanje stranice preko mobilnih
ureaja. Njih ne zanimaju slike veih irina ve je ona sama po sebi default verzija i na nju emo
tako i gledati. Nama je dakle potrebno sljedee:
1.
2.
3.
4.
Ako je manja od 767px prikai jednu verziju slike

Ako je vea od 1200px prikau jednu verziju slike
Ako uzmemo u obzir da je za toku 4. ve napravljena veliina slike lanka, potrebno je definirati
samo jo 3 veliine, a te veliine jesu:
< 767px = 709x334
< 992px = 720x339
< 1200px = 617x290
Otvorite datoteku functions.php i sada na poetku te datoteke i nakon poziva funkcije add_image_size dodajte jo tri takve funkcije:
codex.wordpress.org/Function_Reference/the_post_thumbnail#Post_Thumbnail_Linking_to_the_Post_Permalink
1
2
3
4
5
6
115
//ispod 1200px
add_image_size('slika-clanka-md', 617, 290);
//ispod 992px
add_image_size('slika-clanka-sm', 720, 339);
// za 480 i ispod
add_image_size('slika-clanka-xs', 709, 334);
Iako smo dodali nove verzije slika, slike koje ve postoje u WordPress-u nee poprimiti ove
promjene te ih treba ponovno uploadati ili moete instalirati dodatak za WordPress pod nazivom
Regenerate Thumbnails koji e za svaku sliku u WordPress-u stvoriti sve definirane verzije.
Na kraju datoteke functions.php dodajte sljedei kod:
1
2
3
4
5
function wpb3_thumbnail_html($html, $post_id, $aid, $sizeThumb, $attr){

}
add_filter( 'post_thumbnail_html', 'wpb3_thumbnail_html', 10, 5);
Ova funkcija e se koristiti kako bi napravili novi HTML kod za slike. Najprije moramo osigurati
da se ne mijenja uvijek taj html ve samo kada pozovemo npr. thumbnail sa nazivom slikaclanka.
1
2
3
4
5
6
7
8
9
10
function wpb3_thumbnail_html($html, $post_id, $aid, $sizeThumb, $attr){

if($sizeThumb == "slika-clanka"){
$img = "";
return $img;
}
return $html;
}
add_filter( 'post_thumbnail_html', 'wpb3_thumbnail_html', 10, 5);
Ovime najprije usporeujemo vrijednost varijable koja predstavlja naziv veliine slike te ukoliko
je vrijednost slika-clanka tada ulazimo u ovu granu i obavljamo daljnje operacije. Ako ta
usporedba nije tona, zatim samo vraamo ve napravljeni HTML.
Sljedee to treba napraviti je definirati neke varijable, pa emo ovo unijeti:
https://wordpress.org/plugins/regenerate-thumbnails
1
2
3
4
5
6
7
8
9
10
11
12
13
14
116
...
if($sizeThumb == "slika-clanka"){
$sizes= array(
'slika-clanka',
'slika-clanka-md',
'slika-clanka-sm',
'slika-clanka-xs' );
$img= '<img class="bttrLazyLoading img-responsive"
alt="'.get_the_title().'" ';
$sizeBttr = "";
$width = "";
$height = "";
$aid = ( ! $aid ) ? get_post_thumbnail_id() : $aid;
...
Prva varijabla koju definiramo jest sizes i ona u sebi sadri nazive svih verzija slika koje nama
trebaju odnosno koje smo prije definirali sa add_image_size. Zatim varijabla img dobiva prvu
vrijednost odnosno poetak slike koja u sebi ima klasu i atribut alt kao naslov lanka.
Nakon toga definirane su tri varijable koje su bez vrijednosti. Varijabla sizeBttr imati e
vrijednosti xs, sm, md ili lg i te e se koristiti u atributima za BttrLazyLoading dodatak kao npr.
data-bttrlazyloading-lg-src. Varijable width i height sadravati e irinu i visinu u pikselima
koje e se pridodavati atributima kao npr. data-bttrlazyloading-lg-width. Zadnja varijabla je
aid koja oznauje attachment ID tj. ID slike i ukoliko nije postavljena dobiva se preko funkcije
get_post_thumbnail_id.
Sve potrebne varijable su definirane te je sada potrebno proi kroz svaku veliinu odnosno verziju
slike i spajati je sa varijablom img kako bi stvorili cjelokupan HTML kod koji je potreban da bi
BttrLazyLoading dodatak obavljao svoju funkciju.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
...
foreach ( $sizes as $size ) {
$url = wp_get_attachment_image_src( $aid, $size );
switch($size){
case "slika-clanka":
$sizeBttr = "lg";
$width = "750";
$height= "353";
break;
case "slika-clanka-md":
$sizeBttr = "md";
$width = "617";
$height= "290";
break;
case "slika-clanka-sm":
$sizeBttr = "sm";
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
117
$width = "720";
$height= "339";
break;
default:
$sizeBttr = "xs";
$width = "709";
$height= "334";
break;
}
$img .= " data-bttrlazyloading-".$sizeBttr."-src='". $url[0] ."' ";
$img .= " data-bttrlazyloading-".$sizeBttr."-width='". $width ."' ";
$img .= " data-bttrlazyloading-".$sizeBttr."-height='". $height ."' ";
}
$img .= " />";
...
U gornjem kodu prolazimo kroz sve verzije slika te za svaki verziju slika ovisno o nazivu verzije,
dodajemo drugaije vrijednosti varijablama sizeBttr, width i height. Nakon to su te varijable
dobile odgovarajue vrijednosti, spajamo u varijablu img nove vrijednosti kako bi se stvorio npr.
1
2
3
4
5
6
7
<img
...
data-bttrlazyloading-lg-src='img/img.jpg'
data-bttrlazyloading-lg-width='750'
data-bttrlazyloading-lg-height='353'
...
/>
Nakon to smo spojili sa varijablom img dodatne vrijednosti, spajamo jo jedan mali dio a to je
1
/>
koji zatvara element IMG. Ovo e napraviti ispravan HTML s kojim e BttrLazyLoading dodatak
funkcionirati. Za probu, dodajte lanku ili lancima nove slike ali ne one koje su ve
dodane u WordPress nego nove. U sluaju da koristite ve spomenuti dodatak Regenerate
Thumbnails, onda je dovoljno nego iskoristiti.
Dodatni CSS za resize slike

Iako smo sve napravili kako treba, slika se na manjim irinama ne smanjuje proporcionalno tj.
ostaje na onih 709px irine to nama to ne odgovara. To se dogaa jer se slika, koja se generira
kao thumbnail, stavi unutar jo jednog wrappera ija je klasa bttrlazyloading-wrapper. Otvorite
datoteku style.css koja se nalazi u wpb3/assets/css i na kraju te datoteke postavite:
1
2
3
118
.bttrlazyloading-wrapper {
display: block;
}
Sada je element koji u sebi sadri element IMG sa naim verzijama slika postavljen kao blok
koji uzima potpunu irinu elementa u kojem se nalazi te time i naa slika poprima irinu tog
elementa pa se proporcionalno smanjuje kako mi smanjujemo irinu odnosno poveava kako mi
poveavamo irinu.
Dodatne datoteke stranica

Iako sa datotekama index.php i single.php ova tema moe funkcionirati, poeljno je ipak imati
jo neke dodatne datoteke koje definiraju strukturu i izgled nekih stranica. Takve datoteke jesu:
page.php
404.php
Moda jo dodatnih stranica bi se moglo dodati kao to su search.php ili archive.php ali trenutno
za ovaj izgled teme i nisu toliko bitne jer se za njih koristi index.php iz razloga to se lanci listaju
na isti nain, a mi nemamo dodatno definirani izgled za takve naine listanja.
Datoteka page.php
Stvorite novu datoteku page.php i kopirajte cijeli sadraj iz datoteke single.php. Obine stranice
esto nemaju ni datum objavljivanja ili informaciju o autoru jer su u biti to stranice sa openitim
informacijama te podaci o autoru, komentarima ili datumu objavljivanja nisu relevantni za tu
stranicu. Zbog toga, potrebno je malo srediti nau datoteku page.php. Prvo to emo obrisati je:
1
2
<p><csmall>Posted: <?php echo get_the_date(); ?></csmall> | <csmall2>By:

<?php the_author(); ?> - <?php comments_number(); ?> </csmall2></p>
To su upravo podaci za koje smo rekli da nisu bitni za stranice. Zatim pojednostavimo:
1
u
1
<?php the_content(); ?>
Kasnije dolazi dio gdje su poveznice na razliite drutvene mree odnosno mogunosti dijeljenja
ovog sadraja za drutvene mree. To ostavljam na Vama da odluite hoete li ih obrisati ili ne.
Stranice bez sidebar-a
esto se mogu vidjeti teme koje u sebi imaju razne primjere sadraja pa tako je i stranica koja u
sebi ne sadri sidebar. Otvorite novu datoteku i nazovite ju fullpage.php te kopirajte cijeli sadraj
iz datoteke page.php.
Najprije emo obrisati sidebar pa stoga obriite sljedei dio:
119
1
2
3
4


</div>
Nakon to ste obrisali dio gdje se prikazivao sidebar, potrebno je proiriti sadraj do cijele irine.
Da bi to ostvarili potrebno je:
1
pretvoriti u
1
Za kraj, treba se definirati i naziv ovog template-a, a to emo uinit tako da izmeu
1
<?php
i
1
get_header()
upiemo sljedee:
1
2
3
/*
Template Name: Page bez sidebar-a
*/
Otvorite administrativni dio WordPress-a i napravite jednu stranicu ( Pages > Add New ) npr.
Full Width Page te unutra upiite bilo to. Zatim prije spremanja, treba odabrati koji template
emo koristiti:
Odabir Custom Template-a
Nakon toga treba dodati napravljenu stranicu u navigaciju tako da odemo pod Appearance
> Menus, oznaimo u lijevom izborniku stranicu koju hoemo, u ovome sluaju to je Full
Width Page i kliknemo na Add to Menu. Zatim je potrebno samo spremiti nove izmjene. Ako
sada odemo vidjeti promjene na naoj stranici, primijetiti emo da je dodana nova stranica u
navigaciju te ako kliknemo na nju, dobiti emo stranicu sa sadrajem koji se prostire po cijeloj
irini stranice.
120
Stranica bez sidebar-a
Vie o Custom Template-ima proitajte ovdje.
Datoteka 404.php
U sluaju kada se upie neto krivo odnosno nepostojee, web server alje naem web pregledniku
poruku da se trai nepostojei sadraj i daje nam status 404. To se isto tako dogaa kada se kod
WordPress-a upie neto krivo kao kod localhosta npr. localhost/wordpress/?page_id=99999999 ili
ako su drugaije postavljeni permalinkovi onda bi mogli i napisati localhost/wordpress/krivooooo.
Kada se neto od toga ukuca, te ukoliko WordPress prepoznaje strukturu permalinka, ali ne
pronalazi nikakav sadraj vezan uz taj permalink tada pokazuje 404.php ili index.php. U naem
sluaju pokazuje index.php jer nismo jo definirali datoteku 404.php.
Stvorite sada novu datoteku 404.php i u nju kopirajte sadraj iz page.php kako bi imali poetnu
strukturu ve definiranu. Obriite sada cijeli dio glavnog sadraja odnosno neka ostane samo
sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div class="row">
</div>

</div>
codex.wordpress.org/Page_Templates#Custom_Page_Template
16
17
18
19
20
121
</div>
Nakon toga, izmeu u elementu .col-md-8 upiite sljedee:

1
2
3
<p><?php _e("Ne postoji sadraj koji pretraujete. Probajte koristiti

nau trailicu ispod.","wpb3"); ?></p>
<?php get_search_form( ); ?>
Ako sada opet pokuamo otvoriti neto to ne postoji dobiti emo ovaj tekst te e se ispod teksta
prikazati i trailica.
Dodavanje komentara na lanke

Iako izgled komentara nije definiran u SOLID template-u, trebalo bi ih postaviti jer su komentari
jedni od kljunih stvari kod WordPress-a vezane za izgradnju zajednice. Komentarima itatelji
mogu se uputiti u raspravu sa temom lanka i tako napraviti jedan osjeaj zajednice i pripadnosti
jer svako moe iznijeti svoje miljenje ili pitati moda za nekakav odgovor.
Za prikazivanje komentara koristi se WordPress funkcija wp_list_comments. Otvorite datoteku
single.php te nakon dijela za dijeljenje lanka po drutvenim mreama ali prije
1
dodajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<ul>
<?php
//Uzmi komentare za ovaj lanak
$comments = get_comments(array(
'post_id' => get_the_ID(),
'status' => 'approve' //Uzmi samo komentar koji su odobreni
));
//Prikai listu komentara
wp_list_comments(array(
'type' => 'comment',
'reverse_top_level' => false //Prikai najnovije komentare prije
), $comments);
?>
</ul>
http://codex.wordpress.org/Function_Reference/wp_list_comments
122
Sada ovo to smo dobili ne izgleda ba predivno niti u skladu sa naom temom:
Komentar
Kako bi mogli koristiti Bootstrap 3 CSS komponentu media object potrebno je koristiti funkciju
koja e upravljati izgledom komentara. Nazvati emo tu funkciju wpb3_comment te je smjestiti
na kraju datoteke functions.php:
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
function wpb3_comment($comment, $args, $depth) {

$GLOBALS['comment'] = $comment;
extract($args, EXTR_SKIP);
if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
<<?php echo $tag ?>
<?php comment_class( empty( $args['has_children'] ) ?
'media well' : 'media well parent' ) ?>
id="comment-<?php comment_ID() ?>">
<?php //Ako ima avatar, prikai ga
if ( $args['avatar_size'] != 0 ) { ?>
<a href="<?php echo get_comment_author_link(); ?>"
class="pull-left media-object">
<?php echo get_avatar( $comment, $args['avatar_size'] ); ?>
</a>
<?php } ?>
<?php if ( 'div' != $args['style'] ) : ?>
<div id="div-comment-<?php comment_ID() ?>" class="media-body">
<?php endif; ?>
http://getbootstrap.com/components/#media
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
123
<div class="comment-author vcard">

<?php printf( __( '<cite class="fn">%s</cite>
<span class="says">says:</span>' ), get_comment_author_link() ); ?>
</div>
<div class="comment-meta small commentmetadata">
<a href="<?php echo htmlspecialchars( get_comment_link(
$comment->comment_ID ) ); ?>">
<span class="fa fa-calendar"></span>
<?php
printf( __('%1$s at %2$s'), get_comment_date(),
get_comment_time() ); ?></a>
<?php edit_comment_link( __( '(Edit)' ), ' ', '' );
?>
</div>
<?php comment_text(); ?>
<div class="reply">
<?php comment_reply_link( array_merge( $args,
array( 'before' => "<i class='fa fa-reply'></i> ",
'add_below' => $add_below, 'depth' => $depth,
'max_depth' => $args['max_depth'] ) ) ); ?>
</div>
<br/>
<?php if ( 'div' != $args['style'] ) : ?>
</div>
<?php endif; ?>
<?php
}
Izgleda malo zamreno jel tako? Ali sve je objanjeno ispod:

Za poetak stvaramo globalnu varijablu kako bi je mogli koristiti i izvan funkcije nakon
to se ona izvri te cijelo polje koje smo dobili u varijabli args pretvaramo u varijable tako
da je klju ime varijable, a vrijednost kljua je vrijednost polja.
Nakon toga gledamo koja vrijednost nam je prosljeena iz funkcije wp_list_comments
kao style te s obzirom na tu vrijednost definiramo vrijednosti varijabli tag i add_below.
Varijabla tag koristi se kako bi mogli definirati da li komentar zapoinje sa li ili div i sl.
Mi ne prosljeujemo nikakvu vrijednost za parametar style pa stoga emo dobiti li kao
element koji e sadravati na komentar
Zatim i otvaramo taj element pa e < postati <li i dalje dodajemo klase u ovisnosti o tome
da li komentar ima odgovore ili nema. Ako je komentar ima odgovore uz klase media i
well dobiti e jo klasu parent.
124
Nakon to smo otvorili element li provjeravamo da li autor komentara ima sliku te ukoliko
je ima, postavljamo je kao to je prikazano u Bootstrap 3 media object-u, sa malom
korekcijom gdje .media-object stavljamo u a, a ne u img:
1
2
3
<a href="#" class="pull-left media-object">

<img .../>
</a>
Zatim ukoliko nije ve div odnosno ako je li ispod njega emo postaviti novi element div
koji e sadravati klasu media-body. Unutar toga postavljamo tekst i ostale informacije o
komentaru. Najprije postavljamo ime autora sa poveznicom na web stranicu koju je autor
postavio u postavkama profila.
Nakon toga ispisujemo datum i vrijeme komentara te ispred toga postavljamo FontAwesome ikonu fa fa-calendar kako bi dobili malu ikonu kalendara. Isto tako smo dodali klasu
small u element koji sadri vrijeme i datum. Ta klasa je definiranu u Bootstrapu 3 te slui
kako bi smanjila tekst za cca 25%.
Kada se ispie datum i vrijeme objavljivanja ispisuje se cjelokupan tekst komentara
Nakon teksta postavlja se poveznica na odgovor koji se prikazuje ovisno o parametrima
postavljenima u wp_list_comments. Funckija comment_reply_link moe uzeti jo neke
parametre kao npr. before koji slui za dodavanje dodatnog HTML-a ispred poveznice,
kao to smo ovdje uinili sa jo jednom FontAwesome ikonom fa fa-reply.
Na kraju, provjeravamo da li se koristi element div ili li, te ukoliko se koristi li ispisujem
zatvarajui element div
Kako bi se ova funkcija sada mogla koristiti treba malo promijeniti dio gdje se prikazuju
komentari u datoteci single.php. Najprije na tom dijelu treba dodati Bootstrap 3 klasu za media
listu na element ul tako da sada obini ul bude:
1
<ul class="media-list">
Nakon toga wp_list_comments treba promijeniti tako da se doda funkcija koja e se koristiti na
ovakav nain:
1
2
3
4
5
wp_list_comments(array(
'type' => 'comment',
'callback' => 'wpb3_comment',
'reverse_top_level' => false //Prikai najnovije komentare prije
), $comments);
Nakon zatvarajueg elementa </ul> dodajte funkciju za postavljanje forme za komentiranje:

1
<?php comment_form( ); ?>
125
Iako smo iskoristili funkciju comment_form te dobili formu za unos komentara, potrebno
je dodatna korekcija izgleda kako bi to izgledalo ljepe. Najprije treba pogledati definiciju
comment_form kako bi dobili uvid u mogunost koje nam prua sama funkcija.
Najprije emo poslati u funkciju comment_form neke parametre kako bi zamijenili tekst nekih
dijelova forme:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$comments_args = array(
// change the title of send button
'label_submit'=>'Comment',
// change the title of the reply section
'title_reply'=>'Write a Reply or Comment',
// remove "Text or HTML to be displayed after
//the set of comment fields"
'comment_notes_after' => '',
// redefine your own textarea (the comment body)
'comment_field' => '<p class="comment-form-comment">
<label for="comment">' . _x( 'Comment', 'noun' ) .
'</label><br /><textarea id="comment" name="comment"
class="form-control" aria-required="true"></textarea></p>',
);
comment_form($comments_args);
Moe se primijetiti da se kod parametra comment_field dodao element textarea gdje dodajemo
klasu form-control, a to je klasa iz Bootstrap 3 frameworka za inpute i ostale dijelove formi.
Funkcija comment_form prima i parametar field koji sadri sva dodatna polja za formu, poput
imena, e-maila ili web stranice, ali mogue je i dodatna polja definirati.
U ovim komentarima omoguiti emo samo unos e-maila i imena. To emo uini na sljedei
nain:
1
2
3
4
5
6
7
8
9
10
11
12
13
$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$polja = array(
'author' => '<div class="form-group"><label for="author">' .
__( 'Name' ) . ( $req ? '<span class="required">*</span>' : '' ) .
'</label> ' .
'<input id="author" name="author" class="form-control"
placeholder="your name" type="text" value="' .
esc_attr( $commenter['comment_author'] ) . '" size="30"' .
$aria_req . ' /></div>',
'email' => '<div class="form-group"><label for="email">' .
http://codex.wordpress.org/Function_Reference/comment_form
126
14
15
16
17
18
19
20
21
22
__( 'Email' ) . ( $req ? '<span class="required">*</span>' : '' ) .

'</label> ' . '<input id="email" class="form-control" name="email"
placeholder="email@address.co.uk" type="email" value="' .
esc_attr( $commenter['comment_author_email'] ) . '" size="30"' .
$aria_req . ' /></div>'
);
$comments_args = array(
'fields'
=> $polja,
...
Iznad varijable comments_args dodali smo sljedee:

varijablu commenter gdje dobijemo zapravo prijavljenog korisnika
varijablu req kojom uzimamo vrijednost iz postavki nae stranice gdje se postavlja da li je
potreban e-mail i ime pri komentiranju ili nije
varijablu aria_req koja e postaviti, ukoliko je neto obavezno, dodatan html element koje
neki user-agenti koriste koji jo ne podravaju html5
varijablu polje koja sadri polja author i email ije vrijednosti daju html kod te se taj
html konstruira ovisno i o varijabli req te ako je vrijednost te varijable true tada se dodaje
dodatni html
Nakon toga, dodajemo u varijablu comments_arg dodatno polje fields koje uzima vrijednost varijable polja.
Ako niste prijavljeni forma e sada izgledati ovako:
Forma za komentiranje
Jedino to bi trebalo jo promijeniti jeste izgled gumba za komentiranje. To je mogue na nekoliko

naina, ali u ovome sluaju iskoristiti u najjednostavniji bez da diram datoteku style.css.
Otvorite datoteku custom.js i pri vrhu datoteke utipkajte sljedee:
1
2
3
4
127
(function($) {
// Ovdje upii
$("#commentform #submit").addClass("btn btn-primary");
Sada smo dodali Bootstrap 3 klase na na gumb za komentiranje i dobili smo lijep izgled forme
bez puno rada na njoj.
Sreivanje komentara
Kako bi bilo lake odravati takve template i funkcije od WordPress-a, treba iskoristiti i ostale
mogunosti kao to je funkcija comments_template. Ako tu funkciju koristimo unutar page.php
ili single.php moemo maknuti sve pojedinosti vezane uz komentare i smjestiti ih u datoteku
comments.php. Stoga, stvorite novu datoteku comments.php te kopirajte sve iz single.php od
zavretka dijeljenja na drutvene mree do endwhile; else:, tako da nam na kraju u single.php
kada samo pozovemo funkciju comments_template ostane samo ovo:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
...
<h6>SHARE:</h6>
<p class="share">
<i class="fa fa-twitter"></i></a>
<i class="fa fa-facebook"></i></a>
<i class="fa fa-tumblr"></i></a>
<i class="fa fa-google-plus"></i></a>
</p>
<?php comments_template(); ?>
...
Ako je pravilan sadraj kopiran u datoteku comments.php imati emo datoteku koju moemo
pozivati i na ostalim template-ima kao to je npr. page.php.
http://codex.wordpress.org/Function_Reference/comments_template
Napredna izrada WordPress teme:

Portfolio
U ovome poglavlju doraditi emo nau temu i slijediti SOLID template strukturu vezanu uz
Portfolio. Datoteke koje nam SOLID template prua jesu portfolio.html i single-project.html.
Datoteka portfolio.html sadri jedan headline i popis projekata, dok datoteka single-project.html
sadri mali slider koji vrti slike odgovarajueg projekta te kratki opis projekta uz neke dodatne
informacije.
Portfolio moemo napraviti na vie naina gdje bi jedan od naina bio da veemo lanke uz
kategoriju Portfolio, ali tada bi to bila samo lagana nadogradnja teme i nije toliko praktino
odvajati tako posebnu vrstu sadraja samo sa kategorijom.
Za izradu ovakvog portfolio-a koristit emo Custom Post Types, koji e sa sobom imati zasebne
kategorije i tagove.
Dizajn i funkcionalnost
Dobra praksa je odvajati dizajn i funkcionalnosti tako je sva funkcionalnost sadrana preko
dodataka (eng. plugins) jer se time mogu prenositi iste funkcionalnost na razliite WordPress
teme koje jesu ili nisu prilagoene tim funkcionalnostima.
Stoga, sve to se moe koristiti izvan teme i nije usko povezano sa temom trebalo bi ii u zaseban
dodatak, a ne u temu. Ovdje je Portfolio usko povezan sa ovom temom te emo zato sve vezano
uz portfolio raditi uz ovu temu. Kasnije ako netko eli to isto iskoristiti na ostalim temama, moe
se jednostavno prenijeti u zaseban dodatak.
Plan izrade
Prije nego se pone raditi na samom portfolio potrebno je prouiti SOLID template i to prema
tom template-u treba imati jedan portfolio.
Portfolio e se sastojati od:
stranice koja prikazuje sve projekte
stranice pojedinog projekta
Stranica koja prikazuje sve projekte sadri kratki uvodni tekst te za svaki projekt sadri sliku
projekta, naziv projekta te poveznicu to stranice tog projekta.
Stranica pojedinog projekta sadri slider sa par slika koje su povezane sa projektom, kratki opis
projekta, naziv projekta te detalje projekta kao to je datum projekta, autor projekta, kategorije,
tagovi, klijent i web stranica klijenta odnosno projekta.
http://codex.wordpress.org/Post_Types
Napredna izrada WordPress teme: Portfolio
129
Stranica koja prikazuje sve projekte

Ova stranica e prikazivati kratki uvodni tekst. Taj kratki uvodni tekst biti e zapravo sadraj
stranice koja koristi Custom Template za prikaz projekata.
Projekti e se dobiti iz baze jednostavnim WP Query-em koji e nam dati sve sadraje koji spadaju
pod Custom Post Type: portfolio-
Stranica pojedinog projekta

Kratki opis projekta biti e zapravo tekst tog sadraja odnosno projekta. Datum e biti datum
objavljivanja tog projekta, a autor e biti sam autor tog lanka. Kategorije i tagovi prikazati e se
kao to se prikazuju tj. dohvaaju kod obinih lanaka. Klijent i web klijenta odnosno projekta
biti e dodatna polja.
Slider sa slikama projekta biti e jedina opcija koja je kompleksnija za rijeiti. Kako ne bi izraivali
svoj vlastiti metabox za dodavanje slika iskoristiti emo ve postojei dodatak Multi Image
Metabox koji se jednostavno moe postaviti da se prikazuje samo za odreeni Custom Post
Type i sl.
Custom Post Type: portfolio

Za Portfolio koji radimo koristit emo portfolio kao naziv nae nove vrste lanka odnosno
sadraja. Za izradu takvog Custom Post Type-a potrebno je napisati naredbe kako bi se napravio
takva vrsta sadraja. Pri tome mogu pomoi i alati poput GenerateWP.
Otvorite novu datoteku pod nazivom portfolio.php i dodajte unutar foldera wpb3/inc te pozovite
tu datoteku unutar functions.php.
1
require_once 'inc/portfolio.php';
U datoteku portfolio.php kopirajte sljedee:

1
2
3
4
5
6
7
8
9
10
11
<?php
/* CPT: Portfolio */
// Registriranje CPT: Portfolio
function wpb3_portfolio() {
$labels = array(
'name'
'wpb3' ),
'singular_name'
'wpb3' ),
=> _x( 'Portfolios', 'Post Type General Name',

=> _x( 'Portfolio', 'Post Type Singular Name',
https://wordpress.org/plugins/multi-image-metabox/
http://generatewp.com
130
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
44
45
46
47
48
49
'menu_name'
'parent_item_colon'
'all_items'
'view_item'
'add_new_item'
'add_new'
'edit_item'
'update_item'
'search_items'
'not_found'
'not_found_in_trash'
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
'Portfolio', 'wpb3' ),
'Parent Portfolio:', 'wpb3' ),
'All Portfolios', 'wpb3' ),
'View Portfolio', 'wpb3' ),
'Add New Portfolio', 'wpb3' ),
'Add Portfolio', 'wpb3' ),
'Edit Portfolio', 'wpb3' ),
'Update Portfolio', 'wpb3' ),
'Search Portfolio', 'wpb3' ),
'Not found', 'wpb3' ),
'Not found in Trash', 'wpb3' ),
);
$args = array(
'label'
=> __( 'portfolio', 'wpb3' ),
'description'
=> __( 'Portfolio Post Type', 'wpb3' ),
'labels'
=> $labels,
'supports'
=> array( 'title', 'editor', 'author',
'thumbnail', ),
'taxonomies'
=> array( 'portfolio_category' ),
'hierarchical'
=> false,
'public'
=> true,
'show_ui'
=> true,
'show_in_menu'
=> true,
'show_in_nav_menus'
=> true,
'show_in_admin_bar'
=> true,
'menu_position'
=> 5,
'can_export'
=> true,
'has_archive'
=> true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'capability_type'
=> 'post',
);
register_post_type( 'portfolio', $args );
}
// Pozovi funkciju pri izvravanju init dijela WordPress-a
add_action( 'init', 'wpb3_portfolio', 0 );
Spremite promjene i otvorite administrativni dio WordPress-a i vidjeti ete novi Menu Portfolio
te je sada mogue dodavati novi sadraj za ovaj Custom Post Type.
Kategorija - Custom Taxonomy

Projekti sadre kategorije u SOLID template-u te je zato potrebno dodati kategorije. Kako bi to
uinili kopirajte sljedee dio na kraj datoteke portfolio.php:
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
44
45
46
131
// Registracija kategorije - Custom Taxonomy

function wpb3_portfolio_category() {
$labels = array(
'name'
=> _x( 'Portfolio Categories',
'Taxonomy General Name', 'wpb3' ),
'singular_name'
=> _x( 'Portfolio Category',
'Taxonomy Singular Name', 'wpb3' ),
'menu_name'
=> __( 'Portfolio Category', 'wpb3' ),
'all_items'
=> __( 'All Portfolio Categories',
'wpb3' ),
'parent_item'
=> __( 'Parent Portfolio Category',
'wpb3' ),
'parent_item_colon'
=> __( 'Parent Portfolio Category:',
'wpb3' ),
'new_item_name'
=> __( 'New Portfolio Category', 'wpb3' ),
'add_new_item'
=> __( 'Add New Portfolio Category',
'wpb3' ),
'edit_item'
=> __( 'Edit Portfolio Category', 'wpb3' ),
'update_item'
=> __( 'Update Portfolio Category',
'wpb3' ),
'separate_items_with_commas' => __( 'Separate Portfolio Categories with
commas', 'wpb3' ),
'search_items'
=> __( 'Search Portfolio Categories',
'wpb3' ),
'add_or_remove_items'
=> __( 'Add or remove Portfolio Categories',
'wpb3' ),
'choose_from_most_used'
=> __( 'Choose from the most used Portfolio
Categories', 'wpb3' ),
'not_found'
=> __( 'Not Found', 'wpb3' ),
);
$args = array(
'labels'
=> $labels,
'hierarchical'
=> true,
'public'
=> true,
'show_ui'
=> true,
'show_admin_column'
=> true,
'show_in_nav_menus'
=> true,
'show_tagcloud'
=> true,
);
register_taxonomy( 'portfolio_category', array( 'portfolio' ), $args );
}
// Hook into the 'init' action
add_action( 'init', 'wpb3_portfolio_category', 0 );
132
Spremite datoteku i otvorite ponovno administrativni dio WordPress-a te moemo vidjeti da je

uz mogunost dodavanja sadraja Portfolio sada mogue dodavati i kategorije vezane uz taj
sadraj.
Tagovi - Custom Taxonomy

Tagovi su ista stvar kao to i kategorije samo to pod hierarchical nisu true ve false. Otvorite
opet datoteku portfolio.php te na kraju datoteke kopirajte sljedee:
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
// Register Custom Taxonomy

function wpb3_portfolio_tag() {
$labels = array(
'name'
=> _x( 'Portfolio Tags',
'Taxonomy General Name', 'wpb3' ),
'singular_name'
=> _x( 'Portfolio Tag',
'Taxonomy Singular Name', 'wpb3' ),
'menu_name'
=> __( 'Portfolio Tag', 'wpb3' ),
'all_items'
=> __( 'All Portfolio Tags', 'wpb3' ),
'parent_item'
=> __( 'Parent Portfolio Tag', 'wpb3' ),
'parent_item_colon'
=> __( 'Parent Portfolio Tag:', 'wpb3' ),
'new_item_name'
=> __( 'New Portfolio Tag', 'wpb3' ),
'add_new_item'
=> __( 'Add New Portfolio Tag', 'wpb3' ),
'edit_item'
=> __( 'Edit Portfolio Tag', 'wpb3' ),
'update_item'
=> __( 'Update Portfolio Tag', 'wpb3' ),
'separate_items_with_commas' => __( 'Separate Portfolio Tags with
commas', 'wpb3' ),
'search_items'
=> __( 'Search Portfolio Tags', 'wpb3' ),
'add_or_remove_items'
=> __( 'Add or remove Portfolio Tags',
'wpb3' ),
'choose_from_most_used'
=> __( 'Choose from the most used Portfolio
Tags', 'wpb3' ),
'not_found'
=> __( 'Not Found', 'wpb3' ),
);
$args = array(
'labels'
=> $labels,
'hierarchical'
=> false,
'public'
=> true,
'show_ui'
=> true,
'show_admin_column'
=> true,
'show_in_nav_menus'
=> true,
'show_tagcloud'
=> true,
);
register_taxonomy( 'portfolio_tag', array( 'portfolio' ), $args );
37
38
39
40
133
}
add_action( 'init', 'wpb3_portfolio_tag', 0 );
Dodavanje Meta Box-a

Nakon to smo dodali novi sadraj Portfolio te povezali s njim kategorije i tagove, potrebno je
napraviti dodatna polja za unos imena klijenta i web stranice projekta. Za dodavanje meta box-a
koristi se funkcija add_meta_box ija je definicija:
1
2
add_meta_box( $id, $title, $callback, $post_type, $context,

$priority, $callback_args );
gdje:
varijabla id oznaava atribut HTML-a id koji e se dodati sekciji gdje e se prikazati meta
box
varijabla title oznaava naslov meta box-a
varijabla callback sadri naziv funkcije koja se koristi za prikaz HTML-a odnosno polja za
unos
varijabla post_type oznaava vrstu sadraja za koji e se prikazati meta box
varijabla context oznaava dio stranice gdje bi se trebao prikazati meta box, a vrijednosti
mogu biti: normal, advanced ili side
varijabla priority oznaava prioritet unutar konteksta, a moe imati za vrijednosti: high,
core, default ili low. Jednostavnim rjenikom, prioritet predstavlja nekakav nain redosljeda prikazivanja meta boxa
varijabla callback_args predstavlja polje sa argumentima koji se prosljeuju u funkciju
koja se poziva preko varijable callback. Ta funkcija uvijek e dobiti objekt $post odnosno
lanak te argumente koje prosljedimo, ako ih prosljedimo.
Varijable koje moramo prosljediti jesu id, title, callback i post_type dok ostale varijable imaju
svoje vrijednosti postavljene ukoliko ih ne prosljedimo.
Na kraju datoteke portfolio.php upiite sljedee:
http://codex.wordpress.org/Function_Reference/add_meta_box
134
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function wpb3_portfolio_metabox_html( $post ){

echo "Pozdrav iz metaboxa!";
}
function wpb3_portfolio_metabox_add(){
add_meta_box(
'portfolio-client',
__( 'Project Client', 'wpb3' ),
'wpb3_portfolio_metabox_html',
'portfolio',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'wpb3_portfolio_metabox_add' );
Funkcija wpb3_portfolio_metabox_html koristi se za izradu HTML-a metaboxa i u toj funkciji

emo stvoriti polja za unos informacija o klijentu, a funkcija wpb3_portfolio_metabox_add sadri
u sebi poziv funkcije za dodavanje meta box-a te se ta funkcija dodaje WordPress action-u add_meta_boxes. Ako sada pokuamo dodati novi projekt preko Add Portfolio moe se vidjeti dodani
metabox.
Novi metabox
Dodavanje polja za unos

Polja za unos potrebno je dodati unutar funkcije wpb3_portfolio_metabox_html pa sada postojeu funkciju zamjenite sa ovim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
135
function wpb3_portfolio_metabox_html( $post ){

// Dodaj polje nonce za provjeru pri spremanju
wp_nonce_field( 'wpb3_portfolio_metabox', 'wpb3_portfolio_metabox_nonce' );
$klijentIme = get_post_meta( $post->ID, '_wpb3_client_name', true );
$klijentWeb = get_post_meta( $post->ID, '_wpb3_client_web', true );
echo "<p><label for='wpb3_client_name'>";
_e("Client Name","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_client_name" name="wpb3_client_name"
value="' . esc_attr( $klijentIme ) . '" size="25" /></p>';
echo "<p><label for='wpb3_client_web'>";
_e("Client Web","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_client_web" name="wpb3_client_web"
value="' . esc_attr( $klijentWeb ) . '" size="25" /></p>';
}
Na poetku funkciju dodajemo nonce polje koje osigurava WordPress POST ili GET zahtjeve
odnosno bilo kakve zahtjeve tako da generira nasumini broj koji je mogu samo jednom pa se
time ne moe zloupotrijebiti forma ili nekakav querystring unutar url adrese.
Nakon toga uzimamo vrijednosti imena i weba klijenta te ih postavljamo u odgovarajue
varijable koje zatim ispisujemo i prigodnim poljima za unos, pa ako ve postoje zapisi za taj
projekt, biti e ispisani. Nakon definiranja varijabli, ispisujemo HTML elemente label i input.
Ako sada idemo spremiti projekt i unesemo u nova polja neke vrijednosti, te vrijednosti se nee
prikazati jer nisu unesene u bazu podataka.
Spremanje unesenih vrijednosti

Za spremanje vrijednosti potrebno je definirati funkciju koja e izvriti spremanje tih vrijednosti
kada se bude kliknulo na Update ili Publish gumb, a to se radi u WordPress akciji save_post.
1
2
3
4
5
6
7
8
9
function wpb3_portfolio_metabox__save( $post_id ) {

/*
* We need to verify this came from our screen and with proper authorization,
* because the save_post action can be triggered at other times.
*/
// Check if our nonce is set.
if ( ! isset( $_POST['wpb3_portfolio_metabox_nonce'] ) ) {
http://codex.wordpress.org/WordPress_Nonces
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
44
45
46
47
48
49
50
51
52
53
54
55
return;
}
// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $_POST['wpb3_portfolio_metabox_nonce'],
'wpb3_portfolio_metabox' ) ) {
return;
}
// If this is an autosave, our form has not been submitted,
//so we don't want to do anything.
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return;
}
// Check the user's permissions.
if ( isset( $_POST['post_type'] ) && 'page' == $_POST['post_type'] ) {
if ( ! current_user_can( 'edit_page', $post_id ) ) {
return;
}
} else {
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return;
}
}
/* OK, it's safe for us to save the data now. */
$klijentWeb
$klijentIme
// Sanitize
$klijentWeb
$klijentIme
= $_POST['wpb3_client_web'];
= $_POST['wpb3_client_name'];
user input.
= sanitize_text_field( $klijentWeb );
= sanitize_text_field( $klijentIme );
// Update the meta field in the database.

update_post_meta( $post_id, '_wpb3_client_name', $klijentIme );
update_post_meta( $post_id, '_wpb3_client_web', $klijentWeb );
}
add_action( 'save_post', 'wpb3_portfolio_metabox__save' );
136
137
Najprije provjeravamo da li je uope poslan wp_nonce te ukoliko nije prekidamo daljnji tijek ove
funkcije. Ako proe taj uvjet, provjerava se da li je isti wp_nonce poslan kao to je i u formi. Zatim
se provjerava da li se radi autosave na kojem ne elimo spremati podatke u nau bazu. Nakon
toga provjerava se da li trenutni korisnik moe dodavati projekte te ako to ne moe, prekida se
daljnji tijek izvoenja funkcije. Poslije toga, uzimaju se vrijednosti iz polja za unos te se spremaju
kao meta podaci lanka.
Tu funkciju, nakon definicije, zakai se funkcija za WordPress akciju save_post gdje e se
prilikom spremanja ili objavljivanja lanka odnosno projekta izvriti sve funkcije zakaene za
akciju save_post.
Dodavanje slika za projekt

Kao to je prethodno spomenuto, koristit e se dodatak Multi Image Metabox. Skinite taj dodatak
i ukljuite ga u administrativnom dijelu WordPress-a odlaskom na Plugins. Nakon aktivacije
potrebno je odrediti da se taj metabox prikazuje samo na Custom Post Type: Portfolio pa na
kraju datoteke portfolio.php dodajte sljedee:
1
2
3
4
5
add_filter('images_cpt','my_image_cpt');
function my_image_cpt(){
$cpts = array('portfolio');
return $cpts;
}
Sada je mogue dodavati 8 slika za svaki projekt. Mogue je i poveati broj slika te ako Vam treba
vei broj proitajte kako to uiniti ovdje.
Nova dimenzija slika

Prema SOLID template-u, potrebne su i nove dimenzija slike pa tako je potrebno na kraju
datoteke portfolio dodati sljedee:
1
2
3
add_image_size('slika-singleProjekt', 945, 443, true);

add_image_size('slika-thumbProjekt', 380, 285, true);
Ostale dimenzije su jednake kao i slike lanka kod obinih lanaka. Ova dimenzija koristiti e se
kod slider-a gdje se prikazuje nekoliko slika.
Custom Template: Portfolio Home

Napravite novu datoteku i nazove je template-portfolio.php te zatim u njoj postavite sljedee:
http://wordpress.org/plugins/multi-image-metabox/other_notes/#Set-concerned-post-types
138
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
44
45
46
<?php
/*
Template Name: Portfolio Home
*/
get_header();
/**
* The WordPress Query class.
* @link http://codex.wordpress.org/Function_Reference/WP_Query
*
*/
$args = array(
'post_type'
=> 'portfolio',
'post_status' => 'publish',
);
$projects = new WP_Query( $args );
?>
<div class="row">
<?php if ( $projects->have_posts() ) :
while ( $projects->have_posts() ) : $projects->the_post(); ?>
<?php
the_title();
?>

<p><?php _e('Nema projekta.'); ?></p>
<?php endif; ?>
</div>
</div>
47
139
Ovime smo stvorili novi custom template. Stvorite novu stranicu u administrativnom dijelu
WordPress-a te ju nazovite Portfolio i stavite joj template Portfolio Name. Zatim pod Appearance > Menus dodajte novu stranicu u navigaciju i spremite promjenu. Odete li sada pogledati
promjene, vidjeti ete novu stranicu u navigaciji te klikom na nju otvoriti e se stranica koja e
ispisati Nema projekta. Probajte unijeti barem jedan projekt u Portfolio pa nakon toga opet
otvorite istu stranicu. Sada ete dobiti naslov tog projekta kojeg ste unijeli.
Pretvorba SOLID Portfolia u WordPress Portfolio

Stuktura Portfolia u SOLID template-u nakon headera je ova:
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

<div class="row">
<div class="col-lg-8 col-lg-offset-2 centered">
<h2>We create awesome designs to standout your site or product.
Check some of our latest works.</h2>
<br>
</div>
</div>

<div id="portfoliowrap">
<div class="portfolio-centered">
<div class="recentitems portfolio">
<div class="portfolio-item graphic-design">
<div class="he-wrap tpl6">
<img src="assets/img/portfolio/portfolio_09.jpg" alt="">
<div class="he-view">
<div class="bg a0" data-animate="fadeIn">
<h3 class="a1" data-animate="fadeInDown">
A Graphic Design Item</h3>
<a data-rel="prettyPhoto"
href="assets/img/portfolio/portfolio_09.jpg"
class="dmbutton a2" data-animate="fadeInUp">
<i class="fa fa-search"></i></a>
<a href="single-project.html"
<i class="fa fa-link"></i></a>
</div>
33
34
35
36
37
38
39
140
</div>

</div>
</div>
...
</div>
</div>
</div>
Za poetak, krenimo samo sa uvodnim tekstom. Tekst se nalazi u elementu sa klasom .container.mtb. Taj element je inae sadravao cijeli sadraj naih stranica, ali kod ovog template-a
sadrava samo tekst stranice. Pa sada u datoteci template-portfolio, umjesto:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="row">
<?php if ( $projects->have_posts() ) : while ( $projects->have_posts() ) :
$projects->the_post(); ?>
<?php
the_title();
?>
<p><?php _e('Nema projekta.'); ?></p>
<?php endif; ?>
</div>
</div>
postavite ovo:
1
2
3
4
5
6
7
8
9
<?php if(have_posts()) : while (have_posts()): the_post(); ?>

<div class="row">
<h2><?php echo strip_tags(get_the_content()); ?></h2>
<br>
10
11
12
13
14
15
141
</div>
</div>
<?php endwhile; endif; ?>
Najprije se provjerava da li postoji ikakav sadraj na toj stranici te ako postoji, prikazujemo
njegov sadraj odnosno prikazujemo sadraj bez HTML ili PHP elemenata. To smo dobili pomou
funkcije strip_tags.
Nakon prikaza teksta kao to je napravljeno prema SOLID template-u, treba ispisati i projekte.
To inimo na sljedei nain:
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
<?php if ( $projects->have_posts() ) : ?>

<?php while ( $projects->have_posts() ) : $projects->the_post(); ?>
<?php $image = "";
if(has_post_thumbnail()): ?>
<?php
the_post_thumbnail('slika-thumbProjekt' );
$image = wp_get_attachment_image_src(
get_post_thumbnail_id() , 'large' );
?>
<?php endif; ?>
</h3>
<?php if($image != ""){ ?>
href="<?php echo $image[0]; ?>"
<?php } ?>
</div>
http://php.net/manual/en/function.strip-tags.php
32
33
34
35
36
37
38
142

</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
U gornjem kodu prvo se provjerava da li uope postoji neki projekt. Ako postoji otvaraju
se elementi sa odgovarajuim klasama sve dok ne dolazimo do elementa svakog pojeding
projekta. Nakon toga za svaki projekt koji postoji ispisujemo odgovarajui HTML te pozivamo i
odgovarajue WordPress elemeent.
Definirala se varijabla image koja e, ako postoji slika lanka, dobiti sve podatke i onda e, ako
sadri sve podatke, ispisati putanju do slike.
Trenutno se projekti prikazuju jedan ispod drugog jer nisu izvrene funkcije koje trebaju biti
izvrene za takvo slaganje projekata. Ako pogledamo izvorni kod Protfolia u SOLID teamplateu, mogue je primijetiti na kraju samog izvornog koda dodatni javascript. Otvorite datoteku
custom.js te prije
1
})(jQuery);
kopirajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var $container = $('.portfolio'),

$items = $container.find('.portfolio-item'),
portfolioLayout = 'fitRows';
if( $container.hasClass('portfolio-centered') ) {
portfolioLayout = 'masonry';
}
$container.isotope({
filter: '*',
animationEngine: 'best-available',
layoutMode: portfolioLayout,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
},
masonry: {
}
}, refreshWaypoints());
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$('nav.portfolio-filter ul a').on('click', function() {

var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector }, refreshWaypoints());
$('nav.portfolio-filter ul li').removeClass('active');
$(this).parent("li").addClass('active');
return true;
});
$container.imagesLoaded(function () {
setPortfolio();
});
$(window).on('resize', function () {
setPortfolio();
});
function getColumnNumber() {
var winWidth = jQuery(window).width(),
columnNumber = 1;
if (winWidth > 1200) {
columnNumber = 5;
} else if (winWidth > 950)
columnNumber = 4;
columnNumber = 3;
columnNumber = 2;
columnNumber = 1;
}
return columnNumber;
}
{
{
{
{
function setColumns() {
var winWidth = jQuery(window).width(),
columnNumber = getColumnNumber(),
itemWidth = Math.floor(winWidth / columnNumber);
$container.find('.portfolio-item').each(function() {
jQuery(this).css( {
width : itemWidth + 'px'
});
143
68
69
70
71
72
73
74
75
76
77
78
79
144
});
}
function setPortfolio() {
setColumns();
$container.isotope('reLayout');
}
function refreshWaypoints() {
setTimeout(function() {
}, 1000);
}
Najprije se deklarira varijabla container koja pokazuje na element .portfolio koji sadri sve
projekte u sebi. Nakon toga definiramo varijablu items i onda pokazuje na sve elemente unutar
elementa .portfloio koje sadre u sebi klasu portfolio-item. Nakon toga definira se varijabla
portfolioLayout koji se dalje koristi u jquery dodatku isotope. Ako element .portfolio sadri klasu
.portfolio-centered tada varijabla portfolioLayout dobiva novo znaenje.
Nakon toga, na element .portfolio ukljuuje se i isotope sa svojim parametrima. Zatim je
postavljena funkcija za filtriranje projekata tj. filtriranje na klik.
Funkcija getColumnNumber vraa broj koji oznauje irinu stupca. Funkcija setColumns koristi
prethodno navedenu funkciju te uz nju i irinu samo prozora preglednika, stupci projekta
odnosno svaki projekt dobije tu irinu.
Funkcija setPortfolio poziva prethodno navedenu funkciju te izvrava naredbu odnosno metodu
dodatka isotope pod nazivom reLayout. Zatim je definirana i funkcija refreshWaypoints koja
ponavlja radnju svaku sekundu. tako ponavlja radnju isotope dodatka.
Nakon toga, imamo projekte koji se prikazuju jedan uz drugog, naravno, ako ste dodali projekte.
Inae se nee nita prikazati.
Pojedini projekt
Za pojedini projekt koristiti emo datoteku iji naziv slijedi hijerarhiju WordPress-a te emo
ju nazvati single-portfolio.php gdje je portfolio naziv ili slug ovog Custom Post Type-a. Stoga,
napravite novu datoteku i kopirajte sadraj od datoteke single.php.
Prema SOLID template-u struktura pojedinog projekta, nakon headera, je sljedea:
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
44
45
46
<div class="container mt">

<div class="row">
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel">

<li data-target="#carousel-example-generic"
data-slide-to="0" class="active"></li>
data-slide-to="1"></li>
</ol>
<img src="assets/img/portfolio/single01.jpg" alt="">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div><! --/Carousel -->
</div>
<div class="col-lg-5 col-lg-offset-1">
<h4>YOUR PROJECT NAME</h4>
<p>Lorem Ipsum is simply dummy ...</p>
<h4>Our Proposal</h4>
<p>...</p>
</div>
<h4>Project Details</h4>
<p><b>Date:</b> April 18, 2014</p>
<p><b>Author:</b> Marcel Newman</p>
<p><b>Categories:</b> Illustration, Web Design, Wordpress</p>
<p><b>Tagged:</b> Flat, UI, Development</p>
145
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<p><b>Client:</b> Wonder Corp.</p>

<p><b>Website:</b> <a href="http://blacktie.co">
http://blacktie.co</a></p>
</div>
</div><! --/row -->

<h3>Related Works.</h3>
<img src="assets/img/portfolio/portfolio_09.jpg" alt="">
A Graphic Design Item</h3>
href="assets/img/portfolio/portfolio_09.jpg"
<a href="single-project.html"
</div>
</div>
...
</div>
</div>
</div>
Kopirajte ovaj dio u datoteku single.php umjesto

1
<div class="container mtb"> ... </div>
tj. izmeu i kopirajte gornju strukturu.
146
147
Slider slika
Za dodavanje slika u slider koristimo WordPress dodatak. Za poetak treba dodati nekoliko
slika projektu kojeg promatramo. Prilikom dodavanja slika treba odabrati Full Size te ukoliko ih
nemate u WordPress-u, uploadajte nove slike. U sljedeoj slici, prikazane su uploadane slike koje
se koriste i u SOLID template-u u datoteci single-project.html.
Dodane slike za slider
Nakon to su dodane slike, treba ih i prikazati. To emo uinit sa malom promjenom strukture u
datoteci single-portfolio.php i to u dijelu gdje se prikazuje slider. Najprije, poslije get_header();
?> kopirajte sljedee:
1
2
3
4
<?php
$slike = "";
if(have_posts()): while (have_posts()): the_post();
$slike = get_images_src('slika-singleProjekt',false,get_the_ID()); ?>
Ovdje smo definirali varijablu slike koju, ako imamo sadraj, a pod time se misli na lanak,
napuniti e se varijabla sa slikama koje smo dodali u WordPress administraciji. Funkcija get_image_src prima parametre: verzija slika, thumbnail (da ili ne) i ID lanka.
Nismo zatvorili granu if(have_posts() jer smo ovim provjerili da li uope postoji sadraj, a
sve ispod toga je nekako vezano uz taj sadraj pa stoga tu granu zatvaramo na kraju, taman prije
. Dodajte prije kako bi mogli polako promatrati promjene.
Zatim zamijenite:
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


data-slide-to="0" class="active"></li>
</ol>
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
sa
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
148
<?php if(!empty($slike)): ?>


<?php
$brojSlika = count($slike);
for($i = 0; $i < $brojSlika; $i++){
?>
data-slide-to="<?php echo $i; ?>"
<?php if($i == 0){ echo "class='active'"; } ?>>
</li>
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
149
<?php } ?>
</ol>

<?php $brojac = 0; foreach ($slike as $slika ) {
?>
<div class="item <?php if($brojac == 0){ echo 'active'; }?>">
<img src="<?php echo $slika[0]; ?>" alt="">
</div>
<?php
$brojac++;
} ?>
</div>
</div>
<?php endif; ?>
Na poetku provjerava se da li je varijabla slike prazna ili ipak ima neke vrijednosti u sebi. Ako
nije prazna, zapoinjemo strukturu slidera. Prvo to treba dinamiki ispisati jesu kontrole na
slideru. Najprije definiramo varijablu brojSlika koja sadri broj zapisa u varijabli slike. Koristit
emo petlju for gdje definiramo brojac pod nazivom i te dok god je i manji od vrijednosti
varijable brojSlika, petlja e se vrtiti i ponavljati kod unutar petlje. U petlji zatim ispisujemo
HTML za kontrolu tako da se ispisuje vrijednost brojaca i u HTML atributu data-slide-to te se
provjerava ako je prva kontrola odnosno varijabla i je nula, tada se ispisuje i klasa active. Krenuli
smo od nule zato to Boostrap 3 Carousel isto tako kree od nule, a ne od jedinice.
Nakon to su se napravile kontrole, potrebno je prikazati i slike. Za prikaz slika koristiti emo
petlju foreach jer se radi o varijablu koja sadri polje (array). Prije ulaska u petlju definira se
varijabla brojac koja e sluiti kao redoslijed. Zatim ulaskom u petlju, svaki zapis u varijabli slike
nazivamo varijablom slika kako bi lake pristupili podacima. Ako se radi o prvoj slici, brojac e
biti na nuli te ako je brojac nula tada se prikazuje klasa active. Varijablu slika koristimo za
pristup prvom putanji slike koja se nalazi u varijabli slika na prvom mjestu pa se pristupa sa
pozivom slika[0]. Nakon toga, prije ponavljanja ove petlje, poveavamo brojac za 1 sa brojac++
pa u sljedeem ponavljanju vie se nee dodati klasa active.
Tekst projekta
Tekst projekta e se prikazivati kao i kod obinih lanaka sa funkcijom the_content pa stoga:
1
2
3
4
5
6
7
150

<h4>YOUR PROJECT NAME</h4>
<p>Lorem Ipsum is simply dummy ...</p>
<h4>Our Proposal</h4>
<p>...</p>
</div>
zamijenite sa:
1
2
3
4
5

<h4><?php the_title() ?></h4>
</div>
Prilikom unosa, ovdje e se morati paziti da se koristi heading h4, a ne neki vei kako bi tekst
bio u skladu sa nazivom. Mogue je i maknuti dio gdje se prikazuje naslov, pa onda taj dio u
potpunosti definiramo u editoru.
Detalji projekta
Detalje projekta sadre datum objave, autora projekta, kategorije i tagove te informacije o klijentu. Sve podatke osim informacija o klijentu moemo dobiti posebnim WordPress funkcijama.
Informacije o klijentu dobiti emo WordPress funkcijama za pristup meta podacima lanka
odnosno projekta. Prije nego ponemo sa ispisivanjem detalja projekata, poeljno bi bilo ispuniti
projekt kojeg emo promatrati sa svim informacijama. Tako da dodajte neke kategorije i tagove
tom projektu kao i informacije o klijentu.
Dodane kategorije i tagovi
Nakon to smo dodali kategorije i tagove te informacije o klijentu treba zamijeniti:

1
2
3
4
5
6
7
8
9
10
11
12

<p><b>Date:</b> April 18, 2014</p>
<p><b>Author:</b> Marcel Newman</p>
<p><b>Categories:</b> Illustration, Web Design, Wordpress</p>
<p><b>Tagged:</b> Flat, UI, Development</p>
<p><b>Client:</b> Wonder Corp.</p>
<p><b>Website:</b> <a href="http://blacktie.co">
http://blacktie.co</a></p>
</div>
sa sljedeim:
151
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
44
45
46

<p><b>Date:</b> <?php the_date(); ?></p>
<p><b>Author:</b> <?php the_author(); ?></p>
<?php $categories = get_categories(array(
'taxonomy'=> 'portfolio_category')); ?>
<p><b>Categories:</b>
<?php $prvaKategorija = true;
foreach($categories as $category) {
if($prvaKategorija != true) {
echo ", ";
}
echo $category->name;
$prvaKategorija = false;
} ?>
</p>
<?php $tags = get_categories(array('taxonomy'=> 'portfolio_tag')); ?>
<p><b>Tagged:</b>
<?php $prviTag = true;
foreach($tags as $tag) {
if($prviTag != true) {
echo ", ";
}
echo $tag->name;
$prviTag = false;
} ?>
</p>
<p><b>Client:</b> <?php echo get_post_meta(get_the_ID(),'_wpb3_client_name',\
true ); ?></p>
152
47
48
49
50
51
52
53
54
55
56
57
58
59
60
153
<p><b>Website:</b>
<?php
$clientWeb = get_post_meta(get_the_ID(),'_wpb3_client_web',true );
if(strpos($clientWeb,"http://") === false &&
strpos($clientWeb,"https://") === false){
$clientWeb = "http://".$clientWeb;
}
?>
<a href="<?php echo $clientWeb; ?>">
<?php echo $clientWeb; ?></a></p>
</div>
Datum i Autora smo ispisali jednostavnim pozivom funkcija the_date i the_author. Kategorije
i tagove morali smo dohvaati bez slinih funkcija. Sa funkcijom get_category poslali smo
parametar taxonomy i dali mu vrijednost portfolio_category kako bi se vratile samo kategorije
vezane uz taj lanak i to u formatu polja (array). Koristimo portfolio_category jer ako se prisjetite
kada smo radili Custom Post Type Portfolio povezali smo ga sa tom vrstom kategorija. Nakon
toga definirali smo varijablu prvaKategorija i postavili vrijednost na true zato to ne elimo
prvoj kategorije dodati zarez ispred naziva. Zatim u petlji prolazimo kroz svaku kategoriju i
ispisujemo njezin naziv, a ako nije prva kategorija u nizu, tada ispisujemo i zarez ispred naziva
kako bi dobili neto kao Kategorija1, Kategorija2, Kategorija3 i sl.
Nakon toga imamo tagove za ispisati. Koristei istu logiku, ali samo sa drugom vrstom kategorija,
a to je portfolio_tag dobili smo listu tagova koji su postavljeni za taj projekt. Zatim dolazimo i
na informacije o klijentu. Za njih smo stvorili dva meta podataka koje smo spremili pod nazivima
_wpb3_client_name i _wpb3_client_web. Za ime klijenta ispisujemo direktno iz funkcije koja
vraa vrijednost tipa string jer smo na kraju poziva get_post_meta postavili vrijednost true. U
suprotnom bi vraao vrijednost tipa array(polje). to se tie web stranice klijenta, tu se ne ispisuje
direktno vrijednost polja ve se najprije provjerava da li negdje u toj vrijednosti ima http:// ili
https:// te u suprotnom dodaje http:// na postojeu vrijednost varijable clientWeb. Nakon toga,
ispisujemo i tu varijablu.
to ako projekt nema kategoriju, tag ili informacije o klijentu? Mala je vjerojatnost i znamo
da je to naa tema i da moramo za svaki projekt sve unijeti, ali to ako ovu temu dajemo nekome
na koritenje tko je nije radio i ne zna da je sve potrebno ispuniti?
U takvim sluajevima, potrebno je malo vie razmisliti i dodati neke provjere prije ispisivanja.
Tako kod kategorija i tagove nakon dohvaanja vrijednosti u varijable categories i tags moemo
koristiti
1
if(!empty($tags)){}
kako bi provjerili da li je varijabla prazna te ako nije, da se ispiu vrijednosti te varijable odnosno
kategorije ili tagovi. Kod informacija o klijentima jednostavno je to provjeriti ili na isti nain ili
ovako:
if(get_post_meta(get_the_ID(),'_wpb3_client_name', true ) != "") {}
odnosno kako ne bi radili vie upita za naziv klijenta moemo napraviti ovako:
1
2
$clientName = get_post_meta(get_the_ID(),'_wpb3_client_name', true );

if($clientName != ""){}
Stoga, na dio za detalje projekta moe biti i sa dodatnim provjerama:

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

<p><b>Date:</b> <?php the_date(); ?></p>
<p><b>Author:</b> <?php the_author(); ?></p>
<?php $categories = get_categories(array(
'taxonomy'=> 'portfolio_category'));
if(!empty($categories)){
?>
<p><b>Categories:</b>
<?php $prvaKategorija = true;
if($prvaKategorija != true) {
echo ", ";
}
echo $category->name;
$prvaKategorija = false;
} ?>
</p>
<?php } //Ovo ispisujemo samo ako imamo kategorije ?>
<?php $tags = get_categories(array('taxonomy'=> 'portfolio_tag'));
if(!empty($tags)){
?>
<p><b>Tagged:</b>
154
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
155
<?php $prviTag = true;

foreach($tags as $tag) {
if($prviTag != true) {
echo ", ";
}
echo $tag->name;
$prviTag = false;
} ?>
</p>
<?php } //Ovo ispisujemo samo ako imamo tagove ?>
<?php $clientName = get_post_meta(get_the_ID(),'_wpb3_client_name',true );
if($clientName != ""){ ?>
<p><b>Client:</b> <?php echo $clientName ?></p>
<?php
} //Ovo prikazujemo samo ako ima naziva klijenta ?>
<?php
if($clientWeb != "") { ?>
<p><b>Website:</b>
<?php
if(strpos($clientWeb,"http://") === false &&
strpos($clientWeb,"https://") === false){
$clientWeb = "http://".$clientWeb;
}
?>
<a href="<?php echo $clientWeb; ?>">
<?php echo $clientWeb; ?></a></p>
<?php } //Ovo prikazujemo samo ako ima web stranice ?>
</div>
Povezani projekti
Povezani projekti su projekti koji sa trenutnim projektom imaju neto zajedniko. Oni se mogu
dodati preko nekakvog meta box-a ili moemo koristiti WordPress funkcije i dobiti projekte koji
sadre neku kategorije ili tag koji sadri i trenutni projekt. Za ovakve povezane projekte koristiti
emo klasu WP_Query.
http://codex.wordpress.org/Class_Reference/WP_Query
156
Prije nego poenmo ispisivati sve povezane projekte potrebno je napraviti dobar upit u bazi kako
bi dobili to bre i bolje rezultate. Pa nakon naslova Portfolio Section moemo postaviti sljedee:
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
<?php
//definiramo polje i relaciju u SQL-u
$taxonomyProjekta = array('relation' => 'OR');
//definiramo polje za kategorije
$kategorije = array();
foreach ($categories as $category) {
//svaku kategoriju od trenutnog projekta aljemo u polje $kategorije
$kategorije[] = $category->slug;
}
//Punimo polje za pretraivanje sa svim kategorijama koje treba pretraiti
$taxonomyProjekta[] = array(
"taxonomy" => "portfolio_category",
"field" => "slug",
"operator" => "IN",
"terms" => $kategorije
);
//definiramo polje za tagove
$tagovi = array();
foreach ($tags as $tag) {
//svaki tag od trenutnog projekta aljemo u polje $tagovi
$tagovi[] = $tag->slug;
}
//Punimo polje za pretraivanje sa svim tagovima koje treba pretraiti
$taxonomyProjekta[] = array(
"taxonomy" => "portfolio_tag",
"field" => "slug",
"operator" => "IN",
"terms" => $tagovi
);
//Postavljamo sve kategorije i tagove u tax_query i ostali parametri
$args = array(
"posts_per_page" => 5,
"post_type" => "portfolio",
"post_status" => "publish",
"orderby" => "rand",
"post__not_in" => array(get_the_ID()),
"tax_query" => $taxonomyProjekta
);
44
157
$povezaniProjekti = new WP_Query( $args ); ?>
Svi parametri koji se mogu koristiti moete pronai ovdje. Najprije definiramo polje koje se
skupljati sve parametre za pretraivanje pa tako i jedno polje koje e definirati sve kategorije
koje treba pretraiti, a drugo polje koje e isto raditi ali za tagove. Zatim se definira polje za
kategorije i za svaku kategoriju koju jo imamo od prije u varijabli categories punimo polje
kategorije sa slug-om od te kategorije jer emo pretraivati prema slug-u. Kada smo proli sve
kategorije, koje su vezane uz projekt, puno polje koje skuplja sve parametre sa novim poljem
koje sadri informaciju o kojoj vrsti kategorija se radi i to se tono pretrauje.
Nakon toga, definira se polje tagovi koje e sakupljati sve tagove za pretraivanje. Istom logikom
od prije, punimo tako i polje tagovi te polje sa parametrima taxonomyProjekta.
Zatim definiramo polje args koje sadri sve parametre za dohvaanje projekta kao to je koliko
projekta elimo dobiti, koji tip lanka - to je portfolio, status lanka te jo da se dobivaju
nasuminim redoslijedom. Jedno od bitnih parametra ovdje je i post__not_in kojim definiramo
da ne elimo dobiti trenutni projekt u toj listi projekata jer to onda nije povezani projekt ve je
to isti projekt. Na kraju parametara postavljamo i polje koje smo napravili za pretraivanje po
tagovima i kategorijama.
Zatim to prosljedimo u funkciju get_posts i sa dobivenim vrijednostima napunimo varijablu
povezaniProjekti. Sada to moemo koristiti kao kada ispisujemo bilo kakve informacije o obinim
lancima. Stoga cijeli sadraj izmeu i sa:
1
<div id="portfoliowrap"> ... </div>
zamijenite sa ovime:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php if($povezaniProjekti->have_posts()): ?>

<h3>Related Works.</h3>
<?php while ($povezaniProjekti->have_posts()) :
$povezaniProjekti->the_post(); ?>

<?php $image = "";
<?php
$image = wp_get_attachment_image_src( get_post_thumbnail_id() ,
'large' );
http://codex.wordpress.org/Class_Reference/WP_Query#Parameters
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
158
?>
<?php endif; ?>
<?php the_title(); ?></h3>
<?php if($image != ""){ ?>
<?php } ?>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
Dakle, najprije provjeramo da li postoji bilo kakav lanak odnosno povezani projekt. Ako ima,
tada se nastavlja ispis strukturu te zatim za svaki povezani projekt ispisuje se .portfolio-item.
Nakon toga provjerava se i da li postoji kakva slika projekta te ako postoji, ispisuje se u
verziji slike slika-thumbProjekt. Nadalje, ispisuje se naslov projekta, dodaje se, ako postoji slika,
poveznica na poveanu sliku te poveznica na stranicu projekta.
Responzivne slike
Potrebno je ispraviti slider projekta te omoguiti responzivne slike. Iako sada izgleda kao
da su slike responzivne to zapravo nije tono. to se tie prikazivanja na pregledniku, one
jesu responzivne, ali to se tie performansi pri uitavanju sa mobitela ili tableta, one nisu
responzivne. Zbog toga moramo napraviti neto slino kao to smo napravili za slike lanka.
U ovom sluaju, za prikazivanje slika, ne koristimo pridruenu sliku lanku (thumbnail) ve
koristimo posebne slike koje se dodaju u metabox. Stoga, jedino to imamo od slike je putanja
do slike. Kako bi dobili ID te slike, koji moramo imati kako bi dobili sve ostale verzije te slike,
potrebno je imati funkciju koja preko putanje dolazi do ID-a slike. Philipg Newcomer je napisao
dobru funkciju koja upravo radi to to nam je potrebno. Dakle, ovo je openita funkcija koja se
moe koristiti i za druge slike, pa je kopirajte na kraju datoteke functions.php:
http://philipnewcomer.net/2012/11/get-the-attachment-id-from-an-image-url-in-wordpress/
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
159
function wpb3_get_id_from_image_url($attachment_url = ''){

global $wpdb;
$attachment_id = false;
// If there is no url, return.
if ( '' == $attachment_url )
return;
// Get the upload directory paths
$upload_dir_paths = wp_upload_dir();
// Make sure the upload path base directory exists in the attachment URL,
// to verify that we're working with a media library image
if ( false !== strpos( $attachment_url, $upload_dir_paths['baseurl'] ) ) {
// If this is the
// get the URL of
$attachment_url =
$attachment_url
URL of an auto-generated thumbnail,

the original image
preg_replace( '/-\d+x\d+(?=\.(jpg|jpeg|png|gif)$)/i', '',
);
// Remove the upload path base directory from the attachment URL
$attachment_url = str_replace( $upload_dir_paths['baseurl'] . '/', '',
$attachment_url );
// Finally, run a custom database query to get the attachment ID
// from the modified attachment URL
$attachment_id = $wpdb->get_var( $wpdb->prepare( "SELECT wposts.ID FROM
$wpdb->posts wposts, $wpdb->postmeta wpostmeta WHERE
wposts.ID = wpostmeta.post_id AND
wpostmeta.meta_key = '_wp_attached_file'
AND wpostmeta.meta_value = '%s' AND wposts.post_type = 'attachment'",
$attachment_url ) );
}
return $attachment_id;
}
U gornjoj funkciji prvo se provjerava da li uope imamo putanju do slike od koje trebamo dobiti
ID. Ako je nema, izlazi se iz funkcije, dok u suprotnom se nastavlja izvravati. Nakon toga
postavlja se varijabla koja sadri putanju do foldera u koji se uploadaju slike. Ako putanja do
slike i folder gdje se uploadaju slike sadre iste vrijednosti odnosno putanju do foldera, tada
se nastavlja izvravanje funkcije. Nakon toga, iz dobivene putanje slike, miu se svi generirani
nazivi od WordPress-a kako bi se dobila izvorna slika koja se uploadala. Nakon toga, preko
putanje izvorne slike, dobiva se ID slike.
Kada se napravila funkcija koja moe preko putanje od slike doi do pravog ID slike, potrebno je
160
napraviti funkciju koja e se izvravati kako bi stvarala potrebne HTML atribute za BttrLazyLoading dodatak od jQuery-a koji smo koristili i pri izradi responzivnih slika lanaka.
To moete isto tako kopirati na kraju datoteke functions.php jer se direktno odnosi na trenutnu
temu (zbog toga to koristimo verzije slika koje su usko povezane sa ovom temom, dok u drugim
temama moda te verzije slika ne budu postojale).
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
function wpb3_generate_portfolio_pictures($image_url){
$attID = wpb3_get_id_from_image_url($image_url);
$img= '<img class="bttrLazyLoading img-responsive"
alt="'.get_the_title().'" ';
if(!$attID) return;
if(empty($attID)) return;
$sizeBttr = "";
$width = "";
$height = "";
$sizes= array( 'slika-singleProjekt', 'slika-clanka-sm', 'slika-clanka-xs' );
foreach ( $sizes as $size ) {
$url = wp_get_attachment_image_src( $attID, $size );
switch($size){
case "slika-singleProjekt":
$sizeBttr = "lg";
$width = "945";
$height= "443";
$img .= " data-bttrlazyloading-md-src='". $url[0] ."' ";
$img .= " data-bttrlazyloading-md-width='". $width ."' ";
$img .= " data-bttrlazyloading-md-height='". $height ."' ";
break;
case "slika-clanka-sm":
$sizeBttr = "sm";
$width = "720";
$height= "339";
break;
default:
$sizeBttr = "xs";
$width = "709";
$height= "334";
break;
}
$img .= " data-bttrlazyloading-".$sizeBttr."-src='". $url[0] ."' ";
$img .= " data-bttrlazyloading-".$sizeBttr."-width='". $width ."' ";
41
42
43
44
45
46
47
48
49
50
51
161
$img .= " data-bttrlazyloading-".$sizeBttr."-height='". $height ."' ";
}
$img .= " />";
return $img;
}
U ovoj funkciji, najprije pozivamo prethodno napravljenu funkciju kako bi dobili ID slike preko
dane putanje slike. Zatim provjeravamo da li je varijabla sa ID-em slike prazna te ako je,
staje se sa daljnjim izvoenjem funkcije. U suprotnom, definiraju se dodatne varijable koje se
koriste i u funkciji za doraivanje ispisa thumbnaila. Ovdje imamo jednu verziju slike manje
jer su dimenzije slike do irine tableta jednake. Zatim za svaku verziju slika dobivamo polje sa
informacijama o slici. Tako ovdje, punimo definirane varijable sa vrijednostima s obzirom na
verziju slike. Ako je verzija slike ona koja se pojavljuje iznad 992px, tada tu dodatno punimo
varijablu koja sadri HTML kod za sliku. Zatim nakon to su varijable napunjene, definira se
dodatno HTML element img. Na kraju se zatvara element img i vraa iz funkcije.
Kako bi ovo moglo izvravati svoju namjenu, potrebno je otvoriti datoteku single-portfolio.php
te zamijeniti:
1
2
3

<img src="<?php echo $slika[0]; ?>" alt="">
</div>
sa sljedeim:
1
2
3

<?php echo wpb3_generate_portfolio_pictures($slika[0]); ?>
</div>
Na ovaj nain napravili smo responzivne slike za slider projekta.
Filtriranje projekta
Koristei isotope.js moemo jednostavno filtrirati. Funkciju za filtriranje, koja je napisana u
javascripti, ve imamo u datoteci custom.js.
1
2
3
4
5
6
7
162
$('nav.portfolio-filter ul a').on('click', function() {

var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector }, refreshWaypoints());
$('nav.portfolio-filter ul li').removeClass('active');
$(this).parent("li").addClass('active');
return false;
});
Ovdje izvravamo sve unutar function() kada se klikne na element a unutar elementa li.
Nakon klika, uzima se sadraj data-filter, zatim preko selectora ponovno pozovemo isotope
te proslijedimo novi filter. Zatim se svima brie klasa active te se dodaje trenutno kliknutom
elementu li.
Kako bi se ova naredba mogla koristiti kako treba, potrebno je malo promijeniti datoteku
template-portfolio.php kako bi prikazali sve registrirane kategorije i tagove te je potrebno
dodati odgovarajue kategorije i tagove unutar portfolio projekta. Unutar datoteke templateportfolio.php zamijenite:
1
2
3
4
5
6
7
8
9
10
11
12

<div class="row">
<br>
</div>
</div>
sa:
1
2
3
4
5
6
7
8
9
10
11
12
13

<div class="row">
<br>
</div>
<?php
$taxonomies=get_terms(array('portfolio_category','portfolio_tag'));
?>
14
15
16
17
18
19
20
21
22
23
24
25
26
27
163
<nav class="portfolio-filter centered col-lg-8 col-lg-offset-2">

<ul class="nav nav-pills">
<li class="active"><a data-filter="*"> All </a></li>
<?php
foreach ($taxonomies as $taxonomy ) {
echo '<li><a data-filter=".'. $taxonomy->slug. '">'.
$taxonomy->name. '</a></li>';
}
?>
</ul>
</nav>
</div>
U varijabli taxonomies zapisujemo sve kategorije i tagove vezane uz portfolio post_type. Zatim
koristei klase i elemente koje smo vidjeli u funkciji za filtriranje te uz dodatne klase koje
odgovaraju pozicioniranju teksta te stranice kao to su col-lg-8 col-lg-offset-2. Nakon toga
koristimo i Bootstrap 3 nav elemente kao to su nav nav-pills. Nakon toga, kao prvu kategoriju
dodajemo All sa filterom * to znai da se prikazuju sve. Zatim za svaki zapis u varijabli
taxonomies prikazujemo kategoriju ili tag sa svojim nazivom i slug-om. Slug je ono pomou
ega e se filtrirati projekti.
Kada smo sredili prikaz svih kategorije i tagova, potrebno je dodati i odgovarajue kategorije i
tagove projektima. Zamijenite:
1
2
3
4
5

sa:
1
2
3
4
5
6
7
8
9
10

<?php $categories = wp_get_object_terms(get_the_ID(), 'portfolio_category');
$tags = wp_get_object_terms(get_the_ID(), 'portfolio_tag');
$categories = array_merge($categories,$tags );
$kategorije = "";
$kategorije .= " ".$category->slug." ";
http://getbootstrap.com/components/#nav-pills
164
11
12
13
14
}
?>
<div class="portfolio-item <?php echo $kategorije; ?>">
Ovdje smo varijablu categories napunili sa svim kategorijama koje su dodane tom projektu.
Nakon toga varijabli tags jednako tako smo napravili i za tagove koji su dodani tom projektu.
Zatim smo u varijablu categories dodali i sve elemente iz polja tags. Nakon toga, varijablu
kategorije punimo tako da za svaki zapis dodajemo taj slug od kategorije ili tag-a. Kada se
varijabla kategorije napunila svim kategorijama i tagovima, ispisujemo ih kao klase.
Filteri za projekte
Ako se pogleda izvorni kod projekta koji su ovdje prikazani vidjeti emo da u sebi kao klase
imaju sve njihove kategorije i tagove.
Svaki projekt ima svoje kategorije i tagove
Napredna izrada WordPress teme:

Business
Business tema sadravati e prethodno iskodiranu temu sa dodatnim template-ima koji se mogu
vidjeti na SOLID template-u gdje template index.html ima jedan izgled, about.html drugi dok
contact.html ima pak trei izgled. Te datoteke napraviti emo u ovome poglavlju preko Custom
Template-a.
Ovakva Business tema moe se shvatiti kao tema za tvrtku koja se npr. bavi grafikim dizajnom
te joj portfolio slui kako bi prikazali sve svoje projekte, blog im slui kako bi mogli pisati o
neemu to ih zanima pa moda i nekakav tutorijal, a time si poboljavaju SEO, a na kraju
svega, tu je i ostalio dio kao to su stranice Home, About i Contact. Takve stranice su jedne od
najosnovnijih stranice neke tvrtke.
Plan izrade
Najprije emo izraditi poetnu stranicu odnosno Home. Ta stranica na poetku ima par reenica
uvodnog teksta te sliku. To moemo napraviti tako da prikaemo tekst kao the_content od te
stranice, a slika da bude obian thumbnail odnosno slika lanka tj. stranice. Zatim imamo tri
feature-a za koje emo napraviti dodatne post type-ove kako bi jednostavno mogli prikazati
vie o svakom feature-u. Nakon toga prikazujemo posljednje projekte koje emo jednostavno
dohvatiti sa WP_Query ili get_posts. Nadalje, imamo kratak podatak o tvrtki te zadnje lanke sa
bloga i FAQ (esto postavljenja pitanja). FAQ e ovdje biti jednako tako jedan dodatni Custom
Post Type. Nakon toga imamo jedan tzv. testimonial koji jednako tako moe biti Custom Post
Type ili dodatna tablica u bazi podataka koja e sadravati razne testimonial-e. Zatim imamo
klijente za koje se samo prikazuje slika. To isto tako moemo napraviti sa dodatnom tablicom ili
opet Custom Post Type-om.
Nakon toga trebati e napraviti stranicu About. Ta stranica imati e podatke o tvrtci i sliku to
se moe jednostavno napraviti putem the_content i the_thumbnail. Nakon kratke informacije o
tvrtci, prikazuju se podaci o timu ljudi koji rade u tvrtci, oni jednako tako mogu biti Custom Post
Type te se nakon toga pojavljuju ponovno klijenti i testimonial.
Na kraju dolazi i stranica Contact koja u sebi sadri jednu sliku, formu za kontakt te mali sidebar
koji sadri informacije o adresi tvrtke i sl.
Poetna stranica: Home

Za poetnu stranicu WordPress omoguuje koritenje specifinog naziva template-a. Stoga,
stvorite novu datoteku template-home.php i kopirajte cijeli sadraj datoteke index.php kako bi
dobili nekakvu poetnu strukturu.
Poetna stranica ne sadri klasini tekst na plavoj pozadini ve ima svoju plavu pozadinu i tekst
pa stoga treba malo promijeniti datoteku header.php pa zamijenite:
Napredna izrada WordPress teme: Business
1
2
3
4
5
6
7
8
9
166
<div id="blue">
<div class="row">
</div>
</div>
sa:
1
2
3
4
5
6
7
8
9
10
11
<?php if(!is_home()): ?>

<div id="blue">
<div class="row">
</div>
</div>
<?php endif; ?>
Ovime smo postigli to da se prikazuje plava pozadina sa tekstom samo ako nije poetna stranica.
Zatim otvorite datoteku template-home.php te nakon get_header() kopirajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="headerwrap">
<div class="row">
<h3>Show your work with this beautiful theme</h3>
<h1>Eyecatching Bootstrap 3 Theme.</h1>
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting indu\
stry.</h5>
<h5>More Lorem Ipsum added here too.</h5>
</div>
<div class="col-lg-8 col-lg-offset-2 himg">
<img class="img-responsive" src="assets/img/browser.png">
</div>
</div>
</div>
Ostalo sve do get_footer obriite tako da Vam ostane sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="row">
<h3>Show your work with this beautiful theme</h3>
<h1>Eyecatching Bootstrap 3 Theme.</h1>
<h5>Lorem Ipsum is simply dummy text of the printing and typesetting indu\
stry.</h5>
<h5>More Lorem Ipsum added here too.</h5>
</div>
<img class="img-responsive" src="assets/img/browser.png">
</div>
</div>
</div>
Sada zamjenite sve to zajedno sa sljedeim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
/**
* Template Name: Home Page
*/
get_header(); ?>
<div class="row">
<?php if(have_posts()): while(have_posts()): the_post(); ?>
<?php the_content() ?>
</div>
<?php if(has_post_thumbnail( )):
the_post_thumbnail();
endif;
?>
</div>
</div>
</div>
167
24
25
168
Sada kako ovaj kod koristi glavni WP Loop, a u postavkama je namjeteno da se gledaju lanci,
prikazuju se lanci na poetnoj. Kako bi to maknuli, moramo napraviti stranicu pod nazivom
Home, dodati sadraj te postaviti da koristi Home Page template. Zatim je potrebno otii pod
Settings > Reading te namjestiti da se kao poetna koristi statina stranica i to Home stranica.
Postavljanje poetne stranice
Da bi mogli prikazivati lanke kao i prije stvaranja template-home.php, potrebno je stvoriti

stranicu koja e ih prikazivati npr. Blog,zatim dodati tu stranicu u izbornik te pod Settings >
Reading postaviti kao Posts Page:
Postavljanje stranice za lanke
Kako sada prikazujemo Poetnu stranicu, koja se ispituje sa funkcijom is_front_page, prikazati e
se i dalje plava pozadina sa tekstom iznad. Da to izbjegnemo treba doraditi datoteku header.php
tako da dodajemo jo jednu usporedbu.
169
<?php if(!is_home() && !is_front_page()): ?>
Sa ovime ispituje se i zatim se, ako nije poetna stranica, prikazuje naslov na plavoj pozadini. U
suprotnom, prikazuje se tekst i slika na velikoj plavoj pozadini.
Poetna stranica
Feature dio
Za pravljenje feature dijela treba pogledati to treba sve imati. Feature dio ima sliku koja je
zapravo icon font sa fontawesome.io. Zatim imamo kratki naziv feature-a te tekst i poveznicu za
otii na posebnu stranicu tog feature-a kako bi se vie proitalo o tome. Ako bi napravili Custom
Post Type dobili bi jednostavnu mogunost prikazivanja svakog pojedinog feature-a. Nadalje,
imali bi mogunost postavljanja i slike umjesto icon font-a ako tako odredimo, a za icon-font
napisali bi klasu koju elimo koristiti. Nakon toga, treba postojati i opcija da li se prikazuje na
web-u ili ne, te po kojem redoslijedu.
Napravite novu datoteku features.php, spremite je u folder wpb3/inc te pozovite tu datoteku
na poetku datoteke functions.php gdje se i druge datoteke pozivaju. Zatim kopirajte sljedee u
datoteku features.php:
http://fontawesome.io
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
44
45
46
<?php
/* CPT: Features */
// Register Custom Post Type

function wpb3_features() {
$labels = array(
'name'
=> _x( 'Features', 'Post Type General Name', 'wpb3' \
),
'singular_name'
=> _x( 'Feature', 'Post Type Singular Name', 'wpb3' \
),
'menu_name'
=> __( 'Feature', 'wpb3' ),
'parent_item_colon'
=> __( 'Parent Feature:', 'wpb3' ),
'all_items'
=> __( 'All Features', 'wpb3' ),
'view_item'
=> __( 'View Feature', 'wpb3' ),
'add_new_item'
=> __( 'Add New Feature', 'wpb3' ),
'add_new'
=> __( 'Add Feature', 'wpb3' ),
'edit_item'
=> __( 'Edit Feature', 'wpb3' ),
'update_item'
=> __( 'Update Feature', 'wpb3' ),
'search_items'
=> __( 'Search Feature', 'wpb3' ),
'not_found'
=> __( 'Not found', 'wpb3' ),
'not_found_in_trash' => __( 'Not found in Trash', 'wpb3' ),
);
$args = array(
'label'
=> __( 'feature', 'wpb3' ),
'description'
=> __( 'Feature Post Type', 'wpb3' ),
'labels'
=> $labels,
'supports'
=> array( 'title', 'editor', 'author', 'thumbnail', ),
'hierarchical'
=> false,
'public'
=> true,
'show_ui'
=> true,
'show_in_menu'
=> true,
'show_in_nav_menus'
=> true,
'show_in_admin_bar'
=> true,
'menu_position'
=> 5,
'can_export'
=> true,
'has_archive'
=> true,
'capability_type'
=> 'post',
);
register_post_type( 'feature', $args );
}
170
47
48
171

add_action( 'init', 'wpb3_features', 0 );
Time smo stvorili novi Custom Post Type: Feature. Feature-i ne trebaju nikakve kategorije ili
tagove tako da taj dio nije potrebno definirati. Jedino to treba definirati je jedan metabox koji
e sadravati polja za unos podataka o prikazivanju i redoslijedu.
Dodavanje Metaboxa i polja za unos
Na kraju datoteke features.php unesite sljedee:
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
function wpb3_feature_metabox_html( $post ){

wp_nonce_field( 'wpb3_feature_metabox', 'wpb3_feature_metabox_nonce' );
$featureOrder = get_post_meta( $post->ID, '_wpb3_feature_order', true );
$featureShow = get_post_meta( $post->ID, '_wpb3_feature_show', true );
$featureIcon = get_post_meta( $post->ID, '_wpb3_feature_icon', true );
echo "<p><label for='wpb3_feature_icon'>";
_e("Feature Icon","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_feature_icon" name="wpb3_feature_icon"
value="' . esc_attr( $featureIcon ) . '" size="25" /></p>';
echo "<p><label for='wpb3_feature_order'>";
_e("Order on Web","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_feature_order" name="wpb3_feature_order"
value="' . esc_attr( $featureOrder ) . '" size="25" /></p>';
echo "<p><label for='wpb3_feature_show'>";
_e("Show on Web","wpb3");
echo ":</label>";
echo ' <input type="radio" id="wpb3_feature_show" name="wpb3_feature_show"
value="No" '.checked("No",$featureShow,false).' />No';
echo ' <input type="radio" id="wpb3_feature_show" name="wpb3_feature_show"
value="Yes" '.checked("Yes",$featureShow,false).' '.
checked("",$featureShow,false).'/>Yes</p>';
}
function wpb3_feature_metabox_add(){
add_meta_box(
'feature',
__( 'Additional Feature options', 'wpb3' ),
'wpb3_feature_metabox_html',
36
37
38
39
40
41
42
172
'feature',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'wpb3_feature_metabox_add' );
Prvom funkcijom definiramo polja za unos gdje uzimamo vrijednosti iz baze podataka i zatim
ih postavljamo u polja kao poetne vrijednosti. Ukoliko ih nema, poetne vrijednosti biti e
prazne. Kod radio inputa gdje biramo da li e se prikazati na stranici ili ne, koristimo jo dodatnu
WordPress funkciju checked gdje se usporeuju eljena i trenutna vrijednost, te ako su oboje
iste, postavlja se checked=checked za taj radio input. Kod vrijednosti Yes koristimo dva poziva
checked funkcije kako bi, ako nemamo nikakvu vrijednost, postavili odmah na vrijednost Yes pod
pretpostavkom da se stvara novi feature kako bi se prikazao na web stranici.
U drugoj funkciji stvaramo metabox i postavljamo funkciju unutar akcije add_meta_boxes tako
da kada se ta akcija bude izvrala, pozvati e se ova funkcija i izvriti te tako i stvoriti metabox
za feature.
Spremanje Metaboxa
Spremanje podataka iz metaboxa vri se kada se sam lanak odnosno, u ovom sluaju, feature
sprema ili aurira. Na kraju datoteke features.php kopirajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function wpb3_feature_metabox__save( $post_id ) {

/*
*/
if ( ! isset( $_POST['wpb3_feature_metabox_nonce'] ) ) {
return;
}
if ( ! wp_verify_nonce( $_POST['wpb3_feature_metabox_nonce'],
'wpb3_feature_metabox' ) ) {
return;
}
// If this is an autosave, our form has not been submitted, so we
// don't want to do anything.
http://codex.wordpress.org/Function_Reference/checked
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
173

return;
}
return;
}
} else {
return;
}
}
$featureOrder = $_POST['wpb3_feature_order'];
$featureShow = $_POST['wpb3_feature_show'];
$featureIcon = $_POST['wpb3_feature_icon'];
// Sanitize user input.

$featureOrder = sanitize_text_field( $featureOrder );
$featureShow = sanitize_text_field( $featureShow );
$featureIcon = sanitize_text_field( $featureIcon );
// Update the meta field in

update_post_meta( $post_id,
the database.
'_wpb3_feature_order', $featureOrder );
'_wpb3_feature_show', $featureShow );
'_wpb3_feature_icon', $featureIcon );
}
add_action( 'save_post', 'wpb3_feature_metabox__save' );
U gornjoj funkciji najprije provjeravamo nonce vrijednost koje generira WordPress, zatim
preskaemo daljnju izvedbu funkcije ako se radi autosave, a kasnije se provjeravaju i doputenja
korisnika. Nakon to su sve provjere prole, uzimamo poslane vrijednosti i zapisujemo ih u bazu
nakon to su provjerene sa sanitize_text_field.
Sada dodajte tri feature-a sa ikonama: fa-heart-o, fa-flask i fa-trophy.
174
Ispis feature-a
HTML od SOLID template-a za feature dio jeste:
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
<div id="service">
<div class="row centered">
<i class="fa fa-heart-o"></i>
<h4>Handsomely Crafted</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting...</p>
<p><br><a href="#" class="btn btn-theme">More Info</a></p>
</div>
<i class="fa fa-flask"></i>
<h4>Retina Ready</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</\
p>
</div>
<i class="fa fa-trophy"></i>
<h4>Quality Theme</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting ...</\
p>
</div>
</div>
</div>
</div>
i taj dio postavite nakon

1
<div id="headerwrap"> ... </div>
Kako bi prikazali feature na pravi nain morat emo koristiti WP_Query sa raznim parametrima.
U sljedeem dijelu treba zamijeniti postojei HTML
1
<div id="service"> ... </div>
sa sljedeim kodom:
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
44
45
46
<?php
/**
*
*/
$args = array(
//Choose ^ 'any' or from below, since 'any' cannot be in an array
'post_type' => array(
'feature'
),
'post_status' => array(
'publish'
),
//Order & Orderby Parameters
'order'
=> 'ASC',
'orderby'
=> 'meta_value_num',
//Pagination Parameters
'posts_per_page'
=> -1,
//Custom Field Parameters
'meta_key'
=> '_wpb3_feature_order',
'meta_query'
=> array(
array(
'key' => '_wpb3_feature_show',
'value' => 'Yes',
'type' => 'CHAR',
'compare' => '='
)
)
);
$services = new WP_Query( $args );
if($services->have_posts()):
?>
<div id="service">
<?php while($services->have_posts()): $services->the_post(); ?>
<?php $featureIcon = get_post_meta( get_the_ID(), '_wpb3_feature_icon',
true ); ?>
<?php if($featureIcon != null && $featureIcon != ""): ?>
<i class="fa <?php echo $featureIcon; ?>"></i>
<?php endif; ?>
<h4><?php the_title(); ?></h4>
<?php the_content(''); ?>
175
47
48
49
50
51
52
53
54
55
56
176
<p><br><a href="<?php the_permalink(); ?>" class="btn btn-theme">

<?php _e("More Info","wpb3"); ?></a></p>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
Najprije smo definirali varijablu args u kojoj postavljamo sve parametre za WP_Query. Parametri
koje smo postavili jesu takvi da gledaju samo post_type=feature, da nam daje sve feature koji su
objavljeni (posts_per_page i post_status), da ih poreda po redoslijedu od prvog prema zadnjem
(order, orderby i meta_key) i to tako da gleda na vrijednosti kao brojeve kako bi se svi poredali po
tonom redoslijedu i zatim provjeravamo i da je njegov meta podatak za prikazivanje na webu
postavljen na Yes.
Sve te parametre aljemo u WP_Query i zatim provjeravamo da li postoje koji feature-i koji
zadovoljavaju te parametre. Ako postoje koji, ispisujemo HTML strukturu i za svaki pojedini
feature provjeravamo da li je unijeta klasa za ikonu, a nakon toga ispisujemo naziv feature-a i
sadraj te nakon toga i poveznicu na cijeli sadraj feature-a.
Ispis posljednjih projekta

Za ispis posljednjih projekta moemo koristiti isti nain ispisivanja projekta kao u datoteci
template-portfolio.php. Nakon ispisivanja feature-a odnosno prije :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
$projectArgs = array(
'post_type'
=> 'portfolio',
'posts_per_page' => 10
);
$projects = new WP_Query( $projectArgs );
?>
<?php if ( $projects->have_posts() ) : ?>
<h3>LATEST WORK</h3>
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
44
45
46
47
48
49
50
51
52
53
177

<div class="portfolio-item">
<?php $image = "";
<?php
$image = wp_get_attachment_image_src(
get_post_thumbnail_id() , 'large' );
?>
<?php endif; ?>
</h3>
<?php if($image != ""){ ?>
<?php } ?>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
<?php endif; ?>
Kao parametre za pozivanje projekta, postavljamo da je post_type = portfolio, da su objavljeni

projekti te da ih dobijemo najvie 10. Zatim to prosljedimo u WP_Query i dobijemo sve one
zapise tj. projekte koji zadovoljavaju prosljeene parametre. Nakon toga ispisujemo ih po istoj
logici te na isti nain kao to smo to ispisivali u datoteci template-portfolio.php.
178
O agenciji, FAQ i posljednji lanci
O agenciji, FAQ i posljednji lanci
Prije poeta izrade ovog dijela treba ga malo pogledati i vidjeti slinosti. Prvo to treba primijetiti
je nain na koji se sadraj ispisuje. Prvi sadraj je mali tekst sa poveznicom na cjelokupni tekst,
dok su ostala dva liste sadraja. Drugi i trei sadraj odnosno FAQ i posljednji lanci bi zapravo
mogli koristiti jednaki widget koji bi prikazivao posljednje lanke iz dva razliita post_type-a od
kojih jedan ve imamo, dok drugi treba napraviti (FAQ). Ako se ti sadraji mogu prikazati preko
widgeta, mogao bi se onda i prvi sadraj koji bi prikazao kratak tekst jedne stranice kao npr.
stranica About koja e nam kasnije posluiti za drugi dio ovog poglavlja.
Kako bi mogli dalje krenuti, potrebni je registrirati nova tri prostora za postavljanje widgeta u
vertikalnom rasporedu, pa time omoguujemo i dodavanje dodatnih widgeta.
Registracija novih prostora za widgete
Otvorite datoteku functions.php i kopirajte sljedee na kraju datoteke:
1
2
3
4
5
6
7
8
9
10
11
12
register_sidebar( array(
'name'
=> __("Middle Lijevo"),
'id'
=> "middle-left",
'description'
=> '',
'class'
=> '',
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h4>',
'after_title'
=> '</h4><div class="hline"></div>' ) );
'name'
=> __("Middle Sredina"),
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
'id'
'description'
'class'
'before_widget'
'after_widget'
'before_title'
'after_title'
=>
=>
=>
=>
=>
=>
=>
179
"middle-mid",
'',
'',
'',
'',
'<h4>',
'</h4><div class="hline"></div>' ) );
'name'
=> __("Middle Desno"),
'id'
=> "middle-right",
'description'
=> '',
'class'
=> '',
'after_widget' => '',
'after_title'
=> '</h4><div class="hline"></div>' ) );
Na ovaj nain, registrirali smo 3 sidebar-a odnosno prostora za widgete.

Postavljanje HTML-a i pozivanje prostora za widgete
Prije nego ponemo izraivati widgete i dodjeljivati ih novim prostorima za widgete, potrebno
je napraviti HTML strukturu i pozvati te prostore. Ako uzmemo HTML strukturu tog dijela iz
SOLID template-a u datoteci index.html dobiti emo sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<div class="row">
<h4>More About Our Agency.</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting indust\
ry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but
also the leap into electronic typesetting, remaining essentially unchange\
d.
</p>
<p><br/><a href="about.html" class="btn btn-theme">More Info</a></p>
</div>
<h4>Frequently Asked</h4>
<p><a href="#">How cool is this theme?</a></p>
<p><a href="#">Need a nice good-looking site?</a></p>
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
180
<p><a href="#">Is this theme retina ready?</a></p>

<p><a href="#">Which version of Font Awesome uses?</a></p>
<p><a href="#">Free support is integrated?</a></p>
</div>
<h4>Latest Posts</h4>
<p><a href="single-post.html">Our new site is live now.</a></p>
<p><a href="single-post.html">Retina ready is not an option.</a></p>
<p><a href="single-post.html">Bootstrap 3 framework is the best.</a></p>
<p><a href="single-post.html">You need this theme, buy it now.</a></p>
<p><a href="single-post.html">This theme is what you need.</a></p>
</div>
</div><! --/row -->
Kopirajte taj dio koda u datoteku template-home.php i to prije . Nakon toga, potrebno je pozvati
prostore za prikaz widget-a. Sada gore prikazani kod odnosno struktura treba poprimiti sljedei
oblik kako bi imala prostor za prikazivanje widgeta:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="row">
<?php if ( is_active_sidebar( "middle-left" ) ){
dynamic_sidebar("middle-left" );
}?>
</div>
<?php if ( is_active_sidebar( "middle-mid" ) ){
dynamic_sidebar("middle-mid" );
}?>
</div>
<?php if ( is_active_sidebar( "middle-right" ) ){
dynamic_sidebar("middle-right" );
}?>
</div>
24
25
181
</div><! --/row -->

Widget za prikaz jedne stranice

Za prikaz jedne stranice potreban e nam biti widget koji e, u administrativnom dijelu, dati
odabir stranice koju elimo prikazati. Na ispisu widget-a, ispisati e se naslov i tekst s kojim e
doi i poveznica na cjelokupni sadraj ako ga ima previe.
Stvorite novu datoteku sa nazivom widget-page.php u folderu wpb3/inc te je pozovite u datoteci
functions.php:
1
require_once 'inc/widget-page.php';
Nakon toga kopirajte sljedei kod unutar novostvorene 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
<?php
/**
* One Page Widget
*
* Theme: WPB3
*
* @since 2.8.0
*/
class WPB3_Widget_One_Page extends WP_Widget {
'classname' => 'widget_onePage',
'description' => __( "List a Page in WPB3", 'wpb3' ) );
parent::__construct('wpb3_onePage', __('WPB3 One Page','wpb3'),
$widget_ops);
}
extract( $args );
$currentPage = new WP_Query( 'page_id='.$instance["page"]);
// The Loop
if ( $currentPage->have_posts() ) {
while($currentPage->have_posts()): $currentPage->the_post();
echo "<h4>"; the_title(); echo "</h4>";
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
// Fetch post content

$content = get_post_field( 'post_content', get_the_ID() );
// Get content parts
$content_parts = get_extended( $content );
// Output part before  tag
echo $content_parts['main'];
if($content_parts['extended'] != ""){
echo '<p><br><a class="btn btn-theme" href="'.get_the_permalink().'">
More Info</a></p>';
}
endwhile;
echo $after_widget;
}
wp_reset_postdata();
}
$instance['page'] = !empty($new_instance['page']) ?
$new_instance['page'] : 0;
return $instance;
}
//Defaults
$instance = wp_parse_args( (array) $instance, array( 'page' => 0) );
$currentPage = esc_attr( $instance['page'] );
$getAllPages = get_posts(array('posts_per_page' => -1, 'post_type' => 'page\
'));
?>
<p>
<label for="<?php echo $this->get_field_id('page'); ?>">
<?php _e( 'Page:' ); ?></label>
<select class="widefat" id="<?php echo $this->get_field_id('page'); ?>"
name="<?php echo $this->get_field_name('page'); ?>">
<option value="0" <?php checked(0,$currentPage); ?>>None</option>
182
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
183
<?php
foreach ($getAllPages as $page) {
echo "<option value='".$page->ID."' ".
checked($page->ID,$currentPage,false)." > ".$page->post_title.
"</option>";
}
?>
</select>
</p>
<?php
}
}
function wpb3_onePage_register() {
register_widget('WPB3_Widget_One_Page');
}
add_action('init', 'wpb3_onePage_register', 1);
Neke dijelove ovog koda nee biti ovdje objanjene jer su ve nekoliko puta u prijanjem
stvaranju widgeta objanjene. U funkciji form maknut je klasini dio postavljanja naslova jer
nam to nije potrebno iz razloga to e naslov biti sam naslov stranice koju ovdje postavljamo.
U prvoj varijabli instance spajamo polje instance sa poljem koje ima generine vrijednosti, a to
je u ovome sluaju page koji, ako polje instance nema definiran klju pod istim nazivom, e se
dodati u polje instance. Nakon toga dodjeljujem vrijednost tog kljua u varijablu currentPage.
Zatim uzimamo sve stranice iz baze WordPress-a te ih ispisujemo kao dijelovi select elementa
preko petlje foreach.
Funkcijom checked provjerava se ako su unesene vrijednosti jednake te ako je jesu, dodaje se
HTML atribut checked=checked. Provjeravamo ID stranica sa spremljenim ID-em odabrane
stranice. Ako nema odabrane stranice, ID je 0 te stoga provjeravamo i prvu opciju, koja za
vrijednost ima nulu.
U funkciji widget dohvaamo stranicu sa tim ID-em preko WordPress klase WP_Query. Zatim
provjeravamo ako postoji stranica sa tim ID-em te ako postoji kree se u daljnju izvedbu funkcije.
Koristei instrukcije iz WordPress Codex-a sloena je petlja kao kod liste lanaka ili pojedinog
http://codex.wordpress.org/Class_Reference/WP_Query#Interacting_with_WP_Query
184
lanka. Nakon toga ispisujemo naslov stranice te dohvaamo u varijablu content sadraj cijele
stranice. Koristei funkciju get_extended dohvatili smo dva dijela sadraja, sadraj koji je prije
elementa <! More te sadraj nakon tog elementa. Kako je nama potreban samo sadraj prije
tog elementa, ispisujemo samo taj dio preko content_pars[main]. Zatim provjeravamo da li
uope postoji sadraj poslije elementa <! More, te ako postoji, ispisati e se poveznica na taj
sadraj. Na taj nain slijedili smo strukturu SOLID template-a i tono prikazali sadraj kako je i
dizajnirano.
Jedino to je sada potrebno je stvoriti stranicu sa duim sadrajem, te nakon toga dodati widget
u namjenjeni prostor za njega.
Nova stranica sa sadrajem
Widget za prikaz posljednjih lanaka sa razliitim post_type sadrajem

Widget kojeg treba napraviti veoma je slian widgetu kojeg smo ve napravili. Jedino to ovdje
neemo prikazivati datum i sliku lanka te emo koristiti razliitu HTML strukturu odnosno
CSS klasu. Jo jedna razlika u ovome je to emo imati odabir post_type-a sadraja pa emo tako
moi birati da li emo prikazivati FAQ, lanke ili neki drugi sadraj odnosno bilo koji mogui
post_type koji je registriran u tom trenutku u WordPress-u.
Stvorite novu datoteku widget-all_posts.php te je spremite u folder wpb3/inc i pozovite je unutar
datoteke functions.php:
1
require_once 'inc/widget-all_posts.php';
Zatim kopirajte sadraj datoteke widget-posts.php i zalijepite ga unutar datoteke widget-all_posts.php. Najprije zamijenite naziv klase od tog widgeta i openite informacije u:
http://codex.wordpress.org/Function_Reference/get_extended
1
2
3
4
5
6
7
8
9
10
11
185
class WPB3_Widget_All_Posts extends WP_Widget {

'classname' => 'widget_allPosts',
'description' => __( "A list of recent Posts for a post_type in WPB3.",
'wpb3' ) );
parent::__construct('wpb3_allPosts', __('WPB3 Recent Posts by Post Type',
'wpb3'),
$widget_ops);
} ...
te isto tako zamijenite na kraju datoteke, funkciju za registraciju widgeta u sljedee:

1
2
3
4
5
6
7
8
9
function wpb3_allPosts_register() {
register_widget('WPB3_Widget_All_Posts');
}
add_action('init', 'wpb3_allPosts_register', 1);
Nakon toga, zamijeniti emo funkciju za prikaz u administrativnom dijelu, funkciju form sa
sljedeim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//Defaults
$post_type = esc_attr( $instance['postType'] );
$allPostTypes = get_post_types();
?>
<p>
<?php _e( 'Title:' ); ?></label>
name="<?php echo $this->get_field_name('title'); ?>" type="text"
value="<?php echo $title; ?>" /></p>
<label for="<?php echo $this->get_field_id('postType'); ?>">
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
186
<?php _e( 'Select Post Type:' ); ?></label><br />

<select class="widefat" id="<?php echo $this->get_field_id('postType'); ?>"
name="<?php echo $this->get_field_name('postType'); ?>" >
<option value="0">None</option>
<?php
foreach($allPostTypes as $postType){
echo '<option value="'.$postType.'" '.checked($post_type,$postType,false)
.'>'.$postType.'</option>';
}
?>
</select>
<?php
}
}
U varijabli allPostTypes spremamo sve mogue post_type-ove koje smo dobili putem funkcije
get_post_types. Zatim u HTML elementu select kao kod prolog widgeta gdje smo listali
stranice, sada listamo sve registrirane post_type-ove. Jednako tako, koristimo funkcije checked
kako bi mogli ispisati HTML checked=checked.
Nakon to smo postavili funkciju za ispis administrativnog dijela, treba napraviti odnosno
prepraviti funkciju za spremanje vrijednosti, tako da emo zamijeniti postojeu funkciju update
sa sljedeim:
1
2
3
4
5
6
7
8

$instance['postType'] = $new_instance['postType'];
return $instance;
}
U funkciji update postavili smo novu vrijednost koju spremamo kao klju post_type i u nju
upisujemo vrijednost odabranog post_type-a. Ako nemamo niti jednog odabranog, postavljamo
vrijednost na nulu.
Jedino to je preostale jeste promijeniti i funkciju za ispis samog widgeta:
http://codex.wordpress.org/Function_Reference/get_post_types
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
187

extract( $args );
$title = apply_filters('widget_title', empty( $instance['title'] ) ?
__( 'Recent Posts' ) : $instance['title'], $instance, $this->id_base);
$post_type = $instance['post_type'];
if($title)
$recentPosts = new WP_Query( apply_filters( 'wpb3_widget_all_posts_args', ar\

ray(
'posts_per_page'
=> 5,
'no_found_rows'
=> true,
'post_status'
=> 'publish',
'post_type'
=> $post_type,
) ) );

<p>
<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
</p>
<?php endwhile; ?>
<?php
endif;
echo $after_widget;
}
U ovoj funkciji definiramo varijablu post_type u kojoj postavljamo vrijednost post_type-a. Ako
nije odabran niti jedan post_type tada varijabla poprima vrijednost post. Nakon toga se koristi
klasa WP_Query kojom radimo upite u bazu WordPress-a te prema prosljeenim parametrima,
traimo 5 posljednjih lanaka sa post_type-om ija je vrijednost jednaka varijabli post_type.
Zatim, ako postoji koji lanak, ispisuju se prema strukturi koja je postavljena u SOLID templateu, a to je:
188
1
2
3
<p>
<a href="poveznica_na_sadrzaj"> Naslov </a>
</p>
Jedino to je preostalo kako bi mogli prikazati i FAQ sadraj jeste napraviti FAQ post_type.
FAQ post type Stvorite novu datoteku faq.php i spremite je u folder wpb3/inc te zatim je
pozovite unutar datoteke functions.php:
1
require_once 'inc/faq.php';
Kopirajte sljedei sadraj unutar datoteke faq.php:

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
<?php
/* CPT: FAQ */

function wpb3_faq() {
$labels = array(
'name'
'singular_name'
'menu_name'
'parent_item_colon'
'all_items'
'view_item'
'add_new_item'
'add_new'
'edit_item'
'update_item'
'search_items'
'not_found'
);
$args = array(
'label'
'description'
'labels'
'supports'
'hierarchical'
'public'
'show_ui'
'show_in_menu'
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
_x(
_x(
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
'FAQs', 'Post Type General Name', 'wpb3' ),

'FAQs', 'Post Type Singular Name', 'wpb3' ),
'FAQs', 'wpb3' ),
'Parent FAQs:', 'wpb3' ),
'All FAQss', 'wpb3' ),
'View FAQs', 'wpb3' ),
'Add New FAQs', 'wpb3' ),
'Add FAQs', 'wpb3' ),
'Edit FAQs', 'wpb3' ),
'Update FAQs', 'wpb3' ),
'Search FAQs', 'wpb3' ),
=>
=>
=>
=>
=>
=>
=>
=>
__( 'faq', 'wpb3' ),

__( 'FAQ Post Type', 'wpb3' ),
$labels,
array( 'title', 'editor' ),
false,
true,
true,
true,
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
189
'show_in_nav_menus'
=> true,
'show_in_admin_bar'
=> true,
'menu_position'
=> 5,
'can_export'
=> true,
'has_archive'
=> true,
'capability_type'
=> 'post',
);
register_post_type( 'faq', $args );
}
add_action( 'init', 'wpb3_faq', 0 );
Ovime se stvorio FAQ post type te iako je sve isto kao i u svim prethodnim custom post typeovima imamo malu promjenu u parametru supports gdje su maknuti thumbnail i author jer kod
FAQ nam je jedino potrebno pitanje to je title te odgovor, a to je editor gdje unosimo tekst.
Sve to sada preostaje je unijeti par FAQ i obinih lanaka te postaviti widgete za svaki
post type u odgovarajui prostor za widgete.
Widgeti sa svojim sadrajem
Testimonials
Testimonials prikazuju poruke od korisnika usluga kako bi se podigla vjerodostojnost same
agencije ili tvrtke. Iako je u SOLID template-u predstavljen samo jedan testimonial, mi emo
to malo poboljati i prikazati vie njih koristei Bootstrap 3 Carousel.
190
Testimonials na SOLID template-u
Kako bi to mogli, prvo moramo definirati to je testimonial. Testimonial e biti post type koji
e sadravati naslov koji e predstavljati ime korisnika, tekst koji e biti sam tekst testimoniala
te e zatim imati web stranicu i zanimanje korisnika. Posljednje dvoje biti e definirano putem
metaboxa.
Za poetak, na kraj datoteke template-home.php, prije kopirajte sljedei dio koda:
1
2
3
4
5
6
7
8
9
10
11
12
<div id="twrap">
<div class="container centered">
<div class="row">
<i class="fa fa-comment-o"></i>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting ..</p>
<h4><br/>Marcel Newman</h4>
<p>WEB DESIGNER - BLACKTIE.CO</p>
</div>
</div><! --/row -->
</div><! --/twrap -->
Treba stvoriti novu datoteku testimonials.php i spremiti je u folder wpb3/inc te je pozvati u

datoteci functions.php:
1
require_once 'inc/testimonials.php';
te nakon toga kopirajte cijeli sadraj iz datoteke portfolio.php. Potreban je sadraj iz te datoteke iz
razloga to se koristi slian nain metaboxa, samo to emo kod testimoniala koristiti korisnikovo
zanimanje i web stranicu dok smo kod portfolia koristili web stranicu i ime klijenta. Prvi dio,
koji je ujedno i registracija samog post type-a promijenite u sljedee:
191
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
44
45
46
<?php
/* CPT: Testimonials */
function wpb3_testimonial() {
$labels = array(
'name'
'wpb3' ),
'singular_name'
'wpb3' ),
'menu_name'
'parent_item_colon'
'all_items'
'view_item'
'add_new_item'
'add_new'
'edit_item'
'update_item'
'search_items'
'not_found'
);
=> _x( 'Testimonials', 'Post Type General Name',

=> _x( 'Testimonial', 'Post Type Singular Name',
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
'Testimonial', 'wpb3' ),
'Parent Testimonial:', 'wpb3' ),
'All Testimonials', 'wpb3' ),
'View Testimonial', 'wpb3' ),
'Add New Testimonial', 'wpb3' ),
'Add Testimonial', 'wpb3' ),
'Edit Testimonial', 'wpb3' ),
'Update Testimonial', 'wpb3' ),
'Search Testimonial', 'wpb3' ),
$args = array(
'label'
=> __( 'testimonial', 'wpb3' ),
'description'
=> __( 'Testimonial Post Type', 'wpb3' ),
'labels'
=> $labels,
'supports'
=> array( 'title', 'editor' ),
'hierarchical'
=> false,
'public'
=> true,
'show_ui'
=> true,
'show_in_menu'
=> true,
'show_in_nav_menus'
=> true,
'show_in_admin_bar'
=> true,
'menu_position'
=> 5,
'can_export'
=> true,
'has_archive'
=> true,
'capability_type'
=> 'post',
);
register_post_type( 'testimonial', $args );
}
47
48
192

add_action( 'init', 'wpb3_testimonial', 0 );
Cijeli dio koji je vezan uz kategorije i tagove moe se obrisati iz razloga to nam kod testimoniala
nisu potrebni, kao to maknuli unos thumbnail-a i author-a. Jednako tako, kako nemamo slika,
nisu nam potrebne niti funkcije vezane uz dodatak Multi Image Metabox te stoga je potrebno
obrisati i kraj datoteke:
1
2
3
4
5
6
7
8
add_filter('images_cpt','my_image_cpt');
function my_image_cpt(){
$cpts = array('portfolio');
return $cpts;
}
add_image_size('slika-singleProjekt', 945, 443, true);
add_image_size('slika-thumbProjekt', 380, 285, true);
Nakon registriranja post type-a, potrebno je dodati i metabox koji e sadravati dva polja za unos
zanimanja i web stranice. Nakon registracije, zamijenite poetni dio metaboxa sa sljedeim:
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
function wpb3_testimonial_metabox_html( $post ){

wp_nonce_field( 'wpb3_testimonial_metabox', 'wpb3_testimonial_metabox_nonce'\
);
$klijentPosition = get_post_meta( $post->ID, '_wpb3_testimonial_position', t\
rue );
$klijentWeb = get_post_meta( $post->ID, '_wpb3_testimonial_web', true );
echo "<p><label for='wpb3_testimonial_position'>";
_e("Client Position","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_testimonial_position"
name="wpb3_testimonial_position" value="' . esc_attr( $klijentPosition ) . \
'" size="25" /></p>';
echo "<p><label for='wpb3_testimonial_web'>";
_e("Client Web","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_testimonial_web"
name="wpb3_testimonial_web" value="' . esc_attr( $klijentWeb ) . '" size="2\
5" /></p>';
}
function wpb3_testimonial_metabox_add(){
26
27
28
29
30
31
32
33
34
35
36
193
add_meta_box(
'testimonial-client',
__( 'Testimonial Client', 'wpb3' ),
'wpb3_testimonial_metabox_html',
'testimonial',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'wpb3_testimonial_metabox_add' );
Ovdje imamo funkciju za izradu HTML polja za unos gdje se unosi zanimanje klijenta te web
stranica. Prije ispisa polja, uzimaju se vrijednosti iz meta tablice te ako postoje e se ispisati u
polju. u drugoj funkciji, koristi se funkcija za dodavanje metaboxa gdje se definira koja e se
funkcija koristiti za izradu HTML strukture te na kojem post type-u e se prikazati.
Nakon to je definirana HTML struktura za metabox te nakon to je dodan, potrebno je i napraviti
funkciju za spremanje informacije iz polja u metaboxu. To emo uinit tako da promjenimo
funkciju za spremanje koju smo uzeli iz datoteke portfolio.php na sljedei nain:
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
function wpb3_testimonial_metabox__save( $post_id ) {

/*
*/
if ( ! isset( $_POST['wpb3_testimonial_metabox_nonce'] ) ) {
return;
}
if ( ! wp_verify_nonce( $_POST['wpb3_testimonial_metabox_nonce'],
'wpb3_testimonial_metabox' ) ) {
return;
}
// If this is an autosave, our form has not been submitted,
// so we don't want to do anything.
return;
}
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
194

return;
}
} else {
return;
}
}
$klijentWeb = $_POST['wpb3_testimonial_web'];
$klijentPosition = $_POST['wpb3_testimonial_position'];
$klijentWeb = sanitize_text_field( $klijentWeb );
$klijentPosition = sanitize_text_field( $klijentPosition );

update_post_meta( $post_id, '_wpb3_testimonial_position', $klijentPosition );
update_post_meta( $post_id, '_wpb3_testimonial_web', $klijentWeb );
}
add_action( 'save_post', 'wpb3_testimonial_metabox__save' );
U gornjoj funkciji najprije se provjeravaju neki uvjeti kako bi bili sigurni da spremamo podatke
na dobarn nain. Prvo se provjerava sam wp_nonce te nakon toga se gleda da li se radi o
autosave-u. Ako se ne radi o tome, funkcija nastavlja obavljati svoje naredbe. Zatim se gledaju
permissioni tj. dozvole od korisnika te ako korisnik ima dozvolu spremati tj. praviti novi sadraj
ovog tipa, spremaju se uneseni podaci skupa sa ostalim podacima koji se spremaju na save_post.
Ispis Testimoniala
Na poetkui izrade testimoniala kopirali smo izvorni kod iz SOLID template-a. Zamijenite sada:
1
2
3
4
5
6
7
8
9
10
11
12
<div id="twrap">
<div class="row">
<p>Lorem Ipsum is simply dummy text of the printing ...</p>
<h4><br/>Marcel Newman</h4>
<p>WEB DESIGNER - BLACKTIE.CO</p>
</div>
</div><! --/row -->
</div><! --/twrap -->
sa sljedeim kodom:
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
<?php
/**
*
*/
$args = array(
//Type & Status Parameters
'post_type'
=> 'testimonial',
'posts_per_page'
=> -1,
);
$allTestimonials = get_posts( $args );
if(!empty($allTestimonials )) {
?>
<div id="twrap">
<div class="row">
<?php if(count($allTestimonials) == 1) { ?>
<p><?php echo strip_tags($allTestimonials[0]->post_content); ?></p>
<h4><br/><?php echo $allTestimonials[0]->post_title; ?></h4>
<?php
$post_id = $allTestimonials[0]->ID;
$clientPosition = get_post_meta( $post_id, '_wpb3_testimonial_position',
true );
195
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$clientWeb = get_post_meta( $post_id, '_wpb3_testimonial_web', true );

$client = "";
$client .= $clientPosition;
if("" != $clientPosition && "" != $clientWeb) $client .= " - ";
$client .= $clientWeb;
?>
<p><?php echo $client ?></p>
<?php } else { ?>
<div id="carousel-testimonials" class="carousel slide"
<?php
$first = true;
foreach ($allTestimonials as $testimonial) { ?>
<div class="item <?php if($first) echo active; ?>">
<p><?php echo strip_tags($testimonial->post_content); ?></p>
<h4><br/><?php echo $testimonial->post_title; ?></h4>
<?php
$post_id = $testimonial->ID;
$clientPosition = get_post_meta( $post_id, '_wpb3_testimonial_position\
',
true );
$clientWeb = get_post_meta( $post_id, '_wpb3_testimonial_web', true );\
$client = "";
?>
</div>
<?php
$first=false;
}
?>
196
78
79
80
81
82
83
84
85
86
87
197
</div>
</div>
<?php } ?>
</div>
</div><! --/row -->
</div><! --/twrap -->
<?php }?>
Sa ovim dijelom koda radimo sljedee:

1. uzimamo sve testimoniale preko WP_Query i spremamo ih u varijablu allTestimonials
2. Provjeravamo da li postoje kakvi testimoniali, te ako je varijabla allTestimonials prazna,
nee se ispisati nita
3. Ako ipak postoji barem jedan testimonial, ispisati e se poetna struktura za testimoniale
4. Na mjestu sadraja pojedinog testimoniala, provjerava se najprije da li je samo jedan
testimonial u varijabli allTestimonials, te ako postoji samo jedan ispisuje se samo prvi
zapis u varijabli allTestimonials pa zbog toga koristimo allTestimonials[0]
5. Ako imamo vie testimoniala, ispisujemo svaki posebno preko petlje foreach, ali prije nego
to svaki ispisujemo postavljamo HTML strukturu za Bootstrap 3 Carousel te zatim svaki
testimonial ispisujemo kao .item, a za prvog ispisujemo klasu .active
6. Varijabla $client koristi se kao varijabla koja e ispisivati zanimanje i web stranicu klijenta
tj. korisnika, te se u nju dodaje - ako imamo i zanimanje i web stranicu, ali ako imamo
samo jedno od toga onda se nee dodati ta crtica
Ako se malo bolje pogleda sama struktura i kod, mogue je primijetiti i jedan ponavljajui dio,
a to je sljedei:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<?php
$clientPosition = get_post_meta( $post_id, '_wpb3_testimonial_position', true\
);
$client = "";
16
17
18
19
198
?>
Jedina mala razlika je ta to se kada je samo jedan testimonal koristi allTestimonials[0], ali sadraj
kao takav je sam za sebe i isti je nain ispisivanja kod jednog ili vie testimoniala. Stoga, ne bi
bilo loe napraviti funkciju koja bi to radila, pa na kraj datoteke functions.php dodajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function wpb3_single_testimonial($testimonial){
?>
<?php
$clientPosition = get_post_meta( $post_id, '_wpb3_testimonial_position', tru\
e );
$client = "";
?>
<?php
}
Zatim postojeu strukturu gdje ispisujemo testimoniale u datoteci template-home.php promijenite u sljedee:
1
2
3
4
5
6
7
8
9
<div id="twrap">
<div class="row">
<?php if(count($allTestimonials) == 1) { ?>
<?php wpb3_single_testimonial($allTestimonials[0]); ?>
199
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php } else { ?>

<div id="carousel-testimonials" class="carousel slide"
<?php
$first = true;
foreach ($allTestimonials as $testimonial) { ?>
<div class="item <?php if($first) echo active; ?>">
<?php wpb3_single_testimonial($testimonial); ?>
</div>
<?php
$first=false;
}
?>
</div>
</div>
<?php } ?>
</div>
</div><! --/row -->
</div><! --/twrap -->
Na mjestu gdje je prije bio sadraj testimoniala sada samo pozivamo funkciju wpb3_single_testimonial u koju prosljeujemo testimonial, pa tako ako je samo jedan prosljeujemo
allTestimonials[0], a ako ih je vie prosljeujemo svaki posebno sa testimonial. Puno je ie
i itljivije, zar ne?
Ispis Klijenata
Klijenti
Za klijente, jednako tako mogao bi se koristiti novi post type koji bi sadravao samo slike i sl.,
ali zato ne bi koristili ve postojei post type koji se bavi slikama? Taj post type je attachment
te se on koristi za svaku sliku tj. svaka slika spada u taj post type.
200
Napraviti emo dodatno polje kod slika odnosno u media uploaderu koje e oznaavati da li to
slika klijenta ili nije.
Stvorite datoteku attachments.php i postavite je u folder wpb3/inc te je pozovite unutar datoteke
functions.php:
1
require_once 'inc/attachments.php';
Dodavanje polja u media uploader-u

Prvo to treba napraviti jeste kopirati sljedei dio koda unutar datoteke attachments.php:
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
<?php
/**
* Adding our custom fields to the $form_fields array
*
* @param array $form_fields
* @param object $post
* @return array
*/
function wpb3_attachment_new_field($form_fields, $post) {
$check_meta = get_post_meta($post->ID, "_wpb3_client_image",true);
$form_fields["wpb3_client_image"]["label"] = __("Client Image?");
$form_fields["wpb3_client_image"]["input"] = "html";
$form_fields["wpb3_client_image"]["html"] = "<input style='width:auto'
type='radio' value='0' name='attachments[{$post->ID}][wpb3_client_image]'
". checked($check_meta,"0",false) ." ". checked($check_meta,"",false) ."
id='attachments[{$post->ID}][wpb3_client_image]' /> No <br/>
<input type='radio' style='width:auto' value='1' ". checked($check_meta,"1\
",
false) ." name='attachments[{$post->ID}][wpb3_client_image]'
id='attachments[{$post->ID}][wpb3_client_image]' /> Yes";
return $form_fields;
}
// attach our function to the correct hook
add_filter("attachment_fields_to_edit", "wpb3_attachment_new_field", null, 2\
);
Gornjom funkcijom i pozivom filtera, dodali smo dodatno polje unutar media uploader-a, za
svaku sliku. to se tono ovdje dogaa? Filter attachment_fields_to_edit prosljeuje dvije
vrijednost, polje koje sadri sva polja i lanak odnosno tu sliku. Prvo koristimo varijablu
http://codex.wordpress.org/Plugin_API/Filter_Reference/attachment_fields_to_edit
201
check_meta u kojoj dodjeljujemo vrijednost podataka te ako nema tog podatka, varijabla e imati
vrijednit . Nakon toga u polje koje sprema sva polja, dodajemo i novo polje za vrijednostima
label, input te html. Vie o mogunostima dodavanja polja moete proitati ovdje. U html-u
napravili smo dva input-a koji predstavljao radio gumbe te koristimo ponovno funkciju checked.
Zatim kada je dodano novo polje, vraamo iz funkcije sva polja media uploader-a.
Dodani Radio gumbi
Spremanje polja u media uploader-u

Na kraju datoteke attachments.php dodajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
function wpb3_attachment_fields_to_save($post, $attachment) {

if( isset($attachment['wpb3_client_image']) ){
// update_post_meta(postID, meta_key, meta_value);
update_post_meta($post['ID'], '_wpb3_client_image', $attachment['wpb3_client\
_image']);
}
return $post;
}
add_filter("attachment_fields_to_save", "wpb3_attachment_fields_to_save", nul\
l, 2);
U ovome dijelu spremamo podatak koji smo unijeli odnosno odabrali. Ako pomnije pogledamo
funkcije za dodavanje polja i radio gumbe, moe se primijetiti:
1
name='attachments[{$post->ID}][wpb3_client_image]
dok u ovoj funkciji, za spremanje, imamo sljedee:

1
$attachment['wpb3_client_image']
Mogue je malo zbuniti se jer nije isto, ali to je zato jer zapravo varijabla sa pozivom polja
attachment[wpb3_client_image] predstavlja $_POST[attachments][$post->ID]. Kasnije, ako je
prosljeen taj podataka, jednostavno ga spremamo koristei funkciju update_post_meta kao kod
svakog post_type-a.
Prije ispisa, dodajte slike od klijenata te oznaite ih da su za klijente.
Ispis slika za klijente
Najprije emo dodati osnovnu strukturu iz SOLID template-a u datoteku template-home.php i
to nakon testimoniala:
http://code.tutsplus.com/tutorials/creating-custom-fields-for-attachments-in-wordpress--net-13076
202
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="cwrap">
<h3>OUR CLIENTS</h3>
<div class="col-lg-3 col-md-3 col-sm-3">
<img src="assets/img/clients/client01.png"
</div>
</div>
</div>
</div>
</div><! --/row -->
</div><! --/cwrap -->
class="img-responsive">
Ako na njih gledamo kao attachmente koristiti emo opet WP_Query kako bi dobili te slike koje
imaju kao post meta postavljeno da jesu slike klijenta. Stoga, gore unesena struktura treba biti
zamijenjena sa sljedeim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
/**
*
*/
$klijentSlikeArgs = array(
//Type & Status
'post_type'
=>
'posts_per_page'
'post_status' =>
Parameters
'attachment',
=> -1,
'inherit',
//Custom Field Parameters

'meta_key'
=> '_wpb3_client_image',
'meta_value' => "1",
'meta_compare'
=> '='
);
$klijentSlike = new WP_Query( $klijentSlikeArgs );
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
203
if($klijentSlike->have_posts()):
?>
<div id="cwrap">
<h3>OUR CLIENTS</h3>
<?php while($klijentSlike->have_posts()): $klijentSlike->the_post(); ?>
<img src="<?php echo get_the_guid(); ?>" class="img-responsive">
</div>
<?php endwhile; ?>
</div><! --/row -->
</div><! --/cwrap -->
<?php endif; ?>
Kao parametar za WP_Query proslijedili smo da je post_status jednak vrijednosti inherited.

To sam saznao tako da sam otiao na adresu mojeg lokalnog servera i pogledao phpmyadmin:
http://localhost/phpmyadmin. Malo pregledavajui moju bazu podataka i tablicu: wp_posts
pronaao sam sadraj sa post_type=attachment i vidio da je njegov post_status jednak vrijednosti
inherited. Ovim parametrima dobiti emo sve slike koje imaju oznaeno da su slike klijenta.
Nakon toga, provjeravamo da li uope postoje takve slike, te ako postoji postavljamo poetnu
strukturu za slike klijenta, a nakon toga prolazimo kroz svaku sliku slijedei klasini WordPress
Loop. Za svaki sadraj tj. sliku ispisujemo Bootstrap 3 klase i funkcijom get_the_guid dohvaamo
cijelu putanju slike.
Sreivanje uvodne slika

Iako bi mogli to ostaviti kako je sada, ipak uvodna slika ima veliinu od otprilike 210kb. irina
slike je 848px te je daljnje smanjivanje, ako koristimo jQuery dodatak BttrLazyLoading, na 768px
moda nepotrebno.
Jednako tako, treba razmiljati o tome da, ako radimo temu za iroku primjenu, mogu je koristiti
korisnici koji nemaju novca za plaanje hostinga koji bi im omoguio dovoljno prostora na
serveru i sl. to ako oni koriste besplatne hostinge ili servere sa malo prostora? Dodavanje
dodatnih image size-a smanjivalo bi im takav prostor dosta brzo jer bi se svaka slika izraivala
za sve registrirane veliine slika, pa ovakva, skoro nepotrebna smanjivanja nisu dobrodola.
Ako se ista slika otvori u nekom grafikom alatu, poput Photoshop-a te se krene optimizirati,
jednostavnim odabirom, u Photoshop-u, Save For Web te postavljanjem kvalitete slike na cca.
60%, dobiti e se slika dobrih kvaliteta za web, a veliine od samo 66kb. To znai da smo smanjili
veliinu slike za 68%.
Sreivanje Testimonial dijela

Testimonial dio ima u pozadini sliku koja je ne mijenja svoju veliinu, iako izgleda da to radi
ako mijenjamo irinu preglednika. Slika je cijelo vrijeme istih dimenzija te veliine, to znai
204
da i mobitel koji pregledava ovu stranicu bi dobio sliku od 240kb te dimenzija 1280x850 to je
stvarno nepotrebno za jedan mobitel.
Slika koja je postavljena je odlina za preglednike odnosno ekrane kojima koristi i Bootstrap 3
klasa -lg, to znai da se slika mora optimizirati za jo tri klase: -xs, -sm i -md odnosno slika
mora biti veliina, gledajui na redoslijed klasa: 768px, 991px i 1200px. Kada se naprave slike sa
tim irinama gdje se visina proporcionalno smanjivala, imati emo dodatne tri slike t-back-xs,
t-back-sm i t-back-md koje treba spremiti u wpb3/assets/img. Nakon toga potrebno je otvoriti
datoteku koja se nalazi na wpb3/assets/css/style.css te pronai sljedei dio:
1
2
3
4
5
6
...
/* Testimonials Wrap */
#twrap {
background: url(../img/t-back.jpg) no-repeat center top;
margin-top: 0px;
...
Ako emo koristiti pristup mobile-first slika koja bi se prva trebala dobiti je slika za mobitel, pa
kasnije e se ako treba vea slika, dodatno preuzeti. Tako da ovaj dio promijenite u:
1
2
3
4
5
6
...
/* Testimonials Wrap */
#twrap {
background: url(../img/t-back-xs.jpg) no-repeat center top;
margin-top: 0px;
...
Nakon cijelog tog dijela:

1
#twrap { ... }
dodajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
@media (min-width: 768px) {

#twrap {
background: url(../img/t-back-sm.jpg) no-repeat center top;
}
}
#twrap {
background: url(../img/t-back-md.jpg) no-repeat center top;
}
}
13
14
15
16
17
18
205

#twrap {
background: url(../img/t-back.jpg) no-repeat center top;
background-size:cover;
}
}
Time smo omoguili prikaz veih slika po potrebi, a mobiteli i manji ekrani dobivaju sigurno
najmanju moguu sliku i time im se i smanjuje vrijeme prikaza stranice.
Custom Template: About

Custom template za stranicu About sadravati e tekst i sliku koju postavimo kao sliku lanka
odnosno stranice te ispod toga e jo prikazivati tim iz agencije uz testimoniale i slike klijenta.
Za poetak potrebno je napraviti novu datoteku pod nazivom template-about.php koji e imati
za sadraj:
1
2
3
4
5
6
7
8
9
10
<?php
/*
Template Name: About Page
*/
get_header();
?>
Nakon toga treba otvoriti datoteku about.html iz SOLID template-a i kopirati dio koji poinje od
1
2

sa sljedeim:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?php if(have_posts()): ?>

<div class="row">
<?php while(have_posts()): the_post(); ?>
<?php if(has_post_thumbnail()):
the_post_thumbnail( array(555, 416), array("class" => "img-responsive") \
);
endif; ?>
</div>
<h4><?php the_title() ?></h4>
</div>
<?php endwhile; ?>
</div><! --/row -->
<?php endif;?>
Ovdje se koristi klasian WordPress Loop koji ispisuje podatke o sadraju stranice. Prilikom
prikazivanja slike lanka odnosno stranice, prosljeujemo veliinu koju elimo te dodatnu klasu
208
koja e se dodati slici prilikom formiranja HTML elementa. Iako prema SOLID template-u,
sadraj te stranice na kraju ima i gumb koji alje na stranicu Contact ovdje nije to dodatno
napravljeno ve je puteno na slobodu autora da li e dodati gumb unutar sadraja ili ne. To je
obina poveznica sa dvije dodatne klase koje je potrebno dodati.
lanovi tima
Prije nego to se lanovi tima ponu ispisivati, potrebno je i napraviti njihove sadraje. Za izradu
tog sadraja moemo koristiti vie metoda, jedna od njih bi bila pravljenje dodatne tablice u bazi
podataka koja bi spremala sve njihove podatke. Jo jedan od naina je napraviti nekakvu stranicu
opcija gdje se onda dodaju lanovi i spremaju u bazu kao option, ali mogue je isto tako napraviti
dodatni post type koji omoguuje koritenje WordPress API-a koji nam omoguuje sve to.
Izradom dodatnog post type-a, omoguuje se i dodatna stranica svakog lana tima, koja se zatim
moe proirivati sa dodatnim sadrajem i sl.
Prvo treba stvoriti datoteku team.php i spremiti je u wpb3/inc te je pozvati u datoteci functions.php:
1
require_once 'inc/team.php';
Kako bi stvorili novi post type postavite sljedei dio kao sadraj u datoteci team.php:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
/* CPT: Team */
function wpb3_team() {
$labels = array(
'name'
'singular_name'
'menu_name'
'parent_item_colon'
'all_items'
'view_item'
'add_new_item'
'add_new'
'edit_item'
'update_item'
'search_items'
'not_found'
);
$args = array(
'label'
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
=>
_x(
_x(
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
__(
'Teams', 'Post Type General Name', 'wpb3' ),

'Team', 'Post Type Singular Name', 'wpb3' ),
'Team', 'wpb3' ),
'Parent Team:', 'wpb3' ),
'All Teams', 'wpb3' ),
'View Team', 'wpb3' ),
'Add New Team', 'wpb3' ),
'Add Team', 'wpb3' ),
'Edit Team', 'wpb3' ),
'Update Team', 'wpb3' ),
'Search Team', 'wpb3' ),
=> __( 'team', 'wpb3' ),
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
209
'description'
=> __( 'Team Post Type', 'wpb3' ),
'labels'
=> $labels,
'supports'
=> array( 'title', 'editor', 'thumbnail' ),
'hierarchical'
=> false,
'public'
=> true,
'show_ui'
=> true,
'show_in_menu'
=> true,
'show_in_nav_menus'
=> true,
'show_in_admin_bar'
=> true,
'menu_position'
=> 5,
'can_export'
=> true,
'has_archive'
=> true,
'capability_type'
=> 'post',
);
register_post_type( 'team', $args );
}
add_action( 'init', 'wpb3_team', 0 );
Dodavanje dodatnih unosa preko metaboxa

Gledajui SOLID template moe se primijetiti kako se, ako idemo miem preko slika, pojave dva
gumba, jedan za twitter, a drugi za e-mail. Metabox za svakog lana morati e imati polja za
twitter, email te jedan za poziciju. Na kraju datoteke team.php dodajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function wpb3_team_metabox_html( $post ){

wp_nonce_field( 'wpb3_team_metabox', 'wpb3_team_metabox_nonce' );
$teamPosition = get_post_meta( $post->ID, '_wpb3_team_position', true );
$teamEmail = get_post_meta( $post->ID, '_wpb3_team_email', true );
$teamTwitter = get_post_meta( $post->ID, '_wpb3_team_twitter', true );
echo "<p><label for='wpb3_team_position'>";
_e("Client Position","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_team_position" name="wpb3_team_position"
value="' . esc_attr( $teamPosition ) . '" size="25" /></p>';
echo "<p><label for='wpb3_team_email'>";
_e("Client email","wpb3");
echo ":</label>";
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
210
echo ' <input type="text" id="wpb3_team_email" name="wpb3_team_email"

value="' . esc_attr( $teamEmail ) . '" size="25" /></p>';
echo "<p><label for='wpb3_team_twitter'>";
_e("Client Twitter","wpb3");
echo ":</label>";
echo ' <input type="text" id="wpb3_team_twitter" name="wpb3_team_twitter"
value="' . esc_attr( $teamTwitter ) . '" size="25" /></p>';
}
function wpb3_team_metabox_add(){
add_meta_box(
'team-client',
__( 'Team Member Info', 'wpb3' ),
'wpb3_team_metabox_html',
'team',
'normal',
'high'
);
}
add_action( 'add_meta_boxes', 'wpb3_team_metabox_add' );
Funkcija za dodavanje metaboxa dodaje tri polja odnosno prikazuje u HTML-u tri polja, a prije
polja uzimamo sve tri vrijednosti i dodjeljujemo ih odgovarajuim varijablama. Nakon toga ih,
ako postoje neke vrijednosti, ispisujemo kao vrijednosti tih polja. Ako ih nema, polja su prazna
kao kod novog unosa sadraja.
Spremanje dodatnog unosa

Na kraju datoteke team.php sada dodajte sljedei dio koda:
1
2
3
4
5
6
7
8
9
10
11
12
13
function wpb3_team_metabox__save( $post_id ) {

/*
*/
if ( ! isset( $_POST['wpb3_team_metabox_nonce'] ) ) {
return;
}
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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
if ( ! wp_verify_nonce( $_POST['wpb3_team_metabox_nonce'], 'wpb3_team_metabo\

x' ) ) {
return;
}
// If this is an autosave, our form has not been submitted, so we don't
// want to do anything.
return;
}
return;
}
} else {
return;
}
}
$teamTwitter = $_POST['_wpb3_team_twitter'];
$teamEmail = $_POST['wpb3_team_email'];
$teamPosition = $_POST['wpb3_team_position'];
$teamPosition = sanitize_text_field( $teamPosition );
$teamEmail = sanitize_text_field( $teamEmail );
$teamTwitter = sanitize_text_field( $teamTwitter );

update_post_meta( $post_id, '_wpb3_team_position', $teamPosition );
if (filter_var($teamEmail, FILTER_VALIDATE_EMAIL)) {
update_post_meta( $post_id, '_wpb3_team_email', $teamEmail );
}
update_post_meta( $post_id, '_wpb3_team_twitter', $teamTwitter );
211
60
61
212
}
add_action( 'save_post', 'wpb3_team_metabox__save' );
Funkcija za spremanje dodatnih unosa slina je svim ostalim funkcijama koje smo koristili za
spremanje drugih metaboxa. Jedina razlika ovdje je kod spremanja e-maila gdje koristimo PHP
funkciju za provjeravanje vrijednosti. Ovdje preko funkcije filter_var i filtera FILTER_VALIDATE_EMAIL provjeravamo da li je to stvarno unesen e-mail, ako nije nee se spremiti, ali
ovako nee ni prikazati poruku zato nije spremljeno.
Ispisivanje poruke prilikom greke kod unosa
Kako bi omoguili dodavanje nove poruke treba napraviti sljedee:
1. Potrebno je dodati novu poruku odnosno informaciju u polje koje sadri sve poruke kod
sadraja
2. Potrebno je napraviti funkciju koja e prosljediti upravo tu poruku u varijablu koja
prikazuje poruke
3. Potrebno je zakaiti funkciju koja prosljeuje poruke u sluaju kada email nije ispravan
Nova poruka
Novu poruku dodati emo tako da na kraju datoteke team.php napravimo sljedee:
1
2
3
4
5
add_filter('post_updated_messages', 'wpb3_new_message');
function wpb3_new_message($messages) {
$messages['post'][99] = 'Member Email is not correct';
return $messages;
}
Ovdje u filter post_updated_messages dodajemo novu poruku preko funkcije wpb3_new_message i to tako da za polje post na mjestu 99 dodajemo novu poruku.
Prosljeivanje poruke
Funkcija za prosljeivanje poruke mora prvo osigurati da se dobro prosljeuje takva poruka.
Najprije emo obrisati istoimenu funkciju iz filtera kako bi osigurali da se dobra poruka postavi,
jer ako ve postoji istoimena funkcija mogue da e se ona izvriti, a ne naa funkcija sa novom
porukom. Kopirajte ovo na kraj datoteke team.php:
http://php.net/manual/en/function.filter-var.php
http://php.net/manual/en/filter.filters.validate.php
1
2
3
4
5
213
function wpb3_errorEmail($location) {
remove_filter('redirect_post_location', __FUNCTION__, 99);
$location = add_query_arg('message', 99, $location);
return $location;
}
Najprije briemo istoimenu funkciju iz filtera redirect_post_location kako bi kasnije mogli u taj
filter opet dodati ovu funkciju sa sigurnou da ne postoji niti jedna druga sa istim imenom.
Nakon toga, dodajemo novu vrijednost na query message pomou funkcije add_query_arg
gdje uz to, prosljeujemo i stari query koji smo dobili preko varijable location. Nakon toga
vraamo cijeli location iz funkcije.
Dodavanje funkcije u filter
Na kraju potrebno je zakaiti funkciju za prosljeivanje nove poruke. To emo napraviti tako da
emo dio gdje se provjerava email promijeniti u sljedee:
1
2
3
4
5
if (filter_var($teamEmail, FILTER_VALIDATE_EMAIL)) {
update_post_meta( $post_id, '_wpb3_team_email', $teamEmail );
} else {
add_filter('redirect_post_location', 'wpb3_errorEmail', 99);
}
Sada, ako email nije ispravan, u filter redirect_post_location dodajemo funkciju koja prosljeuje
poruku.
Nova poruka ako email nije ispravan
Ispisivanje lanova
Za ispisivanje lanova koristiti e se WP_Query i to sa paramterima post_type i posts_per_page
gdje e prvi biti team, a drugi -1 kako bi dobili sve unesene lanove tima. Potrebno je zamijeniti
cijeli sadraj izmeu
http://codex.wordpress.org/Function_Reference/add_query_arg
1
2
3
4
5
6
7
8

OVAJ CIJELI SADRAJ ZAMIJENITI

<?php endif; ?>
<h5 class="ctitle"><?php echo $position; ?></h5>
<p><?php echo strip_tags(get_the_content()); ?></p>
</div>
<?php endwhile; ?>
</div>
<?php endif; ?>
U gornjem sadraju najprije dobivamo sve lanove tima odnosno sadraj iji je post type team.
Zatim provjeravamo da li postoji barem jedan te ako postoji postavljamo poetnu strukturu.
Nakon toga ulazimo u daljnju petlju te prikazujemo sadraj za svakog lana tima pojedinano.
Na poetku petlje uzimamo zanimanje odnosno poziciju lana. Nakon toga provjeravamo da
li postoji slika lana te ako ne postoji neemo prikazati sliku, a niti twitter ni email jer se oni
prikazuju kada odemo miem preko slike. Ako postoji nastavlja se dalje prikaz slike te twittera
i emaila. Prije ispisivanja twittera, provjeravamo da li u sebi sadri znak @ te ako ne sadri
postavljamo na poetak vrijednosti varijable twitter dodatni znak @.
Nakon slike, twittera i email-a prikazujemo naslov koji predstavlja ime lana tima, poziciju i opis
lana.
Testimonials i slike klijenata

Ispis testimonialsa i slika klijenata su jednake strukture i funkcionalnosti kao i na poetnoj
stranici tj. u datoteci template-home.php. Kako bi to mogli opet upotrijebiti, a da opet ne moramo
mijenjati dvije ili vie datoteka ako bude potrebno, moemo ih postaviti u jednoj ili vie funkcija
koje bi zatim pozivali tamo gdje je potrebno.
Stoga, otvorite datoteku template-home.php i kopirajte cijeli sadraj testimonialsa i slika klijenata
tj. od dijela koji poinje sa:
1
2
3
4
5
6
7
8
9
10
11
12
216
...
<?php
/**
*
*/
$args = array(
'post_type'
=> 'testimonial',
'posts_per_page'
=> -1,
);
a zavrava sa:
1
2
</div><! --/cwrap -->

<?php endif; ?>
Otvorite datoteku functions.php i napravite novu funkciju na kraju datoteke:

1
2
3
function wpb3_testimonials_and_clients(){
}
te unutar te funkcije postavite kopirani sadraj. Na poetku funkcije izbriite <?php, jer je sama
funkcija ve unutar php taga pa nije potrebno opet otvarati isti tag, tako da dobijete sljedee:
1
2
3
4
5
6
7
/**
*
*/
$args = array(
Jednako tako, na kraju funkciju izbriite ?> jer kako je sama funkcija unutar taga, tako treba i
zavriti:
1
2
3
4
</div><! --/cwrap -->

<?php endif;
}
Sada obriite isti taj kopirani sadraj iz datoteke template-home.php, a slian sadraj, odnosno
strukturu iz SOLID template-a u datoteci template-about.php jednako tako obriite i zatim na
tom mjestu dodajte sljedee:
217
<?php wpb3_testimonials_and_clients(); ?>
Tim pozivom se sada na poetnoj stranici i na stranici About prikazuju testimoniali i slike
klijenata koje se vuku iz WordPress-a.
Custom Template: Contact

Stranica Contact koristit e custom template pa stoga napravite novu datoteku templatecontact.php i upiite sljedee u tu datoteku:
1
2
3
4
5
6
7
8
9
<?php
/*
Template Name: Contact Page
*/
get_header();
?>
Nakon toga, potrebno je postaviti strukturu iz SOLID template-a pa zato sljedei sadraj odnosno
strukturu kopirajte izmeu get_header(); ?> i <?php get_footer();:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="contactwrap"></div>

<div class="row">
<h4>Just Get In Touch!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and ...</p>
<form role="form">
<div class="form-group">
<label for="InputName1">Your Name</label>
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<label for="InputEmail1">Email address</label>
</div>
<label for="InputSubject1">Subject</label>
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
218
</div>
<label for="message1">Message</label>
<textarea class="form-control" id="message1" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-theme">Submit</button>
</form>
</div><! --/col-lg-8 -->
<h4>Our Address</h4>
<p>
Some Ave, 987,<br/>
23890, New York,<br/>
United States.<br/>
</p>
<p>
Email: hello@solidtheme.com<br/>
Tel: +34 8493-4893
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting ....</\
p>
</div>
</div><! --/row -->
Iz SOLID template-a, a i iz strukture mogue je primijetiti da imamo glavni sadraj i sporedni

sadraj. Sporedni sadraj je jo jedan sidebar, dok je glavni sadraj obian sadraj iz stranice.
Kako bi dobili glavni sadraj trenutne stranice moramo zamijeniti dio gdje ide glavni sadraj sa
sljedeim:
1
2
3
4
5
6
7
8
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
</div><! --/col-lg-8 -->
Sporedni sadraj
Sporedni sadraj je zapravo sidebar tako da prije nego postavimo widgete u sidebar potrebno je
registrirati sidebar, pa stoga na kraj datoteke functions.php postavite sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
219
register_sidebar(array(
'name'
=> __( 'Contact - Sporedni sadraj', 'wpb3' ),
'id'
=> 'contact-sadrzaj',
'description'
=> 'Prostor za postavljanja sporednog sadraja na Contact Te\
mplate',
'class'
=> '',
'after_widget' => '<div class="spacing"></div>',
'after_title'
=> '</h4><div class="hline"></div>'
));
Sada na mjestu sporednog sadraja treba postaviti sljedee:

1
2
3
4
5
6
<?php if ( is_active_sidebar( 'contact-sadrzaj' ) ){
dynamic_sidebar('contact-sadrzaj' );
}?>
</div>
Sada je mogue postaviti obian text widget i dodati odgovarajui sadraj skupa sa HTML-om
kao na sljedeoj slici.
220
Text Widget na Contact sporednom sadraju
Forma
Kako bi dobili formu i jo formu koja funkcionira, koristiti emo ve napravljene dodatke
(pluginove) za WordPress koji to omoguuju. Forma mora imati klase koje dolaze sa Bootstrap
3, pa stoga je potrebno imati kontakt formu koja omoguuju kompletnu izradu suelja. Jedan od
takvih dodataka je Contact Form 7.
Odite pod izbornik Plugins i odite pod Add New. Pretraite Contact Form 7 i instalirajte ga te
aktivirajte. Sada u izborniku treba odabrati Contact > Contact Forms te je ve jedna forma
ukljuena sa aktivacijom. Otvorite tu formu pa emo dobiti ve poetnu strukturu formu i to
upravo onu koja nama treba. Zatim treba izmjeniti malo strukturu HTML-a kako bi kontakt
forma izgledala kao u SOLID template-u. Kopirajte sljedee u polje za definiranje izgleda forme:
http://wordpress.org/plugins/contact-form-7/
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
221
<label for="InputName1">Your Name</label>
[text* your-name class:form-control id:InputName1]
</div>
<label for="InputEmail">Your Email</label>
[email* your-email class:form-control id:InputEmail]
</div>
<label for="InputSubject">Subject</label>
[text* your-subject class:form-control id:InputSubject]
</div>
<label for="textarea">Your Message</label>
[textarea* your-message class:form-control id:textarea]
</div>
[submit class:btn class:btn-theme "Send"]
Nakon to spremimo promjene, moemo koristiti tzv. shortcode koji se kopira u sadraj stranice.
U slici ispod moe se vidjeti shortcode i polje gdje se definira izgled forme.
222
Kontakt Forma i shortcode
Naslov forme nam nije potreban pa taj dio neemo kopirati. Sada je dovoljno otvoriti Pages >
All Pages > Contact i u sadraj upisati shortcode:
Kontakt Forma u sadraju
Ovime smo dobili pravi izgled forme na stranici Contact. Za sve ostale postavke vezane uz formu
kao to su poruke koje se dobivaju pri koritenju forme i sl. treba se otii pod izbornik Contact
> Contact Forms i kod svake forme se zasebno postaviti eljene postavke.
Koritenje WordPress Customizer-a
WordPress Customizer sa dodatnim opcijama
WordPress Customizer API je doveden s WordPress-om 3.4 i omoguuje postavljanje opcija

unutar Appearance > Customize ekrana gdje se moe vidjeti promjena u stvarnom vremenu
kako mijenjate opcije. Na ovome ekranu, mogue je i dodavati widgete kako bi se odmah moglo
vidjeti kako e se oni prikazivati.
Na temi koju smo izradili omoguit emo mijenjanje boja u navigaciji i u footeru. Prije nego
krenemo u izradu, potrebno je objasniti kako se izrauju dodatne sekcije, opcije i polja. Svi ti
elementi dodaju se preko akcije customize_register u kojemu se registriraju elementi i zatim
prikazuju na stranici customizer-a i to na sljedei nain:
1
2
3
4
function funkcija_koja_sadrzi_sve_elemente( $wp_customize ) {

//All our sections, settings, and controls will be added here
}
add_action( 'customize_register', 'funkcija_koja_sadrzi_sve_elemente' );
Izrada opcije
Opcija je zapravo ono to se sprema u bazu. Vrijednosti te opcije se mogu spremati ili uzimati iz
baze WordPress-a. Izrada opcije radi se na sljedei nain:
http://codex.wordpress.org/Theme_Customization_API
1
2
3
4
224
$wp_customize->add_setting( 'ime_opcije' , array(

'default'
=> 'pocetna_vrijednost',
'transport'
=> 'refresh[, postMessage]',
) );
Parametar transport nije potrebno definirati jer ako nije dodatno definiran, biti e postavljen na
refresh to znai da prilikom promjene vrijednosti te opcije, stranica e se osvjeiti i prikazati
novu vrijednost. Ako je postavljeno na postMessage, to znai da e se automatski mijenjati na
stranici bez potrebne osvjeavanja. To se koristi ako je definirana dodatna mogunost gdje se
preko javascripte mijenjaju vrijednosti.
Izrada Sekcije
Sekcije se dodaju kako bi se lake podijelile opcije i kako bi bilo preglednije. Tako na gornjoj slici
imamo dodatne sekcije kao to su WPB3 Header i WPB3 Footer. Pri instalaciji WordPress-a,
postoje generalne sekcije koje se odmah naprave odnosno postoje iako nisu sve prikazane zato
jer nemaju opcije koje su na njih povezane. Te sekcije jesu:
title_tagline - Naslov i slogan stranice

colors - Boje
header_image - Slika headera
background_image - Slika pozadine
nav - Navigacija
static_front_page - Statina poetna stranica
Sekcije se dodaju ovako:

1
2
3
4
$wp_customize->add_section( 'ime_sekcije' , array(

'title'
=> __( 'Naslov Sekcije', 'mytheme' ),
'priority'
=> 30,
) );
Izrada Kontrole
Kontrola predstavlja unos tj. nain unosa vrijednosti. Kontrola je zapravo polje u koje unosimo
vrijednosti opcije. Prilikom izrade koristimo razne kontrole koje moemo pronai na stranici
add_control. Tako npr. za polje koje bi omoguilo unos boje moe se koristiti sljedee:
http://codex.wordpress.org/Class_Reference%5CWP_Customize_Manager%5Cadd_control
1
2
3
4
5
6
225
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize,

'link_color', array(
'label'
=> __( 'Naziv polja tj. opcije', 'mytheme' ),
'section'
=> 'ime_sekcije',
'settings'
=> 'ime_opcije',
) ) );
Na gornji nain, koristimo kontrolu za dodavanje colorpicker-a pomou kojeg odabiremo boje.
Kao parametri prosljeuje se ime sekcije kako bi se znalo u koju sekciju e se prikazati ova
kontrola te ime opcije kako bi se znalo koju opciju koristiti za prikaz i unos vrijednosti.
Kada bi ta tri poziva postavili u gore definiranu funkciju koja registrira nove elemente customizer-a, dobili bi novu sekciju i novo polje. Nakon to se registrirala opcija odnosno polje, potrebno
je i ispisati tu vrijednost.
Ispis vrijednosti
Ako koristimo kontrolu za unos boje, treba ispisati novi CSS na vrhu dokumenta kako bi se vidjele
promjene. To emo uiniti ovako:
1
2
3
4
5
6
7
8
9
function funkcija_za_ispis_css()
{
?>
h1 { color:<?php echo get_theme_mod('header_color'); ?>; }
</style>
<?php
}
add_action( 'wp_head', 'funkcija_za_ispis_css');
U ovoj funkciji pozivamo funkciju koja ispisuje novi CSS. Vrijednosti opcije dobivamo tako da
koristimo funkciju get_theme_mod u kojoj prosljeujemo ime opcije.
Promjene u stvarnom vremenu

Iako ovo nije nuno kako bi customizer radio, omoguuje bolji user experience za korisnike koji
koriste customizer pa je stoga i to dobro napraviti. Najprije treba pozvati datoteku koja e imati
u sebi naredbe za mijenjanje vrijednosti. Datoteka se poziva samo kada je customizer otvoren
na sljedei nain:
226
1
2
3
4
5
6
7
8
9
10
11
12
public static function funkcija_za_datoteku()

{
wp_enqueue_script(
'mytheme-themecustomizer',
//Give the script an ID
get_template_directory_uri().'/assets/js/theme-customizer.js',//Point to fi\
le
array( 'jquery','customize-preview' ),
//Define dependencies
'',
//Define a version (optional)
true
//Put script in footer?
);
}
add_action( 'customize_preview_init', 'funkcija_za_datoteku' );
U gornjem primjeru poziva se datoteka theme-customizer.js te se definiraju preduvjeti, a to su

jquery i customize-preview. Nakon toga u datoteci treba definirati promjene na ovaj nain:
1
2
3
4
5
6
7
wp.customize( 'YOUR_SETTING_ID', function( value ) {

value.bind( function( newval ) {
//Do stuff (newval variable contains your "new" setting data)
//ex.:
$('a').css('color', newval );
} );
} );
Ovdje je nova vrijednost spremljena u varijabli newval te se u ovome primjeru postavlja kao
boja svih poveznica odnosno elemenata a.
Kako sve opcije imaju generalno postavljen parametar transport na refresh potrebno je poetne
opcije postaviti na postMessage, ako elimo sve vidjeti u stvarnom vremenu. Tako npr. treba i
ovo napraviti:
1
2
3
4
$wp_customize->get_setting(
'blogname' )->transport = 'postMessage';

'blogdescription' )->transport = 'postMessage';
'header_textcolor' )->transport = 'postMessage';
'background_color' )->transport = 'postMessage';
Customizer klasa
Na stranici Customizer API-a moe se pronai primjer customizer klase koja e se koristiti pri
dodavanju potrebnih polja, sekcija i kontrola.
Otvorite novu datoteku customize.php i spremite je u wpb3/inc te je pozovite u datoteci
functions.php:
http://codex.wordpress.org/Theme_Customization_API#Sample_Theme_Customization_Class
require_once 'inc/customize.php';
Nakon toga kopirajte sljedei sadraj unutar te 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
<?php
/**
* Contains methods for customizing the theme customization screen.
*
* @link http://codex.wordpress.org/Theme_Customization_API
* @since MyTheme 1.0
*/
class WPB3_Customize {
/**
* This hooks into 'customize_register' (available as of WP 3.4) and allows
* you to add new sections and controls to the Theme Customize screen.
*
* Note: To enable instant preview, we have to actually write a bit of custom
* javascript. See live_preview() for more.
*/
public static function register ( $wp_customize ) {
// We can also change built-in settings by modifying properties. For
// instance, let's make some stuff use live preview JS...
$wp_customize->get_setting( 'blogname' )->transport = 'postMessage';
$wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage';
$wp_customize->get_setting( 'header_textcolor' )->transport =
'postMessage';
$wp_customize->get_setting( 'background_color' )->transport =
'postMessage';
}
/**
* This will output the custom WordPress settings to the live theme's WP hea\
d.
*
* Used by hook: 'wp_head'
*
* @see add_action('wp_head',$func)
* @since MyTheme 1.0
*/
public static function header_output() {
?>

</style>

227
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<?php
}
/**
*This outputs the javascript needed to automate the live settings preview.
*Also keep in mind that this function isn't necessary unless your settings
*are using 'transport'=>'postMessage' instead of the default 'transport'
* => 'refresh'
*
* Used by hook: 'customize_preview_init'
*/
public static function live_preview() {
wp_enqueue_script(
'wpb3-themecustomizer', // Give the script a unique ID
get_template_directory_uri() . '/assets/js/theme-customizer.js',
// Define the path to the JS file
array( 'jquery', 'customize-preview' ), // Define dependencies
'', // Define a version (optional)
true // Specify whether to put in footer (leave this true)
);
}
/**
*This will generate a line of CSS for use in header output. If the setting
* ($mod_name) has no defined value, the CSS will not be output.
*
*/
public static function generate_css( $selector, $style, $mod_name,
$prefix='', $postfix='', $echo=true ) {
$return = '';
$mod = get_theme_mod($mod_name);
if ( ! empty( $mod ) ) {
$return = sprintf('%s { %s:%s; }',
$selector,
$style,
$prefix.$mod.$postfix
);
if ( $echo ) {
echo $return;
}
}
return $return;
}
}
// Setup the Theme Customizer settings and controls...
228
89
90
91
92
93
94
95
96
229
add_action( 'customize_register' , array( 'WPB3_Customize' , 'register' ));

// Output custom CSS to live site
add_action( 'wp_head' , array( 'WPB3_Customize' , 'header_output' ));
// Enqueue live preview javascript in Theme Customizer admin screen
add_action( 'customize_preview_init' , array( 'WPB3_Customize' ,
'live_preview' ) );
U funkciji live_preview pozivamo datoteku theme-customizer.js, stoga napravite istoimenu

datoteku i spremite je u wpb3/assets/js. Zatim u tu datoteku, kopirajte sljedee:
1
2
3
4
5
6
7
8
9
10
**
* This file adds some LIVE to the Theme Customizer live preview. To leverage
* this, set your custom settings to 'postMessage' and then add your handling
* here. Your javascript should grab settings from customizer controls, and
* then make any necessary changes to the page using jQuery.
*/
( function( $ ) {
} )( jQuery );
Ova datoteka e se popunjavati istovremeno kako mi budemo postavljali nove opcije i kontrole.
Promjena naslova stranice

Iako kada bi promijenili naslov stranice i to spremili, naslov stranice odnosno tekst logotipa,
promijenio bi se. Ali mi hoemo to vidjeti u trenutku promjene, stoga unutar function($) { u
datoteci theme-customizer.js dodajte sljedee:
1
2
3
4
5
wp.customize( 'blogname', function( value ) {

$( '.navbar-brand' ).html( newval );
} );
} );
Time se gleda opcija blogname i unesena vrijednost se stavlja unutar a.navbar-brand.
Dodavanje sekcije Header i opcije za pozadinu

navigacije
Ako slijedimo postupak koji je prethodno objanjen, stvorit emo sekciju tako da unutar datoteke
customize.php i unutar funkcije register dodamo sljedee:
1
2
3
4
5
6
7
8
230
$wp_customize->add_section( 'wpb3_header',
array(
'title' => __( 'WPB3 Header', 'wpb3' ), //Visible title of section
'priority' => 35, //Determines what order this appears in
'capability' => 'edit_theme_options', //Capability needed to tweak
'description' => __('Allows you to customize header for WPB3.', 'wpb3'),
)
);
Nakon to smo definirali sekciju potrebno je napraviti opciju:

1
2
3
4
5
6
7
8
$wp_customize->add_setting( 'navbar_background',
array(
'default' => '#384452',
'type' => 'theme_mod',
'capability' => 'edit_theme_options',
'transport' => 'postMessage'
)
);
Tu smo za poetnu vrijednost postavili boju koju ima navigacija za pozadinu. Nakon toga, treba
napraviti kontrolu koju emo povezati s opcijom i sekcijom:
1
2
3
4
5
6
7
8
9
10
$wp_customize->add_control( new WP_Customize_Color_Control(

$wp_customize,
'wpb3_navbar_background',
array(
'label' => __( 'Navbar Color', 'wpb3' ),
'section' => 'wpb3_header',
'settings' => 'navbar_background',
'priority' => 10
)
) );
Ovime smo dodali kontrolu za biranje boje te je nazvali Navbar Color i povezali sa sekcijom i
opcijom koje smo prethodno otkrili.
Nakon toga potrebno je dodati u funkciju header_output poziv funkcije za generiranje CSS
pravila. Ako pogledamo izvorni kod i CSS, moe se vidjeti da se pozadina navigacija postavlja
u klasi .navbar-default. Za tu klasu emo i generirati novo CSS pravilo. Unutar te funkcije i
elementa style dodajte sljedee:
1
2
<?php self::generate_css('.navbar-default', 'background-color',

'navbar_background'); ?>
Time smo omoguili ispis CSS pravila za boju pozadine navigacije. Preostaje samo dodati u
datoteku theme-customizer.js kako bi se omoguio prikaz nove boje prilikom odabira boje.
Dodajte sljedee na kraju funkcije unutar theme-customizer.js:
231
1
2
3
4
5
wp.customize( 'navbar_background', function( value ) {

$('.navbar-default').css('backgroundColor', newval );
} );
} );
Ovdje za opciju navbar_background uzimamo novu vrijednost i postavljamo je kao pozadinsku

boju za klasu .navbar-default. Nakon spremanja i ove datoteke, odite u izbornik Appearance >
Customize te promijenite boju i primijetite promjenu.
Trenutna promjena boje
Dodavanje opcije za boju poveznica

Sekcija je ve prethodno dodana, te sada sve vezano uz navigaciju postavljamo u sekciju wpb3_header. Najprije dodajemo opciju kako bi kasnije mogli povezati kontrolu s opcijom. Tako da
opet u dadoteci customize.php i funkciji register postavite sljedee:
1
2
3
4
5
6
7
8
$wp_customize->add_setting( 'navbar_color',
array(
'default' => '#ffffff',
'transport' => 'postMessage',
)
);
Kako poveznice imaju bijelu boju, ta boja je dodana kao poetna vrijednost te opcije. Zatim
dodajemo kontrolu:
1
2
3
4
5
6
7
8
9
10
232

$wp_customize,
'wpb3_navbar_color',
array(
'label' => __( 'Navbar Text Color', 'wpb3' ),
'settings' => 'navbar_color',
'priority' => 10,
)
) );
Nakon to smo dodali polje, moramo omoguiti da se vrijednost te opciju prikazuje na stranici,
pa stoga u funkciji header_output nakon zadnjeg poziva, dodajte sljedee:
1
2
<?php self::generate_css('.navbar-default .navbar-nav > li > a', 'color',

'navbar_color'); ?>
Pregledavanjem CSS-a, mogue je saznati da poveznice dobivaju boju upravo putem gornjeg CSS
pravila. Ovime se prikazuje promjena na webu, ali kako bi se to mijenjalo dok mi mijenjamo u
administraciji, potrebno je u theme-customizer.js dodati nakon prolog poziva sljedee:
1
2
3
4
5
wp.customize( 'navbar_color', function( value ) {

$('.navbar-default .navbar-nav > li > a').css('color', newval );
} );
} );
Ovime postavljamo vrijednost opcije kao CSS svojstvo color na poveznicama navigacije.
Dodavanje opcije za boju aktivne poveznice

Ako moemo mijenjati boju poveznice u mirujuem stanju, tada moramo dodati mogunost
promjene boje i kada se prelazi miem po poveznici (hover) ili kada je poveznica aktivna. Najprije
dodajemo opciju u funkciji register:
1
2
3
4
5
6
7
8
233
$wp_customize->add_setting( 'navbar_color_hover',
array(
'default' => '#00b3fe',
)
);
Nakon toga dodajemo kontrolu:

1
2
3
4
5
6
7
8
9
10

$wp_customize,
'wpb3_navbar_color_hover',
array(
'label' => __( 'Navbar Text Hover Color', 'wpb3' ),
'settings' => 'navbar_color_hover',
'priority' => 10
)
) );
Kada je kontrola povezana za opcijom i sekcijom, dodajemo i ispis samog CSS pravila u funkciju
header_output:
1
2
3
4
<?php self::generate_css('.navbar-default .navbar-nav > .active > a,

.navbar-default .navbar-nav > .active > a:hover, .navbar-default
.navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li >
a:hover', 'color', 'navbar_color_hover'); ?>
Kako bi se tijekom promjene boje vidjela odmah i promjena na stranici u datoteci themecustomizer.js dodajemo sljedee:
1
2
3
4
5
6
7
8
wp.customize( 'navbar_color_hover', function( value ) {

$('.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover, .navbar-default
.navbar-nav > .active > a:focus, .navbar-default .navbar-nav > li >
a:hover').css('color', newval );
} );
} );
234
Dodavanje polja za otvoreni dropdown

Kada se Bootstrap 3 dropdown odnosno padajui izbornik klikne, otvori se izbornik i poveznica
na izbornik dobije drugu pozadinsku boju. Kako mijenjamo ve tekst poveznica i pozadinu
navigacije, trebalo bi omoguiti i odabir pozadine poveznice koja otvara padajui izbornik.
Najprije pravimo opciju unutar funkcije register:
1
2
3
4
5
6
7
8
$wp_customize->add_setting( 'navbar_dropdown_toggle_color',
array(
'default' => '#e7e7e7',
)
);
te nakon toga dodajemo i kontrolu:

1
2
3
4
5
6
7
8
9
10

$wp_customize,
'wpb3_navbar_dropdown_toggle_color',
array(
'label' => __( 'Navbar Dropdown toggle Background Color', 'wpb3' ),
'settings' => 'navbar_dropdown_toggle_color',
'priority' => 10
)
) );
Zatim u funkciji header_output dodajemo sljedee:

1
2
3
4
<?php self::generate_css('.navbar-default .navbar-nav > .open > a,

.navbar-default .navbar-nav > .open > a:hover, .navbar-default
.navbar-nav > .open > a:focus', 'background-color',
'navbar_dropdown_toggle_color'); ?>
Nakon osiguravanja ispisa te vrijednosti treba osigurati i trenutni prikaz, pa stoga u datoteci
theme-customizer.js dodajte sljedee:
1
2
3
4
5
6
7
235
wp.customize( 'navbar_dropdown_toggle_color', function( value ) {

$('.navbar-default .navbar-nav > .open > a, .navbar-default
.navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open >
a:focus').css('backgroundColor', newval );
} );
} );
Dodavanje opcije za mijenjanje pozadine padajuih

izbornika
Dodajte najprije opciju i kontrolu u funkciju register:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$wp_customize->add_setting( 'navbar_dropdown_color',
array(
'default' => '#384452',
)
);
$wp_customize,
'wpb3_navbar_dropdown_color',
array(
'label' => __( 'Navbar Dropdown background Color', 'wpb3' ),
'settings' => 'navbar_dropdown_color',
'priority' => 10,
)
) );
Nakon toga dodajte u funkciju header_output:

1
2
<?php self::generate_css('.dropdown-menu', 'backgrund-color',

'navbar_dropdown_color'); ?>
Zatim unutar datoteke theme-customizer.js treba kopirati ovo:
1
2
3
4
5
236
wp.customize( 'navbar_dropdown_color', function( value ) {

$('.dropdown-menu').css('backgroundColor', newval );
} );
} );
Dodavanje opcije za mijenjanje pozadine aktivne

poveznice u padajuem izborniku
U funkciji register dodajte sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$wp_customize->add_setting( 'navbar_dropdown_hover_color',
array(
'default' => '#f5f5f5',
'transport' => 'postMessage',
)
);

$wp_customize,
'wpb3_navbar_dropdown_hover_color',
array(
'label' => __( 'Navbar Dropdown background Color on Hover', 'wpb3' ),
'settings' => 'navbar_dropdown_hover_color',
'priority' => 10,
)
) );
te zatim u funkciji header_output dodaj sljedee:

1
2
<?php self::generate_css('.dropdown-menu > li > a:hover, .dropdown-menu >

li > a:focus', 'background-color', 'navbar_dropdown_hover_color'); ?>
Nakon dodavanja mogunosti prikaza novo zapisane vrijednosti potrebno je dodati i javascript
naredbe u datoteci theme-customizer.js:
1
2
3
4
5
6
237
wp.customize( 'navbar_dropdown_hover_color', function( value ) {

$('.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus')
.css('backgroundColor', newval );
} );
} );
Dodavanje sekcije za Footer i opciju za pozadinu

footer-a
Najprije emo dodati sekciju pa stoga sljedee postavite unutar funkcije register:
1
2
3
4
5
6
7
8
$wp_customize->add_section( 'wpb3_footer',
array(
'title' => __( 'WPB3 Footer', 'wpb3' ),
'priority' => 35,
'description' => __('Allows you to customize footer for WPB3.', 'wpb3')
)
);
Nakon to smo dodali sekciju, treba postaviti opciju:

1
2
3
4
5
6
7
8
$wp_customize->add_setting( 'footer_background',
array(
'default' => '#384452',
)
);
Zatim je potrebno dodati i kontrolu:

1
2
3
4
5
6
7
8
9
10

$wp_customize,
'wpb3_footer_background',
array(
'label' => __( 'Footer Background Color', 'wpb3' ),
'section' => 'wpb3_footer',
'settings' => 'footer_background',
'priority' => 10
)
) );
Kako bi se prikazala nova boja u footeru, ako spremimo novu vrijednost, moramo je prikazati na
poetku stranice preko CSS pravila, tako da sljedee treba dodati u funkciju header_output:
1
2
238
<?php self::generate_css('#footerwrap', 'background-color',

'footer_background'); ?>
Da bi se odabrana vrijednost istovremeno pojavila, bez potrebe osvjeavanja stranice, u datoteku

theme-customizer.js treba dodati sljedee:
1
2
3
4
5
wp.customize( 'footer_background', function( value ) {

$('#footerwrap').css('backgroundColor', newval );
} );
} );
Dodavanje opcije za boju teksta u footer-u

Za dodavanje opcije za boju teksta u footeru potrebno je dodati sljedee u funkciji register:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$wp_customize->add_setting( 'footer_color',
array(
'default' => '#bfc9d3',
)
);
$wp_customize,
'wpb3_footer_color',
array(
'label' => __( 'Footer Color', 'wpb3' ),
'settings' => 'footer_color',
'priority' => 10
)
) );
Nakon to se napravila opcija za unos vrijednosti koja e predstavljati boju teksta i kontrolu koja
prikazuje pulje za unos odnosno colorpicker treba unesenu vrijednosti prikazati kao CSS pravilo
pa dodajte sljedee u funkciju header_output:
1
2
<?php self::generate_css('#footerwrap p,#footerwrap i', 'color',

'footer_color'); ?>
Zatim treba dodati u datoteku theme-customizer.js za trenutni prikaz vrijednosti:
1
2
3
4
5
239
wp.customize( 'footer_color', function( value ) {

$('#footerwrap p,#footerwrap i').css('color', newval );
} );
} );
Dodavanje opcije za heading u footer-u

Uz promjenu boje teksta, treba promijeniti i boju naslova svakog widgeta. Naslov se sastoji
od elementa h4 i div.hline-w. Pa najprije, opcija i kontrola u funkciji register trebaju ovako
izgledati:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$wp_customize->add_setting( 'footer_heading',
array(
'default' => 'white',
)
);
$wp_customize,
'wpb3_footer_heading',
array(
'label' => __( 'Footer Color for headings', 'wpb3' ),
'settings' => 'footer_heading',
'priority' => 10
)
) );
Sada dolazi do malo promjene prilikom ispisivanja CSS pravila. Ovdje moramo ispisati pravilo
za sam element h4 ali i za div.hline-w pa stoga u funkciji header_output treba postaviti sljedee:
1
2
<?php self::generate_css('#footerwrap h4', 'color','footer_heading'); ?>

<?php self::generate_css('.hline-w', 'border-color','footer_heading'); ?>
Ovdje se moe primijetiti da smo postavili dva CSS pravila sa dva razliita svojstva ali sa
vrijednosti iste opcije.
Nakon toga, jednako tako, treba izvriti dvije izmjene u datoteci theme-customizer pa stoga
postavite sljedee:
1
2
3
4
5
6
wp.customize( 'footer_heading', function( value ) {

$('#footerwrap h4').css('color', newval );
$('.hline-w').css('border-color', newval );
} );
} );
Ovdje smo upravo za ta dva CSS pravila primijenili na razliita svojstva istu vrijednost.
240
Opcije (Settings API)

Iako se veina toga, vezano za sam izgled stranice, moe postaviti preko Customizer-a, u ovom
kratkom poglavlju napraviti emo jednu stranicu za postavke gdje emo staviti opciju da li e se
prikazivati npr. testimoniali i slike klijenata jer taj dio se prikazuje na vie stranice te je prikaz
postavljen u jednoj funkciji pa je to jednostavno za implementirati.
Opcije se dodaju na slian nain kao to se dodaju nove opcije i polja kod Customizer-a. Kod
WordPress Settings API-a postoje sekcije, polja i opcije. Najprije definiramo sekciju jer se polja
i opcije dodavaju sekcijama. Nakon to je definirana i stvorena sekcija, dodaje se polje za tu
sekciju. Polje je predstavljeno funkcijom koja ispisuje cijelo polje u HTML-u te u toj funkciji i
uzima vrijednost opcije ako je potrebno. Opcije zatim definiramo tako da joj dajemo nekakav id
tj. slug, sekciju kojoj pripada te, ako hoemo, funkciju koja e provjeravati unesenu vrijednost.
Za poetak, stvorit emo novu datoteku settings.php i spremiti je u wpb3/inc te pozvati u datoteci
functions.php. Kako bi mogli dodavati opcije, potrebno je imati i stranicu u izborniku gdje emo
dodati formu sa opcijama.
Stranica u izborniku dodaje se pomou funkcije add_menu_page:
1
2
add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, \

$icon_url, $position );
gdje:
page_title - tekst koji se prikazuje kao naziv stranice u pregledniku

menu_title - tekst koji se prikazuje na ekranu
capability - uloge odnosno mogunost koje korisnik mora imati da bi vidio ovu stranicu
menu_slug - tekst odnosno rije preko kojega se moe pristupiti ovoj stranici
function - funkcija koja sadri cijelu strukturu stranice
icon_url - ikona koja se prikazuje uz stranicu u izborniku
position - pozicija u izborniku
Stoga, kopirajte sljedei sadraj unutar datoteke settings.php:
http://codex.wordpress.org/Settings_API
http://codex.wordpress.org/Function_Reference/add_menu_page
242
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
function wpb3_settings_menu(){
add_menu_page(
'WPB3 Options',
'WPB3 Options',
'manage_options',
'wpb3_settings_menu',
'wpb3_settings_menu_display',
'' );
}
add_action('admin_menu', 'wpb3_settings_menu' );
function wpb3_settings_menu_display(){
echo "WPB3 Options";
}
Dodana stranica u izborniku
Nakon to smo dodali stranicu zamijeniti emo funkciju wpb3_settings_menu_display sa sljedeim:

1
2
3
4
5
6
7
8
9
10
11
?>
<div class="wrap">
<h2>WPB3 Options</h2>
<form method="post" action="options.php">
</form>
</div>
<?php
}
Prije dovravanja ove funkcije koja e prikazati cijelu formu i polja, potrebno je napraviti sekcije,
polja i opcije.
Dodavanje sekcije (Settings Section)

Sekcije se dodavaju pozivom funkcije add_settings_section:
http://codex.wordpress.org/Function_Reference/add_settings_section
243
add_settings_section( $id, $title, $callback, $page );
gdje varijable oznaavaju:

id - identifikator sekcije po kojemu emo eljenu sekciju pozivati. To treba biti rije bez
razmaka i posebnih znakova
title - naslov sekcije
callback - funkcija koja e ispisati sadraj sekcije kao npr. opis sekcije
page - stranica na kojoj e se prikazati. To treba biti menu_slug.
Da bi dodali sekcije, polja i opcije potrebno je definirati funkciju koja e sadravati sve
te definicije te je pozvati u administrativnom dijelu WordPress-a. Stoga, na kraj datoteke
settings.php postavite sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function wpb3_sections_fields_settings(){
add_settings_section(
'wpb3_section',
'WPB3 Options',
'wpb3_html',
'wpb3_settings_menu'
);
}
add_action('admin_init','wpb3_sections_fields_settings');
function wpb3_html(){
echo "WPB3 Section Description";
}
U gornjem kodu definirali smo funkciju koju pozivamo u administrativnom dijelu WordPress-a
preko akcije admin_init. Unutar te funkcije pozvali smo funkciju za izradu sekcija add_settings_section gdje smo definirali identifikator, naslov, funkcije za prikaz te izbornik na kojem se nalazi
ta sekcija. Nakon toga, definirana je funkcija wpb3_html koja predstavlja funkciju za prikaz te
sekcije.
Dodavanje polja (Settings Field)

Nakon izrade sekcije potrebno je izraditi polja koja pripadaju izraenoj sekciji. Polja se dodavaju
pozivom funkcije add_settings_field:
http://codex.wordpress.org/Function_Reference/add_settings_field
244
add_settings_field( $id, $title, $callback, $page, $section, $args );
gdje su:
id - identifikator polja. Ima isto znaenje kao i kod sekcije.

title - naziv polja
callback - funkcija koja ispisuje polje
page - stranica na kojoj se to polje prikazuje
section - sekcija u kojoj se to polje prikazuje. Parametar nije nuan.
args - dodatni parametri koji se mogu koristiti i u funkciji pod callback. Tako neto moe
biti array(label_forid_polja). Ovaj parametar nije nuan.
Iako polje nije potrebno dodati sekciji, bolje je dodati polje sekciji jer se lake odreuje to gdje
pripada. Stoga, na kraju funkcije wpb3_sections_fields_settings dodajte sljedee:
1
2
3
4
5
6
7
8
add_settings_field(
'wpb3_testimonial_clients',
'Show Testimonials and Clients Logos',
'wpb3_testimonial_cleints_html',
'wpb3_section'
);
Jo je potrebno definirati funkciju koju pozivamo u gornjoj funkciji kao callback funkciju. Iako
nismo jo dodali opciju, potrebno je znati kako e se zvati opcija ako elimo odmah stvoriti html
polje unutar pozvane funkcije za prikaz. Neka naziv odnosno slug opcije bude wpb3_field. Na
kraju datoteke settings.php dodajte sljedee:
1
2
3
4
5
6
7
function wpb3_testimonial_cleints_html(){
$option = get_option('wpb3_field');
?>
<input type="checkbox" value="1" <?php checked("1", $option ); ?>
name="wpb3_field" />
<?php
}
U gornjoj funkciji najprije pozivamo opciju, ako postoji, sa funkcijom get_option. Nakon
toga, ispisujemo polje koje je tipa checkbox jer nam je to dovoljno za odluivanje da li
e se neto prikazati. Unutar tog polja pozivamo WordPress funkciju checked koja ispisuje
checked=checked ako su usporeene vrijednosti jednake.
http://codex.wordpress.org/Function_Reference/get_option
245
Dodavanje opcije (Setting)

Nakon definiranja sekcije i polja potrebno je registrirati opciju pod ijim imenom e se spremati
unesene vrijednosti. Prilikom registracije koristi se funkcija register_setting:
1
register_setting( $option_group, $option_name, $sanitize_callback );
gdje parametri oznaavaju:

option_group - grupu opcija koja se poziva na settings_field. Mora postojati prije nego
se stvara opcija.
option_name - ime opcije koju zatim pozivamo get_option
sanitize_callback - funkcija koja se poziva prilikom spremanja kako se provjerila ispravnost unesenih vrijednosti.
Na kraju funkcije wpb3_sections_fields_settings dodajte sljedee:
1
2
3
4
5
register_setting(
'wpb3_fields',
'wpb3_field'
);
Ovime smo dodali opciju u wpb3_fields te postavili naziv opcije wpb3_field koja je pozvana
prilikom stvaranja polja i poglavlju Dodavanje polja (Settings Field).
Prikaz polja i sekcija

Kako bi prikazali polja i sekcije potrebno je koristiti funkcije unutar WordPress Settings APIa koje slue za prikazivanje polja i sekcija. Najprije se koristi settings_fields koja ispisuje
WordPress nonce vrijednosti, akciju i polja, iako se ona ne vide ve se u pozadini izvravaju
tj. izvrava se spremanje tih vrijednosti. Za ispisivanje se koriste funkcije do_settings_sections
ili do_settings_fields. U ovom sluaju koristimo sekcije pa emo koristiti prvu spomenutu.
Funkciju wpb3_html zamijenite sa sljedeim:
http://codex.wordpress.org/Function_Reference/register_setting
http://codex.wordpress.org/Function_Reference/settings_fields
http://codex.wordpress.org/Function_Reference/settings_fields
http://codex.wordpress.org/Function_Reference/do_settings_sections
http://codex.wordpress.org/Function_Reference/do_settings_fields
246
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
?>
<div class="wrap">
<h2>WPB3 Options</h2>
<?php settings_errors(); ?>
<form method="post" action="options.php">
<?php settings_fields('wpb3_fields' ); ?>
<?php do_settings_sections('wpb3_settings_menu' ); ?>
<?php submit_button(); ?>
</form>
</div>
<?php
}
Uz spomenute funkcije, dodali smo gumb sa funkcijom submit_button te pri vrhu stranice
pozvali smo fukciju settings_errors koja ispisuje poruke ako je dolo do pogreke ili ako su opcije
spremljene.
Prikazana sekcija i polje
Izmjena prikaza testimonialsa i slike klijenata

Testimonalsi i slike klijenata prikazuju se preko funkcije wpb3_testimonials_and_clients koja se
nalazi u datoteci functions.php. Pronaite spomenutu funkciju unutar datoteke functions.php i
na poetku funkcije preuzmite vrijednost opcije wpb3_field. Zatim provjerite da li je vrijednost
te opcije jednaka jedinici (1) te ako je, tek onda neka se provede ostali dio funkcije pa stoga
poetak funkcije wpb3_testimonials_and_clients izgleda ovako:
1
2
3
4
247
$showThem = get_option( 'wpb3_field' );
if($showThem == "1"){
a kraj funkcije izgleda ovako:

1
2
}
}
Sada se testimonialsi i slike klijenata ne prikazuju jer je poetna vrijednost opcije jednaka . No,
ako sada odemo pod administrativni dio te pod izbornikom odaberemo WPB3 Options i zatim
odaberemo da se prikazuju testimonialsi i slike klijenata, opet e se na stranici prikazati taj dio
teme.
Koritenje AJAX-a u WordPress-u

AJAX je Javascript tehnologija koja omoguuje web stranici dohvaanje podataka i prikazivanje
istih bez potrebe za osvjeavanjem stranice.
Prilikom koritenja AJAX tehnologije alju se podaci u JSON formatu. Prilikom koritenja AJAXa definiramo i akciju koja se koristi kao npr.:
1
2
3
4
var data = {
'action':'moja_akcija',
'neki_podatak':'Nekakav Podatak'
}
Kada se preko jQuery-a koristi AJAX i alje JSON u ovom formatu tada moemo pristupiti
podacima kao npr.:
1
$_POST['neki_podatak'];
Akciju koju definiramo u JSON-u moemo pristupiti preko WordPress akcija:

1
2
add_action('wp_ajax_moja_akcija','funkcija_za_akciju');
add_action('wp_ajax_nopriv_moja_akcija', 'funkcija_za_akciju');
Na ovaj nain prilikom izvravanja AJAX upita, pozvati e se funkcija funkcija_za_akciju.

WordPress akcija wp_ajax_nopriv_ime_akcije_u_ajax_pozivu omoguuje izvravanje funkcije
i za korisnike koji nisu prijavljeni na stranici. Rije nopriv oznaava no privileges pa po tome
ova funkcija se moe izvriti iako korisnik nije prijavljen. Pri tome je potrebno pripaziti da se
ne izvri neka funkcija koja bi mogla ugroziti stranicu odnosno funkcija koja zahtjeva neke
privilegije.
Prilikom izvravanja AJAX upita potrebno je definirati i na koji URL e se izvriti AJAX upit.
Za URL je potrebno koristiti admin-ajax.php. Potrebno je definirati javascript varijablu koja e
sadravati cijelu putanju do te datoteke, a to se moe dobiti preko WordPress funkcije admin_url(
admin-ajax.php ). U administrativnom dijelu WordPress-a, sam WordPress koristi AJAX te je
varijabla ajaxurl definirana i moe se koristiti. U javnom dijelu stranice, varijablu je potrebno
definirati. Ona je automatski definirana ako se koriste neki WordPress dodaci (pluginovi) koji
koriste AJAX, kao npr. Buddypress. Definiranje vrijednosti varijable ajaxurl i prikazivanje na
javnoj stranice mogue je preko sljedee funkcije:
1
2
249
wp_localize_script( 'my-ajax-handle', 'ajaxurl',

admin_url( 'admin-ajax.php' ) );
U ovoj funkciji skripta my-ajax-handle je registrirana i pozvana preko wp_enqueue_script, dok

preko wp_localize_script se dodjeljuju ostali podaci koji se mogu koristiti pa tako i varijabla
ajaxurl kojoj dodjeljujemo putanju do datoteke admin-ajax.php.
AJAX u administrativnom dijelu

AJAX u administrativnom dijelu moe se koristiti za razliite stvari. Jedna od toga moe biti
i spremanje opcija ali i ostalih stvari kao npr. dohvaanje podataka i prikazivanje istih na
dashboardu odnosno poetnom ekranu WordPress administracije. Jedan od dobrih primjera je
stvaranje nekakvih listi u opcijama.
Za primjer napraviti emo u postojeim opcijama, novu opciju koja e spremati sve ID podatke
od Portfolio sadraja te e predstavljati Featured Portfolio sadraj koji emo zatim prikazivati
unutar widgeta kojeg emo isto tako stvoriti.
Dodavanje elemenata preko AJAX-a

Za poetak, treba dodati na kraju funkcije wpb3_sections_fields_settings unutar datoteke settings.php sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
add_settings_field(
'wpb3_featured_items',
'Featured Portfolio Items',
'wpb3_featured_items_html',
'wpb3_section'
);
register_setting(
'wpb3_fields',
'wpb3_featured'
);
Ovime smo dodali funkcija koja prikazuje polje i funkciju koja registrira opciju kako bi mogli
zapisivati vrijednost polja iz funkcije add_settings_field. Portfolio sadraj odabirati e se preko
HTML elementa select koji e u sebi sadravati sve mogue odabire. Tako emo za svaki dodani
sadraj ispisati select sa svim moguim sadrajima ali e kao odabrani sadraj imati prikazan
portfolio sadraj koji je bio odabran. Uz sve select-e postojati e gumb koji e dodavati novi
element select kako bi mogli dodati novi portfolio sadraj. Pritiskom na gumb, pozvati e se
AJAX koji e zatim koristiti funkciju koja e dodati novi element select.
250
Sve podatke odabrane u elementima select spremati e se kao polje (array), tako da e svaki
element select u atributu name imati isti naziv, a to je naziv opcije wpb3_featured uz [] to e
oznaavati dodavanje u polje.
Stoga, na kraju datoteke settings.php dodajte:
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
function wpb3_featured_items_html(){
?>
<div id="item-list">
</div>
<span class="addItem button button-primary" >+</span>
<script type="text/javascript">
jQuery('.addItem').on('click',function(){
jQuery.ajax({
url: ajaxurl,
data: {
'action': 'get_items'
},
success: function(response){
jQuery("#item-list").append(response);
}
});
});
</script>
<?php
}
U funkciji se nalazi div#item-list u kojem emo dodavati nae elemente select. Nakon toga, dodan
je element span sa klasom .addItem koja e se koristiti u javascriptu gdje emo pratiti pritiske.
Zatim otvaramo element script u kojemu najprije veemo element span.addItem na metodu
click te odreujemo da e se kada se pritisne taj element napraviti AJAX upit gdje je putanja
do datoteke na kojoj se vri AJAX upit sadrana u varijabli ajaxurl. Sa upitom, prosljeujemo i
podatak u JSON-u kao action:get_items. Zatim postavljamo funkciju koja e se izvriti kada
AJAX upit bude uspjean. Izlaz koji e se dobiti iz AJAX-a postavljamo kao zadnji element unutar
elementa div#item-list.
Potrebno je definirati WordPress akciju koja e izvriti funkciju iji sadraj je zapravo novi
element select koji sadri sve mogue odabire Portfolio sadraja. Stoga, na kraj datoteke
settings.php dodajte:
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
251
add_action( 'wp_ajax_get_items', 'add_items' );

function add_items(){
$args = array(
'post_type'
=> 'portfolio',
);
if($projects->have_posts()):
?>
<select name="wpb3_featured[]">
<?php
while($projects->have_posts()): $projects->the_post();
echo "<option value='".get_the_ID()."'>".get_the_title()."</option>";
endwhile;
?>
</select>
<span class="removeItem button button-secondary" >« Remove</span>
<br/>
jQuery('.removeItem').on('click',function(){
var select = jQuery(this).prev("select");
select.remove();
jQuery(this).remove();
});
</script>
<?php
else: ?>
There are no posts.
<?php
endif;
die();
}
Ovime smo dodali akciju koja se prilikom AJAX upita pokree i izvrava funkciju add_items
gdje dobavljamo sve Portfolio projekte i ako postoji barem jedan, ispisujemo element select
iji je atribut name=wpb3_featured[] kako bi mogli zapisivati vie podataka za isti naziv
252
odnosno za istu opciju. Za svaki projekt ispisujemo element option koji sadri kao vrijednost,
ID od sadraja te naslov kako bi znali koji Portfolio projekt elimo odabrati. Uz element select
dodajemo novi element span.removeItem preko kojega emo omoguiti brisanje dodanog
elementa select. Zatim smo definirali element script koji definira postupak kod pritiska na
element span.removeItem pri kojem emo uzeti select lijevo od elementa span.removeItem
i obrisati ga, te zatim obrisati i sam span.removeItem. Ako nema niti jednog projekta, ispisati
e se samo poruka There are no posts.
U ovom stanju, mogue je dodavati elemente select i odabrati projekte te spremati ih. Ali
nije mogue vidjeti ve spremljene projekte i brisati ih. Kako bi omoguili prikaz ve dodanih
projekata, potrebno je definirati varijablu koja e sadravati sve mogue projekte. Zatim, za
svaki spremljeni Featured Projekt treba stvoriti elemente select u kojemu unosimo sve mogue
projekte te zatim preko WordPress funkcije selected emo prikazati odabranu opciju u svakom
elementu select. Uz svaki select dodati emo i novi gumb za brisanje tog elementa.
Stoga, funkciju wpb3_featured_items_html zamijenite sa sljedeim:
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
function wpb3_featured_items_html(){
$args = array(
'post_type'
=> 'portfolio',
);
$featured = get_option( 'wpb3_featured' );
?>
<div id="item-list">
<?php
if(!empty($featured)) {
foreach ($featured as $item) {
?>
<select name="wpb3_featured[]">
<?php
while($projects->have_posts()): $projects->the_post();
echo "<option value='".get_the_ID()."' ".
selected(get_the_ID(),$item,false).">".get_the_title()."</option>";
endwhile;
?>
</select>
<span class="removeItem button button-secondary" >«
Remove</span><br/>
<?php
}
http://codex.wordpress.org/Function_Reference/selected
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
253
}
?>
</div>
<span class="addItem button button-primary" >+</span>
jQuery('.addItem').on('click',function(){
jQuery.ajax({
url: ajaxurl,
data: {
'action': 'get_items'
},
jQuery("#item-list").append(response);
}
});
});
jQuery('.removeItem').on('click',function(){
var select = jQuery(this).prev("select");
select.remove();
jQuery(this).remove();
});
</script>
<?php
}
Ovdje smo na poetku funkcije dobili sve mogue projekte te opciju wpb3_featured. Nakon
toga unutar div#item-list provjeravamo da li je prazna vrijednost varijable featured te ako nije, za
svaku vrijednost te opcije postavljamo novi element select koji u sebi sadri sve mogue projekte.
A kod svakog projekta, ispisuje se element option koji u sebi koristi i WordPress funkciju selected
gdje se usporeuje ID projekta sa ID-em vrijednosti opcije tj. varijable featured. Ako su iste
vrijednosti oba ID-a, dodaje se selected=selected.
Nakon to je pojedini select stvoren, uz njega se stvara i novi element span.removeItem kao
to je i u funkciji add_items te se koristi za istu funkciju, a to je brisanje elementa select koji je
lijevo od tog gumba.
U elementu script dodali smo novu definiciju jQuery click metode koja je jednaka kao u funkciji
add_items.
Sada je mogue dodavati nove projekte kao Featured Projekte, brisati ih te dobiti ispis ve
dodanih projekata. Nakon to je sve to uraeno, potrebno je to negdje i prikazati pa emo stoga
254
napraviti novi widget koji e prikazivati odabrane projekte.
Prikaz dodanih elemenata u widgetu

Stvorite novu datoteku widget-featured.php i spremite je u wpb3/inc. Zatim kopirajte cijeli
sadraj iz datoteke widget-posts.php te je pozovite unutar datoteke functions.php:
1
require_once 'inc/widget-featured.php';
Na poetku datoteke widget-featured.php zamijenite postojee sa sljedeim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
/**
* Featured Portfolio Widget
*
* Theme: WPB3
*
* @since 2.8.0
*/
class WPB3_Widget_Featured_Portfolio extends WP_Widget {
'classname' => 'widget_featuredPortfolio',
'description' => __( "A list of featured Portfolios for WPB3.",
'wpb3' ) );
parent::__construct('wpb3_eaturedPortfolio', __('WPB3 Featured Portfolio',
'wpb3'),
$widget_ops);
}
Funkcije form i update sadre postupke kod unosa i spremanja naziva i informaciju o prikazu
slika. Oboje nam moe posluiti i kod naih featured projekata, stoga emo to ostaviti kako i je.
Jedino to jo treba zamijeniti je funkciju widget. Zamijenite funkciju widget sa sljedeom:
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
255

extract( $args );
$title = apply_filters('widget_title', empty( $instance['title'] ) ?
__( 'Recent Posts' ) : $instance['title'], $instance, $this->id_base);
$featured = get_option( 'wpb3_featured' );
if(!empty($featured)){
if($title)
$recentPosts = new WP_Query( array(
'post__in' => $featured,
'post_type' => 'portfolio'
) );
<li>
<?php if(has_post_thumbnail() && $showThumbs) { ?>
<?php the_post_thumbnail(array(70,70)); ?>
</a>
<?php } ?>
<p><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></p>
<em>Posted on <?php echo get_the_date(); ?></em>
</li>
<?php endwhile; ?>
</ul>
<?php
endif;
echo $after_widget;
}
}
U funkciji widget uzeli smo vrijednost opcije wpb3_featured te smo ispitali da li je prazna. Ako
nije prazna, izvodi se ostatak funkcije. Dodatna promjena u ovoj funkciji bila je promjena u
parametrima WP_Query-a gdje smo postavili parametar post__in koji sadri u polju sve IDe sadraja koji nam treba, a to je tono vrijednost varijable featured. Jo jedan parametar koji
256
je trebalo postaviti je post_type jer bi inae WP_Query gledao na sadraj tipa post umjesto
portfolio.
Zadnje to preostaje jest registrirati taj widget, pa stoga funkciju wpb3_recentPosts_register
zamijenite sa:
1
2
3
4
5
function wpb3_featuredPortfolio_register() {
register_widget('WPB3_Widget_Featured_Portfolio');
}
te na isti nain zamijenite i WordPress akciju:

1
add_action('init', 'wpb3_featuredPortfolio_register', 1);
Dodajte novi widget u prostor za widgete koji vi odluite te pogledajte Featured Projekte. Ako
ih nema, widget se nee vidjeti odnosno prikazati pa dodajte nekoliko projekta u opcijama.
Ako dodate u opcijama vie puta isti projekt, prikazati e se samo jednom. Nema smisla
prikazivati vie puta isti projekt u Featured dijelu.
AJAX na javnoj strani (Front End)

U ovom poglavlju napraviti emo mali sustav sa kojim e korisnici stranice moi dati + projektu
koji im se svia. Tako emo imati projekte koji e imati vee ocjene i projekti koji e imati
manje ocjene, pa na temelju tih ocjena mogu se prikazati najbolje ili najloije ocjenjeni projekti
u widgetu.
Prilikom izrade ovakvog sustava treba odrediti da li e moi ocjenjivati samo prijavljeni korisnici
ili mogu svi ocjenjivati. Ako mogu samo prijavljeni korisnici, onda spremamo njihove ocjene
odnosno ID sadraja koje su ocjenili sa + kako ne bi vie puta ocjenili isti projekt. Ako se ipak
odlui da mogu svi korisnici ocjenjivati, tada se za korisnike koji nisu prijavljeni, treba koristiti
cookie koji e u web pregledniku spremati informaciju o ocjenjivanju. Jednako tako, moe se
koristiti posebna tablica koja bi biljeila IP adresu korisnika i sl. kako bi se anonimni korisnici
bolje pratili.
Kako bi ocjenjivanje bilo to autentinije, ocjenjivanje e biti mogue samo za prijavljene
korisnike jer ostali korisnici mogu i obrisati svoju memoriju preglednika ime se i sam cookie
brie. Time bi se omoguilo ponovno ocjenjivanje istog projekta sa stranice neprijavljenog
korisnika.
Postavljanje gumba za ocjenu

Otvorite datoteku single-portfolio.php i pronaite
257
i zamjenite je sa ovim:
1
2
3
4
5
6
7
8
9
<h4>
Project Details
<div class="btn-group">
<span id="voteUp" class="btn btn-success">
<span class="glyphicon glyphicon-heart "></span>
</span>
<span id="voteResult" class="btn btn-primary">345</span>
</div>
</h4>
Za ove gumbe koristili smo Button Groups iz Bootstrap 3 CSS komponenta. Kada korisnik bude
ocjenio projekt, klasu btn-success pretvoriti emo u btn-danger kako bi prikazali promjenu te na
temelju tih dviju klase raditi emo razliite funkcije. Ako je klasa btn-success, koristi se funkcija
za dodavanje ocjene, ako je klasa btn-danger, koristi se funkcija za smanjenje ocjene odnosno za
brisanje svoje ocjene.
Postavljanje jQuery funkcije za AJAX

Potrebno je definirati funkciju unutar datoteke custom.js koja se nalazi u wpb3/assets/js. Funkcija
e u sebe morati prosljeivati ID projekta te ID prijavljenog korisnika kako bi se taj ID mogao
upisati u bazu i provjeriti da li je ve taj korisnik ocijenio projekt. Nazvati emo ju vote pa
stoga otvorite ponovo datoteku single-portfolio.php i u element span#voteUp dodaje novi atribut
onClick=vote(0,0);:
1
2
...
<span id="voteUp" onClick="vote(0,0);" ...
Iako sada ne prosljeujemo tone podatke u funkciju vote, kada se bude do kraja definirala
funkcija vote uz ostale funkcije koje su potrebne da bi se mogle ocjene podizati i smanjivati,
prosljediti emo tone podatke. Kako bi krenuli sa definiranjem funkcije vote, otvorite datoteku
custom.js u folderu wpb3/assets/js i na kraju te datoteke stvorite funkciju:
1
2
3
function vote(post_id, user_id){

}
Prije nego se izvode sve potrebne naredbe u funkciji vote treba provjeriti da li je korisnik
prijavljen. To emo uiniti sa funkcijom get_current_user_id, pa stoga najprije promijenimo
datoteku single-portfolio.php na dijelu datoteke gdje smo dodali gumb za ocjenjivanje.
http://codex.wordpress.org/Function_Reference/get_current_user_id
1
2
3
4
5
6
7
8
9
258
...
<?php
$userID = get_current_user_id();
?>
<span onclick="vote(<?php the_ID(); ?>,<?php echo $userID; ?> );"
id="voteUp" ...
Na ovaj nain smo prosljedili u funkciju vote, dva parametra i to: ID sadraja i ID korisnika.
Funkcija get_current_user vraa nulu (0) ako nema prijavljenog korisnika. Stoga, u funkciji vote
iz datoteke wpb3/assets/js dodajte sljedei dio:
1
if(user_id == 0) return;
Nakon toga treba razraditi dio prilikom dizanja ili brisanja svoje ocjene. Kada se pritisne
span#voteUp treba pogledati da li ima klasu npr. btn-danger te ako ima znamo da je ve projekt
ocijenjen sa ove strane korisnika. Tada treba maknuti tu istu klasu te postaviti novu btn-success.
Nakon toga e se pozvati AJAX upit i vratiti novi broj ocjena koja e zamijeniti postojei broj. U
AJAX upit potrebno je poslati akciju koja e se koristiti, ID sadraja tj. projekta te ID prijavljenog
korisnika. Sljedei dio kopirajte u funkciju vote:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var voteAction = 'vote_up';

var THIS = jQuery("#voteUp");
if(THIS.hasClass("btn-danger")){
THIS.removeClass("btn-danger");
THIS.addClass("btn-success");
voteAction = 'vote_down';
} else {
THIS.addClass("btn-danger");
THIS.removeClass("btn-success");
}
jQuery.ajax({
url: ajaxurl,
data: {
'action' : voteAction,
'post_id' : post_id,
'user_id' : user_id
},
jQuery("#voteResult").html(response);
23
24
25
26
27
28
29
30
31
32
33
34
35
36
259
},
error: function(response){
if(THIS.hasClass("btn-danger")){
THIS.removeClass("btn-danger");
THIS.addClass("btn-success");
} else {
THIS.addClass("btn-danger");
THIS.removeClass("btn-success");
}
alert("Dolo je do pogreke prilikom ocjenjivanja");
}
});
Nakon to smo provjerili da postoji prijavljeni korisnik tj. da user_id nije jednak nuli, definiraju
se varijable voteAction koja sadri naziv akcije za AJAX upit te THIS koji sadri cijeli DOM
element span#voteUp. Zatim se provjerava taj DOM te ako ima klasu btn-danger, brie se ta
klasa i dodaje se klasa btn-success te se vrijednost varijable voteAction mijenja u vote_down
kako bi smanjili ocjenu projekta tj. obrisali svoju ocjenu. U suprotnom, DOM ima klasu btnsuccess te dodaje klasu btn-danger i brie btn-success. Zatim poziva se AJAX upit preko
jQuery.ajax() koji kao parametre uzima url, data, success i error.
Parametar url u AJAX upitu predstavlja putanju do datoteke admin-ajax.php. Parametar data
sadri sve podatke koji se prosljeuju preko AJAX upita i to u formatu JSON. Zatim je tu i
parametar success koji koristi funkciju u kojoj se, ako AJAX upit uspije, puni tekst od elementa
span#voteResult sa tekstom koji je zapravo response. Ako ne uspije AJAX upit, koristi se
parametar error koji vraa natrag CSS klase koje su se promijenile na poetku funkcije vote.
Uz promjenu klasa, funkcija vraa tzv. alert koji javlja da je neto polo po zlu.
Parametre url, post_id i user_id slati e se preko metode GET pa emo u funkcijama koje poveavaju ili smanjuju ocjenu dohvaati post_id i user_id preko $_GET[post_id] i $_GET[user_id].
Funkcije za poveavanje ili smanjivanje ocjene

Nakon to je postavljena funkcija koja vri AJAX upit na stranici, potrebno je definirati funkcije
koje e vriti poveanje ili smanjivanje ocjene. Za poetak, definirati emo dvije WordPress
akcije koje e se pozivati samo ako je korisnik prijavljen. Stoga, na kraju datoteke functions.php
postavite sljedee:
1
2
add_action( 'wp_ajax_vote_up', 'wpb3_vote_up' );

add_action( 'wp_ajax_vote_down', 'wpb3_vote_down' );
Ako bi omoguili ocjenjivanje i neprijavljenim korisnicima, koristile bi se i akcije wp_ajax_nopriv_{imeAkcije}. Ovdje smo dodali akcije iji je kraj jednak kao vrijednost varijable voteAction
unutar datoteke custom.js, a to su vote_up, ako je aktivna klasa btn-success, i vote_down, ako
je aktivna klasa btn-danger. Nakon toga postavite sljedee u istoj datoteci:
1
2
3
4
5
6
7
260
function wpb3_vote_up(){
}
function wpb3_vote_down(){
}
Ove dvije funkcije pozvati e se kada se pozovu WordPress akcije koje su prethodno definirane.
Unutar funkcije wpb3_vote_up postavite sljedee:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$post_id = $_GET['post_id'];
$user_id = $_GET['user_id'];
$votes = get_post_meta( $post_id, '_wpb3_vote', true );
$userVotes = get_post_meta( $post_id, '_wpb3_uservote', true );
if($userVotes == null || $userVotes == ""){ $userVotes = array(); }
$found = array_search($user_id,$userVotes);
if(is_array($userVotes) && $found === false ){ $userVotes[] = $user_id; }
update_post_meta($post_id, '_wpb3_uservote', $userVotes);
if($votes == "" || $votes == null) { $votes = 0; }
$votes++;
update_post_meta( $post_id, '_wpb3_vote', $votes );
echo $votes;
die();
Ovdje najprije dohvaamo dvije vrijednost koje su prosljeene tijekom AJAX upita. Nakon
toga dohvaamo dva meta podatka iz sadraja, _wpb3_vote i _wpb3_uservote, a zatim
provjeravamo da li je varijabla userVotes prazna, te ako je prazna, pretvaramo je u polje. Kako
je potrebno dodati ID korisnika u meta podatak projekta, potrebno je i pregledati polje kako ne
bi spremali vie puta isti ID. Zbog toga, koristimo array_search kako bi pretraili dobiveno
polje za dobivenim ID-em prijavljenog korisnika. Nakon to je pretraeno polje provjeravamo
da li je varijabla userVotes polje te da li je varijabla found jednaka false-u jer bi to znailo
da nije pronaen ID korisnika unutar polja sa svim ID-evima korisnika. Ako nije pronaen ID
unutar polja, dodaje se taj ID korisnika u polje. Kako je sada aurirano polje odnosno varijabla
userVotes, tu vrijednost moemo odmah unijeti u bazu. Za to koristimo update_post_meta gdje
prosljeujemo ID sadraja tj. projekta, klju pod kojim spremamo taj meta podataka te vrijednost
podatka.
http://www.w3schools.com/php/func_array_search.asp
261
Zatim provjeravamo da li je varijabla votes u koju smo spremili broj ocjena iz meta podatka
sadraja, prazna te ako je prazna postavlja se vrijednost te varijable na nulu (0). Nakon toga,
poveavamo broj ocjena za 1. Kada se vrijednost varijable poveala, spremamo je odnosno
auriramo preko funkcije update_post_meta. Nakon toga, ispisujemo broj ocjena i koristimo
funkcije die(); kako bi izbjegli ispis 0 na kraju.
Funkcija za smanjivanje ocjene je veoma slina:
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
function wpb3_vote_down(){
$post_id = $_GET['post_id'];
$user_id = $_GET['user_id'];
$votes = get_post_meta( $post_id, '_wpb3_vote', true );
$userVotes = get_post_meta( $post_id, '_wpb3_uservote', true );
if(is_array($userVotes)){
$key = array_search($user_id,$userVotes);
if($key!==false){
unset($userVotes[$key]);
}
}
update_post_meta($post_id, '_wpb3_uservote', $userVotes);

if($votes > 0){ $votes--; }
update_post_meta( $post_id, '_wpb3_vote', $votes );

echo $votes;
die();
}
U ovoj funkciji, prva razlika je izvedba oko ID-a korisnika. Nakon to smo dobili vrijednost
polja sa ID-evima korisnika u varijablu userVotes, provjeravamo userVotes ako je polje. Ako je
zadovoljen uvjet, koristi se ponovno funkcija array_search te ako vrijednost te funkcije nije false,
znai da smo pronali ID korisnika koji ocjenjuje. Ovom funkcijom dobili smo mjestu u polju
gdje se nalazi ID korisnika kojeg traimo. Nakon toga, koristimo funkcije unset kako bi izbrisali
vrijednost tog mjesta u polju userVotes. Time je aurirano polje userVotes pa auriramo i meta
podataka sadraja sa svim preostalim ID-evima korisnika koji su ocjenili projekt.
Zatim provjeravamo da li je varijabla votes prazna, te ako je prazna postavljamo je na nulu (0),
kao i u funkciji za poveavanje ocjene. Nakon toga, provjeravamo da li je varijabla votes vea
262
od nule, te ako je vea od nule, smanjujemo vrijednost varijable votes za 1. Nakon auriranja
varijable votes, auriramo i meta podatak tog sadraja te nakon toga ispisujemo vrijednost
varijable votes. Zatim koristimo funkciju die za prestanak izvoenja kako ne bi dobili nulu(0)
kao izlaz.
Sreivanje javnog dijela

Nakon to su definirane varijable za poveavanje i smanjivanje ocjene potrebno je jednako
tako srediti i javni dio toga kako korisnik koji je ve ocjenio nema mogunost ponovnog
poveanja ocjene ve smanjenja ocjene. Otvorite datoteku single-portfolio.php te dio sa gumbom
promijenite u:
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
<?php
$userID = get_current_user_id();
$userVotes = get_post_meta( get_the_ID(), '_wpb3_uservote', true );
$voted = false;
if(is_array($userVotes)){
$found = array_search($userID, $userVotes);
if($found !== false ){
$voted = true;
}
}
$classBTN = "btn-success";
if($voted){ $classBTN = "btn-danger"; }
$disabled = "";
if($userID == 0 || $userID == "0" ){ $disabled = "disabled"; }
?>
<span onclick="vote(<?php the_ID(); ?>,<?php echo $userID; ?> );"
id="voteUp" class="btn <?php echo $classBTN." ".$disabled; ?> ">
<span class="glyphicon glyphicon-heart "></span>
</span>
<?php
$votes = get_post_meta(get_the_ID(), '_wpb3_vote', true);
?>
<span id="voteResult" class="btn btn-primary"><?php echo $votes; ?></span>
</div>
Najprije dohvaamo ID trenutno prijavljenog korisnika te zatim meta podatak koji sadri u polju
sve ID-e korisnika koji su ocjenili projekt. Nakon toga, definira se varijabla voted i postavlja na
263
false kako bi za poetnu vrijednost oznaavala da korisnik nije glasao. Zatim provjeravamo da
li je varijabla userVotes polje te ako je, pretraujemo polje za ID-em prijavljenog korisnika. Ako
je pronaen ID unutar varijable userVotes, vrijednost varijable voted postavlja se na true to
oznauje da je korisnik ve ocjenio projekt.
Zatim definiramo klasu classBTN koja e se koristiti za poetno ispisivanje klase btn-success ili
btn-danger. Ako je korisnik ve ocjenio projekt, klasa e biti btn-danger dok e u suprotnom
biti btn-success.
Jednako tako, treba onemoguiti glasanje i izgledom onim korisnicima koji nisu prijavljeni
odnosno onima koji ne mogu glasati. Zbog toga definira se nova varijabla disabled koja za
poetnu vrijednost ima . Ako ID trenutnog korisnika ima vrijednost 0 ili 0, varijabla disabled
dobiva vrijednost disabled. Ta vrijednost e predstavljati Bootstrap 3 klasu disabled. Zatim
u elementu span#voteUp, unutar atributa class ispisujemo vrijednost varijabli classBTN i
disabled. Ako je korisnik prijavljen, ali nije glasao biti e class=btn btn-success
dok ako je korisnik uz prijavu i glasao ve, tada emo imati:
1
class="btn btn-danger"
ali ako korisnik nije prijavljen na stranici, imati emo:

1
class="btn btn-success disabled"
Nakon to smo definirali postupak prikazivanja gumba za podizanje i smanjivanje ocjene,

potrebno je ispisati i vrijednost samih ocjena. Ovdje to radimo tako da uzimamo vrijednost meta
podatka tog projekta koji se nalazi pod kljuem _wpb3_vote. Zatim se provjerava da li je ta
vrijednost prazna ili nepostojea, te ako je to istina, vrijednost se postavlja na nulu (0). Kada se
definirala vrijednost varijable votes, ista se ispisuje u elementu span#voteResult.
Ovime smo omoguili poveavanje i smanjivanje ocjene projekta sa javne strane. Uz koritenje
WordPress funkcija kao to su add_action, get_post_meta i npr. update_post_meta na jednostavan nain implementirano je koritenje AJAX upita na server.
A Dodatak: WordPress - Bootstrap

NavWalker
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
<?php
/**
* Class Name: wp_bootstrap_navwalker
* GitHub URI: https://github.com/twittem/wp-bootstrap-navwalker
* Description: A custom WordPress nav walker class to implement the
* Bootstrap 3 navigation style in a custom theme using the WordPress
* built in menu manager.
* Version: 2.0.4
* Author: Edward McIntyre - @twittem
* License: GPL-2.0+
* License URI: http://www.gnu.org/licenses/gpl-2.0.txt
*/
class wp_bootstrap_navwalker extends Walker_Nav_Menu {
/**
* @see Walker::start_lvl()
* @since 3.0.0
*
* @param string $output Passed by reference. Used to append additional
* content.
* @param int $depth Depth of page. Used for padding.
*/
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent<ul role=\"menu\" class=\" dropdown-menu\">\n";
}
/**
* @see Walker::start_el()
* @since 3.0.0
*
* content.
* @param object $item Menu item data object.
* @param int $depth Depth of menu item. Used for padding.
* @param int $current_page Menu item ID.
* @param object $args
A Dodatak: WordPress - Bootstrap NavWalker
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
265
*/
public function start_el( &$output, $item, $depth = 0, $args = array(),
$id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
/**
* Dividers, Headers or Disabled
* =============================
* Determine whether the item is a Divider, Header, Disabled or regular
* menu item. To prevent errors we use the strcasecmp() function to
* so a comparison that is not case sensitive. The strcasecmp()
* function returns a 0 if the strings are equal.
*/
if ( strcasecmp( $item->attr_title, 'divider' ) == 0 &&
$depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->title, 'divider') == 0 &&
$depth === 1 ) {
$output .= $indent . '<li role="presentation" class="divider">';
} else if ( strcasecmp( $item->attr_title, 'dropdown-header') == 0
&& $depth === 1 ) {
$output .= $indent . '<li role="presentation"
class="dropdown-header">' . esc_attr( $item->title );
} else if ( strcasecmp($item->attr_title, 'disabled' ) == 0 ) {
$output .= $indent . '<li role="presentation" class="disabled">
<a href="#">' . esc_attr( $item->title ) . '</a>';
} else {
$class_names = $value = '';
$classes = empty( $item->classes ) ? array() :
(array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class',
array_filter( $classes ), $item, $args ) );
if ( $args->has_children )
$class_names .= ' dropdown';
if ( in_array( 'current-menu-item', $classes ) )
$class_names .= ' active';
$class_names = $class_names ? ' class="' .
esc_attr( $class_names ) . '"' : '';
266
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'.

$item->ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '<li' . $id . $value . $class_names .'>';
$atts = array();
$atts['title'] = ! empty( $item->title )
$atts['target'] = ! empty( $item->target )
$atts['rel']
= ! empty( $item->xfn )
? $item->title
? $item->target
? $item->xfn
// If item has_children add atts to a.

if ( $args->has_children && $depth === 0 ) {
$atts['href']
= '#';
$atts['data-toggle']
= 'dropdown';
$atts['class']
= 'dropdown-toggle';
$atts['aria-haspopup']
= 'true';
} else {
$atts['href'] = ! empty( $item->url ) ? $item->url : '';
}
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item,
$args );
$attributes = '';
foreach ( $atts as $attr => $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) :
esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
}
}
$item_output = $args->before;
/*
* Glyphicons
* ===========
* Since the the menu item is NOT a Divider or Header we check
* the see if there is a value in the attr_title property.
* If the attr_title property is NOT null we apply it as the
* class name for the glyphicon.
*/
if ( ! empty( $item->attr_title ) )
$item_output .= '<a'. $attributes .'><span class="glyphicon '
. esc_attr( $item->attr_title ) . '"></span> ';
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
267
else
$item_output .= '<a'. $attributes .'>';
$item_output .= $args->link_before . apply_filters( 'the_title',
$item->title, $item->ID ) . $args->link_after;
$item_output .= ( $args->has_children && 0 === $depth ) ? '
<span class="caret"></span></a>' : '</a>';
$item_output .= $args->after;
$output .= apply_filters( 'walker_nav_menu_start_el',
$item_output, $item, $depth, $args );
}
}
/**
* Traverse elements to create list from elements.
*
* Display one element if the element doesn't have any children otherwise,
* display the element and its children. Will only traverse up to the max
* depth and no ignore elements under that depth.
*
* This method shouldn't be called directly, use the walk() method
* instead.
*
* @see Walker::start_el()
* @since 2.5.0
*
* @param object $element Data object
* @param array $children_elements List of elements to continue traversing.
* @param int $max_depth Max depth to traverse.
* @param int $depth Depth of current element.
* @param array $args
* content.
* @return null Null on failure with no changes to parameters.
*/
public function display_element( $element, &$children_elements,
$max_depth, $depth, $args, &$output ) {
if ( ! $element )
return;
$id_field = $this->db_fields['id'];
// Display this element.
if ( is_object( $args[0] ) )
$args[0]->has_children = ! empty(
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
268
$children_elements[ $element->$id_field ] );
parent::display_element( $element, $children_elements, $max_depth,
$depth, $args, $output );
}
/**
* Menu Fallback
* =============
* If this function is assigned to the wp_nav_menu's fallback_cb variable
* and a manu has not been assigned to the theme location in the WordPress
* menu manager the function with display nothing to a non-logged in user,
* and will add a link to the WordPress menu manager if logged in as an
* admin.
*
* @param array $args passed from the wp_nav_menu function.
*
*/
public static function fallback( $args ) {
if ( current_user_can( 'manage_options' ) ) {
extract( $args );
$fb_output = null;
if ( $container ) {
$fb_output = '<' . $container;
if ( $container_id )
$fb_output .= ' id="' . $container_id . '"';
if ( $container_class )
$fb_output .= ' class="' . $container_class . '"';
$fb_output .= '>';
}
$fb_output .= '<ul';
if ( $menu_id )
$fb_output .= ' id="' . $menu_id . '"';
if ( $menu_class )
$fb_output .= ' class="' . $menu_class . '"';
$fb_output .= '>';
224
225
226
227
228
229
230
231
232
233
234
269
$fb_output .= '<li><a href="' . admin_url( 'nav-menus.php' ) .

'">Add a menu</a></li>';
$fb_output .= '</ul>';
if ( $container )
$fb_output .= '</' . $container . '>';
echo $fb_output;
}
}
}
B Dodatak: Osnove PHP-a

U ovom kratkom dodatku nee biti detaljno objanjen PHP ve slui kao jedan kratki rjenik koji
pomae pri razumijevanju PHP-a. Ako ste eljni nauiti vie o PHP-u moete pogledati u mojim
video zapisima:
Osnove PHP-a
Objektno Orijentirano Programiranje u PHP-u
Razumijevanje MVC-a u PHP-u
Svaka naredba kod PHP-a zavrava sa znakom ;.
Varijable
Varijable se definiraju sa znakom $ te naziv varijable ne moe poeti sa brojem.
1
2
3
4
5
$32Varijabla -> KRIVO!

$_Varijabla -> Tono!
$varijaBla -> Tono!
$Varijabla -> tono!
Sve tri tone varijable predstavljaju razliite varijable. Dodjeljivanje vrijednosti varijablama
vri se znakom = te vrijednosti mogu biti:
brojevi
znakovi
true/false
polja
Sve te vrijednosti dodjeljuju se ovako:
https://www.youtube.com/playlist?list=PLGacmwvTS4MS1Sw_K7shAAX2RxNLa6Nqf
https://www.youtube.com/playlist?list=PLGacmwvTS4MT3tqo9vwiwKs_WqX3h4FR0
https://www.youtube.com/playlist?list=PLGacmwvTS4MTrHyAPu_3tWJ7XpgCCcUBc
1
2
3
4
5
6
7
8
9
//Brojevi
$varijabla =
//Znakovi
$varijabla =
//True/False
$varijabla =
//Polja
$varijabla =
$varijabla[]
271
23;
"Ovo je niz znakova";
true;
array();
= "Ovo je jedna vrijednost";
Polja
Polja predstavljaju posebnu vrijednost varijable. Polja se mogu sastojati od vie vrijednosti pa
tako i od polja. Polje se zapoinje sa funkcijom array:
1
$varijabla = array();
Nova vrijednost postojeem polju dodaje se na sljedei nain:

1
2
3
$varijabla[] = 0;
$varijabla[] = "Druga vrijednost";
//Vrijednost varijable $varijabla : [0, "Druga Vrijednost"]
Inicijalizacija polja u varijabli moe se izvesti i sa poetnim vrijednostima:

1
$varijabla = array(2, 3, 5, true, "Niz znakova", array("Dodatno polje"));
Kljuevi u poljima
Polja se mogu spremati u obliku klju vrijednost npr.:
1
$varijabla["kljuc1"] = "Vrijednost kljua";
Izvlaenje vrijednosti iz polja

Svaka vrijednost u polju zauzima svoje mjesto. Mjesta ne poinju od 1, ve od nule (0). Tako da
prva vrijednost se dobiva ovakvim pozivom:
1
$varijabla[0];
ili ako postoji klju dobiva se ovako:
272
$varijabla["kljuc"];
Ako je potrebno prolaziti kroz sve vrijednosti polja potrebno je koristiti foreach petlju na sljedei
nain:
1
2
3
4
5
6
foreach($varijabla as $var){
echo $var. ", ";
}
//Ako imamo npr. $varijabla = array(1, 2, "Trea vrijednost");
// gornjom foreach petljom dobiti emo:
// 1, 2, Trea vrijednost,
Ako imamo polje sa kljuevima i elimo dobiti i naziv kljua onda se foreach petlja koristi ovako:
1
2
3
4
5
6
7
foreach($varijabla as $kljuc => $var){

echo $kljuc. " => ".$var. ", ";
}
//Ako imamo npr. $varijabla = array("prvo" => 1,"drugo" =>
ea vrijednost");
// gornjom foreach petljom dobiti emo:
// prvo => 1, drugo => 2, trece => Trea vrijednost,
2, "trece" => "Tr\
Petlje
Petlje, kao prethodno objanjena foreach petlja koriste se za neke ponavljajue radnje kako bi se
moglo jednostavno napisati takve naredbe.
For petlja
For petlja koristi poetnu vrijednost koju poveava svakom iteracijom (ponavljanjem) dok ne
doe do neke granine vrijednosti te je sve u brojevima odnosno varijablama/vrijednostima tipa
int.
1
2
3
4
for($i = 0; $i < 4; $i++){

echo $i;
}
//Izlaz: 0123 (nema razmaka kod echo naredbe pa je sve spojeno
While petlja
While petlja ima poetni uvjet koji, ako je ispunjen, doputa izvoenje while petlje. Nakon toga
se stalno izvrava dok se ne ispuni uvjet.
1
2
3
4
5
6
273
$i = 2
while( $i > 0) {
echo $i . ", ";
$i--;
}
//Izlaz: 2, 1,
Do-While petlja
Do-While petlja je petlja koja se barem jednom izvede te ako uvjet vie nije ispunjen, izlazi se iz
petlje.
1
2
3
4
5
6
$i = 0;
do {
echo $i.", ";
$i++;
}while($i < 4);
//Izlaz: 0, 1, 2, 3
Grananje
Grananje se vri preko dviju razliitih naredbi if i switch. Grananje sa if naredbom moe imati
i vie grananja preko naredbe else i else if.
1
2
3
4
5
6
7
8
9
10
11
12
13
$i = 5;
if($i > 5){
echo "Vee od 5";
} else if($i > 3){
echo "Vee od 3";
} else {
echo "Manje od 3";
}
if($i < 5){
echo "Manje od 5";
}
Preko naredbe switch koristi se varijabla i zatim se njena vrijednost provjerava preko raznih
sluajeva (eng. case),a ako nema nikakvih sluajeva, koristi se default:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$i = 5;
switch($i){
case 4:
echo "Broj
break;
case 8:
echo "Broj
break;
case 6:
case 5:
echo "Broj
break;
default:
echo "Broj
break;
}
274
je 4";
je 8";
je 5 ili 6";
nije 5, 6, 4 ili 8";
Funkcije
Funkcije su blokovi naredbi koji se izvravaju pri pozivu te funkcije. Funkcija ne mora uzimati
dodatne parametre ali i moe. Postoje i poetni parametri koji slue kada se funkcija pozove bez
njih. Funkcije mogu vraati vrijednost preko return ili mogu odmah ispisivati vrijednosti kao
npr. preko echo.
1
2
3
4
5
6
7
8
9
10
11
12
function funkcija_bez_parametra(){
return "Niz znakova";
}
//Poziv funkcije
funkcija_bez_parametra();
//Ispis te funkcije
echo funkcija_bez_parametra();
// ili
$vrijednost = funkcija_bez_parametra();
echo $vrijednost
u gornjoj funkciji smo morali koristiti echo kako bi mogli ispisati vrijednost koju smo dobili
preko funkcije jer je ona vraala vrijednost, a nije ju ispisivala. Kada bi je ispisivala izgledalo bi
ovako:
1
2
3
4
5
6
7
8
9
275
function funkcija_bez_parametra(){
echo "Niz znakova";
}
//Poziv funkcije
//Ispis te funkcije
Moete primijetiti da je poziv i ispis potpuno jednak. Zatim imamo funkcije sa parametrima i
poetnim parametrima:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function funkcija($parametar, $pocetni_parametar = 4){

echo $parametar . "<br/>". $pocetni_parametar
}
//Poziv i ispis funkcije
funkcija(3,54);
//Izlaz
3
54
//Ponovni poziv i ispis funkcije
funkcija(3);
//Izlaz
3
4
Iz gornjih funkcija moemo vidjeti da se poetni parametar moe ve definirati unaprijed kako
bi se mogao koristiti ako se nije nita prosljedilo na mjestu tog parametra.
Popust na Video
Popust na Video moete dobiti ovdje: https://leanpub.com/wpb3/c/yAEKbvca1w3H

WordPress Na Bootstrap 3.x

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

WordPress Na Bootstrap 3.x

Uploaded by

Copyright:

Available Formats

WPB3 - Wordpress na Bootstrapu 3.

Tweet This Book!

Upoznavanje sa Bootstrap Frameworkom . .

Izrada WordPress teme . . . . . . . . . . . . . . . .

Stranice bez sidebar-a

Napredna izrada WordPress teme: Portfolio . . . . . .

Napredna izrada WordPress teme: Business . . . . . . . . . . . . . . . . . . . . . .

Spremanje polja u media uploader-u . . . . .

Koritenje WordPress Customizer-a . . . . . . . . . . . . . . . . . . . . . . . . . .

Opcije (Settings API) . . . . . . . . . . . . . .

Koritenje AJAX-a u WordPress-u . . . .

Postavljanje jQuery funkcije za AJAX . . . . . . . . . . . . . . . . . . . . . . . . 257

Popust na Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276

Upoznavanje sa Bootstrap Frameworkom

Vie o gridu moete saznati na Bootstrap Grid.

Upoznavanje sa Bootstrap Frameworkom

<img src="..." class="img-responsive" alt="Responsive image">

<nav class="navbar navbar-default" role="navigation">

Upoznavanje sa Bootstrap Frameworkom

Ista navigacija s otvorenim padajuim izbornikom:

Bootstrap Navigacija i padajui zbornik

Upoznavanje sa Bootstrap Frameworkom

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel\

Upoznavanje sa Bootstrap Frameworkom

Sada to izgleda kao ovo:

Uz takve pluginove mogue je nadodati dosta zanimljivih i korisnih funkcionalnosti. O njima

Upoznavanje sa Bootstrap Frameworkom

Upoznavanje sa Bootstrap Frameworkom

Napredno prilagoavanje Bootstrapa

Upoznavanje sa Bootstrap Frameworkom

Moe se primijetiti da se grananjem i koritenjem varijabli utedjelo na pisanju ponavljajuih

Upoznavanje sa Bootstrap Frameworkom

Raspakirani Bootstrap Izvorni kod

Upoznavanje sa Bootstrap Frameworkom

Upoznavanje sa Bootstrap Frameworkom

Prepros Lista Projekata

Bootstrap Test Direktorij

Upoznavanje sa Bootstrap Frameworkom

// Core variables and mixins

Upoznavanje sa Bootstrap Frameworkom

To znai da e se kada kompajliramo bootstrap.less datoteku, u biti kompajlirate sve ovdje

Upoznavanje sa Bootstrap Frameworkom

// Wrapper and base class

Pozivanje i mapiranje Preprosom

Upoznavanje sa Bootstrap Frameworkom

Dodavanje projekta u Prepros-u

Upoznavanje sa Bootstrap Frameworkom

Upoznavanje sa Bootstrap Frameworkom

Nakon toga, potrebno je otii u direktorij iznad i napisati da se sprema u style.css.

Upoznavanje sa Bootstrap Frameworkom

Sada kada kliknemo na save, promijeniti e se putanja u listi datoteka.

Upoznavanje sa Bootstrap Frameworkom

Upoznavanje sa Bootstrap Frameworkom

Upoznavanje sa Bootstrap Frameworkom

*! normalize.css v3.0.0 | MIT License | git.io/normalize */

Upoznavanje sa Bootstrap Frameworkom

Stranica za download WordPressa

Poetne datoteke jedne teme

footer.php - sadri dijelove teme koji se ponavljaju u podnoju teme

Razumijevanje hijerarhije datoteka

Ukoliko nema archive.php koristi se index.php

//ovo je unutar petlje the_loop()

Glavna petlja - The Loop

! normalize.css v3.0.0 | MIT License | git.io/normalize /