Ovaj vodič će vam pokazati kako da kreirate novi predložak stranice za WordPress Cherry šablone. Framework.
Prijavite se na svoj WordPress admin panel.
Otvorite meni Stranice -> Dodaj novo i kreirajte novu stranicu s novim predloškom stranice.
Unesite naslov stranice i sačuvajte promjene. U desnoj koloni na panelu možete odabrati jedan od predložaka stranice koji se koristi u vašoj temi. Morate dodati novi predložak stranice na ovu listu. Svi ovi predlošci se nalaze u fascikli na vašem serveru. Ali morate dodati novi predložak stranice u folder wp-content / themes / theme #####.
Kreirajte novu .php datoteku u bilo kojem uređivaču kao što je Dreamweaver ili Notepad ++ i nazovite je kao new.php ... Dodajte sljedeći kod ovoj datoteci:
Sačuvajte datoteku i otpremite je u folder wp-content / themes / theme ##### na vaš server.
Sada se vratite na stranicu koju ste kreirali u svom WordPress admin panelu. U panelu Atributi stranice možete odabrati novi predložak stranice pod nazivom "Prilagođeno".
Ponovo otvorite datoteku new.php i počnite sa dodavanjem sadržaja. Datoteka može sadržavati što god želite, uključujući nepromjenjivi sadržaj ili elemente izgleda stranice koji će prikazati njen sadržaj.
Možete koristiti elemente koda drugih šablona stranica iz foldera wp-content / themes / CherryFramework da kreirate određenu stranicu.
Prvo dodajmo zaglavlje i podnožje novom predlošku stranice:
Ako sačuvate promjene, možete ih vidjeti na stranici:
Sada trebate odabrati vrstu sadržaja koji želite koristiti na ovoj stranici. Recimo da nemate poseban šablon stranice za prilagođene postove “Naš tim”. I vama se sviđa dizajn predloška stranice Testimonials i želite da koristite taj dizajn za postove "Naš tim". Za ovo u meniju Dizajn -> Urednik (Izgled -> Urednik) možete lako pronaći datoteku koja sadrži kod šablona Testimonials. Njegovo ime page-testi.php.
Otvorite ovaj fajl za uređivanje. Kopirajte samo kôd sadržaja, pošto ste već dodali zaglavlje i podnožje (ispod je primjer ovog koda, vaš kod može izgledati drugačije):
Zalijepite kopirani kod u datoteku new.php. Zamijenite Naziv predloška: Custom na Naziv šablona: Tim
I zamijeni page-testi.php na new.php u ovom kodu.
Ovaj kod takođe sadrži vezu do datoteke petlja / loop-testi.php... Ovo je još jedan fajl koji trebate kopirati i urediti. Kopirajte datoteku loop-testi.php iz foldera wp-content / themes / CherryFramework / loop i zalijepite ga u folder wp-content / themes / theme ##### / petlja(ako ne postoji folder u folderu sa temom petlja, trebali biste ga kreirati). Preimenujte ovu datoteku na primjer u loop-new.php i otvorite ga za uređivanje. Zamijenite riječ "Testi" na riječ "tim" u svim redovima datoteke i sačuvajte promjene. (Možete koristiti prečicu na tastaturi Control (Command) + F da zamijenite riječi.)
Kada fajl loop-new.php kreirana i uređena, ponovo otvorite datoteku new.php i zamijeniti petlja / loop-testi.php na petlja / loop-new.php u njegovom kodu. Kao rezultat, vaš kod će izgledati ovako:
Sačuvajte promjene i testirajte svoju novu stranicu. Sada bi trebao sadržavati prilagođene postove "Naš tim" sa dizajnom stranice sa izjavama.
U ovom članku ću vam pokazati kako napraviti WordPress šablon bez znanja programiranja. Trebat će vam nekoliko minuta da kreirate svoju temu. Radit ćemo uz pomoć jedne besplatne i jednostavne usluge.
Kako sami napraviti WordPress šablon
Prije nego što napravite predložak za WordPress koristeći ovaj alat, trebali biste se upoznati sa za šta je odgovorna svaka opcija. Evo njihovih funkcija:
- Naziv stranice. U ovom odjeljku možete odabrati boju naslova web stranice, postaviti sam naslov i također odrediti URL do logotipa. Logotip se može ostaviti prazan.
- Veličina tijela. Odaberite veličinu stranice u širini. Za ispravan prikaz, bolje je ostaviti zadano - 100%.
- Lokacija bočne trake. Ova opcija vam omogućava da odaberete veličinu i položaj bočne trake. Postoje tri opcije veličine za lijevu i desnu bočnu traku, kao i mogućnost izrade teme bez bočnih traka.
- Treća kolona. Ova opcija povezuje treći zvučnik. Postoje različite opcije.
- Izgled menija. Ovdje birate izgled menija - postoje 4 različite opcije.
- Scheme Overall. Prilagodljiva shema boja - pozadine različitih elemenata, ivice.
- Šema teksta. Shema rasporeda teksta: prilagodljive boje, stilovi i fontovi svih dijelova stranice - zaglavlja, meniji, osnovni tekst i drugo.
- Tag Cloud. Možete uključiti i isključiti oblak oznaka na bočnoj traci.
- Arhive & Pretraga. Konfigurabilan prikaz arhiva i pretrage - prikažite pune verzije testa ili samo najave.
- Odabir autorskog prava.
Dakle, sada znate kako napraviti WordPress predložak. Ostaje da se dobije. Da biste to učinili, kliknite na dugme "Sačuvaj" na dnu, a zatim, tamo gde je bio pregled, kliknite na link "Pakovane datoteke: preuzmite ZIP datoteku teme" da preuzmete arhivu teme na svoj računar. Nakon toga, možete ga instalirati na svoju web stranicu.
Pozdrav, prijatelji.
Danas ćemo se dotaknuti jedne vrlo interesantne teme za mnoge. Možda ste primijetili da sam nedavno ažurirao dizajn svog bloga, ne znam za vas, ali meni se jako sviđa. Ovaj šablon sam napravio bukvalno za nekoliko desetina minuta, i nije mi bilo potrebno poznavanje HTML-a, CSS-a i PHP-a niti informacija o temi kreiranja šablona.
Dakle, kako sami napraviti šablon za wordpress, bez ikakvog znanja?
Prije nego što počnem, ne mogu a da ne spomenem različite načine kreiranja šablona kako bi slika bila što potpunija.
Metoda broj 1- naučite HTML, naučite strukturu šablona. Naravno, ovaj pristup ima svoje prednosti, ako imate vremena i želje da počnete s njim. Poznavanje HTML-a još nikome nije škodilo.
Metoda broj 2- naručite šablon od freelancera. Ako imate slobodan novac, svakako odaberite ovu metodu. Trošak izrade kvalitetnog predloška je od 15.000 do 70.000 rubalja.
Metoda broj 3- koristite poseban softver za kreiranje šablona. Odmah ću pojasniti da ovo nije stvaranje iste vrste predložaka, sasvim je moguće stvoriti jedinstven, lijep predložak u programu. Primjer je ovaj blog. Sve zavisi od vaše mašte.
Kao što ste vjerovatno već razumjeli govor, ovaj članak će se fokusirati na metodu broj 3.
Upoznajemo se, program za kreiranje predložaka - (verzija nije bitna, koristim drugu, po mom mišljenju, četvrta je već objavljena). Program je plaćen, ali mi smo Rusi (shvatate na šta mislim). Znam da na netu ima mnogo lekcija o ovom programu, ali već sam umoran od odgovora na isto pitanje mojih pretplatnika.
Preuzmite program, pokrenite ga.
1. Odaberite “WordPress” u glavnom prozoru programa.
2. U prozoru za pregled se pojavljuje prazan šablon, naravno, cijela krivulja, ali u procesu rada od njega neće biti ni traga.
3. Idite na karticu "Boje i fontovi", odaberite shemu boja (kasnije ćemo je malo ispraviti), volim svijetlo sivu paletu boja. Kliknite na dugme "Postavi fontova", odaberite fontove (svuda koristim verdana).
4. Idite na karticu "Izgled", ovdje se od nas traži da odaberemo broj i raspored kolona, kao i lokaciju zaglavlja (preko jednostavnog zaglavlja). Uvijek biram “Dva kolona -> Desna srednja strana”.
5. Na sljedećoj kartici od nas se traži da izaberemo pozadinu budućeg šablona. Koristeći ovu karticu, možete kreirati vlastitu ili odabrati postojeću pozadinu.
6. Sljedeća kartica nas poziva da prilagodimo šablonski list.
Postavite širinu lista (po mogućnosti najmanje 1000 px), njegovu sjenu i ivicu.
7. Na sljedećoj kartici od nas se traži da prilagodimo zaglavlje (zaglavlje ili zaglavlje). Prilagodite svoje podnožje koristeći postavke.
1. Podešavanje širine i visine zaglavlja.
2. Pomoću ovog menija možete učitati prethodno pripremljeno zaglavlje u program, kao i dodati efekte u njega.
3. Koristeći ovaj meni, možete dodati sliku treće strane u zaglavlje.
4. Naziv vašeg sajta i njegov slogan.
5. Lokacija imena i slogana.
8. Na sljedećoj kartici od nas se traži da prilagodimo meni (obično se nalazi ispod zaglavlja). Odaberite stil menija i ispunite.
9. Na sljedećoj kartici - "Članci", pozvani smo da prilagodimo izgled područja lokacije sadržaja (tekst, video, slike, tabele). Prilagodite ga koristeći date postavke.
1. Slika članka (ovaj parametar ne utiče ni na šta, može se ostaviti kako jeste).
2. Koristeći ovaj meni možete podesiti stil oblasti sadržaja (sa ili bez poteza).
3. Prilagodite prikaz teksta unutar članka.
4. Uređivanje različitih parametara područja sadržaja.
5. Prilagodite zaglavlje.
6. Prilagodite podnožje.
10. Uz pomoć sljedeće kartice - "Blokovi", možete prilagoditi izgled bočnih blokova (bočnih traka).
POSTAVKE I PREDLOZAK ZA IZVOZ
1. Kliknite na dugme "File" (koji se nalazi u gornjem levom uglu prozora programa).
2. Odaberite “Export-> Export Settings”. Idite na karticu Svojstva i popunite tražene podatke. Idite na karticu “Fusnota” i poništite sva polja.
3. Ponovite korak broj jedan. Odaberite “Izvoz-> WordPress tema”.
4. Izvezite predložak kao ZIP folder.
Sve. Sada znate kako napraviti DIY WordPress predložak. Sretno sa kreacijom.
Ne zaboravite komentirati članak. Autor najboljeg, po mom mišljenju, komentara (krajem sedmice) će dobiti moju plaćenu knjigu "Kako prodati affiliate proizvode na internetu i dobiti 200% profita" potpuno besplatno.
VIDEO LEKCIJA “Kako napraviti šablon za WordPress bez znanja HTML-a?
Samo imajte na umu da WordPress generiše neke klase koje moraju biti prisutne u tablici stilova. Na primjer klase aligncenter, alignleft i alignright služe za poravnavanje slika i blok elemenata i moraju biti uključeni u vašu tablicu stilova (mogu se kopirati iz liste stilova zadane teme):
.aligncenter,
div.aligncenter (
displej: blok;
margin-left: auto;
margin-right: auto;
}
.alignleft (
float: lijevo;
}
.alignright (
float: desno;
}
Sljedeće klase se koriste za poravnavanje slika koje imaju natpise (mogu se kopirati iz zadane teme, kasnije, ako je potrebno, ispraviti):
.wp-caption (
granica: 1px čvrsta #ddd;
text-align: centar;
boja pozadine: # f3f3f3;
padding-top: 4px;
margina: 10px;
/ * opcioni parametri koji će napraviti zaobljene uglove u podržanim pretraživačima * /
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
radijus granice: 3px;
}
.wp-caption img (
margina: 0;
padding: 0;
granica: 0 nema;
}
.wp-caption p.wp-caption-text (
veličina fonta: 11px;
visina linije: 17px;
padding: 0 4px 5px;
margina: 0;
}
Osim toga, postoji još nekoliko WordPress klasa koje ne moraju biti opisane u tablici stilova. WordPress generiše stranice koristeći ih, možete ih i stilizirati:
.kategorije (...)
.cat-item / * Ova klasa je dodijeljena svim kategorijama * /)
.current-cat (/ * stil trenutne kategorije * /)
.current-cat-parent (/ * stil za roditelj(e) trenutne kategorije * /)
.djeca (/ * dječiji razred * /)
.pagenav (/ * navigacija po stranici * /)
.page_item (/ * bilo koja stavka na listi * /)
.current_page_item (/ * ova klasa je na listi stranica dodijeljena trenutno aktivnoj stranici * /)
.current_page_parent (/ * klasa za roditeljsku stranicu u odnosu na trenutnu * /)
.current_page_ancestor (/ * bilo koja stranica najvišeg nivoa u odnosu na ovu * /)
.widget (/ * svi widgeti su umotani u ovu klasu * /)
U procesu izgleda koristite blokove i stilove za njih, kako je definirano na snimcima ekrana na početku članka. Ovo nije neophodno, ali je veoma poželjno.
Na primjer, u budućnosti ćemo povezivati obrazac za pretragu sa web-mjestom putem posebnog. wordpress tag , kao rezultat čega će wordpress prikazati sljedeći obrazac:
Stoga to uzimamo u obzir prilikom postavljanja teme.
I posljednja stvar koju treba dodati stilu.css su informacije o sebi i temi koju ste kreirali. Informacije se stavljaju na početak datoteke u komentarima:
/*Naziv teme: Osmislite jedinstveno ime teme
URI teme: http: // link-to-theme-homepage
Opis: Opis teme
Autor: Thread Starter
URI autora: http: // link-to-author-page
Šablon: ime-teme-predak
Oznake: oznake tema - samo sa liste koju je predložio wordpress.org
Verzija: verzija
Pa, evo teksta licence
*/
Takođe ne zaboravite da uradite screenshot.png i stavite ga u folder sa šablonima (u root). Informacije postavljene na ovaj način u listu stilova biće prikazane na administrativnom panelu u odjeljku Upravljanje "temama"... Testiramo izgrađeni predložak u pretraživačima, ako su sva pravila, možete ići dalje.
Neću davati šifre stranica šablona za montažu, jer dovoljno je velik, samo ga preuzmete, a onda ćemo raditi s njim.
Kako funkcioniše wp tema:
Ako otvorite podrazumevani folder teme (wp-content / themes / default), videćete mnogo PHP fajlova (fajlova tema) i jednu datoteku style.css. Kada pregledamo blog, WP uključuje fajlove tema (index.php< Ovim je završena preliminarna priprema i možemo preći na kreiranje teme od postojećeg izvornog materijala. Korak 1: Sada fajlove našeg šablona treba "izrezati", tj. povucite u zasebne datoteke podnožje, bočnu traku i zaglavlje. Dijagram prikazuje pojednostavljeni prikaz datoteke index.php sa oznakama prema kojima ćemo ga rezati: Korak 2 - Header.php Sada idite na fasciklu sa podrazumevanom temom, otvorite header.php i kopirajte oznake odatle Korak 3 - Sidebar.php
Prvo, u direktorijumu WordPress tema (wp-content / themes), kreirajte fasciklu sa nazivom naše teme. Neka bude ruseller_lessons... Zatim iz zadanog foldera teme (wp-content / themes / default) kopirajte datoteke comments.php, search.php i 404.php u naš folder tema. Ovi fajlovi su odgovorni za komentare i pretrage na blogu. Onda unutra ruseller_lessons kopirajte stilski list style.css naš šablon, screenshot.png (300x225) i folder slike.
Otvaramo index.html i iseći sve što je ispred komentara, kreirajte novu datoteku header.php i zalijepite isječeni kod u njega, spremite ga u direktorij naše teme ruseller_lessons:
Moj blog
"tip =" tekst / css "medij =" ekran "/>
" />
/">
Vraćanje na datoteku index.htm. Prije svega, brišemo cijeli obrazac za pretragu, a zatim iz njega izrezujemo sve