Kako napraviti svoj prvi Wordpress projekt koristeći
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 Publishing process.Lean Publishingis 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.
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 this hashtag on Twitter:
Predgovor . . . . 1
Upoznavanje sa Bootstrap Frameworkom . . . . 2
Korištenje Bootstrap-a . . . 2 Grid . . . 2 Responzivne slike . . . 4 CSS Komponente . . . 4 Javascript . . . 5 Prilagođen Boostrap . . . 7
Napredno prilagođavanje Bootstrapa . . . 9
Raspakirani Bootstrap Izvorni kod . . . 11
Korištenje less-a . . . 12
Prepros . . . 12
Kompajliranje Less-a . . . 13
Pozivanje i mapiranje Preprosom . . . 16
Izmjena Bootstrap.less-a . . . 22
Odabir Template-a . . . 23
Upoznavanje WordPress-a . . . 25
Koncept . . . 25
Instalacija WordPress-a . . . 26
Početne datoteke jedne teme . . . 26
Razumijevanje hijerarhije datoteka . . . 27
Glavna petlja - The Loop . . . 28
Action i Filter funkcije . . . 29
Izrada WordPress teme . . . 31
Instaliranje XAMPP-a i podešavanje WordPress-a . . . 31
Instalacija WordPress-a . . . 34
Početna struktura projekta . . . 35
Functions.php . . . 38
Header i footer . . . 38
Objašnjenje . . . 39
Povezivanje header-a i footer-a . . . 39
Izrada Bloga . . . 40
Povezivanje CSS datoteka . . . 41
Izrada Navigacije . . . 45
Logo . . . 47
WordPress Menu . . . 48
Prikaz WordPress Menu-a . . . 49
Naziv stranice . . . 53
Razmak između naslova i navigacije . . . 54
Struktura bloga . . . 56
Lista članaka . . . 58
WordPress Loop . . . 60
Slika članka . . . 62
Prikazivanje slike članka . . . 64
Pojedini Članak . . . 66
Dijeljenje sadržaja . . . 68
Sporedni sadržaj . . . 71
Pozivanje i prikaz sidebar-a . . . 74
Dodavanje widget-a . . . 74
Izrada Widgeta . . . 76
Lista kategorija . . . 76
Objašnjenje . . . 84
Registriranje widgeta . . . 85
Prikaz Category widgeta . . . 87
Objašnjenje . . . 88
Izrada widgeta za posljednje članke . . . 89
Prikazivanje naslova . . . 92
Objašnjenje . . . 92
Prikazivanje posljednjih članaka . . . 92
Objašnjenje . . . 95
Izrada Widgeta za Tagove . . . 96
Footer . . . 99
Struktura footera i pozivanje sidebar-a . . . 101
Widget About . . . 102
Widget Social Links . . . 103
Polja za unos . . . 104
Spremanje vrijednosti . . . 106
Prikaz widgeta . . . 107
Registriranje widgeta . . . 108
Unos Widgeta . . . 108
Widget Our Bunker . . . 110
Bootstrap na blogu . . . 110
Glavni Sadržaj . . . 110
Footer . . . 111
Responzivne slike članka . . . 112
Promjena HTML kod od thumbnail-ova . . . 113
Dodatni CSS za resize slike . . . 117
Dodatne datoteke stranica . . . 118
Stranice bez sidebar-a . . . 118
Datoteka 404.php . . . 120
Dodavanje komentara na članke . . . 121
Sređivanje komentara . . . 127
Napredna izrada WordPress teme: Portfolio . . . 128
Dizajn i funkcionalnost . . . 128
Plan izrade . . . 128
Stranica koja prikazuje sve projekte . . . 129
Stranica pojedinog projekta . . . 129
Custom Post Type: portfolio . . . 129
Kategorija - Custom Taxonomy . . . 130
Tagovi - Custom Taxonomy . . . 132
Dodavanje Meta Box-a . . . 133
Dodavanje polja za unos . . . 134
Spremanje unesenih vrijednosti . . . 135
Dodavanje slika za projekt . . . 137
Nova dimenzija slika . . . 137
Custom Template: Portfolio Home . . . 137
Pretvorba SOLID Portfolia u WordPress Portfolio . . . 139
Pojedini projekt . . . 144 Slider slika . . . 147 Tekst projekta . . . 149 Detalji projekta . . . 150 Povezani projekti . . . 155 Responzivne slike . . . 158 Filtriranje projekta . . . 161
Napredna izrada WordPress teme: Business . . . 165
Plan izrade . . . 165
Početna stranica: Home . . . 165
Feature dio . . . 169
Dodavanje Metaboxa i polja za unos . . . 171
Spremanje Metaboxa . . . 172
Ispis feature-a . . . 174
Ispis posljednjih projekta . . . 176
O agenciji, FAQ i posljednji članci . . . 178
Registracija novih prostora za widgete . . . 178
Postavljanje HTML-a i pozivanje prostora za widgete . . . 179
Widget za prikaz jedne stranice . . . 181
Widget za prikaz posljednjih članaka sa različitim post_type sadržajem . . 184
FAQ post type . . . 188
Testimonials . . . 189
Ispis Testimoniala . . . 194
Ispis Klijenata . . . 199
Spremanje polja u media uploader-u . . . 201
Ispis slika za klijente . . . 201
Sređivanje uvodne slika . . . 203
Sređivanje Testimonial dijela . . . 203
Custom Template: About . . . 205
Ispis sadržaja stranice . . . 206
Članovi tima . . . 208
Dodavanje dodatnih unosa preko metaboxa . . . 209
Spremanje dodatnog unosa . . . 210
Ispisivanje poruke prilikom greške kod unosa . . . 212
Ispisivanje članova . . . 213
Testimonials i slike klijenata . . . 215
Custom Template: Contact . . . 217
Sporedni sadržaj . . . 218
Forma . . . 220
Korištenje WordPress Customizer-a . . . 223
Izrada opcije . . . 223
Izrada Sekcije . . . 224
Izrada Kontrole . . . 224
Ispis vrijednosti . . . 225
Promjene u stvarnom vremenu . . . 225
Customizer klasa . . . 226
Promjena naslova stranice . . . 229
Dodavanje sekcije Header i opcije za pozadinu navigacije . . . 229
Dodavanje opcije za boju poveznica . . . 231
Dodavanje opcije za boju aktivne poveznice . . . 232
Dodavanje polja za otvoreni dropdown . . . 234
Dodavanje opcije za mijenjanje pozadine padajućih izbornika . . . 235
Dodavanje opcije za mijenjanje pozadine aktivne poveznice u padajućem izborniku . . 236
Dodavanje sekcije za Footer i opciju za pozadinu footer-a . . . 237
Dodavanje opcije za boju teksta u footer-u . . . 238
Dodavanje opcije za heading u footer-u . . . 239
Opcije (Settings API) . . . 241
Dodavanje sekcije (Settings Section) . . . 242
Dodavanje polja (Settings Field) . . . 243
Dodavanje opcije (Setting) . . . 245
Prikaz polja i sekcija . . . 245
Izmjena prikaza testimonialsa i slike klijenata . . . 246
Korištenje AJAX-a u WordPress-u . . . 248
AJAX u administrativnom dijelu . . . 249
Dodavanje elemenata preko AJAX-a . . . 249
Prikaz dodanih elemenata u widgetu . . . 254
AJAX na javnoj strani (Front End) . . . 256
Postavljanje jQuery funkcije za AJAX . . . 257
Funkcije za povećavanje ili smanjivanje ocjene . . . 259
Sređivanje javnog dijela . . . 262
A Dodatak: WordPress - Bootstrap NavWalker . . . 264
B Dodatak: Osnove PHP-a . . . 270
Varijable . . . 270
Polja . . . 271
Ključevi u poljima . . . 271
Izvlačenje vrijednosti iz polja . . . 271
Petlje . . . 272 For petlja . . . 272 While petlja . . . 272 Do-While petlja . . . 273 Grananje . . . 273 Funkcije . . . 274 Popust na Video . . . 276
WordPress je jedan od vodećih CMS sustava u Blogging svijetu pa i šire. Danas se WordPress sve više koristi kod izrada raznih web aplikacija koje su daleko kompleksnije od jednog bloga za što je WordPress u početku bio namijenjen.
Ova knjiga namijenjena je za sve developere, a i dizajnere koji se žele okušati u WordPress-u i naučiti kako izraditi jedan mali projekt u WordPress-u. Knjiga WordPress na Bootstrapu 3.x može pomoći i iskusnijim developerima koji su već radili u WordPressu jer će uz izradu same WordPress teme biti korištene i neke druge korisne metode odnosno funkcije koje mijenjaju neke funkcije u samom CMS-u.
Frameworkom
Bootstrap je Framework za bržu izradu web stranica pomoću njegovih unaprijed definiranih sti-lova, elemenata, komponenti te funkcionalnosti. Kako bi mogli izraditi WordPress na Bootstrap-u potrebno je najprije upoznati se sa samim Frameworkom. Verzija Bootstrap-a u trenutku pisanja ove knjige je 3.2.0. Ovaj Framework možete skinuti ili se s njime pobliže upoznati na njegovoj stranicihttp://getbootstrap.com¹.
slika
Korištenje Bootstrap-a
Bootstrap je veoma jednostavan za koristiti. Dovoljno je pozvati njegove datoteke i prizivati odnosno dodavati komponente koje su nam potrebne. Na takav način jednostavno je dodati par redaka sa strukturom koja sadrži klase koje Bootstrap koristi.
Grid
Grid je naša struktura stranice. Njime se definira naš layout u koji se zatim dodaju razne komponente Bootstrap-a. Početna struktura sastoji se od tri dijelova - container, row i column. Unutar column-a unosimo sadržaj.
Klasična struktura jednog bloga je lijevi dio s glavnim sadržajem i desnim dijelom s nekim dodatnim sporednim informacijama. To bi se postiglo sa sljedećim kodom:
1 <div class="container">
2 <div class="row">
3 <div id="primary-content" class="col-sm-8">
4 Glavni sadržaj
5 </div>
6 <aside id="secondary-content" class="col-sm-4">
7 Sporedni sadržaj
8 </aside>
9 </div>
10 </div>
Jedan redak sastoji se od 12 stupaca. Ovakvom strukturom rekli smo da naš glavni sadržaj koristi 8/12 prostora retka, dok sporedni sadržaj koristi 4/12 prostora, što ukupno daje 12 stupaca. Bootstrap je responzivan pa tako ima i svoje točke prekidanja (eng. breakpoint) na kojima se sadržaj lomi, presavija i sl. Te točke po default-u su < 768px, >= 768, >= 992px i >= 1200px. Ove točke prekidanja odnose se na širinu ekrana na kojemu se web prikazuje. Na način na koji je napravljen Bootstrap odnosno na način na koji su postavljene točke prekidanja, radi se s Mobile-First Frameworkom te zbog toga ne vidimo nigdje točke prekidanja koje gledaju na < 481px jer se smatra da se za to definira sadržaj u početku.
Upravo zbog tih točaka prekidanja postoje različite klase xs, sm, md, lg. Klasu sm možete vidjeti u gornjem primjeru. To znači da će sadržaj iznad 768px biti prikazan upravo u ovakvoj strukturi, dok sadržaj ispod te širine, koji zahtjeva klasu xs za dodatnu definiciju strukture će biti jedan ispod drugog sa širinom namještenom na 12/12 odnosno svaki stupac biti će jednak širini 12 stupaca tj. na 100% širine jer nema definiranu strukturu za tu širinu. Isti učinak dobili bi kada bi napisali sljedeće:
1 <div class="container">
2 <div class="row">
3 <div id="primary-content" class="col-sm-8 col-xs-12">
4 Glavni sadržaj
5 </div>
6 <aside id="secondary-content" class="col-sm-4 col-xs-12">
7 Sporedni sadržaj
8 </aside>
9 </div>
10 </div>
Više o gridu možete saznati naBootstrap Grid². ²http://getbootstrap.com/css/#grid
Responzivne slike
Bootstrap 3 pruža jednostavan način za postizanje responzivnih slika. Dovoljno je za sliku dodatni klasu .responsive-img kako bi ona dobila širinu elementa u kojemu se nalazi te se skalirala tj. mijenjala dimenzija u ovisnosti o elementu u kojemu se nalazi.
1 <img src="..." class="img-responsive" alt="Responsive image">
O jednostavnim CSS dijelovima koje omogućuje Bootstrap 3 više možete pronaći naBootstrap CSS³.
CSS Komponente
Uz jednostavne CSS klase koje omogućuju lakše slaganje Bootstrap pruža i dodatne kompleksnije CSS komponente koje mogu poslužiti za što brži razvoj nekakvih modula kao što je npr. navigacija i još uz to, responzivna navigacija koja se na manjim ekranima otvara na klik. Sve što je potrebno je kopirati i zalijepiti sljedeći kod:
1 <nav class="navbar navbar-default" role="navigation">
2 <div class="container-fluid">
3 <!-- Brand and toggle get grouped for better mobile display --> 4 <div class="navbar-header">
5 <button type="button" class="navbar-toggle" data-toggle="collapse"
6 data-target="#bs-example-navbar-collapse-1">
7 <span class="sr-only">Toggle navigation</span>
8 <span class="icon-bar"></span>
9 <span class="icon-bar"></span>
10 <span class="icon-bar"></span>
11 </button>
12 <a class="navbar-brand" href="#">Logo Tekst ili Slika</a>
13 </div>
14
15 <!-- Collect the nav links, forms, and other content for toggling --> 16 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
17 <ul class="nav navbar-nav">
18 <li class="active"><a href="#">Link</a></li>
19 <li><a href="#">Još jedan Link</a></li>
20 <li class="dropdown">
21 <a href="#" class="dropdown-toggle" data-toggle="dropdown">
22 Padajući izbornik <span class="caret"></span></a>
23 <ul class="dropdown-menu" role="menu">
24 <li><a href="#">Jedan link</a></li>
25 <li><a href="#">Drugi link</a></li>
26 <li><a href="#">Treći Link</a></li>
27 <li class="divider"></li>
28 <li><a href="#">Odijeljeni Link</a></li>
29 <li class="divider"></li>
30 <li><a href="#">Odijeljeni Link No. 2</a></li>
31 </ul> 32 </li> 33 </ul> 34 </div><!-- /.navbar-collapse --> 35 </div><!-- /.container-fluid --> 36 </nav>
Uz ovakav kod dobiti ćemo meni s padajućim izbornikom koji se otvara na klik mišem ili prstom ako koristimo mobitel ili tablet.
Bootstrap Navigacija Ista navigacija s otvorenim padajućim izbornikom:
Bootstrap Navigacija i padajući zbornik
Kako bi ovaj padajući zbornik mogao funkcionirati kako spada potrebno je koristiti javascript pluginove koje pruža Bootstrap 3. Plugin koji se ovdje koristi je tzv. collapse.
Sve ostale CSS Komponente možete pronaći naBootstrap CSS Komponente⁴.
Javascript
Kao što je prikazano u prethodnom poglavlju s navigacijom, Bootstrap dolazi zapakiran i s Javascript pluginovima koji daju dodatne funkcionalnosti. Na takav način možemo lako pozvati neke dijelove s CSS klasama i HTML atributima koje izvršavaju dodatne funkcionalnosti jer su usko povezane s pluginovima, kao što je npr.carousel plugin⁵.
⁴http://getbootstrap.com/components ⁵http://getbootstrap.com/javascript/#carousel
Dovoljno je uzeti njihov kod iz primjera, prilagoditi ga malo i dobiti ćemo funkcionalan slider. 1 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel\
2 ">
3 <!-- Indicators -->
4 <ol class="carousel-indicators">
5 <li data-target="#carousel-example-generic" data-slide-to="0"
6 class="active"></li>
7 <li data-target="#carousel-example-generic" data-slide-to="1"></li>
8 <li data-target="#carousel-example-generic" data-slide-to="2"></li>
9 </ol>
10
11 <!-- Wrapper for slides --> 12 <div class="carousel-inner">
13 <div class="item active">
14
15 <h1>Ovo je slider</h1>
16 <div class="carousel-caption">
17 ...sdasdsadada 18 19 <br/> 20 sadijasidjaidsjaidjas 21 </div> 22 </div>
23 <div class="item ">
24
25 <h1>Ovo je slider</h1>
26 <div class="carousel-caption">
27 ...sdasdsadada 28 29 <br/> 30 sadijasidjaidsjaidjas 31 </div> 32 </div> 33 34 <!-- Controls -->
35 <a class="left carousel-control" href="#carousel-example-generic"
36 role="button" data-slide="prev">
37 <span class="glyphicon glyphicon-chevron-left"></span>
38 </a>
39 <a class="right carousel-control" href="#carousel-example-generic"
40 role="button" data-slide="next">
41 <span class="glyphicon glyphicon-chevron-right"></span>
42 </a>
Sada to izgleda kao ovo:
Carousel Slider
Uz takve pluginove moguće je nadodati dosta zanimljivih i korisnih funkcionalnosti. O njima možete više pročitati naBootstrap Javascript⁶.
Prilagođen Boostrap
Bootstrap na svojoj web stranici daje mogućnost prilagođavanja Bootstrap-a svojim željama i potrebama. Dakle, moguće je namještati razne varijable od boja do veličina fonta kako bi si kasnije olakšati izradu tema na Boostrap-u. To je moguće na njihovoj stranici: ht-tp://getbootstrap.com/customize/⁷.
Ako poznajemo potrebe našeg projekta moguće je ovdje postaviti sve potrebne postavke te odabrati samo one Javascript pluginove koji su nam potrebni u tome projektu kako ne bi uzimali komponente koje nam nisu potrebne i tako podizali veličinu našeg projekta bez razloga.
Recimo na primjer da sve što nam treba od Bootstrap-a je njegov Grid i nešto responzivnih css klasa. Dovoljno je kliknuti na Toggle All i odabrati samo Grid i Responsive utilities kao na slici ispod.
⁶http://getbootstrap.com/javascript ⁷http://getbootstrap.com/customize/
Prilagođeni Bootstrap
Ako su nam potrebne svi ili pojedini jQuery plugini malo ispod ovih Less datoteka potrebno je na isti način odabrati željene jQuery pluginove ili ostaviti kako je.
Nakon toga možemo prilagoditi Grid našim potrebama mijenjajući vrijednosti varijabla koje se odnose na Grid.
Prilagođeni Bootstrap
Nakon što smo promijenili sve što je trebalo promijeniti treba pritisnuti na Compile and Download i dobiti ćemo u .zip formatu datoteku koju je potrebno skinuti te koja sadrži naše .css datoteke i .js datoteke.
Nakon toga potrebno je polinkati našu web stranicu s tim datotekama i možemo je jednostavno razvijati na Bootstrap 3 Framework-u.
Napredno prilagođavanje Bootstrapa
Uz njihov alat za prilagođavanje Bootstrap-a, moguće je skinuti Bootstrap u izvornom formatu odnosno u .less formatu. ### Što je Less? Less je pretprocesor za CSS koji omogućava jednostavni-je pisanjednostavni-je CSS-a koristeći grananja, varijable i ostale razne pogodnosti kako bi se ubrzalo pisanjednostavni-je CSS-a. Nakon toga kompajlira se takva datoteka u .css format koja može biti i kompresirana na najmanju moguću veličinu. Time dobivamo brži i lako održivi CSS.
Mali primjer Less-a .less datoteka
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; }
Može se primijetiti da se grananjem i korištenjem varijabli uštedjelo na pisanju ponavljajućih klasa ili boja i sl.
Uz Less, Bootstrap omogućuje korištenje Sass-a koji je također jedan od pretprocesora CSS-a, ali Less je njihov izvorni jezik pa ću se držati toga u ovoj knjizi.
Kako bi dobili cijeli Bootstrap 3 u izvornom obliku sa less datotekama potrebno je odabrati Download Source.
.
Raspakirani Bootstrap Izvorni kod
Ako ste skinuli tj. preuzeli Bootstrap izvorni kod i raspakirali njihovu .zip datoteku, dobili ste nešto slično ovome:
Izvorna datoteka
Ako otvorite prvi direktorij kao na slici dist vidjet ćete isto ono što bi dobili ako kompajlirate bootstrap preko njihovog alata na stranici (css,font i js direktorije) uz još neke dodatne datoteke koje Vam ne služe ako ne koristite Grunt ili nešto slično. Kako je ova knjiga zamišljena kao priručnik za početnike ili one koji se već bave ovom strukom, preskočit ćemo alate kao Grunt i fokusirati se na što jednostavniji pristup kako bi mogli obavljati ono najbitnije, a to je praviti WordPress temu iz Bootstrap-a.
Ako ponovno bacimo pogled na početni direktorij osvrnimo se na ono najbitnije u ovome poglavlju, a to je less direktorij. Kada bi uzeli taj direktorij uz fonts i js dobili bi pravi Bootstrap-ov nekompilirani kod jer u less direktoriju nalaze se razne less datoteke dok se u js direktoriju nalaze razne js datoteke. Sve te datoteke u sebi sadrži neki dio css-a odnosno js-a koji su potrebni bi Bootstrap bio Bootstrap.
Korištenje less-a
Kako je less preprocesor CSS-a potrebno je koristiti dodatne stvari kako bi mogli iz less-a dobiti css. Iako je to moguću i preko obične javascript datoteke koja čita less datoteke i pretvara to u css radi produkcije bolje je odmah raditi pretvorbu less-a u css i to prikazati na webu bez dodatnih komplikacija.
Kako to napraviti? Dosta jednostavno, mogu se koristiti alati poputGrunt-a⁸ koji rade preko terminala odnosno komande linije (command prompt) ili možete koristiti GUI (eng. Graphic User Interface) alate koji obavljaju istu stvar kao Grunt. Jedan takav alat jePrepros⁹.
Prepros
Prepros
Za osobnu upotrebu dovoljna je i besplatna verzija. Skinite je i instalirajte kao svaki drugi program. Moguće da donja slika neće biti ista kao i vaša jer se verzija već podigla odnosno kao na gornjoj slici, verzija je 4.2 dok je moja instalacija 4.0. Razlike nisu prevelike.
Prepros Instalacija
⁸http://gruntjs.com/
Nakon što ste instalirali prepros možete ga otvoriti i dobiti ćete prazan dashboard gdje se inače pokazuju svi otvoreni projekti. Lista projekata može izgledati kao sljedeća lista:
Prepros Lista Projekata
U lijevom stupcu nalaze se svi projekti dok u desnom stupcu se za odabrani projekt prikazuju sve datoteke koje Prepros prepoznaje i koje može kompajlirati. Uz sliku koja pokazuje vrstu datoteke, desno od nje pokazuje naslov datoteke, ispod naslova je putanja do te datoteke te zadnji red pokazuje gdje će se kompajlirati navedena less datoteka.
Kompajliranje Less-a
Sada kada smo se upoznali malo s Less-om i načinom rada nema boljega nego pokušati upravo to i napraviti kako bi još bolje razumjeli ukupni proces rada. Kopirajte sada prethodno navedene direktorije iz vašeg Bootstrap-ovog izvornog direktorija, a te datoteke jesu less, js i fonts i prenesite ih u neki zasebni direktorij kao npr. test.
Sada prije kompajliranja less-a, otvorimo direktorij i u vašem najdražem editoru kao što je Notepad++, Brackets ili Sublime Text otvorite datoteku bootstrap.less. Može se primijetiti kako su sve ostale .less datoteke importirane unutar ove datoteke.
1 // 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";
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 znači da će se kada kompajliramo bootstrap.less datoteku, u biti kompajlirate sve ovdje navedene .less datoteke. Jednako tako mogu se varijable koje su definirane na jednom mjestu ko-ristiti i u drugim datotekama bez ponovnog definiranja, kao što su varijable unutar variable.less datoteke. Varijable su označene tako da počinju sa znakom @.
1 // 2 // 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 sadržaju ove datoteke nalaze varijable za sva ostala moguća css svojstva. Takve varijable se dalje koriste u drugim datotekama iako nisu opet definirane.
Upravo zbog toga, ako pogledate u prethodno navedeni sadržaj datoteke bootstrap.less, može se primijetiti da je upravo datoteka variables.less navedena na početku. Ako sada otvorimo neku drugu datoteku poput navbar.less mogu se vidjeti i neke druge varijable koje su korištene a nisu definirane prije korištenja.
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 i postavimo putanju gdje će se kompajlirati. Za početak, potrebno je dodati projekt klikom na Add New Project te zatim odabrati direktorij u kojem se nalaze less datoteke.
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.
Dodani projekt
Ukoliko želimo imati neku drugu putanju to lako možemo i napraviti. Za ovaj primjer postavimo da bootstrap.less se kompajlira direktono u naš direktorij test u style.css. Potrebno je kliknuti prvo na putanju koja se automatski generirala ispod bootstrap.less datoteke. Nakon klika, dobiti ćemo direktorij unutar kojega se nalazi datoteka bootstrap.less.
Promjena putanje
Definirana putanja
Promijenjena putanja
Sada je dovoljno odabrati bootsptrap.less i kliknuti na Compile ili istu tu datoteku Spremiti preko vašeg omiljenog editora.
Prepros Compile
Ako je sve ispravno napisano Prepros će spremiti nove promjene u style.css te ukoliko ne postoji stvoriti će tu datoteku umjesto Vas.
Kompilirana datoteka
Izmjena Bootstrap.less-a
Što ako nam nešto nije potrebno sada u tome? To možemo jednostavno promijeniti bez potrebe za korištenjem njihovog alata za kompajliranje već je dovoljno samo maknuti neke .less datoteke koje nam ne trebaju. To je vezano za CSS, dok za JS isti postupak se koristi za kompajliranje JS-a sa Preprosom.
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 Compile ili Save preko našeg editora dobiti ćemo novi style.css ali bez tog dijela. Sada je početak style.css datoteke sljedeći dio koda:
1 @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 ...
Možete primijetiti kako je jednostavno korištenjem less-a i Preprosa micati i dodavati nove ili stare datoteke, a tako i dodavati ili brisati css dijelove koji nam nisu potrebni.
Odabir Template-a
Kako sada malo bolje razumijemo kako raditi s Bootstrap-om, te ako ste malo proučili kompo-nente Bootstrap-a upoznati ste i s nekim komponentama Bootstrap-a koje ćemo vidjeti u raznim template-ima.
Iako postoje razni kvalitetni premium template-i, odabrat ćemo jednostavniji i jeftiniji pristup te uz kratku pretragu po Google-u mogu se pronaći kvalitetni besplatni template-i.
Ja sam u Google upisao Free Bootstrap Themes te naišao na puno različitih članaka i template-a. Nakon kratkog muvanja po raznim stranicama naišao sam na jedan simpatičan template koji ima više toga u sebi, a sadrži i Blog što odgovara našim potrebama.
Iako nikakve potrebe nisu bile navedene, kako radimo s WordPress CMS-om koji je započeo kao nekakav blogging cms napravit ćemo i jedan klasičan blog dio na našoj stranici. Template koji sam pronašao zove se SOLID i može se naćiovdje¹⁰.
Na toj istoj stranici možete pogledati DEMO tog template-a. Ja sam ga skinuo klikom na Download.
Prije nego krenemo s izradom odnosno pretvorbom ovog template-a u WordPress temu, treba razumjeti da je ovo gotova tema te ovdje neće biti izrade s less jezikom iako je podrobno bio objašnjen u prethodnim poglavljima.
To je bilo napravljeno iz razloga kako bi bolje razumjeli sam rad s Bootstrap-om te na koji način je ovaj template bio napravljen.
WordPress je CMS koji je u početku bio zamišljen kao blog platforma. Nakon nekog vremena počeo se koristiti kao platforma za web stranice različitog tipa. Zbog njegove jednostavne uporabe mnogi ga uzimaju u obzir kada započinju svoje web projekte pa čak i ljudi koji nisu developeri već su upoznati s WordPress-om te klijenti znaju sami tražiti da se njihova web stranica radi u WordPress-u. U ovome poglavlju upoznati ćemo se s WordPress-om kao temeljem za izradu web projekta.
Koncept
WordPress kao CMS koncipiran je u nekoliko segmenata. Sastoji se od članaka, stranica, komentara te uz cijeli taj sadržaj omogućava korištenje raznih tema i nadogradnju samog CMS-a pomoću njegovih dodataka.
Članci - su zapisi poput nekih novosti i sl. koji se zatim listaju, često, na početnoj stranici. Moguće ih je kategorizirati pomoću kategorija i tagova.
Stranice - su zapisi slični člancima ali oni se smatraju kao obične stranice koje se dodaju i u navigaciji WordPressa. Bez dodatne konfiguracije stranice su automatski dodane u navigaciji i tako predstavljaju stranice poput “O nama”, “Usluge” i sl. koje su dosta česte statične stranice. Komentari - su zapisi koje prave korisnici WordPress stranice. Komentare mogu pisati i korisnici koji nisu registrirani na stranici ako je tako omogućeno.
Teme - su različiti predlošci dizajna koji se mogu skinuti i instalirati putem WordPress admi-nistracije ili direktno preko sistema direktorija. Sve instalirane teme moguće je pregledati preko WordPress administracije i uključivati po želji. Teme se nalaze u folderu wp-content/themes/. Dodaci - služe za proširivanje funkcija same WordPress stranice. Danas postoje različiti dodaci za svakakve potrebe. Dodaci se nalaze u folderu wp-content/plugins/.
Instalacija WordPress-a
Stranica za download WordPressa
WordPress se može skinuti sa stranicewordpress.org¹¹. Ako niste zadovoljni engleskom verzijom možete skinuti WordPress za neki drugi jezik. Klikom na download dovesti će vas na stranicu za skidanje WordPress-a u .zip ili .tar.gz formatu.
Sam proces konfiguriranja WordPress-a na vašem lokalnom serveru biti će objašnjeno kasnije u knjizi kada se bude radila WordPress tema.
Početne datoteke jedne teme
Kako bi izradili WordPress temu potrebno je razumjeti strukturu jedne teme. Potrebne datoteke za jednu temu kako bi funkcionirala jesu:
• style.css - sadrži sva css pravila koja definiraju izgled teme
• index.php - početna datoteka koja se uvijek prvo gleda ako drugačije nije postavljeno. Često se koristi za početnu stranica gdje se listaju svi članci.
Obično uz ove datoteke imamo i sljedeće:
• header.php - sadrži dijelove teme koji se ponavljaju kao npr. navigacija, logo i sl. na vrhu teme
• footer.php - sadrži dijelove teme koji se ponavljaju u podnožju teme
• sidebar.php - sadrži strukturu sidebar-a koji se koristi u temi, najčešće poziva dinamični sidebar
• comments.php - sadrži strukturu komentara koji se dodaju svakom članku ili stranici gdje su omogućeni komentari
Uz navedene datoteke dobro je imati i sljedeće:
• single.php - prikazuje samo jedan članak kojeg se gleda • page.php - prikazuje sadržaj jedne stranice
• archive.php - prikazuje listu članaka, često sadrži istu strukturu kao i index.php. Ovo se koristi pri listanju članaka iz pojedine kategorije, taga i sl.
• functions.php - sadrži razne opcije i funkcije vezane uz temu, tu se mogu definirati novi post type-ovi, widgeti i sl.
• 404.php - ova datoteka se koristi u slučaju da stranice ili članak nije pronađen.
Ako je potrebno imati posebnu početnu stranicu za WordPress temu koristi se jedna od sljedećih datoteka:
• home.php • front-page.php
Razumijevanje hijerarhije datoteka
Moguće je koristiti još datoteka kako bi si olakšali održavanje. Cijelu hijerarhiju datoteka moguće je pogledati naChip Bennett Template Hijerarhija¹². Ovdje neću objasniti svaku pojedinu ali iz nekoliko primjera biti će dovoljno jasno da se može čitati dijagram na gornjoj slici.
Arhiva
Arhiva članaka je jedan od najosnovnijih načina prikazivanja članaka u WordPress-u. Prilikom pristupanja nekoj arhivi, za primjer uzet ćemo kategoriju Auti ( slug od kategorije je auti, id od kategorije je 2), WordPress čini sljedeće:
• Prepoznaje da se radi o arhivi
• Prepoznaje da se radi o arhivi kategorije
• Pregledava folder od teme da li postoji datoteka category-auti.php, ako postoji koristit će nju
• Ukoliko nema prethodno navedene datoteke, pregledava folder da li postoji category-2.php, ako postoji koristiti će nju
• Ukoliko nema category-2.php, pregledava se folder za category.php datotekom • Ukoliko nema ni category.php, pregledava se folder za archive.php
• Ukoliko nema archive.php koristi se index.php Članak
Članak je prikaz jednog članka koji se prikazuje na stranici jer smo kliknuli na njegov naslov ili neki link koji nas je doveo do njega. Taj članak se zatim preko njegovog URL-a ili ID-a prikazuje na stranici. WordPress radi sljedeće:
• Prepoznaje da se radi o stranici koja prikazuje samo sadržaj jednog posta ili stranice • Prepoznaje da se radi o stranici koja prikazuje samo sadržaj jednog posta
• Pregledava koji tip članka
• Ukoliko je članak tipa “Post”, pregledava se folder za datotekom single-post.php
• Ukoliko je članak nekog našeg tipa koji je naknadno dodan, što je poznato kao “Custom Post Type”, pregledava se folder za datotekom single-auto.php ukoliko bi naš custom post type bio auto.
• Ukoliko je članak nekog priloga kao npr. uploadane slike tada se pregledava folder za datotekom image.php ukoliko je to datoteka tipa image, zatim ako je nema gleda za png.php ako je slika u formatu .png, a nakon toga gleda ako postoji image_png.php datoteka. Ukoliko nema niti jedne od tih datoteka gleda attachment.php
• Ukoliko nije pronađena neka od spomenutih datoteka pregledava se folder za datotekom single.php
• Ukoliko nema ni single.php, koristi se index.php
Prateći dijagram koji je gore naveden tema se može organizirati u hijerarhiju datoteka koja je lako održiva te je jednostavno shvatiti koja datoteka se odnosi na koji dio teme. Iz gore navedenih primjera može se primijetiti kako sve uvijek vodi na index.php ukoliko tražene datoteke ne postoje. Ako neke promjene nisu pretjerano velike mogu se napraviti i u index.php datoteci kao što je npr. naslov arhive za kategoriju.
1 //ovo je unutar petlje the_loop()
2 if(is_category()){ single_cat_title("Članci iz kategorije: ", true); }
Glavna petlja - The Loop
Glavna petlja ili The Loop je PHP kod koji se koristi za listanje sadržaja članka, stranica i sl. Ova petlja prikazuje svaki članak ili stranicu koji su dobiveni kriterijima postavljenim u glavnom query-u koji pristupa bazi. Taj query se npr. mijenja i ovisno o kategoriji kada se poziva category-auto.php.
Svaki HTML i PHP kod unutar petlje prikazat će se odnosno izvršiti za svaki članak unutar petlje. Koristeći razne Template Tagove možemo prikazati različite informacije. Jedne od osnovnih tagova kod prikaza informacija za članak unutar petlje jesu:
• the_content() - prikazuje sadržaj članka, ukoliko nije stranica pojedinog članka onda se prikazuje skraćeni tekst
• the_category() - prikazuju se kategorija članka • the_date() - prikazuje se datum članka
• the_permalink() - daje cijeli link na članak, ovaj dio se dodaje npr. u atribut href Razni tagovi mogu se pronaći naWordPress Codex-u¹³.
Osnovna struktura petlje 1 <?php 2 if( have_posts() ) { 3 while( have_posts() ) { 4 the_post(); 5 //Ostali sadržaj 6 } 7 } 8 ?>
Action i Filter funkcije
Action i Filter funkcije služe za nadograđivanje naše teme ili admin-a. Njima se može određivati da se u određeno vrijeme ili na određenom mjestu neka funkcija izvrši. Action funkcije se izvršavaju kada se nešto dogodi odnosno izvrši kao što je npr. publish članka ili prikazivanje admin stranice. Filter funkcije su funkcije koje se izvršavaju kod podataka kao što je mijenjanje nekih podataka ili filtriranje istih prije nego se spremaju u bazu ili ispisuju korisniku stranice. Action funkcije
Kako bi pozvali neku funkciju uz neku Action funkciju koristi se
1 add_action("ime_actiona", "ime_funkcije", prioritet, broj_parametara ); • ime_actiona predstavlja ime actiona pri kojem se poziva funkcija
• ime_funkcije predstavlja ime funkcije koja se poziva kada se dogodi odgovarajući action • prioritet predstavlja broj, ukoliko ga ne unesemo postavlja se na 10. Što je manji broj to se
prije izvršava dodana funkcija
• broj_parametara predstavlja broj parametara koji dolaze uz funkciju, npr. function upda-te_post($a,$b) - tu imamo broj 2 jer se prosljeđuju dva parametra
Mjesto pozivanja te action funkcije određuje se sa
1 do_action("ime_actiona"); Filter funkcije
Za pozivanje Filter funkcije koristi se slični poziv kao i za Action funkcije gdje parametri predstavljaju istu stvar kao i pozivanje Action funkcija:
1 add_filter("ime_filtera", "ime_funkcije", prioritet, broj_parametra); Mjesto pozivanja filter funkcije određuje se sa
1 do_filter("ime_filtera",$vrijednost,$varijabla1,$varijabla2,....);
• $vrijednost predstavlja vrijednost koja se šalje u filter i koja se može mijenjati u filteru • $varijabla1, $varijabla2 predstavljaju parametre koji se šalju skupa s vrijednošću, moguće
je dodavati još varijabla
Brisanje povezanih funkcija na Action i Filter funkcije Brisanje povezanih funkcija može se izvršiti sa naredbama 1 remove_filter("ime_filtra","ime_funkcije_za_brisanje"); 2 remove_action("ime_actiona","ime_funkcije_za_brisanje");
Instaliranje XAMPP-a i podešavanje WordPress-a
Kako bi lokalno mogli koristiti WordPress potrebno je imati svoj lokalni server i bazu podataka. Pri izradi ove knjige koristit će se XAMPP paket koji se može skinuti sa stranice apachefrien-ds.org¹⁴. Skinite njihov installer i instalirajte svoj XAMPP paket (pri instaliranju odaberite što sve hoćete instalirati, apache, mysql i php se moraju instalirati, poželjan je i phpmyadmin). Nakon instalacije XAMPP-a otiđite do svojeg skinutog WordPress-a i raspakirajte WordPress u XAMPP folder htdocs.
Raspakirani WordPress u folderu htdocs
Pripazite samo da WordPress folder nema u sebi još jedan folder već da je nakon njega cijeli WordPress.
Cjelokupni WordPress u folderu Wordpress
Nakon toga potrebno je upaliti XAMPP i pokrenuti APACHE i MySQL Server.
wor-dpre Zatim je potrebno otići naphpmyadmin¹⁵te napraviti novu bazu za WordPress. Odemo na navigaciju Databases i upišemo željeni naziv baze podataka, odaberemo iz padajućeg izbornika utf8_general_ci i kliknemo na Create.
Pravljenje nove baze podataka
Sada je potrebno otvoriti iz našeg raspakiranog WordPress foldera u htdocs folderu datoteku wp-config-sample.php.
Kada ste otvorili wp-config-sample.php u vašem editoru, potrebno je promijeniti neke podatke, a oni jesu:
1 // ** MySQL settings - You can get this info from your web host ** // 2 /** The name of the database for WordPress */
3 define('DB_NAME', 'database_name_here'); 4
5 /** MySQL database username */ 6 define('DB_USER', 'username_here'); 7
8 /** MySQL database password */
9 define('DB_PASSWORD', 'password_here'); 10
11 /** MySQL hostname */
12 define('DB_HOST', 'localhost');
Zamijenimo li prve tri definicije sa svojim podacima dobiti ćemo sljedeće: 1 // ** MySQL settings - You can get this info from your web host ** // 2 /** The name of the database for WordPress */
3 define('DB_NAME', 'wordpress'); 4
5 /** MySQL database username */ 6 define('DB_USER', 'root'); 7
8 /** MySQL database password */ 9 define('DB_PASSWORD', ''); 10
11 /** MySQL hostname */
12 define('DB_HOST', 'localhost');
Instalacija WordPress-a
Nakon što smo zamijenili potrebne podatke i podesili naš wp-config.php potrebno je instalirati WordPress na našem serveru. Ako pristupite sada adresi http://localhost/wordpress (ili kako ste već Vi nazvali Vaš web) dobiti ćete instalacijsku stranicu WordPress-a. Popunite je osnovim informacijama kao što je Vaše korisničko ime i lozinka.
WordPress Instalacijska stranica 1
Nakon što ispunite sve potrebne informacije kao username i password možete krenuti na sljedeći korak i kliknuti Install WordPress. Sada će WordPress napraviti sve potrebne tablice i napuniti osnovnim informacijama. Nakon što se sve to dogodi, trebali bi dobiti informaciju kako ste uspješno instalirali WordPress.
WordPress Instalacijska stranica 2
Sada se možete prijaviti klikom na Log In. Ako posjetite opet svoju početnu stranicu ht-tp://localhost/wordpress/ dobiti ćete pravu web stranicu koju pogoni WordPress, te temu koju vidite je početna tema koja dolazi s WordPress-om.
WordPress Početna Spremni ste za izradu teme na WordPress-u!
Početna struktura projekta
U poglavlju Upoznavanje s WordPress-om saznali smo da za temu je dovoljno imati index.php i style.css sa svim informacijama vezanim uz temu. U folderu gdje smo kopirali cijeli WordPress, potrebno je otići u wp-content/themes i otvoriti novi folder kojeg ćemo nazvati wpb3.
WordPress wp-content folder Sada u tom folderu napravite folder wpb3 i otvorite ga.
WordPress wpb3 folder
Unutar tog foldera kopirat ćemo sadržaj Bootstrap 3 template SOLID koji smo skinuli u poglavlju Upoznavanje sa Bootstrap-om - Odabir Template-a. Ako ga niste skinuli, možete ga skinuti na ovdje¹⁶.
WordPress wpb3 folder sa kopiranim sadržajem SOLID-a
Kako bi ovu temu mogli odabrati u WordPress administraciji, potrebno je stvoriti index.php i style.css. Sadržaj index.php-a može trenutno biti samo nekakav tekst kao:
1 WordPress na Bootstrap 3.x
Nakon index.php-a, stvorite style.css i kopirajte sljedeći kod unutar te datoteke: ¹⁶http://www.blacktie.co/2014/05/solid-multipurpose-theme/
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 izrađena 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 teme te dodatne informacije kao tagovi bi koristio kod pretraživanja tema u WordPress-ovoj arhivi tema.
Ulogirajte se, ako već niste, u WordPress administraciji (/wp-admin.php) i odite na Appearance > Themes. Trebali bi u popisu tema vidjeti jednu temu bez slike s nazivom WPB3. Ako pređete mišem preko nje, dobiti ćete sljedeću sliku:
Odabir tema u administraciji - WPB3 tema
Sada kada je možemo odabrati, aktivirajte je pritiskom na Activate. Sada ako otvorite vašu stranicu na front-u (npr. localhost/wordpress) dobiti ćete tekst koji smo unijeli u datoteci index.php.
Functions.php
Uz style.css i index.php najbolje je odmah na početku stvoriti još jednu datoteku, a to je functions.php koja po WordPress Codex-u, unutar teme služi kao plugin koji na frontu i u administraciji se učitava kako bi izvršila funkcije dodane unutar nje koje se direktno odnose na aktiviranu temu. To može biti dodavanje dodatnih opcija za definiranje izgleda teme unutar administracije, pravljenje različitih tipova članaka, definiranje dimenzija slika i sl. Neke od opcija za temu koju WordPress daje jesu tzv.Theme Features¹⁷.
Stvorite functions.php i unutar te datoteke unesite sljedeće: 1 <?php 2 3 /************** 4 * 5 * WPB3 Funkcije 6 * 7 **************/ 8 9 if ( ! isset( $content_width ) ) { 10 $content_width = 600; 11 }
Na ovaj način definirali smo maksimalnu širinu svega što se unese unutar naših članaka. Tako ni slike ne mogu prijeći preko 600px. Dok budemo razvijali našu temu, moguće je da će se ova širina morati promijeniti ali za sada ostavimo je ovakvu kakva je. Sve o toj varijabli možete saznatiovdje¹⁸.
Header i footer
Često ili bolje reći, gotovo uvijek, stranice imaju ponavljajuće elemente, od kojih nisu iznimke header i footer gdje su najčešće prikazani logotipi, navigacije i neke dodatne informacije. WordPress podržava odvojene datoteke koje služe kao header i footer koji se zatim pozivaju u ostalim datotekama koje služe za prikaz nekakvog sadržaja.
Stvorite dvije nove datoteke header.php i footer.php, a prateći WordPress standarde zaHeader¹⁹ u header.php kopirajte sljedeće:
¹⁷http://codex.wordpress.org/Theme_Features ¹⁸http://codex.wordpress.org/Content_Width
1 <!DOCTYPE html>
2 <html <?php language_attributes(); ?>>
3 <head>
4 <meta charset="<?php bloginfo( 'charset' ); ?>" />
5 <title><?php wp_title(); ?></title>
6 <link rel="profile" href="http://gmpg.org/xfn/11" />
7 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"
8 type="text/css" media="screen" />
9 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
10 <?php if ( is_singular() && get_option( 'thread_comments' ) )
11 wp_enqueue_script( 'comment-reply' ); ?>
12 <?php wp_head(); ?>
13 </head>
14 <body>
Nakon toga, potrebno je isto tako napraviti izmjene i zaFooter²⁰, pa ćemo sljedeći dio kopirati u footer.php:
1 <?php wp_footer(); ?>
2 </body>
3 </html>
Objašnjenje
Header.php sadrži klasične html elemente koji se dodaju na svakoj web stranici pa tako i kod WordPress tema. S funkcijom bloginfo() dohvaća informacije koje su unesene u administraciji, najčešće pod Settings, iako ima informacija i od drugih područja 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 naše style.css datoteke. Zatim imamo pingback_url koji nam služi ako netko spomene naš članak i ima isto tako uključen pingback, šalje nama informaciju da su nas pingali i WordPress zapisuje tu informaciju kao vrstu komentara za naš članak. To se može imati, ali i nije potrebno.
Ako smo na pojedinom članku ili stranici te je uključeno povezivanje komentara odnosno nekakav način hijerarhiziranja komentara uključi skriptu gdje se pri kliku na Reply | Odgovor otvara se forma koja za odgovaranje na taj komentar.
I na kraju vrši se poziv funkcije wp_head() koji služi za izvršavanje 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 naše header i footer datoteke potrebno ih je povezati ili barem vidjeti kako se to čini. Kako je naša početna stranica običan index.php, otvorite ćemo tu datoteku i malo je izmijeniti.
1 <?php get_header(); ?>
2
3 WordPress na Bootstrap 3.x 4
5 <?php get_footer(); ?>
Sada kada opet otvorimo našu stranicu nećemo vidjeti promjene, osim ako smo prijavljen u našoj 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 običan 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 početnom strukturom WordPress teme i izraditi jednu klasičnu 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.
WPB3 tema struktura
Bitno je napomenuti da nam ne služi datoteke u .html ekstenziji odnosno da ih WordPress ne gleda, ali ostavit ćemo ih ovdje za referencu dok pravimo našu temu
Povezivanje CSS datoteka
Prvo što je potrebno učiniti jest povezati sve css datoteke koje imamo kako bi se pojavile na frontu nakon što se izvrši wp_head(). Jednostavnije rješenje bi možda bilo kopirati sve sadržaje iz tih CSS datoteka i staviti ih unutar style.css datoteke, ali želim Vam pokazati kako da povežete sve CSS datoteke na frontu, a da ne dotičemo niti style.css niti te datoteke. Za takvo nešto koristit će nam funkcijawp_enqueue_style()²¹.
Ako pogledamo izvorni kod na stranici blog.html od našeg 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 <link rel="stylesheet" href="assets/css/bootstrap.css">
2 <link rel="stylesheet" href="assets/css/style.css">
3 <link rel="stylesheet" href="assets/css/font-awesome.min.css">
U našoj datoteci functions.php zalijepite sljedeći sadržaj:
1 /*============= 2 Povezivanje CSS-a 3 =============*/ 4 5 function wpb3_css_datoteke() { 6 wp_enqueue_style( 'wpb3-bootstrap',
7 get_template_directory_uri() . '/assets/css/bootstrap.css' ); 8
9 wp_enqueue_style( 'wpb3-fontAwesome',
10 get_template_directory_uri() . '/assets/css/font-awesome.min.css' ); 11
12 wp_enqueue_style( 'wpb3-style',
13 get_template_directory_uri() . '/assets/css/style.css' ); 14 }
15
16 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 izvršiti funkcije i u administrativnom dijelu ako drugačije 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 naše funkcije dobiti ćemo sljedeće:
1 function wpb3_css_datoteke() { 2 if(!is_admin()){ 3 wp_enqueue_style( 'wpb3-bootstrap', 4 get_template_directory_uri() . '/assets/css/bootstrap.css' ); 5 6 wp_enqueue_style( 'wpb3-fontAwesome', 7 get_template_directory_uri() . '/assets/css/font-awesome.min.css' ); 8 9 wp_enqueue_style( 'wpb3-style', 10 get_template_directory_uri() . '/assets/css/style.css' ); 11 } 12 }
Sada će se ove css datoteke povezati samo na front-u naše stranice, a ne i u administrativnom dijelu, ako slučajno dođe do greške pri radu.
Povezivanje Javascript datoteka
SOLID template koristi nekolicinu JS datoteka te sve su smještene u assets/js. Sve te datoteke potrebno je povezati na sličan način na koji smo povezali i CSS datoteke. Dovoljno je samo malo proširiti našu funkciju ili možemo koristit drugu funkciju za JS datoteke kako bi bilo preglednije. Za ovaj primjer koristiti ću drugu funkciju kako bi lakše pratili i razumjeli što se događa. Funkcija za povezivanje JS-a se zovewp_enqueue_script()²², te se koristi na sljedeći način:
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 korištenju 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, moguće 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 sljedeće: 1 <script
2 src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></s\ 3 cript>
4 <script src="assets/js/bootstrap.min.js"></script>
5 <script src="assets/js/retina-1.1.0.js"></script>
6 <script src="assets/js/jquery.hoverdir.js"></script>
7 <script src="assets/js/jquery.hoverex.min.js"></script>
8 <script src="assets/js/jquery.prettyPhoto.js"></script>
9 <script src="assets/js/jquery.isotope.min.js"></script>
10 <script src="assets/js/custom.js"></script>
Nakon definicije povezivanja CSS datoteka, kopirajte sljedeći dio koda u functions.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',
11 '', 12 true 13 ); 14 15 wp_enqueue_script( 16 'wpb3-retina-js',
17 get_stylesheet_directory_uri() . '/assets/js/retina-1.1.0.js',
18 array( 'jquery' ), 19 '', 20 true 21 ); 22 23 wp_enqueue_script( 24 'wpb3-hoverdir-js',
25 get_stylesheet_directory_uri() . '/assets/js/jquery.hoverdir.js',
26 array( 'jquery' ), 27 '', 28 true 29 ); 30 31 wp_enqueue_script( 32 'wpb3-hoverex-js',
33 get_stylesheet_directory_uri() . '/assets/js/jquery.hoverex.min.js',
34 array( 'jquery' ), 35 '', 36 true 37 ); 38 39 wp_enqueue_script( 40 'wpb3-prettyPhoto-js',
41 get_stylesheet_directory_uri() . '/assets/js/jquery.prettyPhoto.js',
42 array( 'jquery' ), 43 '', 44 true 45 ); 46 47 wp_enqueue_script( 48 'wpb3-isotope-js',
49 get_stylesheet_directory_uri() . '/assets/js/jquery.isotope.min.js',
50 array( 'jquery' ), 51 '', 52 true 53 ); 54 55 wp_enqueue_script( 56 'wpb3-custom-js',
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 mogućnost pojavljivanja pogreške 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 našu 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 omogućuje 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 </head>
3 <body>
4 <!-- Fixed navbar -->
5 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
6 <div class="container">
7 <div class="navbar-header">
8 <button type="button" class="navbar-toggle" data-toggle="collapse"
10 <span class="sr-only">Toggle navigation</span>
11 <span class="icon-bar"></span>
12 <span class="icon-bar"></span>
13 <span class="icon-bar"></span>
14 </button>
15 <a class="navbar-brand" href="index.html">SOLID.</a>
16 </div>
17 <div class="navbar-collapse collapse navbar-right">
18 <ul class="nav navbar-nav">
19 <li><a href="index.html">HOME</a></li>
20 <li><a href="about.html">ABOUT</a></li>
21 <li><a href="contact.html">CONTACT</a></li>
22 <li class="dropdown active">
23 <a href="#" class="dropdown-toggle" data-toggle="dropdown">PAGES
24 <b class="caret"></b></a>
25 <ul class="dropdown-menu">
26 <li><a href="blog.html">BLOG</a></li>
27 <li><a href="single-post.html">SINGLE POST</a></li>
28 <li><a href="portfolio.html">PORTFOLIO</a></li>
29 <li><a href="single-project.html">SINGLE PROJECT</a></li>
30 </ul>
31 </li>
32 </ul>
33 </div><!--/.nav-collapse --> 34 </div>
35 </div><!-- Fixed Navbar end-->
Kako bi pogledali promjenu, otvorite opet Vašu stranicu odnosno osvježite 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 početnoj poziciji kao i prije dok se navigacija prikazuje preko svega i ne utječe na raspored drugih elemenata.
Navigacije ne utječe 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 sljedeći dio.
Logo
Kao što vidimo na template-u zamišljen je logo kao tekst. Kako već imamo ime našeg bloga odnosno stranice, možemo odmah to iskoristiti kao tekst logo-a. Za takvo nešto koristiti će nam funkcijabloginfo()²³ koju definira sam WordPress i koja služi za povlačenje 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 <a class="navbar-brand" href="<?php echo home_url(); ?>">
2 <?php echo bloginfo( "name" ); ?>
3 </a>
Objašnjenje
Funkcijahome_url()²⁴vraća adresu naše stranice koja je postavljena u WordPress postavkama. Uz to, za tu funkciju je moguće 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
gdje - $path označava putanju, te je moguće kao vrijednost postaviti “/” pa bi umjesto localhost/wordpress dobili localhost/wordpress/ - $scheme definira kakav tip poveznice će biti tako da je moguće postaviti http, https ili relative gdje bi po tom redoslijedu dobili http://localhost/wordpress, https://localhost/wordpress ili /wordpress.
Kako nam funkcija samo vraća 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 naše stranice koje je postavljeno u generalnim postavkama WordPress-a. Sada kada ponovno osvježimo našu stranicu trebali bi dobiti kao logo naše ime bloga te kada kliknemo na logo, trebalo bi nas vratiti na početnu stranicu.
Dinamički logo u navigaciji
WordPress Menu
WordPress Menu dodaje se u WordPress administraciji pod Appearance > Menus. Ako sada pogledamo taj dio u administraciji možemo primijetiti da Menus ne postoji. Kako bi to moglo postojati i kako bi mi mogli postavljati naše menije potrebno je dodati podršku tih menija unutar naše teme. To se radi pozivom funkcijeregister_nav_menu²⁵iliregister_nav_menus²⁶. U našem 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 sljedeći: 1 <?php register_nav_menu( $location, $description ); ?>
gdje
• $location označava lokaciju koju mi sami definiramo, kao npr. “header-menu” i zatim se pri pozivanju tog menija koristi lokacija navedena kao vrijednost varijable $location • $description označava opis te lokacije kako bi nam bilo lakše snalaziti se po lokacijama
menija, kao npr. “Menu u header-u”
Sada kada znamo što pojedina varijabla označuje, u functions.php dodajte sljedeći 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
Menu u Administraciji
Sada možemo na tom dijelu administracije izraditi naš Menu. Nazvat ćemo ga Header Menu, a poveznice unutar menu-a možemo 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 različite parametre koje se definiraju u varijabli koja je polje (eng. array). U tom polju se mogu definirati različiti parametri. Trenutno, nama je potreban samo parametar lokacije kako bi prikazali Menu koji smo pridodali toj lokaciji.
Umjesto
