Pozdrav, prijatelji.

Danas ćemo se dotaknuti jedne vrlo zanimljive, za mnoge, teme. Možda ste primijetili da sam nedavno ažurirao dizajn svog bloga, ne znam za vas, ali meni se jako sviđa. Napravio sam ovaj predložak za samo nekoliko desetina minuta i nije mi bilo potrebno poznavanje HTML-a, CSS-a i PHP-a niti informacije o kreiranju š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- učite HTML, proučavate strukturu šablona. Naravno, ovaj pristup ima svoje prednosti, ako imate vremena i želje, počnite s tim. Poznavanje HTML-a još nikome nije škodilo.

Metoda broj 2– naručite šablon od freelancera. Ako imate slobodan novac, onda, svakako, odaberite ovu metodu. Trošak izrade visokokvalitetnog 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, u ovom članku ćemo govoriti o metodi broj 3.

Upoznajemo se, program za kreiranje šablona - (verzija nije bitna, koristim drugu, po mom mišljenju, četvrta je već izašla). 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. U glavnom prozoru programa izaberite “WordPress”.

2. U prozoru za pregled se pojavljuje prazan šablon, naravno, cijela krivulja, ali u procesu rada od toga neće biti ni traga.

3. Idite na karticu "Boje i fontovi", odaberite shemu boja (ispravićemo je malo kasnije), sviđa mi se svijetlo siva shema boja. Kliknite na dugme „Postavi fontova“, izaberite fontove (koristim Verdanu svuda).

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 traži od nas 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 postavimo zaglavlje (header ili header). Prilagodite 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 podesimo 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 datim postavkama.

1. Slika članka (ovaj parametar ne utiče ni na šta, može se ostaviti kako jeste).

2. Koristeći ovaj meni, možete postaviti stil područja sadržaja (sa ili bez poteza).

3. Podešavanje prikaza teksta unutar članka.

4. Uređivanje različitih parametara područja sadržaja.

5. Prilagodite zaglavlje.

6. Prilagodite podnožje.

10. Koristeći sljedeću karticu - "Blokovi", možete prilagoditi izgled bočnih blokova (bočna traka).

POSTAVKE I IZVOZ PREDLOŠKA

1. Kliknite na dugme „Datoteka“ (nalazi se u gornjem levom uglu prozora programa).

2. Odaberite “Izvoz->Izvoz postavki”. Idite na karticu "Svojstva" i unesite tražene informacije. Idite na karticu "Fusnota" i poništite sva polja.

3. Ponovite korak broj jedan. Odaberite “Export->WordPress Theme”.

4. Izvezite predložak kao ZIP folder.

Sve. Sada znate kako napraviti svoj vlastiti WordPress predložak. Sretno u stvaranju.

Ne zaboravite komentirati članak. Autor najboljeg, po mom mišljenju, komentara (prema rezultatima sedmice) će besplatno dobiti moju plaćenu knjigu “Kako prodati partnerske proizvode na internetu i dobiti 200% profita”.

VIDEO LEKCIJA “Kako napraviti šablon za WordPress bez znanja HTML-a?

Rutinski rad sa dokumentima istog tipa može se minimizirati ako se formiraju na osnovu Word šablona. O tome šta su i kako ih stvoriti, naš današnji materijal.

Nerijetko, u toku naših aktivnosti, kreiramo istu vrstu dokumenata: akte, naredbe, pisma, ugovore, seminarske radove itd. Svi ovi dokumenti, po pravilu, sadrže neke tekstualne ili grafičke elemente - naslove, detalje, logotipe, tekstualne blokove, koji se ponavljaju od dokumenta do dokumenta.

Običan korisnik Word uređivača teksta, kreirajući drugi dokument, prisiljen je koristiti i uređivati ​​dokument koji je već neko kreirao i koji sadrži sve ove elemente, ili jednostavno kopirati potrebne elemente u novi dokument, opet, iz stare datoteke, štaviše , shvaćajući da je u ovom slučaju uređivanje neizbježno.

Predložak definiše osnovnu strukturu dokumenta i sadrži postavke dokumenta kao što su automatski elementi teksta, fontovi, dodeljene prečice na tastaturi, makroi, meniji, podešavanje stranice, formatiranje i stilovi. (Iz pomoći za Word)

Ova rutina se može svesti na minimum ako kreirate dokument na osnovu predloška. Ponekad se uzorci nazivaju i "ribe". Međutim, kako god to nazvali, šabloni vam zaista omogućavaju da značajno povećate radnu efikasnost.

Predložak se može kreirati na dva načina, uzimajući za osnovu bilo koji dokument sa svim prisutnim elementima, ili počevši od nule, samostalno uključujući potrebne elemente u njega.

Pokazat ću vam kako da kreirate šablon od nule, i tako će biti lakše razumjeti cijeli proces nego mijenjati postojeći fajl. Na primjer, kreirat ćemo jednostavan formalni predložak pisma. U tome nema ništa teško, ako slijedite moje upute korak po korak.

Pa počnimo.

1. Kreirajmo prazan dokument.

2. Spremite ga odmah. Idite na meni "Datoteka" (File) i odaberite naredbu "Save as..." (Save as...). Otvara se dijaloški okvir Sačuvaj kao tip u kojem treba da izaberemo tip dokumenta (*.dot) u polju Sačuvaj kao tip.

Otvoriće se fascikla Templates, u kojoj se podrazumevano čuvaju svi šabloni. Dajte datoteci ime i kliknite na dugme "Sačuvaj".

3. Određujemo koji će se elementi (tekst i grafika) i gdje tačno nalaziti u dokumentu.

Po pravilu, sva službena pisma sadrže elemente kao što su naziv organizacije, logo, detalji. U samom tekstu pisma može biti učtivan poziv primaocu pisma i, zapravo, sam tekst pisma. Na kraju pisma navodi se naziv pozicije rukovodioca organizacije sa njegovim potpisom. Uzmimo sličnu strukturu pisma kao osnovu.

4. Naziv organizacije postavićemo u gornji deo dokumenta u sredini. Da biste to učinili, ispišite naziv naše organizacije velikim slovima, na primjer, "WHITE NIGHTS" LLC. Pritisnite tipku Enter i prijeđite na novi red.

5. Ispod možemo umetnuti liniju razdvajanja. Da biste to učinili, kliknite na dugme "Crtež". Panel za crtanje sa kontrolnim dugmadima će se pojaviti na dnu ekrana. Nas zanimaju linije, pa odaberite odgovarajuće dugme "Linija" (Linija). Kursor miša se pretvara u krst.

Napomena: možda imate umetnuto takozvano platno - tačkasto područje za umetanje oblika / slika. Da biste se razumno riješili umetka platna, idite na izbornik "Alati" i odaberite naredbu "Opcije". Kliknite karticu Općenito i poništite opciju Automatski kreiraj platno za crtanje prilikom umetanja automatskih oblika. Kliknite na "OK" i zatvorite prozor "Opcije".

6. Donosimo kursor u obliku krsta na naziv organizacije i malo niže povlačimo liniju od trepćućeg kursora do desne ivice polja, pritiskajući i držeći levi taster miša. Linija je povučena.

7. Možete ostaviti liniju kakva jeste, ili joj možete dati elegantniji izgled. Da biste to učinili, na ploči za crtanje nalazi se odgovarajuće dugme "Stil linije" (Line Style). Kliknite na njega i odaberite bilo koju vrstu.

8. Nakon što se zaustavite na bilo kojoj vrsti linije, dvaput kliknite ispod ove linije - adresa i detalji organizacije će biti odštampani na ovom mestu. Unesite podatke koje smatrate potrebnim: pravnu i stvarnu adresu, telefon, faks, URL web stranice, e-mail, bankovne podatke.

9. Sada formatirajte otkucani tekst prema vašim idejama. Naziv organizacije, na primjer, izabrao sam i dodijelio joj stil "Naslov 1" (Naslov 1). Također sam centrirao naslov i razmaknuo pet tačaka između slova.

Smanjio sam veličinu fonta teksta ispod linije na devet tačaka i centrirao ga. Primjer možete vidjeti na slici ispod.

Tako smo kreirali trajni (nepromjenjivi) dio našeg šablona, ​​takozvani "header". Sada idemo dalje i kreiramo polja u koja ćete kasnije zamijeniti svoje podatke.

Na lijevoj strani predloška ispod "zaglavlja" dvaput kliknite i upišite naziv grada, na primjer, Moskva. Zatim, u suprotnom (desnom) dijelu predloška, ​​ponovo dvaput kliknite i umetnite datum na mjestu gdje kursor treperi. Za ovo:

1. U meniju "Insert" (Insert) izaberite komandu "Date and time" (Datum i vreme). Otvara se prozor u kojem birate željeni format prikaza datuma, na primjer 18.07.2006.

2. Označite polje "Ažuriraj automatski" (Ažuriraj automatski). Sada, kada kreirate novi dokument na osnovu ovog šablona, ​​datum će već biti stavljen u skladu sa trenutnim vremenom na vašem računaru.

3. Na desnoj strani šablona ispod datuma - uvučeno od lijeve ivice za oko 10 cm duž horizontalnog ravnala - dvaput kliknite. Kursor će treptati, a na ovo mjesto ćemo umetnuti polje za zamjenu podataka primaoca pisma.

4. U meniju "Insert" (Insert) izaberite naredbu "Field" (Polje). Otvoriće se prozor kao što je prikazano na slici ispod:

5. U oblasti Kategorije izaberite Automatizacija dokumenata. U području "Imena polja" odaberite naredbu MacroButton. U oblasti "Poruka" (Prikaz teksta) unesite tekst "Ubacite ime primaoca" i kliknite na OK.

Strogo govoreći, u oblasti „Naziv makroa“ trebalo je da bude naznačeno NoMacro (tj. komanda bez makroa), ali to nije bilo na listi. Stoga, ostavljamo to kako jeste, barem ja nikada nisam naišao na greške.

6. Dobijamo polje sa našim tekstom.

Ako imate ovo polje prikazano kao običan tekst bez senčenja, onda preporučujem da uradite takvo senčenje. Ovo će vam omogućiti da kasnije lako definirate potrebna polja za unos podataka u dokumentu. Da biste to uradili, idite na meni "Alati" i izaberite komandu "Opcije" i na kartici "Prikaz" u grupi "Prikaži" izaberite sa liste senčenje polja (Sjenčanje polja) opciju uvek (Uvek).

Ispod možete dodatno umetnuti slično polje za adresu primaoca i njegovu poziciju.

Moramo ubaciti poruku dobrodošlice primaocu ovog pisma, tekst same poruke i potpis pošiljaoca na dnu. Pokušajte sami umetnuti ova polja u svoj predložak, na osnovu gornjih uputa, i ne zaboravite snimiti rezultirajući predložak.

Na primjer, možete pogledati snimku ekrana šablona koji sam dobio:

Sada, da biste koristili ovaj predložak za kreiranje pisma, potrebno je da odete u meni "Datoteka" (File) i izaberete komandu "Kreiraj" (Novo). Sa desne strane će se pojaviti okno sa zadacima u kojem trebate odabrati opciju "Uobičajeni predlošci" (Na mom računaru). Otvoriće se prozor sa svim dostupnim šablonima. Odaberite šablon koji ste kreirali i kliknite na "OK". Novi dokument zasnovan na vašem predlošku bit će učitan u Word. Dodajte svoje podatke u odgovarajuća polja i uživajte u automatizaciji.

Pozdrav, dragi prijatelji i čitaoci - sajt!

Danas ću vam pokazati kako da kreirate WordPress šablon od nule.

Da budem iskren, nisam mislio da ću ovo razumjeti, ali me je žeđ za znanjem nadvladala. Snažna želja da razumijem uređaj i implementiram gomilu ideja natjerala me da sjednem i popunim sve praznine u glavi.

Svaki dan postoje nove funkcije i načini za njihovu implementaciju u WordPress predloške. Naravno, fizički je nemoguće sve proučiti i sve pratiti, ali imajući predstavu o tome kako sve funkcionira bit će mnogo lakše snaći se u bilo kojoj temi.

Priprema za kreiranje šablona za WordPress.

Prije nego počnete kreirati predložak za WordPress, potrebno je da se povežete na aktivni server na Internetu ili na lokalni instaliran na vašem računalu pomoću .

Kako se ne biste mučili s prijenosom datoteka preko FTP-a, savjetujem vam da razvijete šablone na virtuelnoj mašini.

Sa stanovišta uređivanja i uređivanja koda, toplo preporučujem korištenje - Notepad ++. Zahvaljujući isticanju koda i jednostavnom interfejsu, ovaj program preferira najveći broj webmastera.

Idite na korijenski direktorij koji sadrži vaše WordPress instalacije, idite na wp-content => teme i tamo kreirajte mapu pod nazivom "Nova tema 3.0". Unutar ovog foldera postavite sljedeće fajlove (ekstenzije - PHP, CSS, PN G):

Korak-1 style.css

Datoteka će sadržavati sve elemente stila predloška za WordPress. Ovo je ono što ćemo prvo koristiti da deklariramo naziv predloška, ​​ime autora, vezu do stranice s opisom i brojem verzije:

Ove informacije su podložne promjenama u bilo kojem trenutku. Glavna stvar je da sve treba prokomentirati ().

Sada, u ovoj datoteci, moramo kreirati neke osnovne definicije stilova, koje će kasnije biti implementirane u nekim PHP datotekama teme WordPress:

Ovaj kod koristi body tag, samo da bi odredio (definirao) fontove koji se koriste na stranici i boju pozadine (sve se mijenja za svaki ukus). Zatim deklariramo atribute stila za vezu, kao i neka od zaglavlja koje ćemo koristiti u našoj temi.

#wrapper - bit će odgovoran za punu veličinu web stranice. Sa #header , očigledno, ovo je naslov, a #blog , ovo su najnoviji postovi na glavnoj stranici.

Ostatak stilova # podnožja i bočne trake bit će primijenjeni na njihova imena datoteka, što ćemo pogledati malo kasnije.

Korak-2 header.php.

Sada ćemo kreirati datoteku - , koja će sadržavati logo i uobičajenu navigaciju:

U stvari, nema smisla detaljno objašnjavati ovaj kod. Samo trebate zapamtiti da mora biti prisutan u , u svim WordPress temama. Ali ako ste zainteresovani, javiću vam.

Na samom početku deklariramo tip dokumenta i standardni kod koji će se koristiti za prikaz naziva stranice unesenog u WordPress admin postavkama. Zatim dolazi PHP kod koji vam omogućava da radite sa komentarima nalik stablu.

Korak 3 Dodavanje prilagođene navigacije.

Sada kada smo kodirali naše osnovne informacije, možemo dodati prilagođeni navigacijski meni. Ali prvo morate otvoriti datoteku functions.php i napisati posebnu funkciju:

Kao što vidite, komentirao sam dijelove koda. Prvi dio, add_action , koristi se za dodavanje podrške prilagođenom izborniku, a drugi dio registruje samo područje primarnog menija. Zatim prelazimo na samu implementaciju u WordPress predlošku.

Da biste kreirali meni, potrebno je da dodate red ispod prethodno napisanog koda u datoteci:

Hajde da to malo razložimo. Glavna funkcija koja se ovdje koristi je wp_nav_menu. Varijable sort_column, container_class i theme_location se koriste kao argumenti. Sort_column - garantuje redosled prikaza koji je postavljen u admin panelu. container_class - omogućava vam da odaberete svoj meni. Pa, theme_location jednostavno postavlja primarni meni na vrijednosti kojima manipuliramo u realnom vremenu.

Korak 4 Stil navigacije prema WordPress predlošku.

Zahvaljujući prethodnim koracima, naša WordPress tema sada ima prilagođenu navigaciju. Ali, uobičajeni meni izgleda jednostavno i nije privlačno. Da to popravimo, kreirat ćemo klasu za navigaciju u .

Kao što možete vidjeti u .nav, napravili smo osnovne izjave poput boje pozadine, širine navigacije, poravnanja i položaja elementa na monitoru. Zatim postavljamo redoslijed postavljanja glavnih elemenata i iskačućih prozora.

Poslednji korak je dodavanje stilova za veze iz padajućeg menija:

U .nav ul ul postavljamo poziciju na apsolutnu i pravimo prvi padajući link 100% tako da se pojavljuje ispod glavne. Također, promijenili smo pozadinu padajućeg prozora tako da se razlikuje od postojeće. Opštim vrijednostima dodat je atribut z-index:99999, što uzrokuje da se padajuće veze šire iznad drugih objekata.

Na ovome je završeno dodavanje stilova za prilagođeni meni WordPress šablona.

Korak-5 index.php.

Datoteka index.php će biti odgovorna za glavnu stranicu naše stranice. Sadržat će kod za omogućavanje zaglavlja, podnožja i bočne trake, o čemu ćemo kasnije govoriti. Također, uključit će funkciju uključivanja najnovijih postova na blogu i prikazivanja njihovih odgovarajućih sličica.

Sljedeće linije koda se koriste za prikaz svih informacija u , sidebar.php i footer.php gdje ih stavite u svoj WordPress šablon:

U principu, razumijevanje ovog koda nije tako teško. Nakon poziva , koristimo naš #blog , koji je izvorno kreiran u . Zatim dodajemo petlju za prikaz najnovijih postova na blogu i koda za naslov, u koji umotavamo

.

Ovdje postoji dio koda koji prikazuje sličice u objavama na glavnoj stranici bloga. Za sada je neaktivan, ali sljedeći korak je korištenje functions.php da bi funkcionirao.

U petom koraku dodali smo dio koda koji je odgovoran za prikaz sličica postova na glavnoj stranici bloga. Trenutno se ništa slično ne dešava jer je deaktiviran. Da biste ga aktivirali, potrebno je da otvorite datoteku functions.php i ispod prethodno instaliranog koda navigacijskog menija upišite sljedeće:

Nakon pažljivog pregleda koda, njegova svrha odmah postaje očigledna. Prvi red dodaje podršku za sličice vašoj WordPress temi, a drugi red navodi tačne dimenzije slike.

Korak-7 sidebar.php.

Mislim da ste pogodili da će datoteka sidebar.php prikazati sve informacije koje želimo da vidimo na bočnoj traci. Pošto smo ga već koristili u index.php, ostaje samo da kod postavimo u fajl i naša bočna traka će biti prikazana na glavnoj stranici sajta:

Da, to je sav kod koji treba dodati sidebar.php da bi bio funkcionalan. Sada ću objasniti njegovo značenje.

Sa div, zovemo stilove iz , a kod u nastavku nam daje mogućnost postavljanja widgeta iz WordPress administratora, u željenom nizu.

Ali, kao i mnoge funkcije, da bi to funkcionisalo, morate napisati sljedeći kod u datoteci functions.php:

Ovaj kod jednostavno govori WordPress-u da registruje bočnu traku koju smo deklarirali u sidebar.php. Kao opšti uvod, WordPress se lako može pokrenuti u jednoj temi sa više bočnih traka.

single.php je ono što će se koristiti za jednu stranicu posta. Kod ispod će biti vrlo sličan onom koji smo stavili u index.php. Jedina razlika je u tome što smo dodali predložak komentara sa div i kodom koji bi trebao uključivati ​​comments.php :

Izlaskom WordPress 3.0 programeri su odlučili da olakšaju život autorima tema i šablona za WordPress. Prešli su na jedinstveni standard za formulare za komentare.

Kôd ispod treba da se postavi u vaš comments.php fajl:

Ovo će dodati standardni obrazac za komentar vašim objavama.

U fajl page.php postavićemo kod koji će biti odgovoran za statične stranice našeg sajta. Biće skoro identičan onom postavljenom u single.php. Jedina promjena je uklanjanje predloška komentara i dodavanje koda koji prikazuje stranice umjesto postova. Sve ostalo će biti isto:

Datoteka category.php se koristi za prikaz postova iz određene kategorije ili arhive kojima čitalac pristupa. Ovdje će najveći dio koda biti sličan page.php i single.php koje smo kodirali iznad, osim dijela na samom početku:

Isječak koda ispod je jedina stvar koju smo dodali nakon glavne petlje:

Ovdje koristimo gomilu if/elseif naredbi u PHP-u koji pokazuju šta gledate na blogu. Na primjer, ako pogledamo kategoriju pod nazivom - "", onda će ona biti prikazana u h2 arhivi iz kategorije: "" ispred svih unosa, raščlanjujući ih po datumu ili autoru.

Korak 12. Prilagodite pozadinu stranice.

Pojavom WordPress-a 3.0, kreirana je funkcija koja vam omogućava da promijenite pozadinu stranice s admin panela, koristeći sliku ili uobičajenu boju. Da biste to uradili, u datoteku functions.php potrebno je da umetnete sledeći kod:

Dakle, prilagođene pozadine su uključene. Kao bonus, dodaćemo kod ispod koji čini dostupnim arhive, komentare i linkove za označavanje sa RSS feed-a:

Da bismo završili kreiranje WordPress šablona, ​​dodaćemo deo koda u footer.php koristeći #footer koji je deklarisan u . Naše podnožje će sadržavati samo osnovne informacije o autorskim pravima, kao i RSS feed vijesti i komentara:

Na tome je izrada najjednostavnijeg šablona (teme) za WordPress završena.

Da biste provjerili njegovu učinkovitost, možete preuzeti arhivu s kreiranom temom i aktivirati je na svom resursu:

Jeste li uspjeli kreirati svoj prvi WordPress šablon?

Prijatelji, dok pišem novi post, možete pročitati sljedeće:

To je sve za danas.

Svi kojima se svidio članak mogu se pretplatiti na ažuriranja bloga kako bi primali obavještenja o novom materijalu u svoju e-poštu.

Do novih članaka...

S poštovanjem, Denis Chernikov!

Zanimljivo na temu:

Molim vas učinite dobro djelo, recite prijateljima o blogu:

96 komentara Šta ti misliš?

Hvala puno na članku! Vrlo korisne informacije za mlade dizajnere izgleda! Pročitao sam članak o reperu... =)

Denis Černikov je odgovorio:
3. novembar 2012. u 14:38

Molim te Alexander! Puhao je tri dana, htela sam da svi sve razumeju! Nadam se da sam uspeo! Reper vlada!

Alexander Krasilny je odgovorio:
3. novembar 2012. u 15:13

Da, primijetio sam da članak nije mali i da ima puno malih nijansi. Ako se oni ne uzmu u obzir, onda će sve krenuti naopako! Moj prijatelj se bavi čisto rasporedom, sjedi u kancelariji i plata je pristojna, u području od 4000-5000 UAH. Međutim, on je samouk! Tako da imam želju, ali nema dovoljno vremena... = (

Arhiva se nije mogla instalirati. PCLZIP_ERR_BAD_FORMAT (-10) : Nije moguće pronaći potpis End of Central Dir Record

Evo šta je napisano nakon što sam htio testirati ovu temu. Šta je ovde?

Uz poštovanje i zahvalnost, Eugene!

Hvala na korisnom članku. Za mene je bolje da gotovu temu preradite za sebe.

Denis, šablon je ispao malo uzak, glavno podnožje ima dosta upitnika umjesto natpisa, a uređivanje posta se također prikazuje samo sa upitnicima. Da li tako treba da bude? a ipak nije u gornjem meniju glavne stranice i nezgodno je ući u admin panel, samo preko redakcije članka. Ali u principu, veoma dobro i razumljivo, hvala.

Julia je odgovorila:
4. novembar 2012. u 06:47

Ne znam šta nije u redu sa šablonom, ali postavljena pozadina se ne vidi na blogu.

I još nešto. Snimci ekrana ne prikazuju sav kod.

Ali u svakom slučaju, hvala na članku! Dobro si urađeno! Sretno u budućnosti!

S poštovanjem, Eugene!

Hvala na informacijama. svakako ću probati.

Denise, uklonio sam svoju staru temu, i instalirao neku složenu i novu. Mnogi fajlovi koje opisujete nedostaju, kao što su single.php, page.php i category.php. Stoga je teško odlučiti kako postupiti u takvoj situaciji. Ali evo slika sa minijaturama koje su me zainteresovale. Kada sam na glavnoj stranici, slike se ne vide. Ali ako unesete razmak u pretragu i započnete pretragu, odmah se pojavljuju sve sličice. Šta mislite šta bi mogao biti razlog?

Zdravo Denis! Pa ovo je već akrobatika! Napravite vlastite WordPress teme i nemojte samo preuzimati šablon! Ali nema vremena da sami isprobate takvu temu. Ima još dosta toga da implementirate ono što vam je zanimljivo u dizajnu stranice (strelica prema gore, preklopni kut, itd.).

Denis, i tema je korisna, a oci se boje...

Prilikom označavanja...

Slučajno sam naišao, ali mi je tako drago! Hvala vam puno na informacijama.

Članak je vrlo relevantan, bar za mene. I sam sam se nedavno pitao kako da kreiram sopstvenu WordPress temu (template) i pronašao sam upravo takav program - Artisteer. Istina, ovaj program je plaćen, ALI, nije za Rusa ako razumijete na šta mislim.

Denis, jesi li probao promijeniti boju bočnih traka? ili kako to uraditi detaljnije, u css-u

Hvala puno na članku. Tražio sam prave informacije za prilagođavanje WP šablona. U većini slučajeva samo općenite fraze i bez specifičnosti, ali kod vas je to druga stvar!

Denise, na nekim mjestima ti se kod pokvari zbog veličine slike... A sreća je bila tako blizu!

Odlično! Hvala puno! Pa sam mislio da sam nešto propustio.

Denise, zdravo!

Hvala vam puno na lekciji. Uspio sam implementirati vlastiti dizajn) Ali iz nekog razloga je došlo do problema s umetanjem fotografija u postove - iz nekog razloga, premotavanje teksta oko fotografija ne funkcionira. Da li piše negde u šablonu? Ja nikako ne razumijem u čemu je problem... ranije nije bilo takvih problema.

Hvala unaprijed!

Denis Černikov je odgovorio:
19. marta 2013. u 15:45

Zdravo Ljudmila!

Napisao sam odličan post specijalno za ovo. Pokazuje vam kako da umotate slike i video zapise u postove. Pregledajte pretragu ili pogledajte listu članaka.

Ljudmila je odgovorila:
19. marta 2013. u 15:57

Ok hvala!

Sa stanovišta uređivanja i uređivanja koda, toplo preporučujem korištenje - Notepad ++.

Koristim Sublime Text 2 - nešto između NotePad++-a i ozloglašenog TextMate-a (Mac OS). Povučem projekat u prozor i on se pojavi u obliku stabla. Veoma udobno! Plus gomila drugih funkcija koje čine život lakšim od NotePada++! Topla preporuka))

Denise, ništa nisam razumio u prvoj fazi. Gdje mogu dobiti sve ove kodove? prepisati sa svojih print-screenova? Da li je moguće negdje nabaviti šablon i urediti ga?

Puno hvala! Pokušaću da uradim sve kako je napisano! Individualni izgled je mnogo bolji))

Dobro veče. Ja sam početnik, i nije mi sasvim jasno kako u ""Kreiranje potrebnih fascikli i fajlova"""" "Smestim sledeće fajlove u ovaj folder (ekstenzije - PHP, CSS, PNG) "" I štampao ih preko Notepad ++ i kako prenijeti ???

Pozdrav još jednom...kako da ovo uradim????:

Unutar ovog foldera postavite sljedeće fajlove (ekstenzije - PHP, CSS, PNG):

Željene datoteke se kreiraju na radnoj površini računara pomoću obične notepad-a, dodjeljujući željenu ekstenziju.

Ne mogu da shvatim kako da postavim fajlove U FOLDER. kako prenijeti datoteke iz Notepade++ u folder.

Zašto imam zao avatar?Uglavnom sam ljubazan.Kako da ga promijenim???

Zdravo Denis! Ja sam početnik, recite mi kako da unesem temu u Word press, u Izgled / Teme moja tema se ne prikazuje... ((((

Hvala, članak je puno pomogao!

samo ga dodajte u footer.php, inače admin panel nije vidljiv bez njega.

Denis, dobar dan!

Iskreno, nisam nista razumeo od napisanog... Zasluga ovoga nije tvoja - nemam apsolutno nikakvo znanje iz ove oblasti i za mene su tvoje beleske ispale kao kineska diploma... pitam ili za neko pojašnjenje (ako dozvoljavate), ili jednostavno za brisanje vašeg komentara :)

Kako promijeniti naziv šablona koji se za neke teme prikazuje u lijevom bočnom meniju admin panela?

Probao sam da preuzmem tvoj predložak - tu se ne menja ni pozadina ni zaglavlje - podaci se unose, boja se bira - samo nema promena na sajtu :))))))

Zdravo! I mogu li da zavrtim temu za umjerenu naknadu? Imam ideju kako želim da vidim Vašu stranicu, postoji fotografija za temu, ali nema vještine rada sa Photoshopom i HTML-om

Sergej je odgovorio:
23. marta 2014. u 01:50

Denise, džabe se izvinjavam, od layouta se ne živi, ​​takvo remek-delo si uspeo da nacrtaš za samo 3 večeri, pre oko 2 godine sam skupljao takve podatke malo po malo, a evo takvog blaga, link tebi u kontakt i duboki ti se hval na obavljenom poslu, stvarno ima nekih nedostataka. Ali sve je glatko, čak i ako sve sitnice, ovaj članak bi mi bio star 2 godine, o kako bi mi pomogao u mom prvom projektu. I ima nešto u Javascriptu u vašem arsenalu, samo je ljudima vašeg nivoa obrazovanja uvijek zanimljivije čitati informacije.

Denis Černikov je odgovorio:
23. marta 2014. u 12:12 sati

Sergej, ponekad radim sa rasporedom, ali ne volim da kopam po već sranjem kodu pokušavajući da pronađem nit koja je ubila celu stranicu! Lakše mi je da radim od nule nego da tražim greške na stranicama klijenata. A prema scenarijima, imam odličnog majstora koji sve radi kompetentno i lijepo!

Sergej je odgovorio:
23. marta 2014. u 23:59

Ne, ne treba mi programer, ali zaista sam već vidio cijeli odjeljak o Javascriptu na vašoj stranici, ali općenito, hvala na vašem resursu, vrlo informativan.

Pomozite, ne mogu uređivati ​​styles.css sa admin panela. Idem na "izgled - editor", biram stilski fajl, ali se otvara prazan. Sve se uređuje preko FTP-a, ali meni nije zgodno.

pomozite u postavljanju web-lokacije koja je sama napisala na WP (ja ću platiti)

Denis, hvala ti puno na članku! Veoma vrijedne i korisne informacije. Definitivno ću ga koristiti kada kreiram svoj šablon od nule.

Ali za sada je odabrana gotova tema za sajt, a ja sam potpuno "čajnik"... Bio bih vam jako zahvalan na pomoći! Dakle, trebalo je da prikažem vesti samo iz kategorije "A" na “A” stranici. Kopirao sam stranicu index.php, dodao joj red koda i odabrao "A" stranicu kao šablon. Sada su na njemu prikazani samo potrebni unosi, ali je sav dizajn otpao ...) tako da se dizajn ove stranice ne razlikuje od dizajna web-mjesta, trebate li nešto dodati u stilski list? Ili sam to pogrešio? hvala)

Denis Černikov je odgovorio:
30. marta 2014. u 21:35

Elena, ja ne dajem takve savjete! Nemam pojma šta radiš tamo, ali opis nije uvijek jasan!

Elena je odgovorila:
1. april 2014. u 16:51

Denise, promijenit ću pitanje: da li je moguće prikazati članke samo iz naslova “A” na stranici pod nazivom “A”, a samo članke iz naslova “B” na stranici sa nazivom “B” ? Hvala.

Sergej je odgovorio:
30. marta 2014. u 22:37

Elena Nisam siguran da li će vam ovo odgovarati, ali riješio bih vaš problem uz pomoć 2 dodatka Display Widgets je dodatak koji određuje prikaz widgeta na bilo kojoj stranici koja vam je potrebna, a ovaj Recent Posts Widget Extended čini prekrasan vijesti, ali ponavljam da bih to uradio

Sergej je odgovorio:
30. marta 2014. u 22:41

Ipak, nakon ponovnog čitanja i ponovnog razmišljanja, shvatio sam da ova opcija nije baš dobra za vaše pitanje Elena.

Elena je odgovorila:
1. aprila 2014. u 17:16

Sergej, hvala na odgovoru! Isprobao sam prošireni dodatak za Nedavne postove Widget Extended. Korisna stvar) Volio bih potpuno isti izlaz članaka, ali ne u widgetima, već na glavnoj stranici) Hvala!!

Denise, pomozi mi sa ovim problemom.

Na osnovu vaše teme iz posta. Sve sam preradio za sebe, sve odgovara, ali nema komentara. Postoji forma komentara, prolaze za moderaciju, ali nakon odobrenja prikazuje samo broj komentara na objavu i samu formu, ali komentari se ne vide.

Mislio sam da sam nešto izgubio dok sam radio sa fajlovima, ali ne...

Instalirao sam tvoj original, isti problem, reci mi šta bi moglo biti u pitanju, bio bih jako zahvalan.

PS. Mislim da je možda činjenica da je motor ažuriran i nakon ažuriranja nešto nije u redu. Postoji još jedna opcija da pokušate promijeniti php verziju hosta.

Denis, hvala ti puno na informacijama koje su lako razumljive. Dugo sam tražio stranicu sa standardnim prazninama koje bi mogle poslužiti kao izvorni kodovi za bilo koju temu. Svugdje je to opisano na sljedeći način: kreira se index.html datoteka, koja se zatim usitnjava i distribuira u dijelove preko .php foldera. U ovom slučaju, normalni i isprekidani tekst se stavljaju u index.html za uzorak. Ali na kraju krajeva, u početku nema teksta ni u jednoj temi (korisnik ga već piše nakon kreiranja stranice ili objave). Nakon tvog članka sve je sjelo na svoje mjesto. Odvojeni fragmenti mozaika u mojoj glavi formirali su se u jednu sliku. Hvala još jednom!

Dobar dan Denis, procitao sam clanak i uradio sve kako si napisao, ALI koristeci tvoje note i boje, SVE JE UPALO. Dobro je))

PITANJE: Kako premjestiti bočnu traku tako da bude lijevo, i drugo pitanje: imate li članak o tome kako staviti svoje slike u svoj šablon (tj. dizajn u PSD-u je već izrezan, želim spojite ga sa šablonom).

Hvala unaprijed na odgovoru.

Pozdrav. Ovaj članak će odgovoriti na pitanje kako napraviti jedinstveni predložak za wordpress, lijep i drugačiji. Bit će potrebno pokušati malo napregnuti mozak.

Kako napraviti jedinstveni wordpress predložak - početak

Ispod je popis koraka kako vlastitim rukama i besplatno kreirati jedinstveni predložak za WordPress.

1. Promijenite slike.
2. Promijenite naziv šablona.
3. Napravite manje promjene u stilovima.

Počnimo sa svakom stavkom po redu.

Promijenite slike

Najjednostavniji trenutak, analizirat ću ga koristeći šablon dvadeset jedanaest kao primjer. Stock slike zamjenjujemo našim redizajniranim. Potrebno je promijeniti zaglavlje, podnožje, pozadinu i druge male.

Ali ne mogu zaključiti posebno rješenje, u mom predlošku ima minimum slika (i to onih koje su ogromne). Općenito, većinu slika trebate zamijeniti svojim. Razdvojimo dva elementa koji se zamjenjuju:

• Prvi je preko samog admin panela.
• Drugi je putem koda.

Ako razumete princip, onda imate veliko poštovanje.

Preko admin panela

U modernim temama postoji dobra funkcija podešavanja kroz sam WordPress, zašto ih ne koristiti? Idemo na administrativni panel bloga, izgled i prilagođavanje.

Ako je tema napravljena za ljude, onda će globalne postavke dizajna biti ovdje, a mi ćemo se pozabaviti malim stvarima u nastavku. U emisiji na primjeru Dvadeset jedanaest.

1. Boje opće teme. Postavke za glavne elemente (naslovi, natpisi, itd.).
2. Slika zaglavlja, odnosno u zaglavlju.
3. pozadinska slika. Nije prisutan na svim temama, možete ga prilagoditi i slikom i samo bojom.

U ovom trenutku, evo šta sam dobio. Idemo dalje.

Ručno mijenjanje slika

Pretpostavimo da vam slika nekog elementa u predlošku ne odgovara, a želite je promijeniti. šta da radim? Shvatit ćemo. Na primjer, uzeću prikaz slike broja komentatora.

Sistem važi za sve teme.

Desnom tipkom miša kliknemo na element i tražimo njegov izlaz u kodu, koristeći alat za prikaz koda.

1. Sam element, kliknite desnim tasterom miša na njega.
2. Odaberite "pogledaj kod".
3. Ovo je sam HTML izlazni kod, na njega ne obraćamo pažnju.
4. Evo drage adrese na koju trebate ići sa zamjenom. Željena datoteka bubble.png koja se nalazi u folderu slika u samoj temi.

Odnosno, potrebno je da kreirate isti fajl sa istim imenom i da ga zamenite. Nadam se da znate kako koristiti upravitelje datoteka kao što je FileZilla. Hteo sam da napravim sliku koja prikazuje broj komentara kao zvezdicu sa potezom. Napravio sam je u Photoshopu i sačuvao kao sliku sa mjehurićem imena i ekstenzijom png.

Gotovo, otvorio sam filezilla i otišao na dvadeset i jedanaest aktivnih tema u folderu slika (što smo naučili iznad). i jednostavnim prevlačenjem i ispuštanjem nove slike ubacujemo je u fasciklu, sa zamenom. Svi detalji na snimku ekrana.

Ako je sve urađeno dobro, onda će se nova slika prikazati na stranici, evo snimka.

Kao što razumijete, ovom metodom možete promijeniti bilo koju sliku ako nema postavki na administrativnom panelu.

Promijenite naziv šablona

Možete mijenjati samo besplatne teme, ovo je važno.

Postoje dvije stvari koje treba uraditi:

• Promjena naslova u datoteci style.css
• Promijenite naziv foldera teme.

Prepisivanje naslova u style.css

Da biste to učinili, idite na urednik ( podsjetiti izgled-urednika) i pronađite style.css.

Na ekranu vidimo natpis, ovdje sve treba promijeniti. Na početku bilo koje datoteke style.css, na samom početku, nalaze se informacije o predlošku. Treba ga promijeniti barem u ove redove.

Naziv teme: moi-shablon Opis: Standardna verzija 1.. Licenca: GPL

Ovako bi trebao izgledati nakon zamjene.

Vi zapisujete svoje podatke, nemojte uzimati moje, jer mi činimo šablon jedinstvenim. Promijenite barem ime, autora i stranicu.

U redu, idemo na sljedeću tačku.

Promijenite naziv foldera teme

Radimo to preko fajl menadžera, ja imam Filezilla. U prethodnom pasusu je promijenjen naziv teme u redu:

Naziv teme: moi template

Treba originalno ime dvadeset jedanaest promijeniti u novi, u mom slučaju, moj šablon. Idite u fasciklu FileZilla teme, i pronađite originalno ime dvadeset jedanaest.

I mijenjamo ga u novi.

Ako je sve urađeno kako treba, radit će. Tema za pretraživače više neće biti standardna, već jedinstvena.

Manja podešavanja stila

Ne mogu smisliti jedno rješenje kako napraviti jedinstveni predložak za wordpress, samo trebate pogledati predložak čisto vizualno i vidjeti šta vam se ne sviđa. Pogledam u bočnu traku.

Stvarno, ne baš? Želim da povećam font naslova jer su mali i stapaju se u pozadinu. Svi koraci su prikazani na slici ispod.

1. Odaberite element koji želite urediti. Pritisnemo desnu tipku miša.
2. Kliknite na "pogledaj kod".
3. Cijeli stil ovog zaglavlja.
4. Željeni naziv stila.

Otvorite datoteku style.css. Tražimo naziv stila koristeći kombinaciju tipki CNTRL + F.

Želim povećati font, napraviti punu liniju ispod njega, promijeniti boju i debljinu teksta. Da bih to učinio, mijenjam ili dodajem ove parametre.

Boja: #1a1a1a; veličina fonta: 15px; težina fonta: 600 border-bottom: 2px solid #271eb1;

Hajde da pogledamo linije koda.

1. Promjena boje.
2. Promjena veličine.
3. Promjena širine teksta.
4. Dodavanje podvlačenja.

U skladu s tim mijenjamo ili dodajemo parametre stilu. Trebalo bi da ispadne ovako.

Sve promjene će se odmah pojaviti na stranici.

Moj zadatak sada nije da podučavam kucanje, to će oduzeti mnogo vremena i članaka, već da pokažem sam princip kako napraviti šablon jedinstvenim.

Dakle, sa svim ostalim elementima dovedite do ideala. U ovom članku pokazujem šta se dogodilo.

Ovaj članak je odgovorio na pitanje kako napraviti jedinstveni predložak za wordpress. A standardna tema se može nazvati temom vašeg autora.

Ako imate pitanja, pitajte u komentarima. Sretno.

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 jednostavno želite razumjeti kako se teme ovog CMS-a su raspoređeni iznutra.

Pa počnimo.

Distribuirajte kod po fajlovima

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

2. Preimenujte datoteku styles.css in 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: MyTheme URI teme: http://test1.ru Autor: NoName Autor URI: 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 možete pretpostaviti, ovo su servisne informacije o temi: naslov, autor, opis, licenca, verzija, itd. Možete zamijeniti prave dijelove redova svojima, odnosno postaviti svoje autorstvo, verziju, opis i drugi podaci.

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

4.1. IN header.php kopirajte kod red po red , budući da je ovaj fajl odgovoran za vrh stranice. styles.css zamijeniti u kodu sa style.css- novo važeće ime datoteke.

4.2. IN index.php zalijepite glavni kod bloka (iz reda red po red ).

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

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

5. Uklonite index.html.

6. Idite na admin panel i uvjerite se da se predložak MyTheme pojavio 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.

Prilagodite zaglavlje

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

Šablon će sadržavati PHP umetke. 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 do bloka

do sljedećeg:

> "> "> "type="text/css" media="screen" />

Blok smo učinili dinamičnim

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

">

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

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

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

,

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

Sada možete pogledati ili čak aktivirati MyTheme. Kao rezultat, pretraživač će prikazati poznati šablon sa statičnim menijem i jednom stranicom. Da bi jelovnik postao dinamičan i prilagodljiv, te umjesto jedne stranice na kojoj se prikazuju svi materijali postavljeni na sajtu, potrebno je dodatno konvertirati predložak.

Učiniti gornji meni dinamičkim

Do sada imamo potpuno statičnu temu, uključujući i onu sa istim horizontalnim gornjim menijem. Iako se ne može konfigurirati s admin panela, i ako ostavite kod u njegovom trenutnom obliku, tada ćete morati uređivati ​​datoteku svaki put da biste umetnuli / izbrisali / premjestili stavke header.phpšto je izuzetno nezgodno.

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

tako da to izgleda ovako: