6 napotkov za Wordpress začetnike

Izdelava strani v platformi WordPress se bistveno razlikuje od izdelovanja strani “iz nič”, saj nam WordPress za manj dela ponuja odlične rezultate. Drži, da imamo pri razvijanju spletne strani od začetka popoln nadzor nad tem, kar ustvarimo, saj z izbranimi viri prikazujemo točne tiste elemente, ki jih želimo, vendar za to porabimo neprimerno več časa, kot če bi jo izdelovali v platformi WordPress.

Vsak začetek je težak

Namen tega članka je, da začetnikom prihranimo nekaj mučnih uric iskanja znanja o WordPressu in prikažemo tiste osnovne funkcionalnosti, s katerimi lahko izdelamo napredne spletne strani. Kako torej začeti? Najprej ustvarimo bazo podatkov, na strežnik prenesemo WordPress datoteke in opravimo namestitev. Prijavimo se v WordPress in nato ustvarimo nekaj strani z vsebino, ki jih enostavno uredimo v urejevalniku.
Platforma WordPress je enostavna za uporabo, zato lahko strani z vsebino izdelujemo naprej in tisto, za kar smo prej s čistim HTML-jem potrebovali več ur, sedaj izdelamo v manj kot eni uri. Ko izdelamo strani, jih moramo še preoblikovati.

Osnovna tema

Na prvotni namestitvi WordPress je že nameščenih nekaj tem. Bistveno je, da datotek teh tem ne spreminjamo, zato poznamo tako imenovane child teme. Taka tema se sklicuje na starševsko temo in uporablja njene datoteke. Vsaka datoteka, ki je ustvarjena v child temi, ima prednost pred tisto v starševski temi.

Kako naredimo child temo?
Teme se nahajajo v mapi wp-content/themes. Kreirati moramo novo mapo, kjer nato ustvarimo tri datoteke:
functions.php,
style.css,
screenshot.png.
Bistvena datoteka za delovanje teme je style.css. Da bo naša tema spoznala svojo starševsko temo, moramo v komentar na vrhu zapisati ime direktorija, v katerem je starševska tema. To storimo na naslednji način:

/*
Template: imeDirektorija
*/

V komentar datoteke style.css lahko vključimo še atribute, kot so Theme name, Theme URI, Description itd. Nujen je samo atribut Template.
Naša tema tako deluje. Dodamo lahko screenshot.png. – sliko, ki bo prikazana pri izboru teme. V functions.php zapišemo PHP ukaze za našo spletno stran.

Oblikovanje strani

Sedaj lahko poljubno oblikujemo našo spletno stran, ki je z dopolnjevanjem videti vedno lepša. Pred tem smo uporabljali Javascript, jQuery in druge, sedaj pa moramo v mapi naše child teme ustvariti datoteko s končnico .js. Lahko jo umestimo tudi v svojo mapo v child temi. Nato odpremo functions.php in napišemo naslednje:

wp_enqueue_script( ‘script’, get_stylesheet_directory_uri() . ‘/js/imeDatoteke.js’);

Ukaz get_stylesheet_directory_uri() kaže na mapo naše teme. V našem primeru je Javascript datoteka v mapi js. Z znanjem Javascript tako lahko dosežemo marsikaj. Kaj pa jQuery? V WordPress je ta že vključen. Če želimo, da deluje, pred našo skripto vpišemo še delček kode. Na koncu je videti takole:

wp_enqueue_script( ‘jquery’);
wp_enqueue_script( ‘script’, get_stylesheet_directory_uri() . ‘/js/optiweb.js’);

Po vseh teh korakih lahko uporabljamo CSS, Javascript in jQuery.

Objava vsebine

Če pobrskamo po WordPress administraciji, opazimo zavihek Prispevki, ki je tako imenovani post type. Obstajajo pa tudi custom post type. Zakaj jih sploh potrebujemo?

Poglejmo na primeru spletne strani o urah. Kam vnašamo ure? Kaj storiti, če je ur 100 ali več? Seveda ne bomo izdelali toliko strani, ampak bomo naredili custom post type.
Ustvarimo ga na naslednji način:

add_action( ‘init’, ‘posttype_ure’ );
function posttype_ure() {
register_post_type( ‘ura’,
array(
‘labels’ => array(
‘name’ => __( ‘Ura’ ),
‘singular_name’ => __( ‘ura’ )
),
‘public’ => true,
‘has_archive’ => true,
)
);
}

Po tem koraku bomo lahko vnašali ure. Odpremo administracijo in kliknemo na gumb Ura, ki se nam je kreiral v levem meniju. Kliknemo na gumb za dodajanje nove ure in ugotovimo, da je okno za urejanje identično. Uro dodajamo na spletno stran ravno tako, kot bi dodali novo stran. Vseeno še vedno nekaj manjka. WordPress pozna tako imenovano funkcijo custom fields. Ta polja dodajamo našim prispevkom, v našem primeru uri. S temi polji dosežemo, da vnašanje postane enostavno in vnesemo tiste podatke, ki jih od nas zahteva vmesnik. Kako to storimo?

Naložimo vtičnik. Temu se je načeloma priporočljivo izogibati, v tem primeru pa je vtičnik v veliko pomoč. Izberemo takšnega z največ prenosi in najboljšo oceno.

Naslednja funkcionalnost, ki je zelo uporabna v WordPressu, je t. i. shortcode. To je bližnjica do PHP funkcije, ki jo izvedemo neposredno iz WordPress urejevalnika. Na primer:
če želimo znotraj glavnega DIV elementa prikazati 4 DIV elemente, tega ne bomo pisali v WordPress urejevalnik, ampak naredimo shortcode. Izdelamo ga na naslednji način:
V functions.php ustvarimo novo funkcijo.
Napišemo ukaze. V našem primeru tako:

function shortcode_divs(){
$output ='<div class=”divs”>’;
$output.='<div></div><div></div><div></div><div></div>’;
$output.='</div>’;
return $output; 
}
add_shortcode(“divs”,”shortcode_divs”);

Bistvena je zadnja vrstica, ki poveže shortcode z našo funkcijo.
V WordPress urejevalnik na želenem mestu napišemo [divs] oz. [imeShortcode].

Struktura datotek

Za konec pa še nekaj besed o strukturi datotek. Vsaka tema ima definirane predloge, ki jih najdemo v mapi teme. Za začetek so bistvene naslednje predloge:
header.php prikazuje glavo strani,
footer.php prikazuje nogo strani,
page.php prikazuje vsebino naših strani,
single.php prikazuje vsebino prispevkov,
archive.php prikazuje seznam prispevkov.

Vse te datoteke lahko ustvarimo v child temi. Imele bodo prednost pred tistimi v glavni temi. Ker bodo v child temi, jih lahko oblikujemo po svoje. Za naše custom post type prav tako lahko naredimo posebne predloge. Zraven imena datoteke samo dodamo ime našega custom post type. Na primer single-ura.php.

Spoznali smo teme, child teme in njihovo strukturo. S style.css datoteko v naši child temi oblikujemo spletno stran. Pokazali smo tudi, kako omogočiti uporabo Javascript ter jQuery. V functions.php pišemo PHP ukaze, ustvarjamo custom post type, shortcode in ostale poljubne funkcije. S custom fields lahko dosežemo bolje strukturiran vnos podatkov na spletno stran. Z dodajanjem novih datotek v našo child temo, kot je npr. single.php pa lahko spreminjamo postavitev elementov in nadzorujemo prikaz podatkov. WordPress je platforma, ki je enostavna in prijazna za uporabo, kljub temu pa ponuja veliko možnosti za ustvarjanje spletnih strani in manjših trgovin.

Viri:
https://developer.wordpress.org/reference/functions/wp_enqueue_script/ , 22. 7. 2016
https://codex.wordpress.org/Post_Types , 22. 7. 2016
https://codex.wordpress.org/Shortcode_API , 25. 7. 2016
https://codex.wordpress.org/Site_Architecture_1. 5 , 25. 7. 2016
https://codex.wordpress.org/Post_Type_Templates , 25. 7. 2016

Matic Luznar

Matica ni več z nami v pisarni, a verjamemo, da se tudi drugod odlično znajde. Delček njega smo vseeno obdržali pri nas – za lep spomin. :)

Vsak začetek je težak

Osnovna tema

Oblikovanje strani

Objava vsebine

Struktura datotek

Matic Luznar

Ne spreglej sorodnih člankov

Digitalna preobrazba spletne trgovine ni enostavna, je pa nujna

Implementacija sistema Pimcore za obvladovanje informacij

Vse poti vodijo v Škofjo Loko

6 napotkov za WordPress začetnike

Vsak začetek je težak

Osnovna tema

Oblikovanje strani

Objava vsebine

Struktura datotek

Deli

Matic Luznar

Ne spreglej sorodnih člankov

Digitalna preobrazba spletne trgovine ni enostavna, je pa nujna

Implementacija sistema Pimcore za obvladovanje informacij

Vse poti vodijo v Škofjo Loko