U ovom članku ćemo naučiti kako napraviti wordpress temu. Prvo ćemo kreirati HTML + CSS šablon koji ćemo staviti u strukturu naše wordpress teme. Nakon što završite čitanje ovog članka, možete kreirati vlastiti predložak za wordpress, odnosno kreirat ćete ga dok budete čitali i završavali praktične vježbe. Znat ćete kako tema funkcionira i moći ćete samostalno implementirati jezgro wordpress teme iz drugih HTML/CSS šablona. Počnimo?
Uvod - struktura wordpress teme
Struktura wordpress teme je izuzetno jednostavna. U predmetu imamo fajl index.php, on je odgovoran za sastavljanje delova šablona. Drugi su povezani na ovaj fajl: header.php,footer.php... Ovi fajlovi (delovi šablona) se koriste na bilo kojoj stranici sajta. Znamo da nisu sve stranice napravljene prema istom šablonu, tako da wordpress tema ima i druge fajlove, kao npr. arhive.php ili single.php... Također možete kreirati vlastiti tip stranica ako želite da se potpuno razlikuje od ostalih na web stranici. Veoma je zgodno.
Ako pažljivo ispitate strukturu teme i pročitate sadržaj datoteka, intuitivno ćete shvatiti šta je što. Ali još uvijek postoje neke točke koje ćemo razmotriti. Uvijek se možete vratiti na ovu stranicu i pročitati kako se sve radi.
Pogledajmo sada kreiranje predloška u fazama:
Korak 1 - style.css
CSS datoteka je datoteka parametara i dizajnerskih rješenja za elemente HTML šablona. Morate preimenovati glavnu css datoteku (ako imate više od jednog) u stil.css... Zatim morate dodati sljedeće komentarisane informacije na početak ove datoteke:
/ * Naziv teme: Tipografija Paramount URI teme: http: // stranica / Opis: Predložak bez slike koji se fokusira na tipografiju..0. Opći komentari / Izjava o licenci ako ih ima. ... * /
Ovaj kod će prikazati informacije o temi za administratore. Uvjerite se da je na početku datoteke i da ispred njega nema razmaka!
Zatim sam kreirao još jedan fajl pod nazivom 1. css, i stavite ga u fasciklu tipografija je najvažnije koju sam kreirao u wordpress folderu teme. Neophodno je striktno pridržavati se ove strukture kako bi wordpress mogao vidjeti ovaj fajl.
Korak 2 - zaglavlje i podnožje
U ovom koraku kreiraćemo dva fajla: header.php i footer.php pomenuto ranije. Iako nisu osnovni i opcioni su u temi, koriste se u većini šablona, pa ćemo ih kreirati.
Header.php
Počnimo s ovim fajlom. Kreirajte fajl i dajte mu ime header.php, zatim zalijepite dati kod u njega i sačuvajte. Ova datoteka će biti prikazana na svim stranicama našeg predloška.
Predložak bez slike koji se fokusira na tipografiju.
Tipografija je najvažnija
Do sada nije bilo ničeg posebnog u vezi sa jednostavnom html/css temom. Ali sada ćemo neke elemente zamijeniti wordpress oznakama.
>
/">
Ovo su samo neke od oznaka koje znam. Na službenoj web stranici naći ćete još mnogo toga: codex.wordpress.org.
language_attributes ()- Izlazi tip jezika za oznaku .
bloginfo ()- Koristi se za prikaz informacija o stranici, svi parametri se mogu naći u WordPress kodeksu.
wp_title ()- Vraća naslov stranice.
wp_head ()- uključuje javascript i druge potrebne elemente.
get_option ()- dobija potrebne opcije za rad sa bazom podataka.
Footer.php
Sada napravimo takozvano "podnožje stranice". Kreirajte fajl footer.php i stavite sljedeći kod u njega. Ovo podnožje će prikazati godinu, naziv stranice i rss linkove.
phpthe_vrijeme ("Y ");?>- prikazuje tekuću godinu.
- naziv bloga.
- dodavanje linka na rss feed bloga.
wp_footer ()- ovo je neophodno za jezgro samog wordpress-a, koji tu dodaje elemente koji su mu potrebni.
Korak 3 - glavni wordpress šablonski fajl
Vrijeme je da kreirate osnovni wordpress šablonski fajl koji će uključivati vrh i dno stranice. Kreirajte fajl index.php... Ovo je jedan od dva potrebna fajla wordpress tema (drugi je style.css). Zalijepite novokreiranu datoteku sa sljedećim kodom:
Ovaj kod pomaže wordpress-u da dobije informacije gdje da se poveže header.php i footer.php... Dodajmo još nekoliko redaka između ovih oznaka:
">
at | |
ups...
Žao nam je, nema postova koje smo ponovo pronašli.
Ovaj isječak koda dobiva informacije o dostupnim objavama na blogu i, ako ih ima, prikazuje ih. Ako nisu pronađeni, dio koda se prikazuje nakon što nam daje do znanja da je blog još prazan.
Također je dodao tag koji prikazuje navigacijske veze tako da korisnici mogu čitati prethodno dodane postove.
Primjer kako radi wordpress tema
Sada kada imamo privid teme, pogledajmo primjer kako kreirana wordpress tema funkcionira.
Imamo četiri fajla u našoj temi, ovo je sasvim dovoljno za početak. U sljedećem članku ćemo dodati datoteku single.php koji će se prikazati prilikom prikazivanja određene objave. Ovaj fajl će uključivati, za razliku od fajla index.php.
Ako i dalje imate pitanja ili nesporazuma oko kreiranja wordpress predloška (teme), izrazite zabrinutost u komentarima ispod!Ako želite da vaša wordpress stranica izgleda obećavajuće, prvo biste trebali razmisliti o kreiranju jedinstvene teme za nju. Ovaj proces je prilično naporan, jer je direktno povezan s različitim kodiranjem i skriptama. Hajde da ga rastavimo od nule.
Gotovo svaka wordpress tema je instalirana u wp-content / themes direktorij i sastoji se od 3 kategorije datoteka:
- datoteke sa stilskim listovima;
- datoteke dodatne funkcionalnosti;
- datoteke šablona.
Datoteke stilskog lista su style.css. Oni su odgovorni za boju, veličinu, font i druge parametre elemenata stranice. Svaka stranica ima samo 1 style.css datoteku. Ako otvorite ovu datoteku, tada na samom vrhu možete vidjeti informacije o naslovu, autoru i kratak opis teme. Kada kreirate vlastitu temu, možete unijeti informacije o sebi u style.css.
Sljedeća kategorija su datoteke dodatne funkcionalnosti. To uključuje functions.php, čiji princip čini da izgleda kao dodatak. Zahvaljujući ovoj datoteci, možete vizualno prilagoditi temu direktno u admin panelu. Obično lista postavki nije jako široka (naziv stranice, boja navigacije i bočnih panela stranice, itd.). Ako je tema višenamjenska, tada će lista postavki biti mnogo šira.
Sada pređimo na datoteke šablona. Njihova glavna funkcija je generiranje stranica koje traže posjetitelji stranice. Datoteke šablona imaju ekstenziju ".php". Većina osnovnih tema može sadržati samo jedan šablonski fajl koji se zove index.php. U tom slučaju, sve stranice stranice će biti identične. Ovaj dizajn se najčešće koristi za kreiranje Internet resursa sa bazama podataka, kada dizajn ne igra ključnu ulogu.
Ako nikada ranije niste radili dizajn, prvo pokušajte kreirati jednostavnu temu. Za normalan rad potrebna su vam najmanje 2 od sljedećih datoteka: style.css i index.php.
Datoteke dodatne funkcionalnosti u ovom slučaju se ne mogu koristiti, kao što razumijete. Među datotekama šablona, index.php je jedan od najfleksibilnijih. Može samostalno generirati zaglavlja, razne blokove, podnožje (footer), sadržaj i druge elemente stranice.
Vrijedi napomenuti da će oni parametri koji nisu generirani u index.php fajlu biti generisani standardnim datotekama. Na primjer, ako se vaša tema sastoji od samo 2 od gore navedenih fajlova, ali korisnik ima potrebu da generiše obrazac za dodavanje komentara, onda će ovu funkciju obavljati standardni comments.php. Stoga, ako želite da vaša tema bude jedinstvenija, vrijedi napraviti dodatne datoteke predložaka. Razmotrimo glavne.
- Za dodavanje komentara, pogodili ste, koristi se predložak comments.php.
- Ako želite da napravite popup sa komentarima, onda vam je u te svrhe potreban comments-popup.php.
- Za generiranje početne stranice koristi se home.php.
- Datoteka single.php je odgovorna za prikazivanje članaka na sajtu. Ako nemate takav fajl, onda će index.php izvršiti svoju funkciju.
- Datoteka page.php generiše pojedinačne stranice sajta.
- Za prikaz informacija o autoru potreban vam je author.php.
- Category.php je odgovoran za kategorije.
- Prikaz arhive, datuma i pretraživanja se vrši pomoću datoteka archive.php, date.php i search.php respektivno.
- Da bi vaš sajt prikazao jedinstvenu stranicu sa greškom 404, moraćete da dodate svoj 404.php.
- Podnožje i podnožje sajta generišu fajlovi header.php i footer.php.
Kreiranje jedinstvene teme ručno od nule
Prvo morate instalirati odgovarajući šablon. Može se naći i na službenoj web stranici wordpress.org i drugdje. Preporučuje se korištenje službene stranice, jer bilo koja treća strana može sadržavati zlonamjerne datoteke i neispravne linkove.
Nakon što ste odabrali, možete započeti preuzimanje arhive. Na kraju procesa, moraćete da ga raspakujete i otpremite datoteke u određene fascikle na sajtu (arhiva obično sadrži malu instrukciju). Preuzimanje se može obaviti pomoću FileZilla programa ili direktno sa hostinga, ako podržava ovu opciju. Sada samo trebate otići u odjeljak "Teme", odabrati onu koju ste preuzeli i kliknite na dugme "Aktiviraj".
Možete ga odabrati i direktno u wordpress admin panelu. U ovom slučaju, ne morate ga preuzimati. Potrebno je samo da kliknete na dugme "Instaliraj", a zatim "Aktiviraj". Prije instalacije, preporučuje se da se izvrši pregled.
Sada kada je tema aktivirana, možete preći na njenu jedinstvenost. Prvi korak je razmišljanje o vrhu stranice (header). Ovo je prva stvar koja upada u oči vašim posjetiocima, pa se morate prema tome odnositi odgovorno. Obično se zaglavlje sastoji od naziva stranice, logotipa i kratkih informacija o sadržaju. Zaglavlje se može kreirati u bilo kojem grafičkom uređivaču. Čak iu standardnoj boji. Napredniji dizajneri koriste Adobe Photoshop.
Naziv stranice treba biti kratak i lako pamtljiv. Postoji mnogo različitih stilova koje možete birati u Adobe Photoshopu. Kada kreirate logotip, možda će vam trebati različiti oblici. Mogu se preuzeti sa službene web stranice Adobe Photoshopa.
Nakon što napravite crtež zaglavlja u grafičkom uređivaču, morat ćete ga postaviti na svoju web stranicu. Kada se preuzimanje završi, sa desne strane slike će se pojaviti URL i morat ćete ga kopirati. Zatim morate otići u odjeljak "Editor" i odabrati datoteku koja je odgovorna za generiranje zaglavlja (header.php). U njemu ćete morati pronaći URL trenutne slike i zamijeniti ga onim koji ste dobili prilikom učitavanja slike zaglavlja. Nakon toga, morat ćete ažurirati datoteku. Sada možete nastaviti s provjerom prikaza zaglavlja.
Ako vaše zaglavlje ima druge parametre osim standardnog, onda ih možete podesiti u header.php. Širina se kontrolira atributom širine, a visina se kontrolira visinom. Podešavanja se mogu izvršiti u pikselima i procentima. Dakle, ako samo želite da rastegnete kapu, onda je postavite na 100%.
Po želji možete dodati aktivne linkove na stranice wordpress stranice u zaglavlje. To se može učiniti koristeći različite usluge. Ima ih puno na internetu. Većina njih radi na istom principu. Označite željeno područje zaglavlja koje će biti rezervirano za link, a servis će vam dati kod koji vam je potreban. Zatim ćete morati da dodate ovaj kod u Vaš header.php fajl. Budite oprezni kada ga dodajete. Svaki poen se računa. Ako dodate kod na pogrešno mjesto, aktivni linkovi se neće pojaviti u zaglavlju.
Nakon zamjene standardnog zaglavlja, možete započeti zamjenu zadane pozadine wordpress stranice, widgeta, navigacije, podnožja i drugih komponenti wordpress stranice. Također se mogu nacrtati u bilo kojem grafičkom uređivaču i postaviti na stranicu u obliku slike.
Kod vas vrijedi uzeti u obzir da ne bi trebalo biti svijetlo. Većina webmastera radije koristi bijelu pozadinu. Ne boli oči niti odvlači pažnju od glavnog sadržaja.
Da biste kreirali kvalitetnu navigaciju od nule, potrebno vam je malo znanja o oznakama kao što su