Izdelava lastne wordpress predloge

WordPress CMS je en izmed najbolj popularnih sistemov za upravljanje vsebine (ang. “Content Management System”) med blogerji. Med drugim se uporablja kot osnova tako za preprostejše spletne strani kot tudi za zahtevnejše in visoko obiskane spletne strani. Prav tako pa se uporablja tudi za manjše spletne trgovine skupaj z vtičnikom (ang. “plugin”) WooCommerce. Prav zaradi svoje popularnosti pa je čedalje več tudi razvijalcev, ki razvijajo svoje predloge in v tem članku vam bom predstavil osnovne korake s pomočjo katerih boste lahko ustvarili čisto svojo wordpress predlogo.

 Struktura wordpress predloge

Vsaka wordpress predloga je običajno sestavljena iz naslednjih datotek:

  • functions.php
  • index.php
  • page.php
  • single.php
  • header.php
  • footer.php
  • 404.php
  • style.css

Functions.php datoteka

To je prva datoteka oziroma skripta, ki se naloži kadar pridemo na spletno stran. V tej datoteki je ponavadi koda, ki določa podporo in registracijo oziroma “aktivacijo” funkcij za stvari katere želimo, da naša predloga podpira.

Tako najdemo v functions.php skripti največkrat kodo za:

  • aktivacijo menuja – lahko tudi več
  • aktivacijo gradnikov (ang. “widgets”)
  • aktivacijo stranskih menijev (ang. “sidebar”)
  • aktivacijo prikaznih slik – “thumbnails”
  • določitev velikosti slik po meri
  • modifikacije raznih funkcij – npr. klicanje javascript datotek v nogi strani namesto v glavi
  • itd.

Primer kode za aktivacijo glavnega in stranskega menija (angl. sidebar in nav menu):

Sidebar oziroma stranski meni kasneje v kodi (npr. v Index.php) vključimo kot:

Navigacijski meni pa kot:

 

Index.php

Index kot že samo ime pove je skripta kjer spišemo kodo za glavno stran in je kombinacija html + php kode ter je tudi prva datoteka, kjer je potrebno klicati vsaj dve funkciji in sicer get_header() in get_footer(). Omenjeni funkciji kličeta datoteki header.php in footer.php. Ponavadi se v index.php datoteki kličejo tudi zunanje datoteke za izpisovanje vsebine, sam največkrat uporabljam kar funkcijo get_template_part().

Page.php

V tej datoteki naredimo html strukturo za statične strani (angl. pages) za strani kot so Kontakt, O Nas, itd.

Primer izpisa vsebine na statični strani z uporabo funkcije get_template_part().

Koda v page.php:

In še koda, katero dobimo preko funkcije get_template_part(), ki se nahaja v content-page.

Single.php

Tukaj naredimo html strukturo in dodamo nekaj php kode za izpis posameznih objav oziroma prispevkov (angl. posts). Seveda je zraven možno dodati še številne druge featurje kot je npr. izpis datuma objave, avtorja objave, komentarje, članke s sorodno vsebino in tako dalje.

Primer za izpis:

 

Header.php

Tukaj največkrat vstavimo zgolj kodo ki začne html strukturo in sicer doctype, html in kodo, ki je med značkama <head></head> ter začetek <body>.

Primer:

 Footer.php

No pa smo skoraj že pri koncu. V footer.php oziroma v datoteki, ki bo predstavljala nogo strani oziroma zadnji del kode, kateri se bo naložil, pa ponavadi vstavimo zgolj še zaključni del html-ja ter na koncu vse skripte, katere ne potrebujemo na začetku – s tem privarčujemo s količino podatkov – lahko tudi do 500kb, ki se tako sedaj naloži komaj na koncu. S tem pridobimo na hitrosti nalaganja spletne strani, kar je velik plus za uporabniško izkušnjo naših obiskovalcev.

Primer kode:

 

404.php

Ta datoteka se kliče kadar željena vsebina ni na voljo – npr. kadar imamo na nekem url naslovu določeno vsebino, ki jo kasneje odstranimo oziroma zamenjamo naslov in na njo pride obiskovalec preko kakšnega starega linka vsebina posledično ni na voljo. V tem primeru se izvrši klic te datoteke, ki ponavadi uporabniku prikaže prijazno sporočilo, da iskane vsebine ni na voljo oziroma kakorkoli v tem smislu.

Primer:

 

Style.css

Tukaj kaj dosti ravno ne morem razpredati, kajti kot že izvemo iz imena datoteke imamo tukaj zapisana naša css (angl. Cascading Style Sheets) pravila ki nam polepšajo izgled naše spletne strani.