wordpress na bootstrap 3.x

7/24/2019 WordPress na Bootstrap 3.x

1/284


2/284

WPB3 - Wordpress na Bootstrapu 3.xKako napraviti svoj prvi Wordpress projekt koristei

Bootstrap Framework

Igor Beni

This book is for sale athttp://leanpub.com/wpb3

This version was published on 2014-09-22

This is aLeanpubbook. Leanpub empowers authors and publishers with the Lean Publishingprocess.Lean Publishingis the act of publishing an in-progress ebook using lightweight toolsand many iterations to get reader feedback, pivot until you have the right book and buildtraction once you do.

2014 Igor Beni
http://leanpub.com/manifestohttp://leanpub.com/http://leanpub.com/wpb3


3/284

Tweet This Book!Please help Igor Beni by spreading the word about this book onTwitter!

The suggested tweet for this book is:

Upravo sam kupio knjigu WordPress na Bootstrap-u 3.x!

The suggested hashtag for this book is#wpb3.

Find out what other people are saying about the book by clicking on this link to search for thishashtag on Twitter:

https://twitter.com/search?q=#wpb3
https://twitter.com/search?q=%23wpb3https://twitter.com/search?q=%23wpb3http://twitter.com/


4/284

Sadraj

Predgovor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

Upoznavanje sa Bootstrap Frameworkom . . . . . . . . . . . . . . . . . . . . . . . . . 2Koritenje Bootstrap-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2

Responzivne slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4CSS Komponente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4Javascript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Prilagoen Boostrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7Napredno prilagoavanje Bootstrapa . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Raspakirani Bootstrap Izvorni kod . . . . . . . . . . . . . . . . . . . . . . . . . . 11Koritenje less-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

Prepros . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12Kompajliranje Less-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

Pozivanje i mapiranje Preprosom . . . . . . . . . . . . . . . . . . . . . . . 16

Izmjena Bootstrap.less-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22Odabir Template-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Upoznavanje WordPress-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Koncept . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25Instalacija WordPress-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Poetne datoteke jedne teme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26Razumijevanje hijerarhije datoteka . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27Glavna petlja - The Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28Action i Filter funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Izrada WordPress teme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31Instaliranje XAMPP-a i podeavanje WordPress-a . . . . . . . . . . . . . . . . . . . . 31

Instalacija WordPress-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34Poetna struktura projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

Functions.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38Header i footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38

Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39Povezivanje header-a i footer-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39

Izrada Bloga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Povezivanje CSS datoteka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

Povezivanje Javascript datoteka . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42


5/284

SADRAJ

Izrada Navigacije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Logo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47WordPress Menu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48Prikaz WordPress Menu-a . . . . . . . . . . . . . . . . . . . . . . . . . . . 49

Naziv stranice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53Razmak izmeu naslova i navigacije . . . . . . . . . . . . . . . . . . . . . . . . . 54Struktura bloga . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56Lista lanaka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

WordPress Loop . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60Slika lanka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62Prikazivanje slike lanka . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64

Pojedini lanak . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66Dijeljenje sadraja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68

Sporedni sadraj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71

Pozivanje i prikaz sidebar-a . . . . . . . . . . . . . . . . . . . . . . . . . . 74Dodavanje widget-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74Izrada Widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Lista kategorija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84

Registriranje widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85Prikaz Category widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87

Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88Izrada widgeta za posljednje lanke . . . . . . . . . . . . . . . . . . . . . . . . . . 89

Prikazivanje naslova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92

Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92Prikazivanje posljednjih lanaka . . . . . . . . . . . . . . . . . . . . . . . . 92

Objanjenje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Izrada Widgeta za Tagove . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Struktura footera i pozivanje sidebar-a . . . . . . . . . . . . . . . . . . . . 101Widget About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102Widget Social Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103

Polja za unos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104Spremanje vrijednosti . . . . . . . . . . . . . . . . . . . . . . . . . . 106

Prikaz widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107Registriranje widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . 108Unos Widgeta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108

Widget Our Bunker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Bootstrap na blogu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110

Glavni Sadraj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110Footer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111

Responzivne slike lanka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112Promjena HTML kod od thumbnail-ova . . . . . . . . . . . . . . . . . . . . . . . 113Dodatni CSS za resize slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Dodatne datoteke stranica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118

Datoteka page.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118


6/284

SADRAJ

Stranice bez sidebar-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118Datoteka 404.php . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120

Dodavanje komentara na lanke . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121Sreivanje komentara . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Napredna izrada WordPress teme: Portfolio . . . . . . . . . . . . . . . . . . . . . . . . 128Dizajn i funkcionalnost . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128Plan izrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128

Stranica koja prikazuje sve projekte . . . . . . . . . . . . . . . . . . . . . . . . . . 129Stranica pojedinog projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Custom Post Type: portfolio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129Kategorija - Custom Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130Tagovi - Custom Taxonomy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132Dodavanje Meta Box-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133

Dodavanje polja za unos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134Spremanje unesenih vrijednosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135Dodavanje slika za projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Nova dimenzija slika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137Custom Template: Portfolio Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137

Pretvorba SOLID Portfolia u WordPress Portfolio . . . . . . . . . . . . . . . . . . 139Pojedini projekt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144

Slider slika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147Tekst projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149Detalji projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

Povezani projekti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155Responzivne slike . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158Filtriranje projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161

Napredna izrada WordPress teme: Business . . . . . . . . . . . . . . . . . . . . . . . . 165Plan izrade . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165Poetna stranica: Home . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165

Feature dio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169Dodavanje Metaboxa i polja za unos . . . . . . . . . . . . . . . . . . . . . 171Spremanje Metaboxa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 172Ispis feature-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174

Ispis posljednjih projekta . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176O agenciji, FAQ i posljednji lanci . . . . . . . . . . . . . . . . . . . . . . . . . . 178

Registracija novih prostora za widgete . . . . . . . . . . . . . . . . . . . . 178Postavljanje HTML-a i pozivanje prostora za widgete . . . . . . . . . . . . 179Widget za prikaz jedne stranice . . . . . . . . . . . . . . . . . . . . . . . . 181Widget za prikaz posljednjih lanaka sa razliitim post_type sadrajem . . 184

FAQ post type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188Testimonials . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189

Ispis Testimoniala . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194Ispis Klijenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199

Dodavanje polja u media uploader-u . . . . . . . . . . . . . . . . . . . . . 200


7/284

SADRAJ

Spremanje polja u media uploader-u . . . . . . . . . . . . . . . . . . . . . 201Ispis slika za klijente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201

Sreivanje uvodne slika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203Sreivanje Testimonial dijela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203

Custom Template: About . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205Ispis sadraja stranice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206lanovi tima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 208Dodavanje dodatnih unosa preko metaboxa . . . . . . . . . . . . . . . . . . . . . 209Spremanje dodatnog unosa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210

Ispisivanje poruke prilikom greke kod unosa . . . . . . . . . . . . . . . . . 212Ispisivanje lanova . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213Testimonials i slike klijenata . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215

Custom Template: Contact . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217Sporedni sadraj . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218

Forma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220

Koritenje WordPress Customizer-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Izrada opcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223Izrada Sekcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Izrada Kontrole . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 224Ispis vrijednosti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Promjene u stvarnom vremenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 225Customizer klasa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 226Promjena naslova stranice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229

Dodavanje sekcije Header i opcije za pozadinu navigacije . . . . . . . . . . . . . . . . 229Dodavanje opcije za boju poveznica . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231Dodavanje opcije za boju aktivne poveznice . . . . . . . . . . . . . . . . . . . . . . . . 232Dodavanje polja za otvoreni dropdown . . . . . . . . . . . . . . . . . . . . . . . . . . 234Dodavanje opcije za mijenjanje pozadine padajuih izbornika . . . . . . . . . . . . . . 235Dodavanje opcije za mijenjanje pozadine aktivne poveznice u padajuem izborniku . . 236Dodavanje sekcije za Footer i opciju za pozadinu footer-a . . . . . . . . . . . . . . . . 237Dodavanje opcije za boju teksta u footer-u . . . . . . . . . . . . . . . . . . . . . . . . 238Dodavanje opcije za heading u footer-u . . . . . . . . . . . . . . . . . . . . . . . . . . 239

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

Dodavanje sekcije (Settings Section) . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242Dodavanje polja (Settings Field) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243Dodavanje opcije (Setting) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Prikaz polja i sekcija . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245Izmjena prikaza testimonialsa i slike klijenata . . . . . . . . . . . . . . . . . . . . . . . 246

Koritenje AJAX-a u WordPress-u . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248AJAX u administrativnom dijelu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249

Dodavanje elemenata preko AJAX-a . . . . . . . . . . . . . . . . . . . . . . . . . 249Prikaz dodanih elemenata u widgetu . . . . . . . . . . . . . . . . . . . . . . . . . 254

AJAX na javnoj strani (Front End) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256Postavljanje gumba za ocjenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 256


8/284

SADRAJ

Postavljanje jQuery funkcije za AJAX . . . . . . . . . . . . . . . . . . . . . . . . 257Funkcije za poveavanje ili smanjivanje ocjene . . . . . . . . . . . . . . . . . . . 259Sreivanje javnog dijela . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262

A Dodatak: WordPress - Bootstrap NavWalker . . . . . . . . . . . . . . . . . . . . . . 264

B Dodatak: Osnove PHP-a . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270Varijable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270Polja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Kljuevi u poljima . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271Izvlaenje vrijednosti iz polja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271

Petlje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272For petlja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272While petlja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272

Do-While petlja . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Grananje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273Funkcije . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274

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


9/284

PredgovorWordPress je jedan od vodeih CMS sustava u Blogging svijetu pa i ire. Danas se WordPresssve vie koristi kod izrada raznih web aplikacija koje su daleko kompleksnije od jednog bloga zato je WordPress u poetku bio namijenjen.

Ova knjiga namijenjena je za sve developere, a i dizajnere koji se ele okuati u WordPress-ui nauiti kako izraditi jedan mali projekt u WordPress-u. Knjiga WordPress na Bootstrapu 3.xmoe pomoi i iskusnijim developerima koji su ve radili u WordPressu jer e uz izradu sameWordPress teme biti koritene i neke druge korisne metode odnosno funkcije koje mijenjaju nekefunkcije u samom CMS-u.


10/284

Upoznavanje sa BootstrapFrameworkomBootstrap je Framework za bru izradu web stranica pomou njegovih unaprijed definiranih sti-lova, elemenata, komponenti te funkcionalnosti. Kako bi mogli izraditi WordPress na Bootstrap-upotrebno je najprije upoznati se sa samim Frameworkom. Verzija Bootstrap-a u trenutku pisanjaove knjige je 3.2.0. Ovaj Framework moete skinuti ili se s njime poblie upoznati na njegovojstranicihttp://getbootstrap.com.

slika

Koritenje Bootstrap-a

Bootstrap je veoma jednostavan za koristiti. Dovoljno je pozvati njegove datoteke i prizivatiodnosno dodavati komponente koje su nam potrebne. Na takav nain jednostavno je dodati parredaka sa strukturom koja sadri klase koje Bootstrap koristi.

Grid

Grid je naa struktura stranice. Njime se definira na layout u koji se zatim dodaju raznekomponente Bootstrap-a. Poetna struktura sastoji se od tri dijelova - container,rowi column.Unutarcolumn-a unosimo sadraj.

http://getbootstrap.com
http://getbootstrap.com/http://getbootstrap.com/


11/284

Upoznavanje sa Bootstrap Frameworkom 3

Klasina struktura jednog bloga je lijevi dio s glavnim sadrajem i desnim dijelom s nekimdodatnim sporednim informacijama. To bi se postiglo sa sljedeim kodom:

1 2

3

4 Glavni sadraj

5

6

7 Sporedni sadraj

8

9

10

Jedan redak sastoji se od 12 stupaca. Ovakvom strukturom rekli smo da na glavni sadraj koristi8/12 prostora retka, dok sporedni sadraj koristi 4/12 prostora, to ukupno daje 12 stupaca.

Bootstrap je responzivan pa tako ima i svoje toke prekidanja (eng. breakpoint) na kojima sesadraj lomi, presavija i sl. Te toke podefault-u su< 768px,>= 768,>= 992pxi>= 1200px. Ovetoke prekidanja odnose se na irinu ekrana na kojemu se web prikazuje. Na nain na koji jenapravljen Bootstrap odnosno na nain na koji su postavljene toke prekidanja, radi se s Mobile-First Frameworkom te zbog toga ne vidimo nigdje toke prekidanja koje gledaju na< 481pxjerse smatra da se za to definira sadraj u poetku.

Upravo zbog tih toaka prekidanja postoje razliite klasexs,sm,md,lg. Klasusmmoete vidjetiu gornjem primjeru. To znai da e sadraj iznad768pxbiti prikazan upravo u ovakvoj strukturi,dok sadraj ispod te irine, koji zahtjeva klasu xs za dodatnu definiciju strukture e biti jedanispod drugog sa irinom namjetenom na 12/12 odnosno svaki stupac biti e jednak irini 12stupaca tj. na 100% irine jer nema definiranu strukturu za tu irinu. Isti uinak dobili bi kada binapisali sljedee:

1

2

3

4 Glavni sadraj

5

6

7 Sporedni sadraj

8

9

10

Vie o gridu moete saznati naBootstrap Grid.

http://getbootstrap.com/css/#grid
http://getbootstrap.com/css/#gridhttp://getbootstrap.com/css/#grid


12/284


Responzivne slike

Bootstrap 3 prua jednostavan nain za postizanje responzivnih slika. Dovoljno je za slikudodatni klasu .responsive-imgkako bi ona dobila irinu elementa u kojemu se nalazi te se skaliralatj. mijenjala dimenzija u ovisnosti o elementu u kojemu se nalazi.

1

O jednostavnim CSS dijelovima koje omoguuje Bootstrap 3 vie moete pronai naBootstrapCSS.

CSS Komponente

Uz jednostavne CSS klase koje omoguuju lake slaganje Bootstrap prua i dodatne kompleksnijeCSS komponente koje mogu posluiti za to bri razvoj nekakvih modula kao to je npr. navigacijai jo uz to, responzivna navigacija koja se na manjim ekranima otvara na klik. Sve to je potrebnoje kopirati i zalijepiti sljedei kod:

1

2

3

4

5 7 Toggle navigation

8

9

10

11

12 Logo Tekst ili Slika

13

14

15

16

17

18 Link

19 Jo jedan Link

20

21

22 Padajui izbornik

23

24 Jedan link

25 Drugi link

26 Trei Link

http://getbootstrap.com/css/
http://getbootstrap.com/css/http://getbootstrap.com/css/http://getbootstrap.com/css/


13/284


27

28 Odijeljeni Link

29

30 Odijeljeni Link No. 2

31

32

33

34

35

36

Uz ovakav kod dobiti emo meni s padajuim izbornikom koji se otvara na klik miem ili prstomako koristimo mobitel ili tablet.

Bootstrap Navigacija

Ista navigacija s otvorenim padajuim izbornikom:

Bootstrap Navigacija i padajui zbornik

Kako bi ovaj padajui zbornik mogao funkcionirati kako spada potrebno je koristiti javascriptpluginove koje prua Bootstrap 3. Plugin koji se ovdje koristi je tzv. collapse.

Sve ostale CSS Komponente moete pronai naBootstrap CSS Komponente.

Javascript

Kao to je prikazano u prethodnom poglavlju s navigacijom, Bootstrap dolazi zapakiran i sJavascript pluginovima koji daju dodatne funkcionalnosti. Na takav nain moemo lako pozvatineke dijelove s CSS klasama i HTML atributima koje izvravaju dodatne funkcionalnosti jer suusko povezane s pluginovima, kao to je npr.carousel plugin.

http://getbootstrap.com/componentshttp://getbootstrap.com/javascript/#carousel
http://getbootstrap.com/javascript/#carouselhttp://getbootstrap.com/componentshttp://getbootstrap.com/javascript/#carouselhttp://getbootstrap.com/components


14/284


Dovoljno je uzeti njihov kod iz primjera, prilagoditi ga malo i dobiti emo funkcionalan slider.

1 3

4

5

7

8

9

10

11

12

13

14

15 Ovo je slider

16

17 ...sdasdsadada

18

19

20 sadijasidjaidsjaidjas

21

22

23

24

25 Ovo je slider

26

27 ...sdasdsadada

28

29

30 sadijasidjaidsjaidjas

31

32

3334

35

37

38

39

41

42

43


15/284


Sada to izgleda kao ovo:

Carousel Slider

Uz takve pluginove mogue je nadodati dosta zanimljivih i korisnih funkcionalnosti. O njimamoete vie proitati naBootstrap Javascript.

Prilagoen Boostrap

Bootstrap na svojoj web stranici daje mogunost prilagoavanja Bootstrap-a svojim eljamai potrebama. Dakle, mogue je namjetati razne varijable od boja do veliina fonta kakobi si kasnije olakati izradu tema na Boostrap-u. To je mogue na njihovoj stranici: ht-

tp://getbootstrap.com/customize/.

Ako poznajemo potrebe naeg projekta mogue je ovdje postaviti sve potrebne postavke teodabrati samo one Javascript pluginove koji su nam potrebni u tome projektu kako ne bi uzimalikomponente koje nam nisu potrebne i tako podizali veliinu naeg projekta bez razloga.

Recimo na primjer da sve to nam treba od Bootstrap-a je njegov Grid i neto responzivnih cssklasa. Dovoljno je kliknuti na Toggle All i odabrati samoGridiResponsive utilitieskao na sliciispod.

http://getbootstrap.com/javascripthttp://getbootstrap.com/customize/
http://getbootstrap.com/customize/http://getbootstrap.com/javascripthttp://getbootstrap.com/customize/http://getbootstrap.com/customize/http://getbootstrap.com/javascript


16/284


Prilagoeni Bootstrap

Ako su nam potrebne svi ili pojedini jQuery plugini malo ispod ovihLess datotekapotrebno jena isti nain odabrati eljene jQuery pluginove ili ostaviti kako je.

Nakon toga moemo prilagoditiGridnaim potrebama mijenjajui vrijednosti varijabla koje seodnose na Grid.


17/284


Prilagoeni Bootstrap

Nakon to smo promijenili sve to je trebalo promijeniti treba pritisnuti na Compile andDownloadi dobiti emo u .zip formatu datoteku koju je potrebno skinuti te koja sadri nae.css datoteke i .js datoteke.

Nakon toga potrebno je polinkati nau web stranicu s tim datotekama i moemo je jednostavnorazvijati na Bootstrap 3 Framework-u.

Napredno prilagoavanje Bootstrapa

Uz njihov alat za prilagoavanje Bootstrap-a, mogue je skinuti Bootstrap u izvornom formatu

odnosno u .less formatu. ### to je Less? Less je pretprocesor za CSS koji omoguava jednostavni-je pisanje CSS-a koristei grananja, varijable i ostale razne pogodnosti kako bi se ubrzalo pisanjeCSS-a. Nakon toga kompajlira se takva datoteka u .css format koja moe biti i kompresirana nanajmanju moguu veliinu. Time dobivamo bri i lako odrivi CSS.

Mali primjer Less-a

.less datoteka


18/284


1 @crvena_boja: red;

2

3 a { color:black;

4

5 &:hover {

6 color: @crvena_boja;

7 }

8

9 }

10

11 .lista {

12 padding:0;

13

14 li {

15 float:left;16 display:block;

17 }

18 }

.css datoteka

1 a { color:black; }

2

3 a:hover { color: red; }

4

5 .lista { padding:0; }

6 .lista li { float:left; display:block; }

Moe se primijetiti da se grananjem i koritenjem varijabli utedjelo na pisanju ponavljajuihklasa ili boja i sl.

Uz Less, Bootstrap omoguuje koritenjeSass-a koji je takoer jedan od pretprocesora CSS-a, aliLessje njihov izvorni jezik pa u se drati toga u ovoj knjizi.

Kako bi dobili cijeli Bootstrap 3 u izvornom obliku sa lessdatotekama potrebno je odabratiDownload Source.


19/284


.

Raspakirani Bootstrap Izvorni kod

Ako ste skinuli tj. preuzeli Bootstrap izvorni kod i raspakirali njihovu .zip datoteku, dobili steneto slino ovome:

Izvorna datoteka

Ako otvorite prvi direktorij kao na slicidistvidjet ete isto ono to bi dobili ako kompajliratebootstrap preko njihovog alata na stranici (css,fonti jsdirektorije) uz jo neke dodatne datotekekoje Vam ne slue ako ne koristite Grunt ili neto slino. Kako je ova knjiga zamiljena kaoprirunik za poetnike ili one koji se ve bave ovom strukom, preskoit emo alate kaoGrunt

i fokusirati se na to jednostavniji pristup kako bi mogli obavljati ono najbitnije, a to je pravitiWordPress temu iz Bootstrap-a.


20/284


Ako ponovno bacimo pogled na poetni direktorij osvrnimo se na ono najbitnije u ovomepoglavlju, a to jelessdirektorij. Kada bi uzeli taj direktorij uzfontsijsdobili bi pravi Bootstrap-ov nekompilirani kod jer ulessdirektoriju nalaze se raznelessdatoteke dok se ujs direktorijunalaze raznejsdatoteke. Sve te datoteke u sebi sadri neki dio css-a odnosno js-a koji su potrebnibi Bootstrap bio Bootstrap.

Koritenje less-a

Kako je less preprocesor CSS-a potrebno je koristiti dodatne stvari kako bi mogli iz less-a dobiticss. Iako je to moguu i preko obine javascript datoteke koja ita less datoteke i pretvara to u cssradi produkcije bolje je odmah raditi pretvorbu less-a u css i to prikazati na webu bez dodatnihkomplikacija.

Kako to napraviti?Dosta jednostavno, mogu se koristiti alati poput Grunt-akoji rade preko

terminala odnosno komande linije (command prompt) ili moete koristiti GUI (eng. GraphicUser Interface) alate koji obavljaju istu stvar kao Grunt. Jedan takav alat jePrepros.

Prepros

Prepros

Za osobnu upotrebu dovoljna je i besplatna verzija. Skinite je i instalirajte kao svaki drugiprogram. Mogue da donja slika nee biti ista kao i vaa jer se verzija ve podigla odnosnokao na gornjoj slici, verzija je 4.2 dok je moja instalacija 4.0. Razlike nisu prevelike.

Prepros Instalacija

http://gruntjs.com/

http://alphapixels.com/prepros/
http://alphapixels.com/prepros/http://gruntjs.com/http://alphapixels.com/prepros/http://gruntjs.com/


21/284


Nakon to ste instalirali prepros moete ga otvoriti i dobiti ete prazandashboardgdje se inaepokazuju svi otvoreni projekti. Lista projekata moe izgledati kao sljedea lista:

Prepros Lista Projekata

U lijevom stupcu nalaze se svi projekti dok u desnom stupcu se za odabrani projekt prikazuju svedatoteke koje Prepros prepoznaje i koje moe kompajlirati. Uz sliku koja pokazuje vrstu datoteke,desno od nje pokazuje naslov datoteke, ispod naslova je putanja do te datoteke te zadnji redpokazuje gdje e se kompajlirati navedena less datoteka.

Kompajliranje Less-a

Sada kada smo se upoznali malo s Less-om i nainom rada nema boljega nego pokuati upravoto i napraviti kako bi jo bolje razumjeli ukupni proces rada. Kopirajte sada prethodno navedenedirektorije iz vaeg Bootstrap-ovog izvornog direktorija, a te datoteke jesu less, js i fonts i

prenesite ih u neki zasebni direktorij kao npr.test.

Bootstrap Test Direktorij


22/284


Sada prije kompajliranja less-a, otvorimo direktorij i u vaem najdraem editoru kao to jeNotepad++,BracketsiliSublime Textotvorite datotekubootstrap.less. Moe se primijetiti kakosu sve ostale .less datotekeimportiraneunutar ove datoteke.

1 // Core variables and mixins

2 @import "variables.less";

3 @import "mixins.less";

4

5 // Reset

6 @import "normalize.less";

7 @import "print.less";

8

9 // Core CSS

10 @import "scaffolding.less";

11 @import "type.less";

12 @import "code.less";

13 @import "grid.less";

14 @import "tables.less";

15 @import "forms.less";

16 @import "buttons.less";

17

18 // Components

19 @import "component-animations.less";

20 @import "glyphicons.less";

21 @import "dropdowns.less";22 @import "button-groups.less";

23 @import "input-groups.less";

24 @import "navs.less";

25 @import "navbar.less";

26 @import "breadcrumbs.less";

27 @import "pagination.less";

28 @import "pager.less";

29 @import "labels.less";

30 @import "badges.less";

31 @import "jumbotron.less";32 @import "thumbnails.less";

33 @import "alerts.less";

34 @import "progress-bars.less";

35 @import "media.less";

36 @import "list-group.less";

37 @import "panels.less";

38 @import "wells.less";

39 @import "close.less";

40

41 // Components w/ JavaScript

42 @import "modals.less";


23/284


43 @import "tooltip.less";

44 @import "popovers.less";

45 @import "carousel.less";

46

47 // Utility classes

48 @import "utilities.less";

49 @import "responsive-utilities.less";

To znai da e se kada kompajliramo bootstrap.less datoteku, u biti kompajlirate sve ovdjenavedene .less datoteke. Jednako tako mogu se varijable koje su definirane na jednom mjestu ko-ristiti i u drugim datotekama bez ponovnog definiranja, kao to su varijable unutar variable.lessdatoteke. Varijable su oznaene tako da poinju sa znakom @.

1 //2 // Variables

3 // --------------------------------------------------

4

5

6 //== Colors

7 //

8 //## Gray and brand colors for use across Bootstrap.

9

10 @gray-darker: lighten(#000, 13.5%); // #222

11 @gray-dark: lighten(#000, 20%); // #333

12 @gray: lighten(#000, 33.5%); // #555

13 @gray-light: lighten(#000, 60%); // #999

14 @gray-lighter: lighten(#000, 93.5%); // #eee

15

16 @brand-primary: #428bca;

17 @brand-success: #5cb85c;

18 @brand-info: #5bc0de;

19 @brand-warning: #f0ad4e;

20 @brand-danger: #d9534f;

21

22 ...

Ovdje se mogu vidjeti neke varijable koje se koriste za boje iako se u daljem sadraju ove datotekenalaze varijable za sva ostala mogua css svojstva. Takve varijable se dalje koriste u drugimdatotekama iako nisu opet definirane.

Upravo zbog toga, ako pogledate u prethodno navedeni sadraj datoteke bootstrap.less, moe seprimijetiti da je upravo datoteka variables.less navedena na poetku. Ako sada otvorimo nekudrugu datoteku poputnavbar.lessmogu se vidjeti i neke druge varijable koje su koritene a nisudefinirane prije koritenja.


24/284


1 //

2 // Navbars

3 // --------------------------------------------------

4

5

6 // Wrapper and base class

7 //

8 // Provide a static navbar from which we expand to create full-width, fixed, \

9 and

10 // other navbar variations.

11

12 .navbar {

13 position: relative;

14 min-height: @navbar-height; // Ensure a navbar always shows (e.g., without \

15 a .navbar-brand in collapsed mode)16 margin-bottom: @navbar-margin-bottom;

17 border: 1px solid transparent;

18

19 // Prevent floats from breaking the navbar

20 &:extend(.clearfix all);

21

22 @media (min-width: @grid-float-breakpoint) {

23 border-radius: @navbar-border-radius;

24 }

25 }

Pozivanje i mapiranje Preprosom

Sada kada znamo kako e se kompajlirati less, pozovimo upravo bootstrap.less u Prepros-u ipostavimo putanju gdje e se kompajlirati. Za poetak, potrebno je dodati projekt klikom naAdd New Projectte zatim odabrati direktorij u kojem se nalazelessdatoteke.


25/284


Dodavanje projekta u Prepros-u

Nakon to smo odabrali direktorij i kliknuliOK, Prepros je dodao taj direktorij kao novi projekti odmah pokazao datoteke koje e kompajlirati uz automatski generirane putanje.


26/284


Dodani projekt

Ukoliko elimo imati neku drugu putanju to lako moemo i napraviti. Za ovaj primjer postavimodabootstrap.lessse kompajlira direktono u na direktorijtestu style.css. Potrebno je kliknutiprvo na putanju koja se automatski generirala ispod bootstrap.lessdatoteke. Nakon klika, dobitiemo direktorij unutar kojega se nalazi datotekabootstrap.less.


27/284


Promjena putanje

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


28/284


Definirana putanja

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


29/284


Promijenjena putanja

Sada je dovoljno odabrati bootsptrap.less i kliknuti na Compile ili istu tu datoteku Spremitiprekovaeg omiljenog editora.


30/284


Prepros Compile

Ako je sve ispravno napisano Prepros e spremiti nove promjene u style.css te ukoliko ne postojistvoriti e tu datoteku umjesto Vas.

Kompilirana datoteka

Izmjena Bootstrap.less-a

to ako nam neto nije potrebno sada u tome? To moemo jednostavno promijeniti bez potrebeza koritenjem njihovog alata za kompajliranje ve je dovoljno samo maknuti neke .less datotekekoje nam ne trebaju.To je vezano za CSS, dok za JS isti postupak se koristi za kompajliranjeJS-a sa Preprosom.

Ako pogledamo novo kompajlirani style.css, na poetku se vidi:


31/284


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

2 html {

3 font-family: sans-serif;

4 -ms-text-size-adjust: 100%;

5 -webkit-text-size-adjust: 100%;

6 }

7 body {

8 margin: 0;

9 }

10 article,

11 aside,

12 details,

13 ...

Sada ako zakomentiramo ili maknemo @import normalize.less i kliknemo CompileiliSavepreko naeg editora dobiti emo novi style.css ali bez tog dijela. Sada je poetak style.css datotekesljedei dio koda:

1 @media print {

2 * {

3 text-shadow: none !important;

4 color: #000 !important;

5 background: transparent !important;

6 box-shadow: none !important;

7 }

8 a,

9 a:visited {

10 text-decoration: underline;

11 }

12 a[href]:after {

13 content: " (" attr(href) ")";

14 }

15 ...

Moete primijetiti kako je jednostavno koritenjem less-a i Preprosa micati i dodavati nove ilistare datoteke, a tako i dodavati ili brisati css dijelove koji nam nisu potrebni.

Odabir Template-a

Kako sada malo bolje razumijemo kako raditi s Bootstrap-om, te ako ste malo prouili kompo-nente Bootstrap-a upoznati ste i s nekim komponentama Bootstrap-a koje emo vidjeti u raznimtemplate-ima.

Iako postoje razni kvalitetnipremiumtemplate-i, odabrat emo jednostavniji i jeftiniji pristup teuz kratku pretragu po Google-u mogu se pronai kvalitetni besplatni template-i.


32/284


Ja sam u Google upisaoFree Bootstrap Themeste naiao na puno razliitih lanaka i template-a.Nakon kratkogmuvanjapo raznim stranicama naiao sam na jedan simpatian template kojiima vie toga u sebi, a sadri i Blog to odgovara naim potrebama.

Iako nikakve potrebe nisu bile navedene, kako radimo s WordPress CMS-om koji je zapoeo kaonekakavblogging cmsnapravit emo i jedan klasian blog dio na naoj stranici. Template kojisam pronaao zove se SOLID i moe se naiovdje.

Na toj istoj stranici moete pogledati DEMO tog template-a. Ja sam ga skinuo klikom naDownload.

Prije nego krenemo s izradom odnosno pretvorbom ovog template-a u WordPress temu, trebarazumjeti da je ovo gotova tema te ovdje nee biti izrade s less jezikom iako je podrobno bioobjanjen u prethodnim poglavljima.

To je bilo napravljeno iz razloga kako bi bolje razumjeli sam rad s Bootstrap-om te na koji nain

je ovaj template bio napravljen.http://www.blacktie.co/2014/05/solid-multipurpose-theme/
http://www.blacktie.co/2014/05/solid-multipurpose-theme/http://www.blacktie.co/2014/05/solid-multipurpose-theme/


33/284

Upoznavanje WordPress-aWordPress je CMS koji je u poetku bio zamiljen kao blog platforma. Nakon nekog vremenapoeo se koristiti kao platforma za web stranice razliitog tipa. Zbog njegove jednostavneuporabe mnogi ga uzimaju u obzir kada zapoinju svoje web projekte pa ak i ljudi koji nisudeveloperi ve su upoznati s WordPress-om te klijenti znaju sami traiti da se njihova webstranica radi u WordPress-u. U ovome poglavlju upoznati emo se s WordPress-om kao temeljemza izradu web projekta.

KonceptWordPress kao CMS koncipiran je u nekoliko segmenata. Sastoji se od lanaka, stranica,komentara te uz cijeli taj sadraj omoguava koritenje raznih tema i nadogradnju samog CMS-apomou njegovih dodataka.

lanci - su zapisi poput nekih novosti i sl. koji se zatim listaju, esto, na poetnoj stranici. Mogueih je kategorizirati pomou kategorija i tagova.

Stranice- su zapisi slini lancima ali oni se smatraju kao obine stranice koje se dodaju i unavigaciji WordPressa. Bez dodatne konfiguracije stranice su automatski dodane u navigaciji itako predstavljaju stranice poput O nama, Usluge i sl. koje su dosta este statine stranice.

Komentari- su zapisi koje prave korisnici WordPress stranice. Komentare mogu pisati i korisnicikoji nisu registrirani na stranici ako je tako omogueno.

Teme- su razliiti predloci dizajna koji se mogu skinuti i instalirati putem WordPress admi-nistracije ili direktno preko sistema direktorija. Sve instalirane teme mogue je pregledati prekoWordPress administracije i ukljuivati po elji. Teme se nalaze u folderuwp-content/themes/.

Dodaci- slue za proirivanje funkcija same WordPress stranice. Danas postoje razliiti dodaciza svakakve potrebe. Dodaci se nalaze u folderuwp-content/plugins/.


34/284

Upoznavanje WordPress-a 26

Instalacija WordPress-a

Stranica za download WordPressa

WordPress se moe skinuti sa stranicewordpress.org. Ako niste zadovoljni engleskom verzijommoete skinuti WordPress za neki drugi jezik. Klikom na download dovesti e vas na stranicu zaskidanje WordPress-a u .zip ili .tar.gz formatu.

Sam proces konfiguriranja WordPress-a na vaem lokalnom serveru biti e objanjeno kasnije uknjizi kada se bude radila WordPress tema.

Poetne datoteke jedne teme

Kako bi izradili WordPress temu potrebno je razumjeti strukturu jedne teme. Potrebne datotekeza jednu temu kako bi funkcionirala jesu:

style.css - sadri sva css pravila koja definiraju izgled teme index.php - poetna datoteka koja se uvijek prvo gleda ako drugaije nije postavljeno.

esto se koristi za poetnu stranica gdje se listaju svi lanci.

Obino uz ove datoteke imamo i sljedee:

header.php - sadri dijelove teme koji se ponavljaju kao npr. navigacija, logo i sl. na vrhuteme

http://www.wordpress.org
http://www.wordpress.org/http://www.wordpress.org/


35/284


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

sidebar.php - sadri strukturu sidebar-a koji se koristi u temi, najee poziva dinaminisidebar

comments.php - sadri strukturu komentara koji se dodaju svakom lanku ili stranici gdjesu omogueni komentari

Uz navedene datoteke dobro je imati i sljedee:

single.php - prikazuje samo jedan lanak kojeg se gleda

page.php - prikazuje sadraj jedne stranice

archive.php - prikazuje listu lanaka, esto sadri istu strukturu kao i index.php. Ovo sekoristi pri listanju lanaka iz pojedine kategorije, taga i sl.

functions.php - sadri razne opcije i funkcije vezane uz temu, tu se mogu definirati novi

post type-ovi, widgeti i sl. 404.php - ova datoteka se koristi u sluaju da stranice ili lanak nije pronaen.

Ako je potrebno imati posebnu poetnu stranicu za WordPress temu koristi se jedna od sljedeihdatoteka:

home.php

front-page.php

Razumijevanje hijerarhije datoteka

Mogue je koristiti jo datoteka kako bi si olakali odravanje. Cijelu hijerarhiju datoteka mogueje pogledati naChip Bennett Template Hijerarhija. Ovdje neu objasniti svaku pojedinu ali iznekoliko primjera biti e dovoljno jasno da se moe itati dijagram na gornjoj slici.

Arhiva

Arhiva lanaka je jedan od najosnovnijih naina prikazivanja lanaka u WordPress-u. Prilikompristupanja nekoj arhivi, za primjer uzet emo kategoriju Auti ( slug od kategorije je auti, id odkategorije je 2), WordPress ini sljedee:

Prepoznaje da se radi o arhivi

Prepoznaje da se radi o arhivi kategorije

Pregledava folder od teme da li postoji datoteka category-auti.php, ako postoji koristit enju

Ukoliko nema prethodno navedene datoteke, pregledava folderda li postoji category-2.php,ako postoji koristiti e nju

Ukoliko nema category-2.php, pregledava se folder za category.php datotekom

Ukoliko nema ni category.php, pregledava se folder za archive.php

http://www.chipbennett.net/themes/template-hierarchy/
http://www.chipbennett.net/themes/template-hierarchy/http://www.chipbennett.net/themes/template-hierarchy/


36/284


Ukoliko nema archive.php koristi se index.php

lanak

lanak je prikaz jednog lanka koji se prikazuje na stranici jer smo kliknuli na njegov naslov ilineki link koji nas je doveo do njega. Taj lanak se zatim preko njegovog URL-a ili ID-a prikazujena stranici. WordPress radi sljedee:

Prepoznaje da se radi o stranici koja prikazuje samo sadraj jednog posta ili stranice

Prepoznaje da se radi o stranici koja prikazuje samo sadraj jednog posta

Pregledava koji tip lanka

Ukoliko je lanak tipa Post, pregledava se folder za datotekom single-post.php

Ukoliko je lanak nekog naeg tipa koji je naknadno dodan, to je poznato kao Custom

Post Type, pregledava se folder za datotekom single-auto.php ukoliko bi na custom posttype bio auto.

Ukoliko je lanak nekog priloga kao npr. uploadane slike tada se pregledava folder zadatotekom image.php ukoliko je to datoteka tipa image, zatim ako je nema gleda za png.phpako je slika u formatu .png, a nakon toga gleda ako postoji image_png.php datoteka.Ukoliko nema niti jedne od tih datoteka gleda attachment.php

Ukoliko nije pronaena neka od spomenutih datoteka pregledava se folder za datotekomsingle.php

Ukoliko nema ni single.php, koristi se index.php

Pratei dijagram koji je gore naveden tema se moe organizirati u hijerarhiju datoteka koja jelako odriva te je jednostavno shvatiti koja datoteka se odnosi na koji dio teme. Iz gore navedenihprimjera moe se primijetiti kako sve uvijek vodi na index.php ukoliko traene datoteke nepostoje. Ako neke promjene nisu pretjerano velike mogu se napraviti i u index.php datoteci kaoto je npr. naslov arhive za kategoriju.

1 //ovo je unutar petlje the_loop()

2 if(is_category()){ single_cat_title("lanci iz kategorije: ", true); }

Glavna petlja - The LoopGlavna petlja ili The Loop je PHP kod koji se koristi za listanje sadraja lanka, stranica i sl. Ovapetlja prikazuje svaki lanak ili stranicu koji su dobiveni kriterijima postavljenim u glavnomquery-u koji pristupa bazi. Taj query se npr. mijenja i ovisno o kategoriji kada se poziva category-auto.php.

Svaki HTML i PHP kod unutar petlje prikazat e se odnosno izvriti za svaki lanak unutar petlje.Koristei razne Template Tagove moemo prikazati razliite informacije. Jedne od osnovnihtagovakod prikaza informacija za lanak unutar petlje jesu:

the_title() - prikazuje naslov lanka


37/284


the_content() - prikazuje sadraj lanka, ukoliko nije stranica pojedinog lanka onda seprikazuje skraeni tekst

the_category() - prikazuju se kategorija lanka

the_date() - prikazuje se datum lanka the_permalink() - daje cijeli link na lanak, ovaj dio se dodaje npr. u atributhref

Raznitagovimogu se pronai naWordPress Codex-u.

Osnovna struktura petlje

1

Action i Filter funkcije

Action i Filter funkcije slue za nadograivanje nae teme ili admin-a. Njima se moe odreivatida se u odreeno vrijeme ili na odreenom mjestu neka funkcija izvri. Action funkcije se

izvravaju kada se neto dogodi odnosno izvri kao to je npr. publish lanka ili prikazivanjeadmin stranice. Filter funkcije su funkcije koje se izvravaju kod podataka kao to je mijenjanjenekih podataka ili filtriranje istih prije nego se spremaju u bazu ili ispisuju korisniku stranice.

Action funkcije

Kako bi pozvali neku funkciju uz neku Action funkciju koristi se

1 add_action("ime_actiona", "ime_funkcije", prioritet, broj_parametara );

ime_actiona predstavlja ime actiona pri kojem se poziva funkcija ime_funkcije predstavlja ime funkcije koja se poziva kada se dogodi odgovarajui action

prioritet predstavlja broj, ukoliko ga ne unesemo postavlja se na 10. to je manji broj to seprije izvrava dodana funkcija

broj_parametara predstavlja broj parametara koji dolaze uz funkciju, npr. function upda-te_post($a,$b) - tu imamo broj 2 jer se prosljeuju dva parametra

Mjesto pozivanja te action funkcije odreuje se sa

http://codex.wordpress.org/Template_Tags
http://codex.wordpress.org/Template_Tagshttp://codex.wordpress.org/Template_Tags


38/284


39/284


40/284

Izrada WordPress teme 32

Cjelokupni WordPress u folderu Wordpress

Nakon toga potrebno je upaliti XAMPP i pokrenuti APACHE i MySQL Server.

wor-dpre Zatim je potrebno otii naphpmyadminte napraviti novu bazu za WordPress. Odemo nanavigacijuDatabasesi upiemo eljeni naziv baze podataka, odaberemo iz padajueg izbornikautf8_general_cii kliknemo naCreate.

http://localhost/phpmyadmin/
http://localhost/phpmyadmin/http://localhost/phpmyadmin/


41/284


42/284


Instalacija WordPress-a

Nakon to smo zamijenili potrebne podatke i podesili na wp-config.php potrebno je instaliratiWordPress na naem serveru. Ako pristupite sada adresi http://localhost/wordpress (ili kako steve Vi nazvali Va web) dobiti ete instalacijsku stranicu WordPress-a. Popunite je osnoviminformacijama kao to je Vae korisniko ime i lozinka.

WordPress Instalacijska stranica 1

Nakon to ispunite sve potrebne informacije kao username i password moete krenuti na sljedeikorak i kliknutiInstall WordPress. Sada e WordPress napraviti sve potrebne tablice i napuniti

osnovnim informacijama. Nakon to se sve to dogodi, trebali bi dobiti informaciju kako steuspjeno instalirali WordPress.


43/284


WordPress Instalacijska stranica 2

Sada se moete prijaviti klikom na Log In. Ako posjetite opet svoju poetnu stranicu ht-tp://localhost/wordpress/dobiti ete pravu web stranicu koju pogoni WordPress, te temu kojuvidite je poetna tema koja dolazi s WordPress-om.

WordPress Poetna

Spremni ste za izradu teme na WordPress-u!

Poetna struktura projekta

U poglavlju Upoznavanje s WordPress-om saznali smo da za temu je dovoljno imati index.php istyle.css sa svim informacijama vezanim uz temu. U folderu gdje smo kopirali cijeli WordPress,potrebno je otii uwp-content/themesi otvoriti novi folder kojeg emo nazvatiwpb3.


44/284


WordPress wp-content folder

Sada u tom folderu napravite folderwpb3i otvorite ga.

WordPress wpb3 folder

Unutar tog foldera kopirat emo sadraj Bootstrap 3 templateSOLIDkoji smo skinuli u poglavljuUpoznavanje sa Bootstrap-om- Odabir Template-a. Ako ga niste skinuli, moete ga skinuti na

ovdje.

WordPress wpb3 folder sa kopiranim sadrajem SOLID-a

Kako bi ovu temu mogli odabrati u WordPress administraciji, potrebno je stvoritiindex.phpistyle.css. Sadraj index.php-a moe trenutno biti samo nekakav tekst kao:

1 WordPress na Bootstrap 3.x

Nakon index.php-a, stvoritestyle.cssi kopirajte sljedei kod unutar te datoteke:

http://www.blacktie.co/2014/05/solid-multipurpose-theme/
http://www.blacktie.co/2014/05/solid-multipurpose-theme/http://www.blacktie.co/2014/05/solid-multipurpose-theme/


45/284


1 /*

2 Theme Name: WPB3

3 Theme URI: https://leanpub.com/wpb3/

4 Author: Igor Beni

5 Author URI: https://leanpub.com/u/igorbenic

6 Description: WordPress tema izraena prema knjizi WordPress na Bootstrap-u 3.x

7 Version: 1.0

8 License: GNU General Public License v2 or later

9 License URI: http://www.gnu.org/licenses/gpl-2.0.html

10 Tags: blue, gray, wite, flat, custom-post-type, portfolio, blog

11 Text Domain: wpb3

12

13 */

Ove podatke WordPress e koristiti za prikazivanje u WordPress administraciji kod odabira temete dodatne informacije kao tagovibi koristio kod pretraivanja tema u WordPress-ovoj arhivitema.

Ulogirajte se, ako ve niste, u WordPress administraciji (/wp-admin.php) i odite na Appearance> Themes. Trebali bi u popisu tema vidjeti jednu temu bez slike s nazivomWPB3. Ako preetemiem preko nje, dobiti ete sljedeu sliku:

Odabir tema u administraciji - WPB3 tema

Sada kada je moemo odabrati, aktivirajte je pritiskom na Activate. Sada ako otvorite vaustranicu na front-u (npr. localhost/wordpress) dobiti ete tekst koji smo unijeli u datoteciindex.php.

WPB3 tema poetna


46/284


Functions.php

Uz style.css i index.php najbolje je odmah na poetku stvoriti jo jednu datoteku, a to jefunctions.phpkoja po WordPress Codex-u, unutar teme slui kao plugin koji na frontu i uadministraciji se uitava kako bi izvrila funkcije dodane unutar nje koje se direktno odnosena aktiviranu temu. To moe biti dodavanje dodatnih opcija za definiranje izgleda teme unutaradministracije, pravljenje razliitih tipova lanaka, definiranje dimenzija slika i sl. Neke od opcijaza temu koju WordPress daje jesu tzv.Theme Features.

Stvoritefunctions.phpi unutar te datoteke unesite sljedee:

1


47/284


1

2


48/284


1

2


4

5

Sada kada opet otvorimo nau stranicu neemo vidjeti promjene, osim ako smo prijavljen u naojadministrativnom dijelu WordPress-a. Tada emo dobiti na vrhu stranice jedantoolbars raznimopcijama.

WPB3 toolbar

Upravo taj toolbar je izgeneriran zbog funkcije wp_head(). Ako pogledamo sada izvorni kodstranice koji je prije bio samo obian tekst WordPress na Bootstrap 3.xvidjet emo razne pozivekoje mi nismo napisali jer su izgenerirani preko funkcija wp_headiliwp_footer.

Izvorni kod stranice nakon poziva headera i footera

Izrada Bloga

U ovome poglavlju krenut emo s poetnom strukturom WordPress teme i izraditi jednu klasinutemu, a to je tema za blog. Bootstrap Template SOLID dolazi s ve definiranim izgledom straniceBlog, pa emo taj raspored HTML-a i koristiti.

Ako ste slijedili sve korake u prolom poglavlju trebali bi sada imati neto slino ovome:


49/284


50/284


51/284


1 wp_enqueue_script(

2 $naziv_poziva,

3 $putanja,

4 $potrebne_datoteke,

5 $verzija,

6 $u_footer );

gdje navedene varijable su:

$naziv_poziva - naziv pod kojim pozivamo skriptu, ukoliko bi koristiti wp_register_script()tada bi pri koritenju gore navedene funkcije bilo dovoljno samo upisati naziv poziva

$putanja - putanja do skripte

$potrebne_datoteke - upisuju se uarray()sve potrebne skripte koje treba pozvati prije kako

bi skripta obavljala funkcije ovisne o tim skriptama, kao to je npr. jquery $verzija - verzija skripte, mogue je pustiti inullpa nema verzioniranja ili ostaviti prazno

pa e WordPress sam dodati broj svoje verzije

$u_footer - ako je ova varijabla truedodaje se na kraj elementa body, u suprotnom sepostavlja uhead

Javascript datoteke koje treba povezati jesu sljedee:

1

4

5

6

7

8

9

10

Nakon definicije povezivanja CSS datoteka, kopirajte sljedei dio koda ufunctions.php:

1 /*=============

2 Povezivanje JS-a

3 =============*/

4

5 function wpb3_js_datoteke() {

6 if(!is_admin()){

7 wp_enqueue_script(

8 'wpb3-bootstrap-js',

9 get_stylesheet_directory_uri() . '/assets/js/bootstrap.min.js',

10 array( 'jquery' ),


52/284


53/284


57 get_stylesheet_directory_uri() . '/assets/js/custom.js',

58 array( 'jquery' ),

59 '',

60 true

61 );

62 }

63 }

64

65

66

67 add_action( 'wp_enqueue_scripts', 'wpb3_js_datoteke' );

Za svaku JS datoteku zahtjevali smo pozivanje jQuery i tako maknuli mogunost pojavljivanjapogreke pri pozivanju jQuery plugin-a bez jQuery-a. Sada e WordPress prije pozivanja svihnavedenih JS datoteka pozvati jQuery koji dolazi zapakiran sa WordPress-om. Verzija svakedatoteke nije navedena te je ostavljeno prazno kako bi WordPress dodao svoju verziju na svakudatoteku.

Ako ponovno pokrenemo nau stranicu i pogledamo izvorni kod, vidjet emo da su sve skripte,osim jQuery-a pozvane na kraju elementa bodyjer je postavljena vrijednosttruekod opcije dali poziv ide uheadili na kraj elementabody.

JS datoteke na kraju elementa body

Izrada Navigacije

Bootstrap 3 ima CSS komponentunavbarkoja omoguuje i responzivni izgled navigacije gdje sesama navigacija sakrije na manjim ekranima te pritiskom na ikonu za navigaciju ona se otvara

ispod ikone i logotipa. Za sada, kopirajmo direktno iz SOLID template-a tu komponentu te jepostavimo uheader.phpodmah nakon otvorenog elementabody.

1 ...

2

3

4

5

6

7

8


54/284


10 Toggle navigation

11

12

13

14

15 SOLID.

16

17

18

19 HOME

20 ABOUT

21 CONTACT

22

23 PAGES

24 25

26 BLOG

27 SINGLE POST

28 PORTFOLIO

29 SINGLE PROJECT

30

31

32

33

34 35

Kako bi pogledali promjenu, otvorite opet Vau stranicu odnosno osvjeite je ukoliko Vam jeotvorena. Dobiti ete ovo:

Navigacija u header-u

Izgleda kao da nam se na tekst koji je unesen unutarindex.php-aizgubio, ali zapravio sve tose dogodilo jeste da je ova navigacija fiksna te zbog takvog css svojstva na tekst je ostao upoetnoj poziciji kao i prije dok se navigacija prikazuje preko svega i ne utjee na rasporeddrugih elemenata.


55/284


Navigacije ne utjee na raspored elemenata

Da bi mogli vidjeti opet ovaj tekst i slijediti strukturu stranice blog.html potrebno je dodatiostale elemente koji ine osnovnu strukturu u datoteci blog.html. Kako ne bi preskakali dio podio, srediti emo prvo navigaciju pa zatim krenuti na sljedei dio.

Logo

Kao to vidimo na template-u zamiljen je logo kao tekst. Kako ve imamo ime naeg blogaodnosno stranice, moemo odmah to iskoristiti kao tekst logo-a. Za takvo neto koristiti e namfunkcija bloginfo()koju definira sam WordPress i koja slui za povlaenje nekih informacija

koje se zapisuju ili definiraju u generalnim postavkama WordPress-a. Sada zamijenite

1 SOLID.

Sa

1


56/284


gdje - $path oznaava putanju, te je mogue kao vrijednost postaviti / pa bi umjestolocalhost/wordpress dobili localhost/wordpress/ - $scheme definira kakav tip poveznice ebiti tako da je mogue postaviti http, https ili relative gdje bi po tom redoslijedu dobilihttp://localhost/wordpress, https://localhost/wordpressili/wordpress.

Kako nam funkcija samo vraa vrijednost, ona je ne ispisuje pa je potrebno koristiti php funkcijuechokako bi je ispisali.

Funkcija bloginfo sa name kao vrijednost, daje nam ime nae stranice koje je postavljeno ugeneralnim postavkama WordPress-a. Sada kada ponovno osvjeimo nau stranicu trebali bidobiti kao logo nae ime bloga te kada kliknemo na logo, trebalo bi nas vratiti na poetnu stranicu.

Dinamiki logo u navigaciji

WordPress Menu

WordPress Menu dodaje se u WordPress administraciji pod Appearance > Menus. Ako sadapogledamo taj dio u administraciji moemo primijetiti daMenusne postoji. Kako bi to moglopostojati i kako bi mi mogli postavljati nae menije potrebno je dodati podrku tih menijaunutar nae teme. To se radi pozivom funkcije register_nav_menuili register_nav_menus. Unaem template-u samo navigacijskih menija ima u headeru pa emo iskoristiti prvu spomenutufunkciju koja je dovoljna ako elimo registrirati samo jedan menu. Poziv te funkcije je sljedei:

1

gdje

$locationoznaava lokaciju koju mi sami definiramo, kao npr. header-menu i zatim sepri pozivanju tog menija koristi lokacija navedena kao vrijednost varijable $location

$descriptionoznaava opis te lokacije kako bi nam bilo lake snalaziti se po lokacijamamenija, kao npr. Menu u header-u

Sada kada znamo to pojedina varijabla oznauje, ufunctions.phpdodajte sljedei dio koda nakonpozivanja JS datoteka.

1 ...

2 register_nav_menu( "header-menu", "Menu u Header-u" );

Ako opet otvorimo administraciju i pogledamo pod Appearancevidjeti e se nova navigacijaMenus.

http://codex.wordpress.org/Function_Reference/register_nav_menu

http://codex.wordpress.org/Function_Reference/register_nav_menus
http://codex.wordpress.org/Function_Reference/register_nav_menushttp://codex.wordpress.org/Function_Reference/register_nav_menuhttp://codex.wordpress.org/Function_Reference/register_nav_menushttp://codex.wordpress.org/Function_Reference/register_nav_menu


57/284


58/284


1

2

3

4 HOME

5 ABOUT

6 CONTACT

7

8 PAGES

9

10

11

12 BLOG

13 SINGLE POST

14 PORTFOLIO

15 SINGLE PROJECT16

17

18

19

napiite sljedee:

1

Sada smo u tompoljudali parametartheme_locationkoji ima vrijednost nae lokacije. Ukolikoto spremite i otvorite ponovno nau stranicu, vidjet ete da to nije navigacija kao to jepostavljena u originalu template-a. Kako bi jednostavno postigli isti izgled sa mogunoustvaranja padajuih izbornika potrebno je koristiti tzv. Walkerekoji tada generiraju potrebansadraj na nain kakav je definiran u tomWalkeru. Takav Walker je iwp-bootstrap-navwalkerkojeg moete skinuti sa te stanice. Ukoliko Vam se ne skida moete slobodno u Dodatatku:WordPress - Bootstrap NavWalker na kraju knjige kopirati cijeli kod togWalkera.

Taj kod kopirajte u zasebnu datoteku pod nazivom npr. wpb-navwalker.php te je spremite u novifolder pod nazivominc.

https://github.com/twittem/wp-bootstrap-navwalker
https://github.com/twittem/wp-bootstrap-navwalkerhttps://github.com/twittem/wp-bootstrap-navwalker


59/284


Walker dodan u zaseban folder pod nazivom inc

Sada na poetku datoteke functions.php dodajte sljedee:

1 require_once 'inc/wpb-navwalker.php';

Time zahtijevamo tu datoteku unutar foldera inc. Sada kada smo to uinili moemo stvaratiprave Bootstrap 3 navigacije s Menu-ima iz WordPress-a. To radimo tako da promijenimo joneke parametre u pozivu funkcijewp_nav_menu.

1 wp_nav_menu(

2 array(

3 'menu' => 'header-menu',

4 'theme_location' => 'header-menu',

5 'depth' => 2,

6 'container' => 'div',

7 'container_class' => 'navbar-collapse collapse navbar-right',

8 'container_id' => 'header-menu',

9 'menu_class' => 'nav navbar-nav',

10 'fallback_cb' => 'wp_bootstrap_navwalker::fallback',

11 'walker' => new wp_bootstrap_navwalker()

12 )

13 );

Kada smo i to promijenili moramo jo neto promijeniti kod cijele komponente navbar-a kakobi to radilo, tako da treba zamijeniti:

1

sa

1

Objanjenje

Parametri uwp_nav_menu:


60/284


menuoznaava eljeni meni depthoznaava koliko duboko e meni ii, odnosno kolika dubina izbornika moe biti, kako

je ovdje postavljeno 2, imamo prvu razinu koja je glavni izbornik, a zatim druga razina jepadajui izbornik tog menu-a

containeroznaava to e se koristiti, kako je kod Bootstrap todiv, onda e se to i koristiti container_idje ID tog navbara, te se on koristi i u gornjoj zamjeni poddata-targetpa smo

zbog toga i sambuttonpromijenili menu_classje klasa koja e se koristiti sa elementomul fallback_cbje funkcija koja e se koristiti ukoliko ne postoji eljeni menu walkerje klasa koju koristimo za izradu cjelokupne navigacije

Ako sada otvorite stranicu vidjet ete kako su se prikazale poveznice na pravi nain kao i uoriginalnom template predloku.

Dodamo li u administraciji jednu poveznicu kao padajui izbornik moe se vidjeti i Bootstrap-ovpadajui zbornik na frontu. Padajui izbornik dodajemo tako da:

1. Dodamo poveznicu u izbornik tako da odaberemo to sve elimo dodati i kliknemo na Addto Menu,

2. Nakon dodavanja izborniku potrebno je povui eljenu poveznicu ispod poveznice za kojuelimo da bude padajui izbornik,

3. Nakon postavljanja ispod eljenog padajueg izbornika, potrebno ju je malo uvui udesno

Izrada padajueg izbornika

Nakon dodavanja i rasporeivanja poveznica potrebno je spremiti promjenom pritiskom na SaveMenu. Sada imamo Bootstrap-ov izbornik na naoj stranici.

Padajui zbornik na frontu


61/284


Naziv stranice

Naziv stranice u template-u

Prema template-u moe se vidjeti da sam naziv trenutne stranice koju gledamo ima svoj dio gdjese prikazuje i malo se odvaja od drugog teksta. Ako pogledamo izvorni kod vidjet emo sljedee:

1

6

7

8

9 Blog List.

10

11

12

Ovaj dio template-a se jednako tako ponavlja na svakoj stranici pa moemo zakljuiti da ga trebapostaviti u header.phpkako ga ne bi morali kopirati u svakoj datoteci koja prikazuje sadraj.Kopirajte ovaj dio u datotekuheader.phpnakon navigacije.

1 ...

2

3

4

9

10

11

12 Blog List.

13

14

15


62/284


Kako ovo zapravo predstavlja naslov stranice dovoljno je koristiti ponovno funkcijuwp_titlepaumjestoBlog List.postavimowp_title()ovako:

1 2

3

4

5

6

7

Postavljanjem poziva wp_titlena svakoj stranici ispisat e se naslov stranice na kojoj se nalazimo.

Naziv stranice u WordPress temi

Moemo i primijetiti kako se sada opet vidi i na tekst iz datoteke index.phpjer smo ga pomaknuliza dovoljno razmaka kako je i predvieno u template-u.

Razmak izmeu naslova i navigacije

Ako uoite jedan mali razmak izmeu naziva stranice i navigacije dok ste prijavljeni nastranicu,kao to je prikazano na sljedeoj slici, tada je dovoljno samo napisati dodatni CSS kojie ispraviti prikaz ili maknuti prikazivanje admin trake.


63/284


Razmak

Ispravljanje je mogue sljedeim kodom unutarfunctions.php:

1 function wpb3_admin_css() {

2 if ( is_user_logged_in() && is_admin_bar_showing() ) {

3 ?>

4

5 .navbar-fixed-top {

6 top:32px;

7 }

8

9


64/284


Struktura bloga

Struktura bloga

Iz gornje slike moemo vidjeti kako e izgledati otprilike poetna naeg bloga. Vidimo da seveinski dio prostora koristi za glavni sadraj bloga odnosno za listu lanaka dok se preostali dioprostora koristi za tzv. sidebaru kojemu se prikazuju neke sporedne informacije ili opcije kaoto je trailica.

Ako otvorimo blog.htmlod template-a vidjet emo da je struktura podijeljena u dva stupcaveliinecol-lg-8icol-lg-4.

1

2 3

4

5

6

7

8

9 Time to change your apps.

10

11

12 Posted: April 25, 2014. |13 By: Admin - 3 Comments

14 ....

15

16

17

18

19

20 ...

21

22

23


65/284


24

25

26

27 ...

U datoteciindex.phpprikazivat emo listu lanaka dok emo sidebarpozivati preko funkcijeget_sidebarkojeg zatim definiramo u zasebnoj datoteci sidebar.php. Prvo emo samo postavitistrukturu, a glavni sadraj e nam biti tekst koji smo prethodno unijeli uindex.php.

1

2

3

4

56

7


9

10

11

12

13

14

15

16

17

18

19

20

Stvorite u folderu temewpb3novu datotekusidebar.phpi samo upiiteSporedni sadraj. Zatimu datoteciindex.phpgdje se poziva sidebar promijenite u:

1 2

3

4


66/284


Glavni i sporedni sadraj

Lista lanaka

Lista lanaka

Kod listanja odnosno prikazivanja lanaka treba primijetiti to se sve prikazuje. Iz gornje slikemoemo vidjeti da se prikazuje slika, naslov, datum i autor, broj komentara te saetak sadrajauz poveznicu koja nas alje na stranicu tog lanka kako bi proitali sav sadraj. Cijeli kod jednoglanka pri listanju je sljedei:


67/284


1

2

3

4

5

6 Time to change your apps.

7

8

9 Posted: April 25, 2014. |

10 By: Admin - 3 Comments

11

12

13 Lorem Ipsum is simply dummy text of the printing and typesetting industry.

14 Lorem Ipsum has been ....

15
16
17

18 [Read More]

19

20

21

22

23

Dovoljno je kopirati samo taj dio unutar sekcije za glavni sadraj tako da sada dio za glavnisadraj unutar datotekeindex.phpizgleda ovako:

1

2

3

4

5

6

7

8 Time to change your apps.9

10

11 Posted: April 25, 2014. |

12 By: Admin - 3 Comments

13

14

Lorem Ipsum is simply dummy text of the printing and typesetting industr\

15 y. Lorem Ipsum has been the industry's standard dummy text ever since the 150\

16 0s, when an unknown printer took a galley of type and scrambled it to make a \

17 type specimen book.

18

It has survived not only five centuries, but also the leap into electron\

19 ic typesetting, remaining essentially unchanged.


68/284


69/284


25

26

27

28

29

Ovim kodom postavili smo glavni sadraj unutar WordPress Loop-a ime se provjera da li postojeikakvi lanci te ako postoje, za svaki lanak prikai mi sadraj unutar whilepetlje. Nakon toga,potrebno je dijelove sa sadrajem zamijeniti WordPress funkcijama kako bi se prikazao pravisadraj. Zamijenite gornji sadraj sa sljedeim:

1

2

3 4


70/284


comments_numberje funkcija koja prikazuje broj komentara na pojedinom lanku, te uzto se mogu namjestiti tri razna ispisa (kada imamo nula komentara, kada je jedan komentarili kada je vie komentara).

the_contentprikazuje sadraj. Ako je na stranici gdje se listaju lanci onda se prikazujesamo sadraj dodijela u lanku, ukoliko je stranica lanka, tada se prikazujecijeli sadraj.

Sada kada smo to napravili, ako se malo bolje pogleda template SOLID i njegovu blog stranicu(blog.html), vidjet emo da lanak kada je na svojoj stranici, nema crnu liniju ispod sebe. Ako nepravimo datoteku koja je posebno napravljena za prikaz pojedinog lanka ve se koristi index.phponda moemo dodatno to napraviti tako da odredimo da se ta linija prikazuje ako nije na stranicipojedinog lanka. To se radi ovako:

1 2

3

Funkcijomis_singulargledamo da li smo na stranici lanka ili neke stranice (page), a sa znakom! ispred oznaujeNEpa moemo to proitatiako nije stranica ili lanak ui u ovu granu iprikai liniju.

Slika lanka

Slika lanka je tzv.thumbnailte se on dodaje prilikom unosa lanka. Svaka WordPress temaodluuje za sebe ako e se moi unositi slika lanka, pa tako sada bez ikakve promjene nemamomogunost unosa slike lanka.

http://codex.wordpress.org/Post_Thumbnails
http://codex.wordpress.org/Post_Thumbnailshttp://codex.wordpress.org/Post_Thumbnails


71/284


Ne postoji opcija za unos slike

WordPress-u moramo preko nae teme rei da omogui unos slike. To se omoguuje pozivom:

1 add_theme_support('post-thumbnails' );

Upiite to negdje na poetak datoteke functions.php kao npr. iznad postavljanja varijable$content_width. Ako ste to napravili pokuajte opet posjetiti stranicu za unos novog lanka iliauriranja postojeeg.


72/284


Opcija za unos slike

Klikom naSet featured imageotvorit e se prozor za unos slike gdje imate mogunost odabiraiz ve postojeih slika ili unos nove slike. Prije nego unesemo sliku za probu, moramo odrediti idimenzije samog thumbnail-a. Dimenzije thumbnail-a, bez mijenjanja, postavljene su na 150pxx 150px (irina x visina). Izmjerimo li dimenzije slika u datoteci blog.htmlodnosno u folderuassets/imgvidjet emo da su te slike lanaka dimenzija 850x400, to se mnogo razlikuje odosnovnih dimenzija thumbnail-a.

Stoga je bolje napraviti novi tip slike kojeg emo nazvatislika-clanka. To je mogue pozivomfunkcijeadd_image_sizeija definicija je:

1 add_image_size( $name, $width, $height, $crop );

gdje

$name- oznauje ime verzije slike koju emo koristiti kada elimo prikazati tu verziju slike $width- irina u pikselima $height- visina u pikselima $crop- postavlja se nafalse- nema rezanja odnosno proporcionalno se slika ree,true-

slika se ree te moe biti tipapolje (array)gdje se onda napiu x i y koordinate podrujaza kropanje (poetak kropa, a zatim koristi za ostale koordinate, namjetene dimenzije)

Za nau sliku lanka imamo dimenzije i imamo ime, moemo i postaviti mogunost rezanja kakobi osigurali prikazivanje kvalitetne slike ako se postavi slika koja nije tih dimenzija. Ispod naefunkcijeadd_theme_supportza omoguavanje unosa slike lanka, postavite sljedee:

1 add_image_size('slika-clanka', 750, 353, true);

Prikazivanje slike lanka

Kako bi bilo mogue prikazati sliku lanka kod svakog lanka potrebno je pozvati funkciju zaprikaz slike, a ona je the_post_thumbnaildok njena definicija glasi:

http://codex.wordpress.org/Function_Reference/add_image_sizehttp://codex.wordpress.org/Function_Reference/the_post_thumbnail
http://codex.wordpress.org/Function_Reference/the_post_thumbnailhttp://codex.wordpress.org/Function_Reference/add_image_sizehttp://codex.wordpress.org/Function_Reference/the_post_thumbnailhttp://codex.wordpress.org/Function_Reference/add_image_size


73/284


74/284


Osvjeite poetnu stranicu i pogledajte promjenu.

Slika lanka u WordPress temi

Dodajte sada lanke koje hoete kako bi vidjeli kako e Vam se ponaati listanje lanaka. Ja uunijeti jo jedan lanak sa slikompost02.jpgte tekstom iz datotekeblog.html.

Pojedini lanak

Pojedini lanak se prikazuje ako kliknemo na naslovjednog lanka. Iako nismo napravili datotekuza ispis pojedinog lanka,single.php, prisjetimo se da smo u poglavljuUpoznavanje s WordPress-omsaznali kako se WordPress ponaa te da ako ne postojisingle.phpprikazuje sadraj definiranu index.php. Na ovaj nain, mi sada ipak moemo vidjeti samo sadraj jednog lanka prekodatotekeindex.php.

Otvorite sada datoteku iz SOLID template-a pod nazivomsingle-post.htmlte ako pogledate maloizgled zasebnog lanka, na kraju teksta moe se primijetiti da postoji podruje za dijeljenje tog

lanka preko drutvenih mrea.Kako bi bolje shvatili pozivanje single.php iindex.php stvorite novu datoteku uz index.php inazovite jesingle.phpte kopirajte cijeli sadraj izindex.php-a.

Datoteka single.php

Ukoliko ste kopirali cijeli sadraj, moete obrisati ono to nam nije potrebno, a to je:


75/284


1

2

3

To briemo jer se u ovoj datoteci prikazuje samo jedan lanak, a na stranicama lanaka neispisujemo crnu liniju.

Otvorite sada u Vaem editoru single-post.html i pogledajte kraj sadraja tog lanka. Dio zadrutvene mree izgleda ovako:

1 ...

2

There are many variations of passages of Lorem Ipsum available, but the ma\

3 jority have suffered alteration in some form, by injected humour, or randomis\

4 ed words which don't look even slightly believable.

5

6 SHARE:

7

8

9

10

11

12

Kopirajte dio nakonspacing-a i upiite ga usingle.phpna isto mjesto.

1 ...

2

3

4

5 SHARE:

6

7

8

9

10 11

Spremite ovu promjenu i pogledajte stranicu vaeg lanka.


76/284


Drutvene mree na pojedinom lanku

Dijeljenje sadraja

Svaka drutvena mrea ima svoje API-e te koritenjem njihovih biblioteka uz dijeljenje, moetevriti puno vie. Nama trenutno to nije potrebno te je dovoljno samo proslijediti parametrepotrebne za dijeljenje sadraja. Za takvo neto, koristit emo funkcije u Javascript-u.

Otvorite u Vaem editoruassets/js/custom.js. Ova datoteka e nam posluiti za pisanje svojihfunkcija.

Facebook

Kopirajte sljedeu funkciju ispod dijela})(jQuery);:

1 function share_facebook_post(link) {

23 u=link.getAttribute('href');

4 // t=document.title;

5 t=link.getAttribute('title');

6 window.open('http://www.facebook.com/sharer.php?u='+encodeURIComponent(u)+'\

7 &t='+encodeURIComponent(t),'sharer','toolbar=0,status=0,width=626,height=436'\

8 );

9 return false;

10

11 }

Objanjenje

Pozivom ove funkcije u nekoj poveznici kao npr.:

1

izvriti e se sljedee:

1. uzima se vrijednost za varijabluui to je vrijednost atributahrefto je u biti poveznica na

na sadraj


77/284


2. uzima se vrijednost za varijablut, a to je vrijednost atributatitleunutar poveznice t

wordpress na bootstrap 3.x

Documents