Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Programi
  • Kreiranje raznih WordPress tema ručno i pomoću programa. Izgled Wordpress predloška iz HTML izgleda

Kreiranje raznih WordPress tema ručno i pomoću programa. Izgled Wordpress predloška iz HTML izgleda

Recimo da smo otvorili novu i do sada praznu Powerpoint prezentaciju. I šta vidimo?

I imate korporativne boje i fontove koje morate mijenjati svaki put. Šablon će vam omogućiti da to učinite jednom za svagda.

I 1. slajd u vašoj prezentaciji će automatski izgledati ovako UVIJEK bez dodatnog napora.


Šablon uključuje:

  • Boje
  • Fontovi
  • Čuvari mjesta (odjeljci u koje ubacujemo tekst, sliku, grafikon, itd.)

Ispod ćete pronaći upute korak po korak za kreiranje vlastitog Powerpoint predloška.

1. Kreirajte novu datoteku u Powerpointu.

2. Odaberite "Slide Master" u gornjem meniju na kartici Prikaz.


Standardni master slajdova pojavljuje se na lijevoj strani.

Ovdje ćemo raditi s njim. I napravićemo nestandardne od standardnih.

3. Odaberite željenu temu fonta ili kreirajte novu.

Tema fonta je vrsta fontova koje koristite u svojoj prezentaciji. Vjerujte mi, osim Calibrija, postoji još mnogo dobrih fontova. Navedite ih samo 1 put i oni će se automatski zamijeniti u cijeloj prezentaciji ili predlošku.


4. Odaberite pozadinu koju želite (boju ili uzorak). Možete odabrati istu pozadinu za sve slajdove odjednom ili posebnu pozadinu za jedan.

5. Kao što vidimo, postoji mnogo opcija za lokaciju teksta, naslova itd. na lijevoj strani. Ali šta ako nam treba onaj koji ne postoji? Na primjer, imati 3 slike sa potpisima.


Tada će nam pomoći funkcija Insert Layout + Insert Placeholder.

Nakon klika na "Insert Layout" kreira se prazan slajd. I možemo ga napuniti kako želimo.


7. Sada, ako ćemo kreirati novi slajd, tada ćemo vidjeti opcije iz našeg predloška.

8. Kreirajte novu prezentaciju i "izgubili" svoj šablon? Idite na karticu Dizajn i tamo ga potražite.

Prije kodiranja predloška web stranice u HTML / CSS, potrebno ga je razraditi. Uobičajeno je crtanje dizajna u Photoshopu. Gotov izgled se pohranjuje u datoteku formata .PSD.

Kao primjer, napravimo dizajn stranice na slici ispod.

1. Otvaranje Photoshopa i kreirajte novi dokument u njemu ( Fajl -> Novo ili Ctrl + N).

2. Postavljamo početne parametre. U praksi je gotovo nemoguće razmišljati o dizajnu s preciznošću piksela - u procesu izgleda, sigurno ćete morati nešto promijeniti, premjestiti, ponoviti. Stoga se dimenzije mogu postaviti okvirno, a preporučljivo je naznačiti širinu i visinu dokumenta očigledno više od planirane veličine lokacije, kako bi se svi elementi tačno uklopili u izgled. Napravit ćemo naš dokument širine 1000 piksela i visine 1500 piksela. Napomena: pikseli, a ne centimetri. Ostali parametri se mogu ostaviti na miru.

3. Uključujemo lenjire. Tokom rada, oni će biti potrebni, jer ravnala vam omogućavaju da vrlo precizno izmjerite udaljenosti. Provjerite imate li uključena ravnala. Ako je tako, vidjet ćete vage pored lijeve i ispod gornje alatne trake.

Ako nema ravnala, uključite ih ( Pogled -> Vladari ili Ctrl + R).

Ravnila bi trebala pokazati vrijednost u pikselima. Da biste se prebacili na njih s druge mjere dužine, kliknite desnim tasterom miša na ravnalo i označite odgovarajući okvir u meniju koji se otvori.

4. Provjerite je li veličina fonta navedena u pikselima, a ne u točkama. Ako nije ispravno konfigurisan, idite na Uređivanje -> Postavke -> Općenito, u prozoru koji se pojavi idite na karticu Mjerne jedinice i ravnala, na padajućoj listi Tekst izabrati Pikseli i pritisnite uredu.

5. Odmah napravite pozadinu stranice. Imamo ovu gradijentnu ispunu narandžastu, koja prelazi u žutu. Na lijevoj ploči odaberite alat Gradijent.

Na panelu koji se pojavljuje na vrhu pritisnite dugme Mirror Gradient, odaberite boju na paleti s lijeve strane.

Korištenje alata otvorenog prozora Gradijent editor, odaberite boje koje želite. Da biste postavili tačnu boju kontrolne tačke, kliknite na nju, pritisnite dugme Boja a u prozoru za odabir boja navedite ga u RGB, HSB, CSS ili bilo kojem drugom dostupnom formatu.

Kao rezultat manipulacija, gradijent je ispao kako slijedi.

Da biste primijenili gradijent na trenutni sloj, prevucite pokazivač preko njega držeći pritisnutu lijevu tipku miša.

6. Sačuvajte pozadinu u datoteku. Ono što smo uradili trebalo bi da bude prikazano ispod glavne stranice i da zauzme ceo prozor pretraživača – neka vrsta pozadine. Na primjer, stranica je široka 800 piksela, a rezolucija ekrana korisnika je mnogo veća. Ostatak prostora (sve osim 800px koje će zauzeti blok stranice) bit će popunjen pozadinom gradijenta.

Budući da se rezolucija ekrana ne može predvidjeti, možete iz kreirane pozadine izrezati traku debljine jednog piksela i sačuvati je kao sliku. Pretraživač će ispuniti pozadinu s njom po cijeloj širini.

6.1. Odabir alata Pravokutna površina.

6.2. Odaberite traku proizvoljne širine, ali duž cijele dužine sloja.

6.3. Kopiraj odabir ( Ctrl + C).

6.4. Kreirajte novi dokument ( Ctrl + N), postavite njegovu širinu na 1 piksel i zalijepite kopirano ( Ctrl + V).

6.5. Sačuvajte fajl na Jpg-format.

7. Kreirajte pozadinu stranice. Pozadina će biti obična bijela. Odabir alata Pravougaonik i podesite potrebne parametre u prozoru sa svojstvima. Dobili smo pravougaonik 800x1100 piksela, čiji gornji lijevi ugao leži u tački 100.0.

8. Napravite pozadinu zaglavlja. Matirana gradijentna ispuna dimenzija 780x80px.

Sačuvajte ga kao zasebnu grafičku datoteku širine 1 piksel, kao što smo uradili sa pozadinom.

9. Kreirajte gornji meni. Koristeći alat Horizontal Text, dodajte prvu stavku menija u izgled - Dom... Sloj će biti kreiran, pa čak i preimenovan automatski, tako da ne morate ništa raditi s njim.

Ovdje je važno da sve točke budu ravnomjerno raspoređene, stoga se preporučuje korištenje ravnala. Da proširite vertikalu, povucite držeći pritisnutu tipku miša s lijeva na desno. Koristite ravnala za mjerenje udaljenosti, s obzirom da svaka stavka menija u našem slučaju treba da zauzima 120 piksela.

10. Slično, umetnite ostale stavke menija.

11. Dodajte logo. Već imamo gotovu, tako da ostaje samo da je pažljivo umetnete u izgled. Da biste to učinili, kliknite Datoteka -> Otvori, zatim kliknite na sliku i, držeći pritisnutu tipku miša, pomaknite je na naslov predloška dokumenta, kada se otvori, prevucite sliku na željeno mjesto u rasporedu i otpustite tipku miša.

12. Pišemo naziv i slogan stranice. Alat koji već poznajemo dopunjavamo gotovo kreirani logo natpisima.

13. Idite na bočnu ploču. Prvo, napravimo i spremimo u zasebnu datoteku gradijent ispunu za njene naslove. Upoznati ste sa alatima, nije potrebno objašnjenje.

14. Dodajte tekst naslova informacijskog bloka u novokreirani gradijent.

15. Nacrtajte granicu za područje. Da biste to učinili, dovoljno je koristiti prozirni pravougaonik s crnim linijama. Odaberite alat Pravougaonik, postavite tip ispune oblika na Bez boje, kliknite na ikonu Postavi vrstu poteza i odaberite crnu, inače neće biti linija. Ako je obris predebeo, postavite širinu linije na 0,5 pt.

16. Ispod dodajte zaglavlje bloka sa gradijentom ispune, kao u stavkama 12-13.

17. Kreirajte blok menija lijevog panela. Dodajte narandžasti pravougaonik od 100px sa žutim obrisom od 0,2pt.

18. Dodajte mu tekst.

19. Uz pomoć dupliranja slojeva i lenjira kreirajte još pet stavki menija lijevog panela.

20. Napišite tekst u glavni dio stranice koristeći isti alat.

21. Dodajte fotografiju na glavni dio stranice, kao što smo uradili sa logom. Da biste kopirali sliku, jednostavno je pomjerite mišem dok držite pritisnut tipku. Alt... Ako iznenada slika ne odgovara veličini, koristite alat Transform ( Ctrl + T).

22. Nacrtajte pozadinu podnožja stranice - narandžasti gradijent od 64px.

23. Sačuvajte traku donje pozadine širine 1 piksel u posebnu grafičku datoteku.

24. Smanjite visinu stranice. Ispostavilo se da su svi elementi već nacrtani, a ostalo je još prostora. Ovdje su nam dobro došli smisleni nazivi slojeva. Između ostalog, odaberite pozadinski sloj (mi ga zovemo pozadina) i koristite alat Transform da smanjite visinu našeg bijelog pravokutnika na donji rub podnožja stranice.

25. Sačuvajte šablon u formatu datoteke .PSD (Datoteka -> Sačuvaj).

26. Rezultat ove akcije je i dalje jednostavan, ali već uobičajeni predložak stranice.

Sada, od PSD izgleda, ostaje koristiti HTML / CSS za izradu predloška web stranice, ali o tome ću govoriti u sljedećem članku.

Ako želite da vaša wordpress stranica izgleda obećavajuće, prvo razmislite o kreiranju jedinstvene teme za nju. Ovaj proces je prilično naporan, jer je direktno povezan s različitim kodiranjem i skriptama. Hajdemo to rastaviti od nule.

Gotovo svaka wordpress tema je instalirana u wp-content / themes direktorij i sastoji se od 3 kategorije datoteka:

  1. datoteke sa stilskim listovima;
  2. datoteke dodatne funkcionalnosti;
  3. 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 fajl. 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 prije niste radili dizajn, prvo pokušajte stvoriti 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 šablona. Razmotrimo glavne.

  1. Za dodavanje komentara, pogodili ste, koristi se predložak comments.php.
  2. Ako želite da napravite popup sa komentarima, onda vam je u te svrhe potreban comments-popup.php.
  3. Za generiranje početne stranice koristi se home.php.
  4. Datoteka single.php je odgovorna za prikazivanje članaka na stranici. Ako nemate takav fajl, onda će index.php izvršiti svoju funkciju.
  5. Datoteka page.php generiše pojedinačne stranice sajta.
  6. Za prikaz informacija o autoru potreban vam je author.php.
  7. Category.php je odgovoran za kategorije.
  8. Prikaz arhive, datuma i pretraživanja se vrši pomoću datoteka archive.php, date.php i search.php respektivno.
  9. Da bi vaš sajt prikazao jedinstvenu stranicu sa greškom 404, moraćete da dodate svoj 404.php.
  10. 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 prema tome treba pozabaviti 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, URL će se pojaviti desno od slike 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 zaglavne slike. 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 korištenjem raznih servisa. 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




  • Prvi je odgovoran za kreiranje blokova sajta, drugi je za dodavanje linkova na wordpress sajt. Treći se može koristiti za kreiranje kolona. Ovo posljednje je potrebno za prilagođavanje ćelija. Prvi korak je odlučivanje o lokaciji na kojoj će se nalaziti navigacija. Obično se nalazi odmah ispod kapice. Navigacija rasporedom je prilično brz proces. Ispod je mali primjer kako možete postaviti mali navigacijski blok.

    Kao što ste već shvatili, uobičajeno ime navigacijskog bloka je navigacia. Blok se sastoji od jedne ćelije "naslov stranice". Imajte na umu da je svaka oznaka zatvorena znakom "/". Ako oznake nisu zatvorene, stranica može pokvariti rad.

    Ne bi trebao biti veliki. Najpopularniji su kalendar, oblak oznaka, meta, arhive, pretraga, rss, video i najnovije vijesti. Da biste ih dodali, morate otići na karticu "Izgled" i kliknuti na polje "Widgeti". Tada ćete vidjeti listu dostupnih opcija. Također, widgeti se mogu instalirati pomoću dodataka. Mogu se preuzeti i sa službene web stranice i direktno preko WordPress admin panela. Da biste dodali video koji se nalazi na YouTube-u, potrebno je samo da ubacite link do njega na željeno mjesto na stranici. U suprotnom, video će morati biti postavljen na stranicu. Ako volite programiranje, možete dodati svoj widget na stranicu. Da biste to učinili, potrebno je kliknuti na opciju "Tekst" i tamo unijeti traženi kod.

    U postavkama svakog vidžeta, biće vam data opcija da promenite podrazumevana zaglavlja. Također možete odabrati gdje će se widget prikazati (desna ili lijeva bočna traka) i tako dalje. Ne bi trebalo biti problema sa brisanjem widgeta. Da biste to učinili, samo trebate kliknuti na dugme "Izbriši" u postavkama.

    Kreiranje jedinstvene teme pomoću posebnih programa i usluga od nule

    1. Najpopularniji je Artisteer. Za rad s njim nije potrebno nikakvo posebno znanje programiranja. Proces kreiranja se odvija vizuelno. Ono što nacrtate biće predstavljeno pomoću koda koji je u skladu sa međunarodnim "XHTML 1.0 Transitional" standardom. Zahvaljujući tome, tema vašeg budućeg sajta će biti podržana od strane svih pretraživača.

    Za rad će vam biti ponuđen širok izbor različitih efekata, stilova i još mnogo toga. Ovaj program podržava ruski, engleski, njemački i druge jezike. Treba napomenuti da ovaj program ima neke nedostatke. Najvažnije je da program košta oko 50 dolara. Postoji i besplatna verzija, ali sadrži vrlo malo opcija. Da biste povećali jedinstvenost predloška, ​​morat ćete dalje kopati u kodiranje.

    Idemo direktno na upute za rad sa ovim Artisteer programom. Čim otvorite program, pojavit će se prva opcija pod nazivom "Ideje". Ona će vam ponuditi razne kombinacije standardnih elemenata. Ako želite da vaš dizajn bude jedinstven, onda
    ne treba vam ova opcija. Da biste savladali program, potrebno je samo kliknuti na opcije i pogledati parametre. Ovaj program je lagan, tako da ne biste trebali imati problema s njim.

    Obratite pažnju na opciju "Header". Ona je odgovorna za prikaz zaglavlja stranice. Možete koristiti standardno zaglavlje ili učitati svoje. Već znate kako napraviti unikatan šešir.

    Da biste podesili širinu stranice, morat ćete koristiti opciju "Sheet". Širina je data u pikselima. Ovaj program će vam u početku ponuditi širinu od 900 piksela. Takođe, koristeći ovu opciju, možete konfigurisati različite efekte (senka, zaobljene ivice i tako dalje).

    Opcija Pozadina je odgovorna za postavljanje pozadine, pogađate. Možete ga odabrati među standardnim opcijama ili prenijeti svoje.

    Ako želite da prilagodite izgled elemenata sajta, onda bi trebalo da koristite opciju "Izgled".

    Jednako važna opcija je "Članci". U njemu se odvija izgled dizajna članaka stranice. Ovo uključuje lokaciju slike, teksta, komentara, raznih blokova itd.

    Da biste odabrali boju, veličinu ili font za svoj tekst, potrebna vam je opcija Boje i fontovi.

    Nakon obavljenih koraka, možete sačuvati svoju kreaciju. Da biste to učinili, kliknite na paletu u gornjem lijevom kutu. Pred vama će se pojaviti prozor. U njemu morate kliknuti na "Sačuvaj kao". Nakon toga, samo trebate odabrati naziv datoteke i lokaciju. Imajte na umu da datoteka mora imati ekstenziju ".artx". Prilikom daljeg rada sa programom potrebno je samo jednom kliknuti na "Sačuvaj" za spremanje.

    Kada je vaša tema potpuno finalizirana, možete nastaviti s izvozom. Da biste to učinili, morate kliknuti na karticu "Izvoz" i odabrati "WordPress Theme".

    2. Ako tečno govorite u Adobe Photoshopu, trebali biste instalirati dodatak Divine Elemente na njega. Zahvaljujući njemu, možete lako pretvoriti ".psd" datoteku u format koji će podržavati svi pretraživači.

    3. Ako nemate novca za Artisteer, možete koristiti besplatnu uslugu Lubith. Dostupan je online na službenoj web stranici lubith.com. Usluga sadrži mnogo korisnih opcija i posebno je brza. Za samo nekoliko minuta u potpunosti ćete savladati sve njegove mogućnosti.

    4. Analog prethodnog servisa je WordPress Theme Generator. Također je jednostavan za korištenje i sadrži širok izbor različitih opcija. Ova usluga je potpuno besplatna. Jedina mana je što ova usluga podržava samo engleski jezik.

    5. XTemplate Generator je rusifikovani generator tema za sajt. Njegove opcije su u lijevom prozoru, au desnom možete vidjeti vizualni rezultat vašeg rada. Ovaj generator je također besplatan.

    6. WPTheme Generator je mnogo moćniji od prethodnih, jer sadrži nekoliko puta više opcija. Jedino upozorenje je da se ova usluga plaća. Cijena je 30$. Također je vrijedno napomenuti da je izgled u njemu u potpunosti izveden na engleskom jeziku.

    7. CSSEZ nije ništa manje popularan od prethodnog. Prije nego što počnete, morate proći kroz malu registraciju. U ovoj usluzi možete postaviti do 4 stupca za materijale za web lokaciju. Možete učitati svoju pozadinu.

    8. Dotemplate vam pruža oko 11 različitih wordpress šablona koje možete promijeniti. Jedina mana je nemogućnost učitavanja vlastite grafičke datoteke. Stoga ćete morati sami preuzeti zaglavlje putem upravitelja datoteka web stranice.

    9. Weeb se razlikuje od ostalih po tome što ima mogućnost dodavanja video zapisa direktno sa YouTube-a ili Google-a bilo gdje na web-stranici. Web stranica koja ima video je uspješna jer su informacije vizualno brže i lakše percipirane.

    10. U servisu Eris' Template Generator možete dodati do 3 kolone za prikaz materijala sajta, dodati razne oznake, kalendar i druge widgete.

    Sada ću objasniti kako napraviti WordPress temu od jednostavnog HTML predloška koristeći primjer dizajna iz tog članka.

    Možda ćete morati da prilagodite dizajn za WordPress iz više razloga, na primjer, prenosite svoju nekada statičnu stranicu na CMS, ili vam se sviđa dizajn koji još nije u WordPress kolekciji, ili samo želite da shvatite kako Teme ovog CMS-a rade iznutra.

    Pa počnimo.

    Distribucija koda u datoteke

    1. Preuzmite predložak i raspakujte ga u svoju fasciklu WordPress tema (adresa kao wordpress_blog_address / wp-content / themes /). Preimenujte folder teme po svom ukusu ako želite. Na primjer, moj predložak se nalazi na wordpress_blog_address / wp-content / themes / MyTheme /.

    2. Preimenujte datoteku styles.css v style.css.

    3. Otvorite style.css u uređivaču koda (kao što je Notepad ++) i na samom početku zalijepite sljedeće redove:

    / * Naziv teme: URI teme MyTheme: http://test1.ru Autor: NoName URI autora: http://test1.ru Opis: Primjer testne verzije: 1.0.0 Licenca: GNU General Public License v2 ili noviji URI licence : http://www.gnu.org/licenses/gpl-2.0.html * /

    Kao što ste mogli pretpostaviti, ovo su servisne informacije o temi dizajna: naslov, autor, opis, licenca, verzija, itd. Možete zamijeniti prave dijelove redova svojim, odnosno postaviti svoje autorstvo, verziju, opis i druge podatke.

    4. Kreirajte fajlove header.php, index.php, sidebar.php, footer.php i distribuirati kod iz index.html.

    4.1. V header.php kopirajte kod red po red pošto je ovaj fajl odgovoran za vrh stranice. styles.css zamijeniti u kodu sa style.css- novo važeće ime datoteke.

    4.2. V index.php zalijepite kod glavnog bloka (iz reda po liniji ).

    4.3. V sidebar.php kopirajte kod bočnog menija (od on ).

    4.4. V footer.php zalijepite preostale linije (sa do kraja dokumenta index.html).

    5. Izbriši index.html.

    6. Idite na admin panel i uvjerite se da se predložak MyTheme pojavljuje u odjeljku Izgled -> Teme... Možete čak pokušati da ga pogledate ili aktivirate, ali ništa dobro od toga još neće biti, jer još nismo integrisali šablon sa WordPress-om.

    Prilagođavanje zaglavlja

    Sada ćemo krenuti od statičkog šablona da napravimo dinamičku temu u koju će se učitavati podaci i WordPress postavke.

    U šablonu će biti PHP umetanja. Ovaj kod počinje sa... Između njih je PHP kod koji najčešće poziva CMS funkcije.

    1. Otvorite datoteku header.php i zamijenite kod koji se nalazi u njoj prije bloka

    na sljedeće:

    > "> "> "tip =" tekst / css "medij =" ekran "/> <?php bloginfo("name"); ?>

    Učinili smo blok dinamičnim

    Kod poziva funkciju koja vraća atribute jezika u kontejner.

    ">

    Umjesto pisanja kodiranja kao konstante, pozvali smo funkciju koja uzima vrijednost iz CMS postavki i automatski je zamjenjuje u kod, odnosno da biste promijenili kodiranje, više ne morate uređivati ​​datoteku teme.

    Važna funkcija za rad stranice sa stilovima, dodacima i skriptama.

    2. Idite na uređivanje datoteke index.php. Na samom početku napišite

    ,

    Linije pozivaju zaglavlje, bočnu traku i donje datoteke stranice.

    Sada možete pogledati ili čak aktivirati MyTheme. Kao rezultat toga, pretraživač će prikazati već poznati šablon sa statičnim menijem i jednom stranicom. Da bi meni bio dinamičan i prilagodljiv, te umjesto da jedna stranica prikazuje sve materijale postavljene na web-mjestu, potrebno je dodatno transformirati predložak.

    Učiniti gornji meni dinamičkim

    Do sada smo imali potpuno statičnu temu dizajna, uključujući i onu s nepromijenjenim horizontalnim gornjim menijem. Iako se ne može konfigurirati sa admin panela, i ako ostavite kod kakav jeste, da biste umetnuli / izbrisali / premjestili stavke, morat ćete uređivati ​​datoteku svaki put header.php, što je izuzetno nezgodno.

    Kako ne bismo lukavo filozofirali i ne bismo uronili u ponor fascinantnog svijeta programiranja, dinamičkom izborniku ćemo dodijeliti statično ime. Zalijepite kod umjesto horizontalne tabele menija

    tako da dobijete sledece:

Top srodni članci