Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Programi
  • Izrada raznih WordPress tema ručno i korištenjem programa. Izgled Wordpress predloška iz HTML izgleda

Izrada raznih WordPress tema ručno i korištenjem programa. Izgled Wordpress predloška iz HTML izgleda

Recimo da smo otvorili novu i trenutno praznu Powerpoint prezentaciju. I što vidimo?

A imate korporativne boje i fontove koji će se morati prilagoditi svaki put. Predložak će vam omogućiti da to učinite jednom za cijeli život.

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


Predložak uključuje:

  • Boje
  • Fontovi
  • Rezervirana mjesta (odjeljci u koje umećemo tekst, sliku, dijagram itd.)

U nastavku ćete pronaći upute korak po korak za izradu vlastitog predloška u Powerpointu.

1. Kreirajte nova datoteka u programu Powerpoint.

2. Odaberite "Slide Master" u gornjem izborniku na kartici View.


S lijeve strane pojavit će se standardni slajd master.

Ovo je ono s čime ćemo raditi. A od standardnog ćemo napraviti nestandardni.

3. Odaberite željenu temu fonta ili stvorite novu.

Tema fonta su fontovi koje koristite u svojoj prezentaciji. Vjerujte mi, osim Calibrija ima ih još mnogo dobri fontovi. Navedite ih samo jednom i oni će se automatski zamijeniti u cijeloj prezentaciji ili predlošku.


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

5. Kao što vidimo, s lijeve strane postoji mnogo opcija za postavljanje teksta, naslova itd. Ali što ako nam treba onaj koji ne postoji? Na primjer, imati 3 slike s natpisima.


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

Nakon klika na “Insert Layout” stvara se prazan slajd. I možemo ga ispuniti kako želimo.


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

8. Kreirajte nova prezentacija i "izgubili" ste predložak? Idite na karticu Dizajn i tamo ga potražite.

Prije nego što izradite predložak web stranice u HTML/CSS-u, morate ga razraditi. Dizajn se obično crta u Photoshopu. Gotov raspored spremljeno u format datoteke .PSD.

Kao primjer, napravimo dizajn web stranice na donjoj slici.

1. Otvorite Photoshop i stvarati u njemu novi dokument (Datoteka -> Novo ili Ctrl+N).

2. Postavite početne parametre. U praksi je gotovo nemoguće osmisliti dizajn s točnošću piksela - tijekom procesa izgleda nešto će svakako trebati promijeniti, premjestiti ili ponovno napraviti. Stoga se dimenzije mogu postaviti okvirno, a preporučljivo je odrediti širinu i visinu dokumenta koja je očito veća od planiranih dimenzija stranice, kako bi svi elementi točno pristajali u izgled. Neka naš dokument bude 1000 piksela širok i 1500 piksela visok. Imajte na umu: pikseli, ne centimetri. Ostale parametre ne morate dirati.

3. Uključite ravnala. Trebat će vam tijekom rada jer vam ravnala omogućuju vrlo precizno mjerenje udaljenosti. Provjerite jesu li vaša ravnala uključena. Ako da, vidjet ćete ljestvice pokraj lijeve i donje strane gornja ploča alata.

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

Ravnala bi trebala prikazivati ​​vrijednost u pikselima. Za prijelaz na njih s druge duljinske mjere kliknite na ravnalo desni klik miša i označite odgovarajući potvrdni okvir u izborniku koji se otvori.

4. Provjerite je li veličina fonta navedena u pikselima, a ne u točkama. Ako je pogrešno konfigurirano, idite na Uredi -> Postavke -> Općenito, u prozoru koji se pojavi idite na karticu Mjerne jedinice i ravnala, na padajućem popisu Tekst izabrati pikseli i pritisnite u redu.

5. Odmah stvaramo pozadinu za stranicu. Ovdje imamo gradijentnu ispunu narančaste, koja se pretvara u žuta boja. Odaberite alat na lijevoj ploči Gradijent.

Na ploči koja se pojavi na vrhu kliknite gumb Mirror Gradient, odaberite boju na paleti s lijeve strane.

Pomoću alata u prozoru koji se otvori Gradient Editor, Izaberi potrebne boje. Za postavljanje točne boje kontrolna točka, kliknite na njega, pritisnite gumb Boja i u prozoru za odabir boja odredite je RGB format, HSB, CSS ili bilo koji drugi dostupan.

Kao rezultat manipulacija, gradijent se pokazao kako slijedi.

Da biste primijenili gradijent na trenutni sloj, pomaknite pokazivač preko njega držeći pritisnut lijevi gumb miševi.

6. Spremite pozadinu u datoteku. Ono što smo napravili trebalo bi biti prikazano ispod glavne stranice i zauzimati cijeli prozor preglednika – svojevrsna pozadina. Na primjer, širina stranice je 800 piksela, a razlučivost zaslona korisnika je mnogo veća. Preostali prostor (sve osim onih 800px koje će zauzimati blok stranice) bit će ispunjeno gradijentnom pozadinom.

Budući da se razlučivost zaslona ne može predvidjeti, možete izrezati traku od jednog piksela iz stvorene pozadine i spremiti je kao sliku. Preglednik će se ispuniti pozadina to po cijeloj širini.

6.1. Odabir alata Pravokutno područje.

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

6.3. Kopirajte odabrano područje ( Ctrl+C).

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

6.5. Spremite datoteku u JPG-format

7. Napravite pozadinu stranice. Pozadina će biti jednostavna bijela boja. Odabir alata Pravokutnik a u prozoru svojstava set traženi parametri. Imamo pravokutnik od 800x1100 piksela, lijevo gornji kut koji leži u točki 100.0.

8. Izrada pozadine zaglavlja. Gradijentna ispuna slična mat, veličine 780x80px.

Spremamo ga kao zasebnu grafičku datoteku širine 1 piksel, kao što smo učinili s pozadinom.

9. Kreirajte Glavni izbornik. Pomoću alata Horizontalni tekst dodajte prvu stavku izbornika u izgled - Dom. Sloj će se automatski stvoriti i čak preimenovati, tako da ne morate ništa raditi s njim.

Ovdje je važno da sve točke budu ravnomjerno raspoređene, stoga je vrlo preporučljivo koristiti ravnala. Za povlačenje okomite crte povucite pokazivač dok držite pritisnutu tipku miša slijeva nadesno. Pomoću ravnala izmjerite udaljenost, vodeći računa da svaka stavka izbornika u našem slučaju treba zauzimati 120 piksela.

10. Na sličan način umetnite preostale stavke izbornika.

11. Dodajte logotip. Već ga imamo spremnog, pa ostaje samo da ga pažljivo umetnemo u izgled. Da biste to učinili, kliknite Datoteka -> Otvori, zatim kliknite na sliku i držeći pritisnutu tipku miša premjestite je na naslov dokumenta predloška; kada se otvori, povucite sliku u Pravo mjesto raspored i otpustite tipku miša.

12. Pišemo naziv i slogan stranice. Već poznatim alatom dopunjujemo natpisima gotovo izrađen logo.

13. Idite na bočnu traku. Prvo, stvorimo i spremimo zasebna datoteka gradijentnu ispunu za svoje naslove. Upoznati ste s alatima, nije potrebno objašnjenje.

14. Dodajte tekst naslova informacijskog bloka u novostvoreni gradijent.

15. Nacrtajte okvir područja. Da biste to učinili, samo upotrijebite prozirni pravokutnik s crnim konturnim linijama. Odaberite alat Pravokutnik, postavite vrstu ispune oblika na Bez boje, kliknite ikonu Postavi vrstu poteza oblika i odaberite crnu boju, inače neće biti linija. Ako je obris predebeo, postavite širinu linije na 0,5 pt.

16. Ispod dodajemo naslov bloka s gradijentnom ispunom, kao u koracima 12-13.

17. Napravite blok izbornika za lijevu ploču. Dodajte narančasti pravokutnik širine 100 px sa žutim obrisom od 0,2 pt.

18. Dodajte mu tekst.

19. Koristeći umnožavanje slojeva i ravnala, stvaramo još pet stavki izbornika na lijevoj ploči.

20. Ispisujemo tekst u glavnom dijelu stranice, koristeći isti alat.

21. Dodajte fotografiju na glavni dio stranice, kao što smo učinili s logom. Za kopiranje slike jednostavno je pomaknite mišem dok držite pritisnutu tipku Alt. Ako iznenada slika ne odgovara veličini, upotrijebite alat za transformaciju ( Ctrl+T).

22. Nacrtajte pozadinu dna stranice - narančasti gradijent dužine 64 piksela.

23. Traku donje pozadine širine 1 piksel spremite u posebnu grafička datoteka.

24. Smanjite visinu stranice. Ispostavilo se da su svi elementi već iscrtani, ali je ostalo još malo prostora. Ovo je mjesto gdje smisleni nazivi slojeva dobro dolaze. Između ostalog, odaberite pozadinski sloj (mi ga zovemo “Background”) i pomoću alata Transform smanjite visinu našeg bijelog pravokutnika na donji rub podnožja stranice.

25. Spremite predložak u format datoteke .PSD (Datoteka -> Spremi).

26. Rezultat ove akcije bio je jednostavan, ali već normalnog izgleda predložak web stranice.

Sada preostaje samo izraditi predložak web stranice iz PSD izgleda koristeći HTML/CSS, ali o tome ću govoriti u sljedećem članku.

Ako želite da vaša WordPress stranica postane obećavajuća, prvo biste trebali razmisliti o stvaranju jedinstvena tema za njega. Ovaj proces prilično je radno intenzivan, jer je izravno povezan s različitim kodiranjem i skriptama. Pogledajmo to ispočetka.

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

  1. datoteke stilskih tablica;
  2. datoteke dodatna funkcionalnost;
  3. datoteke predložaka.

Datoteke lista stilova su style.css. Oni su odgovorni za boju, veličinu, font i druge parametre elemenata stranice. Svaka stranica ima samo 1 datoteku style.css. Ako otvorite ovu datoteku, zatim na samom vrhu možete vidjeti podatke o naslovu, autoru i Kratak opis teme. Dok je stvarao vlastitu temu Podatke o sebi možete unijeti u style.css.

Sljedeća kategorija su datoteke dodatne funkcionalnosti. To uključuje functions.php, čije načelo čini da izgleda kao dodatak. Zahvaljujući ovoj datoteci možete učiniti vizualna prilagodba teme izravno u administratorskoj ploči. Popis postavki obično nije širok (naziv web-mjesta, boja navigacije i bočnih panela web-mjesta i tako dalje). Ako je tema višenamjenska, tada će popis postavki biti mnogo širi.

Sada prijeđimo na datoteke predložaka. Njihova glavna funkcija je generiranje stranica koje traže posjetitelji stranice. Datoteke predložaka imaju nastavak ".php". Većina jednostavnih tema može sadržavati samo jednu datoteku predloška pod nazivom index.php. U tom će slučaju sve stranice stranice biti identične. Ovaj dizajn najčešće se koristi za izradu internetskih izvora s bazama podataka, kada dizajn ne igra ključnu ulogu.

Ako nikada niste izradili dizajn, prvo biste trebali pokušati stvoriti jednostavna tema. Za nju normalna operacija trebat će vam najmanje 2 sljedeća datoteka: style.css i index.php.

Datoteke dodatne funkcionalnosti u u ovom slučaju ne morate ga koristiti, kao što razumijete. Među datotekama predložaka, index.php je jedna od najfleksibilnijih. Može sam generirati zaglavlja, raznih blokova, donji dio (footer), sadržaj i ostale elemente stranice.

Važno je napomenuti da će se generirati oni parametri koji nisu generirani datotekom index.php standardne datoteke. Na primjer, ako se vaša tema sastoji od samo 2 od gore navedenih datoteka, ali korisnik treba generirati obrazac za dodavanje komentara, tada će standardni comments.php izvršiti ovu funkciju. Stoga, ako želite da vaša tema bude jedinstvenija, trebali biste to učiniti dodatne datotekešablona. Pogledajmo one glavne.

  1. Za dodavanje komentara, kao što možda pretpostavljate, koristi se predložak comments.php.
  2. Ako želite napraviti skočni prozor s komentarima, tada će vam za te svrhe trebati comments-popup.php.
  3. Generirati početna stranica, koristi se home.php.
  4. Datoteka single.php odgovorna je za prikaz članaka na stranici. Ako nemate takvu datoteku, tada će index.php obavljati svoju funkciju.
  5. Datoteka page.php generira pojedinačne stranice mjesto.
  6. Za prikaz podataka o autoru trebat će vam author.php.
  7. Category.php je odgovoran za kategorije.
  8. Prikaz arhiva, datuma i pretraživanja vrši se datotekama archive.php, date.php i search.php.
  9. Kako bi vaša stranica prikazala jedinstvenu stranicu s greškom 404, morat ćete dodati svoj 404.php.
  10. Gornji i Donji dio stranice generiraju datoteke header.php odnosno footer.php.

Izrada jedinstvene teme ručno od nule

Prvo morate instalirati odgovarajući predložak. Može se naći i na službenoj web stranici wordpress.org i na bilo kojoj drugoj. Preporučljivo je koristiti službenu web stranicu, jer bilo koja treća strana može sadržavati zlonamjerne datoteke i prekinute veze.

Nakon što odaberete, možete početi s preuzimanjem arhive. Na kraju procesa morat ćete ga raspakirati i učitati datoteke u određene mape na web mjestu (arhiva obično sadrži male upute). Preuzimanje se može izvršiti pomoću Programi FileZilla ili izravno s hostinga, ako podržava takvu opciju. Sada sve što trebate učiniti je otići u odjeljak "Teme", odabrati onu koju ste preuzeli i kliknuti na gumb "Aktiviraj".

Možete ga odabrati i izravno na WordPress administratorskoj ploči. Međutim, ne morate ga preuzeti. Samo ćete morati kliknuti na gumb "Instaliraj", a zatim na "Aktiviraj". Prije instalacije preporučuje se pregled.

Sada kada je tema aktivirana, možete prijeći na njezino unikatiziranje. Prvo na što trebate misliti je gornji dio stranice (zaglavlje). Ovo je prva stvar koja će zapeti za oko vašim posjetiteljima, stoga to trebate učiniti odgovorno. Obično se zaglavlje sastoji od naziva stranice, logotipa i kratka informacija o sadržaju. Šešir se može stvoriti u bilo kojem grafički urednik. Čak i u standardna boja. Napredniji dizajneri koriste Adobe Photoshop.

Ime stranice treba biti malo i lako pamtljivo. U Adobe Photoshopu možete odabrati mnogo različitih stilova za njega. Prilikom izrade logotipa 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 prenijeti na svoju web stranicu. Nakon završetka preuzimanja, desno od slike pojavit će se URL koji ćete morati kopirati. Zatim ćete morati otići u odjeljak "Uređivač" i odabrati datoteku koja je odgovorna za generiranje zaglavlja (header.php). U njemu ćete morati pronaći URL trenutne slike i zamijeniti ga s 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 drugačije parametre od standardnog, tada ih možete prilagoditi u header.php. Podesiva po širini atribut širine, a visina je visina. Postavka se može izvršiti u pikselima i postocima. Dakle, ako samo želite rastegnuti kapu, postavite je na 100%.

Ako želite, možete ga dodati u zaglavlje aktivne poveznice na stranice WordPress stranice. To se može učiniti pomoću razne usluge. Ima ih dosta na internetu. Većina njih radi na istom principu. Zaokružite željeno područje zaglavlja, koje će biti dodijeljeno za vezu, a usluga će vam dati potreban kod. Tada ćete morati dodati ovaj kod u svoju datoteku header.php. Budite oprezni pri dodavanju. Svaki bod je važan. Ako kod dodate na krivo mjesto, aktivne veze se neće pojaviti u zaglavlju.

Nakon zamjene standardnog zaglavlja, možete krenuti sa zamjenom standardne pozadine WordPress stranice, widgeta, navigacije, donjeg dijela (footera) i ostalih komponenti WordPress stranice. Također se mogu nacrtati u bilo kojem grafičkom uređivaču i prenijeti na web mjesto u obliku crteža.

Trebate uzeti u obzir da ne smije biti svijetlo. Većina webmastera radije koristi Bijela pozadina. Ne šteti očima i ne odvlači pažnju od glavnog sadržaja.

Da biste stvorili kvalitetnu navigaciju od nule, trebat će vam malo znanja o oznakama kao što su




  • Prvi je odgovoran za stvaranje blokova stranice, drugi je za dodavanje poveznica na WordPress stranicu. Pomoću trećeg mogu se kreirati stupci. Potonji je potreban za konfiguriranje ćelija. Prvi korak je odluka o mjestu na kojem će se nalaziti navigacija. Obično se nalazi odmah ispod zaglavlja. Izgled navigacije je prilično brz proces. Dolje je mali primjer kako možete postaviti mali navigacijski blok.

    Kao što ste već shvatili, konvencionalni naziv 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, web mjesto može pokvariti rad.

    Ne bi trebao biti velik. Najpopularniji su kalendar, oblak oznaka, meta, arhive, pretraživanje, rss, video i zadnja vijest. Da biste ih dodali, morat ćete otići na " Izgled" i kliknite na polje "Widgeti". Tada ćete vidjeti popis dostupne opcije. Widgeti se također mogu instalirati pomoću dodataka. Mogu se preuzeti i sa službene web stranice i izravno putem WordPress administratorske ploče. Da biste dodali video koji se nalazi na YouTubeu, samo trebate zalijepiti link na njega na željeno mjesto na stranici. U suprotnom, videozapis će se morati učitati na web mjesto. Ako ste zainteresirani za programiranje, možete dodati svoj widget na stranicu. Da biste to učinili, morat ćete kliknuti na opciju "Tekst" i tamo unijeti traženi kod.

    U postavkama svakog widgeta dobit ćete priliku promijeniti standardna zaglavlja. Također možete odabrati gdje će se widget prikazati (desno ili lijevo bočna ploča) i tako dalje. Ne bi trebalo biti problema s uklanjanjem widgeta. Da biste to učinili, samo trebate kliknuti gumb "Izbriši" u postavkama.

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

    1. Najpopularniji program je Artisteer. Za rad s njim nećete trebati posebna znanja u području programiranja. Proces stvaranja odvija se u vizualni način rada. Ono što nacrtate bit će predstavljeno pomoću koda koji odgovara međunarodni standard"XHTML 1.0 Transitional". Zahvaljujući tome, tema vaše buduće web stranice bit će podržana u svim preglednicima.

    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. Vrijedno je napomenuti da ovaj program ima neke nedostatke. Najznačajnije je da program košta oko 50 dolara. Postoje također besplatna verzija, ali sadrži vrlo malo opcija. Da biste povećali jedinstvenost predloška, ​​morat ćete se dodatno udubiti u kodiranje.

    Prijeđimo izravno na upute za rad s ovim programom Artisteer. Čim otvorite program, prva opcija koja će se pojaviti zove se “Ideje”. Ona će vas ponuditi razne kombinacije standardni elementi. Ako želite da vaš dizajn bude jedinstven onda
    ova opcija vam neće trebati. Kako biste svladali program, samo trebate kliknuti na opcije i pogledati parametre. Ovaj jednostavan program, tako da s ovim ne bi trebalo biti problema.

    Obratite pozornost na opciju " Zaglavlje stranice" Ona je odgovorna za prikaz zaglavlja stranice. Imate priliku koristiti standardno zaglavlje ili učitati vlastito. Kako napraviti unikatan šešir već znate.

    Da biste prilagodili širinu stranice, morat ćete koristiti opciju "Sheet". Širina je navedena u pikselima. Ovaj program će vam u početku ponuditi širinu od 900 piksela. Također možete koristiti ovu opciju za konfiguraciju razne efekte(sjena, zaobljeni rubovi i tako dalje).

    Opcija "Pozadina" odgovorna je za postavljanje pozadine, kao što ste mogli pretpostaviti. Možete birati između standardne opcije ili učitajte vlastitu.

    Ako želite prilagoditi izgled elemenata stranice, trebali biste koristiti opciju "Izgled".

    Jednako važna opcija je “Članci”. To je mjesto gdje se odvija izgled dizajna članka web stranice. To uključuje lokaciju slike, teksta, komentara, raznih blokova i tako dalje.

    Za odabir boje, veličine ili fonta teksta trebat će vam opcija "Boje i fontovi".

    Nakon dovršetka koraka, možete spremiti svoju kreaciju. Da biste to učinili, kliknite na paletu koja se nalazi u gornjem lijevom kutu. Ispred vas će se pojaviti prozor. Tamo morate kliknuti "Spremi kao". Nakon toga, sve što trebate učiniti je odabrati naziv datoteke i njezino mjesto. Imajte na umu da datoteka mora imati nastavak ".artx". Na daljnji rad S programom za spremanje trebate samo jednom kliknuti "Spremi".

    Nakon što je vaša tema u potpunosti dovršena, možete nastaviti s njezinim izvozom. Da biste to učinili, morat ćete kliknuti na karticu "Izvoz" i odabrati "WordPress tema".

    2. Ako tečno govorite Adobe Photoshop, trebali biste instalirati dodatak Divine Elemente. Zahvaljujući njemu, možete jednostavno pretvoriti “.psd” datoteku u format koji će podržavati svi preglednici.

    3. Ako nemate novca za Artisteer, možete koristiti besplatna usluga Lubith. Dostupno je u mrežni način rada na službenoj stranici lubith.com. Usluga sadrži mnogo toga korisne opcije i posebno je brz. U samo nekoliko minuta u potpunosti ćete savladati sve njegove mogućnosti.

    4. Analog prethodne usluge je WordPress tema Generator. Također je jednostavan za korištenje i sadrži širok izbor razne opcije. Ova usluga je potpuno besplatna. Jedina mana je što ova usluga podržava samo engleski.

    5. XTemplate Generator je rusificirani generator tema za stranicu. Njegove mogućnosti su u lijevom prozoru, au desnom možete vidjeti vizualni rezultat svog rada. Ovaj generator je također besplatan.

    6. WPTheme Generator puno je moćniji od prethodnih, jer sadrži nekoliko puta više opcija. Jedina zamjerka je da se ova usluga plaća. Cijena je 30 dolara. Također je vrijedno napomenuti da je raspored u njemu u potpunosti izveden Engleski jezik.

    7. CSSEZ nije ništa manje popularan od prethodnog. Prije nego počnete, morat ćete dovršiti kratku registraciju. U ovu uslugu možete postaviti do 4 stupca za materijale stranice. Možete učitati vlastitu pozadinu.

    8. Dotemplate vam nudi oko 11 različitih wordpress predlošci, koji se može mijenjati. Jedini nedostatak je nemogućnost učitavanja vlastite grafičke datoteke. Stoga ćete morati sami preuzeti zaglavlje putem upravitelj datoteka mjesto.

    9. Weebly se razlikuje od ostalih po tome što ima mogućnost dodavanja videa izravno s YouTubea ili Googlea bilo gdje na stranici. Web stranica koja ima video je uspješna jer se vizualne informacije brže i lakše percipiraju.

    10. U servisu Eris’ Template Generator možete dodati do 3 stupca za prikaz materijala stranice, dodati razne oznake, kalendar i druge widgete.

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

    Možda ćete morati prilagoditi dizajn za WordPress iz mnogo razloga, na primjer, prenosite svoju nekoć statičnu web stranicu na CMS, ili vam se svidio dizajn koji još nije u WordPress zbirci, ili samo želite razumjeti kako teme ovog CMS-a rade iznutra.

    Pa krenimo.

    Distribucija koda u datoteke

    1. Preuzmite predložak i raspakirajte ga u mapu WordPress tema (adresa poput adresa_bloga_wordpress/wp-content/themes/). Ako želite, preimenujte mapu teme prema svojim željama. Na primjer, moj se predložak nalazi na adresa_bloga_wordpress/wp-content/themes/MyTheme/.

    2. Preimenujte datoteku stilovi.css V stil.css.

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

    /* Naziv teme: MyTheme URI teme: http://test1.ru Autor: NoName URI autora: http://test1.ru Opis: Primjer testa Verzija: 1.0.0 Licenca: GNU Opća javna licenca v2 ili novija URI licence : http://www.gnu.org/licenses/gpl-2.0.html */

    Kao što ste mogli pretpostaviti, ovo servisne informacije o temi dizajna: naslov, autor, opis, licenca, verzija itd. Desne dijelove redaka možete zamijeniti svojima, odnosno postaviti svoje autorstvo, verziju, opis i druge podatke.

    4. Stvorite datoteke zaglavlje.php, indeks.php, bočna traka.php, podnožje.php i među njima podijelite kod od njih index.html.

    4.1. U zaglavlje.php kopirajte kod red po red , budući da je ova datoteka odgovorna za vrh stranice. stilovi.css zamijeniti u kodu s stil.css- novo ispravno ime datoteke.

    4.2. U indeks.php zalijepite kod glavnog bloka (iz retka redak po redak ).

    4.3. U bočna traka.php kopirajte kod bočnog izbornika (iz Po ).

    4.4. U podnožje.php zalijepite preostale retke (sa do kraja dokumenta index.html).

    5. Uklonite index.html.

    6. Idite na administrativnu ploču i provjerite pojavljuje li se predložak MyTheme u odjeljku Izgled -> Teme. Možete ga čak pokušati pregledati ili aktivirati, ali od toga još neće biti ništa dobro jer predložak još nismo integrirali s WordPressom.

    Prilagodba zaglavlja

    Sada ćemo krenuti s izradom dinamičke teme od statičkog predloška u koji će se učitati WordPress podaci i postavke.

    Predložak će sadržavati PHP umetke. Ovaj kod počinje s. Između njih je PHP kod koji najčešće poziva CMS funkcije

    1. Otvorite datoteku header.php i zamijenite kod sadržan u njoj do bloka

    do sljedećeg:

    > "> "> " type="text/css" media="screen" /> <?php bloginfo("name"); ?>

    Učinili smo blok dinamičnim

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

    ">

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

    Važna funkcija koja osigurava rad stilova, dodataka i skripti na stranici.

    2. Nastavite s uređivanjem datoteke index.php. Na samom početku zapišite

    ,

    Linije pozivaju datoteke zaglavlja, bočne trake i podnožja stranice.

    Sada možete pogledati ili čak aktivirati MyTheme. Kao rezultat toga, preglednik će prikazati poznati predložak sa statičnim izbornikom i jednom stranicom. Kako bi izbornik postao dinamičan i prilagodljiv, te umjesto jedne stranice na kojoj bi se prikazivali svi materijali postavljeni na stranici, potrebno je dodatno transformirati predložak.

    Dinamičnost gornjeg izbornika

    Za sada imamo potpuno statičnu temu dizajna, uključujući onu s nepromijenjenim horizontalnim gornjim izbornikom. Iako se ne može konfigurirati s administratorske ploče i ako ostavite kod u njegovom trenutnom obliku, tada ćete za umetanje/brisanje/premještanje stavki morati urediti datoteku svaki put zaglavlje.php, što je izuzetno nezgodno.

    Kako ne bismo filozofirali i ne bismo uronili u ponor fascinantnog svijeta programiranja, dinamičkom izborniku dat ćemo statično ime. Umjesto vodoravne tablice izbornika zalijepite kod

    tako da izgleda ovako:

Najbolji članci na temu