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.
![](https://i2.wp.com/etutorium.ru/images/shablon-2.png)
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.
![](https://i0.wp.com/etutorium.ru/images/shablon-3.png)
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.
![](https://i1.wp.com/etutorium.ru/images/shablon-5.png)
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.
![](https://i0.wp.com/etutorium.ru/images/shablon-6.png)
Tada će nam pomoći funkcija Insert Layout + Insert Placeholder.
![](https://i2.wp.com/etutorium.ru/images/shablon-7.png)
Nakon klika na “Insert Layout” stvara se prazan slajd. I možemo ga ispuniti kako želimo.
![](https://i1.wp.com/etutorium.ru/images/shablon-8.png)
![](https://i1.wp.com/etutorium.ru/images/shablon-9.png)
![](https://i1.wp.com/etutorium.ru/images/shablon-10.png)
7. Sada ako ćemo stvarati novi slajd, tada vidimo opcije iz našeg predloška.
![](https://i1.wp.com/etutorium.ru/images/shablon-11.png)
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:
- datoteke stilskih tablica;
- datoteke dodatna funkcionalnost;
- 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.
- Za dodavanje komentara, kao što možda pretpostavljate, koristi se predložak comments.php.
- Ako želite napraviti skočni prozor s komentarima, tada će vam za te svrhe trebati comments-popup.php.
- Generirati početna stranica, koristi se home.php.
- Datoteka single.php odgovorna je za prikaz članaka na stranici. Ako nemate takvu datoteku, tada će index.php obavljati svoju funkciju.
- Datoteka page.php generira pojedinačne stranice mjesto.
- Za prikaz podataka o autoru trebat će vam author.php.
- Category.php je odgovoran za kategorije.
- Prikaz arhiva, datuma i pretraživanja vrši se datotekama archive.php, date.php i search.php.
- Kako bi vaša stranica prikazala jedinstvenu stranicu s greškom 404, morat ćete dodati svoj 404.php.
- 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" />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:
Kako bi se izbornik prikazao, otvorite u kontrolnoj ploči stranice Izgled -> Prilagodi -> Izbornik i ili preimenujte već kreirani izbornik u izbornik ili kreirajte izbornik i prilagodite ga svojim željama, ali svakako ga nazovite izbornik.
Suština radnje je da datoteka zaglavlje.php funkcija wp_nav_menu("izbornik=izbornik"); otvara izbornik pod nazivom izbornik, koji mora biti ispravno imenovan i konfiguriran u WordPress administratorskoj ploči da bi se pojavio. Ime Jelovnik možete ga promijeniti u bilo koji drugi, glavna stvar je da se naziv podudara i u postavkama web mjesta i u kodu zaglavlje.php.
Navigacija očito nekamo ide, iako je čini lijepim stubištem. To se događa jer je izbornik našeg predloška nepromišljeno implementiran unutar tablice, ali je trebao biti formatiran kao popis. Situaciju možete djelomično ispraviti dodavanjem u datoteku stil.css sljedeći kod:
#menu ul ( margina: 0; /* Poništi vrijednost paddinga */ padding: 4px; /* Margin value */ font-size: 18px; ) #menu ul li ( display: inline; /* Prikaži kao inline element * / margina -desno: 5px; /* Lijevo ispuna */ padding: 3px; /* Margine oko teksta */ )
Budući da je komentiran, dodatna objašnjenja jedva da su potrebna. Ostalo je samo osvježiti stranicu i vidjeti da je popis konačno postao horizontalan.
Izbornik se, naravno, može učiniti glatkijim i ljepšim, ali ova radnja nema nikakve veze s prilagođavanjem predloška, već je usko povezana s CSS-om, koji možete detaljno proučiti.
Dovršavanje "šešira"
Jedini elementi datoteke zaglavlje.php, ostalo statično - naziv i opis stranice. Tako da su preuzete iz postavki navedenih u administratorskoj ploči, zamijenite kod odgovoran za prikaz teksta u zaglavlju sa sljedećim redovima:
Osvježite stranicu - rezultat se ne čeka dugo.
Rad s datotekom zaglavlje.php Ovo je završeno, na kraju ima sljedeći kod:
>
"> "> " type="text/css" media="screen" />Prikazujemo postove
Prijeđimo na dio koji sadrži glavni sadržaj stranice - datoteka će se uređivati indeks.php.
Uklonite sadržaj bloka pravo i umjesto toga zalijepite kod za dinamički prikaz objava. Alternativno, uklonite sav kod iz datoteke i umjesto njega umetnite sljedeće:
">
/ /Ali ovdje nema ničega :(404
Početak petlje koja će uzrokovati da stranica nastavi objavljivati postove dok ih ne ponestane.
">
Prikazuje naslov objave.
/ /
Datum u obliku dan, mjesec (skraćeno), godina. Oznake, komentari.
Zaključak posta.
Kraj ciklusa, pod uvjetom da je bilo zapisa.
Ako nema materijala, prikažite odgovarajući natpis o tome i napustite ciklus.
Prikaz navigacije stranice pod uvjetom da ne stanu na jednu stranicu.
Naizgled jednostavan kod promijenio je stranicu globalno – blog je postao uistinu dinamičan. Svaki post se može pogledati, linkovi rade.
Daljnji dizajn i postavljanje elemenata ovisi samo o vašoj mašti i vještinama izgleda - s prikazom podataka možete raditi što god želite, ali rad na predlošku još nije dovršen.
Dodavanje widgeta
Lijevo od glavnog sadržaja u predlošku nalazi se ploča, na njoj se nalazi blok informacija (vrsta widgeta) i bočni izbornik. Informacijski blok ne smije biti statičan, a budući da jako podsjeća na widget, predlažem da bude widget. Da biste to učinili potrebno vam je:
- registrirajte blok widgeta;
- dovesti ga na pravo mjesto.
Sada više detalja.
1. U direktoriju svoje teme kreirajte datoteku functions.php. Pohranjuje funkcije koje omogućuju rad predloška. Može sadržavati i druge prilagođene postupke.
2. Dodajte sljedeći kod:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Ovaj kod registrira blok widgeta. Umjesto MySidebar, možete unijeti bilo koje drugo ime. U ovoj datoteci možete registrirati izbornik u približno istoj funkciji, ali odlučio sam se zadovoljiti s malo troškova i ne učiniti to, kako bih smanjio kontakt s PHP-om, au isto vrijeme pokazao dva različita pristupa rješavanju jednog problema .
3. U dosjeu bočna traka.php obrišite linije:
Informacija
Unaprijediti...
i umjesto toga napiši:
Informacijski blok je, očekivano, nestao, a sa strane je ostao samo statični izbornik.
4. Ali promjene na bolje su se dogodile u odjeljku administratorske ploče Izgled dobio podtočke Widgeti I Jelovnik. Idi na prvu. Otvorite ga i pogledajte: unutra se pojavio registriran u datoteci funkcije.php blok (za mene je to MySidebar).
5. Za ponovno stvaranje bloka informacija, povucite widget na bočnu traku Tekst, u polju Naslov Unesi Informacija, u polju Tekst- šifra
Nudimo vam blagdanske popuste. Unaprijediti...
6. Osvježite stranicu bloga - blok je rekreiran gotovo identično (male nijanse se mijenjaju u datoteci stil.css i neću se fokusirati na njih).
Prilagodba jelovnika
Drugi dio bočne trake je okomiti izbornik. Također je potrebno pretvoriti iz statičke u dinamičku, tako da se zatim može uređivati izravno s administratorske ploče.
1. Uklonite veliki ugniježđeni popis izbornika u datoteci bočna traka.php i umjesto toga unesite kod:
2. Na nadzornoj ploči WordPressa otvorite Izgled -> Prilagodi -> Izbornik, kliknite gumb Dodaj izbornik, dajte mu naziv tako da naziv u administratorskoj ploči odgovara nazivu u kodu stranice bočna traka.php(Ja imam ovo lijevi_izbornik) i dodajte sve potrebne stavke.
3. Spremite promjene, osvježite stranicu i provjerite radi li dinamički izbornik na lijevoj strani stranice i ispravno se prikazuje.
Šifra stranice bočna traka.php u usporedbi s izvornim, jako se smanjio i na kraju je postao ovakav:
Jelovnik
Zapravo, samo je natpis ostao statičan Jelovnik. A to je zato što je malo vjerojatno da će se promijeniti, iako se lako može "revitalizirati", na primjer, implementacijom ovog bloka u obliku drugog područja widgeta i dodavanjem bloka prilagođenog izbornika u njega, ali ako pažljivo pročitate članak, sada to lako možete učiniti sami.
Rad s datotekom footer.php
Ako često radite u MS Wordu, vjerojatno će vas zanimati spremanje dokumenta kao predloška. Dakle, posjedovanje datoteke predloška s oblikovanjem, poljima i drugim parametrima koje postavite može uvelike pojednostaviti i ubrzati tijek rada.
Predložak izrađen u Wordu sprema se u DOT, DOTX ili DOTM formatima. Potonji omogućuje rad s makronaredbama.
Uzorak je posebna vrsta dokumenta, kod otvaranja i naknadne izmjene stvara se kopija datoteke. Izvorni dokument (predložak) ostaje nepromijenjen, kao i njegovo mjesto na disku.
Kao primjer onoga što predložak dokumenta može biti i zašto je uopće potreban, možete dati poslovni plan. Dokumenti ove vrste često se izrađuju u Wordu, stoga se također često koriste.
Dakle, umjesto da svaki put iznova kreirate strukturu dokumenta, birate odgovarajuće fontove, stilove dizajna i postavljate veličine margina, možete jednostavno koristiti predložak sa standardnim izgledom. Slažem se, ovaj pristup radu je mnogo racionalniji.
Dokument spremljen kao predložak moguće je otvoriti i popuniti potrebnim podacima i tekstom. Istodobno, spremanjem u DOC i DOCX formatima standardnim za Word, izvorni dokument (stvoreni predložak) ostat će nepromijenjen, kao što je gore spomenuto.
Većina predložaka koji će vam možda trebati za rad s dokumentima u Wordu mogu se pronaći na službenoj web stranici (). Osim toga, u programu možete izraditi vlastite predloške, kao i izmijeniti postojeće.
Bilješka: Neki od predložaka već su ugrađeni u program, ali neki od njih, iako prikazani na popisu, zapravo se nalaze na web stranici Office.com. Nakon što kliknete na takav predložak, on će odmah biti preuzet sa stranice i dostupan za korištenje.
Izradite vlastiti predložak
Najlakši način da počnete stvarati predložak je s praznim dokumentom, koji možete otvoriti jednostavnim pokretanjem Worda.
Ako koristite neku od najnovijih verzija MS Worda, kada otvorite program dočekat će vas početna stranica na kojoj već možete odabrati jedan od dostupnih predložaka. Ono što posebno veseli je da su svi zgodno razvrstani u tematske kategorije.
Međutim, ako želite sami izraditi predložak, odaberite "Novi dokument". Otvorit će se standardni dokument sa zadanim postavkama. Ovi parametri mogu biti ili programski (postavljeni od strane programera) ili kreirani od strane vas (ako ste prethodno spremili određene vrijednosti kao zadane).
Koristeći naše lekcije, napravite potrebne izmjene u dokumentu, koji će se kasnije koristiti kao predložak.
Osim izvođenja gornjih koraka, također možete dodati vodeni žig, vodene žigove ili bilo koju grafiku kao zadane postavke za dokument koji će se koristiti kao predložak. Sve što promijenite, dodate i spremite u budućnosti bit će prisutno u svakom dokumentu kreiranom na temelju vašeg predloška.
Lekcije o radu s Wordom:
Nakon što izvršite potrebne promjene, postavite zadane parametre za budući predložak, trebate ga spremiti.
1. Pritisnite gumb "Datoteka"(ili "MS Office", ako koristite stariju verziju Worda).
3. U padajućem izborniku "Vrsta datoteke" odaberite odgovarajuću vrstu predloška:
- Word predložak (*.dotx): obični predložak, kompatibilan sa svim verzijama Worda starijim od 2003.;
- Word predložak s podrškom za makronaredbe (*.dotm): kao što ime sugerira, ova vrsta predloška podržava rad s makronaredbama;
- Predložak Word 97 - 2003 (*.dot): kompatibilan sa starijim verzijama Worda 1997 - 2003.
4. Postavite naziv datoteke, odredite stazu za spremanje i kliknite "Uštedjeti".
5. Datoteka koju ste izradili i konfigurirali bit će spremljena kao predložak u formatu koji ste naveli. Sada ga možete zatvoriti.
Stvorite predložak iz postojećeg dokumenta ili standardnog predloška
1. Otvorite prazan MS Word dokument, idite na karticu "Datoteka" i odaberite "Stvoriti".
Bilješka: U najnovijim verzijama Worda korisniku se prilikom otvaranja praznog dokumenta odmah nudi popis predložaka na temelju kojih se može izraditi budući dokument. Ako želite pristupiti svim predlošcima, odaberite prilikom otvaranja "Novi dokument", a zatim slijedite korake opisane u točki 1.
2. Odaberite odgovarajući predložak u odjeljku “Dostupni predlošci”.
Bilješka: U najnovijim verzijama Worda ne morate ništa odabrati; popis dostupnih predložaka pojavljuje se odmah nakon što kliknete gumb "Stvoriti", neposredno iznad predložaka nalazi se popis dostupnih kategorija.
3. Napravite potrebne izmjene u dokumentu, koristeći naše savjete i upute predstavljene u prethodnom odjeljku članka (Izrada vlastiti predložak).
Bilješka: Za različite predloške, stilovi teksta koji su dostupni prema zadanim postavkama i prikazani na kartici "Dom" u grupi "Stilovi", mogu se razlikovati i primjetno razlikovati od onih koje ste navikli vidjeti u standardnom dokumentu.
- Savjet: Iskoristite dostupne stilove kako bi vaš budući predložak bio uistinu jedinstven, za razliku od drugih dokumenata. Naravno, učinite to samo ako niste ograničeni zahtjevima dokumenata.
4. Nakon što napravite potrebne izmjene u dokumentu, izvršite sve postavke koje smatrate potrebnima, spremite datoteku. Da biste to učinili, kliknite na karticu "Datoteka" i odaberite "Spremi kao".
5. U odjeljku "Vrsta datoteke" odaberite odgovarajuću vrstu predloška.
6. Postavite naziv za predložak, navedite putem "Dirigent" ("Pregled") put za spremanje kliknite gumb "Uštedjeti".
7. Predložak koji izradite na temelju postojećeg bit će spremljen zajedno sa svim promjenama koje ste napravili. Ova se datoteka sada može zatvoriti.
Dodavanje građevnih blokova predlošku
Gradivni blokovi su elementi koji se mogu ponovno koristiti u dokumentu, kao i one komponente dokumenta koje su pohranjene u zbirci i dostupne za korištenje u bilo kojem trenutku. Pomoću predložaka možete pohranjivati i distribuirati građevne blokove.
Dakle, koristeći standardne blokove, možete stvoriti predložak izvješća koji će sadržavati propratna pisma dvije ili više vrsta. Istodobno, prilikom izrade novog izvješća na temelju ovog predloška, drugi korisnici će moći odabrati bilo koju od dostupnih vrsta.
1. Stvorite, spremite i zatvorite predložak koji ste izradili uzimajući u obzir sve zahtjeve. U ovu će se datoteku dodati standardni blokovi koji će kasnije biti dostupni drugim korisnicima predloška koji ste izradili.
2. Otvorite dokument predloška u koji želite dodati građevne blokove.
3. Napravite potrebne gradivne blokove, koji će kasnije biti dostupni drugim korisnicima.
Bilješka: Prilikom unosa podataka u dijaloški okvir "Stvaranje novog gradivnog bloka" unesite u red "Spremi u" naziv predloška u koji ih je potrebno dodati (ovo je datoteka koju ste izradili, spremili i zatvorili prema prvom odlomku ovog odjeljka članka).
Predložak koji ste izradili, koji sadrži građevne blokove, sada se može dijeliti s drugim korisnicima. Sami blokovi, spremljeni s njim, bit će dostupni u navedenim zbirkama.
Dodavanje kontrola sadržaja u predložak
Postoje situacije u kojima svom predlošku i cijelom njegovom sadržaju želite dati određenu fleksibilnost. Na primjer, predložak može sadržavati padajući popis koji je izradio autor. Iz ovog ili onog razloga, ovaj popis možda neće odgovarati drugom korisniku koji slučajno radi s njim.
Ako takav predložak sadrži kontrole sadržaja, drugi korisnik će moći prilagoditi popis kako sebi odgovara, ostavljajući ga nepromijenjenim u samom predlošku. Da biste svom predlošku dodali kontrole sadržaja, morate omogućiti karticu "Programer" u MS Wordu.
1. Otvorite izbornik "Datoteka"(ili "MS Office" u ranijim verzijama programa).
2. Otvorite odjeljak "Opcije" i tamo odaberite stavku "Prilagodite vrpcu".
3. U odjeljku “Glavne kartice” potvrdite okvir pored stavke "Programer". Za zatvaranje prozora kliknite "U REDU".
4. Tab "Programer" pojavit će se na upravljačkoj ploči programa Word.
Dodavanje kontrola sadržaja
1. U kartici "Programer" kliknite na gumb “Način dizajna” koji se nalazi u grupi “Kontrole”.
Umetnite potrebne kontrole u dokument tako da ih odaberete među onima predstavljenim u istoimenoj grupi:
- Bogati tekst;
- Običan tekst;
- Crtanje;
- Zbirka građevnih blokova;
- Kombinirani okvir;
- Padajući popis;
- Odabir datuma;
- potvrdni okvir;
- Dio koji se ponavlja.
Dodajte tekst objašnjenja u predložak
Predložak možete učiniti jednostavnijim za korištenje dodavanjem teksta objašnjenja u dokument. Ako je potrebno, zadani tekst objašnjenja uvijek se može promijeniti u kontroli sadržaja. Da biste postavili zadani tekst objašnjenja za korisnike koji će koristiti predložak, slijedite ove korake:
1. Uključite “Način dizajna”(tab "Programer", grupa "Kontrole").
2. Pritisnite kontrolu sadržaja gdje želite dodati ili promijeniti tekst objašnjenja.
Bilješka: Tekst objašnjenja je prema zadanim postavkama u malim blokovima. Ako “Način dizajna” onemogućeni, ti se blokovi ne prikazuju.
3. Promijenite, formatirajte zamjenski tekst.
4. Onemogući “Način dizajna” ponovnim pritiskom na ovu tipku na upravljačkoj ploči.
5. Tekst objašnjenja bit će spremljen za trenutni predložak.
Ovdje završavamo, iz ovog članka naučili ste što su predlošci u Microsoft Wordu, kako ih izraditi i urediti, kao i što sve možete učiniti s njima. Ovo je zaista korisna značajka programa, koja uvelike pojednostavljuje rad s njim, pogotovo ako ne jedan, već nekoliko korisnika, da ne spominjemo velike tvrtke, rade na dokumentima.