Salutări, prieteni.

Astăzi vom atinge un subiect foarte interesant pentru mulți. Poate ați observat că am actualizat recent designul blogului meu, nu știu despre voi, dar îmi place foarte mult. Am creat acest șablon literalmente în câteva zeci de minute și nu am avut nevoie de cunoștințe de HTML, CSS și PHP sau de informații despre crearea șabloanelor.

Deci, cum să faci singur un șablon WordPress, fără nicio cunoștință?

Înainte de a începe, nu pot să nu menționez diferite căi creând șabloane astfel încât imaginea să fie cât mai completă.

Metoda nr. 1– studiezi HTML, studiezi structura șabloanelor. Desigur, această abordare are avantajele ei, dacă ai timp și dorință, începe cu ea. Cunoașterea HTML nu a rănit niciodată nimănui.

Metoda nr. 2– comandați un șablon de la un freelancer. Dacă aveți bani gratuiti, atunci asigurați-vă că alegeți această metodă. Costul creării unui șablon de înaltă calitate este de la 15.000 la 70.000 de ruble.

Metoda nr. 3- folosiți un special software pentru a crea șabloane. Permiteți-mi să clarific imediat că aceasta nu este crearea de șabloane de același tip; în program este destul de posibil să creați unul unic, frumos șablon. Un exemplu este acest blog. Totul depinde de imaginația ta.

După cum probabil ați înțeles deja, în acest articol vom vorbi despre metoda nr. 3.

Ne întâlnim, un program pentru crearea de șabloane - (versiunea nu contează, îl folosesc pe al doilea, după părerea mea, al patrulea a fost deja lansat). Programul este plătit, dar noi suntem ruși (înțelegeți ce vreau să spun). Știu că există o mulțime de lecții despre acest program pe internet, dar deja m-am săturat să răspund la aceeași întrebare de la abonații mei.

Descărcați programul și rulați-l.

1. În fereastra principală a programului, selectați „WordPress”.

2. În fereastra de previzualizare apare un șablon de șablon, desigur, întreaga curbă, dar în timpul lucrului nu va fi nicio urmă a acestuia.

3. Accesați fila „Culori și fonturi”, selectați schema de culori(mai târziu o vom ajusta puțin), îmi place schema de culori gri deschis. Faceți clic pe butonul „Seturi de fonturi”, selectați fonturi (folosesc Verdana peste tot).

4. Accesați fila „Layout”, aici ni se cere să selectăm numărul și locația coloanelor, precum și locația antetului (un antet simplu). Aleg întotdeauna „Două coloane->Partea din mijloc dreapta”.

5. În fila următoare ni se cere să selectăm fundalul viitorului șablon. Folosind această filă, vă puteți crea propriul fundal sau puteți selecta un fundal existent.

6. Următoarea filă ne oferă să personalizăm foaia șablon.

Setați lățimea foii (de preferință cel puțin 1000 px), umbra și chenarul acesteia.

7. În fila următoare ni se cere să configuram antetul paginii(antet sau capac). Personalizați antetul și subsolul folosind Setări.

1. Setarea lățimii și înălțimii antetului.

2. Folosind acest meniu, puteți încărca un antet pregătit anterior în program, precum și să adăugați efecte la acesta.

3. Folosind acest meniu puteți adăuga o imagine terță parte la antet.

4. Numele site-ului dvs. și sloganul acestuia.

5. Poziția numelui și a sloganului.

8. În fila următoare ni se cere să configuram meniul (de obicei se află sub antet). Selectați stilul meniului și completați.

9. În fila următoare - „Articole”, ni se cere să personalizăm aspectul zonei de conținut (text, video, imagini, tabele). Configurați-l folosind setările furnizate.

1. Imagine a articolului (acest parametru nu afectează nimic, îl puteți lăsa așa cum este).

2. Folosind acest meniu puteți seta stilul zonei de conținut (cu sau fără contur).

3. Configurarea afișării textului în interiorul articolului.

4. Editare diverși parametri domenii de conținut.

5. Personalizare antet.

6. Personalizare subsol.

10. Folosind următoarea filă - „Blocuri”, puteți personaliza aspectul blocurilor laterale (bara laterală).

SETĂRI ȘI EXPORTAREA UN ȘABLON

1. Faceți clic pe butonul „Fișier” (situat în stânga colțul de sus fereastra programului).

2. Selectați „Export->Export Settings”. Accesați fila „Proprietăți” și furnizați informațiile necesare. Accesați fila „Notă de subsol” și debifați toate casetele.

3. Repetați pasul numărul unu. Selectați „Export->Temă WordPress”.

4. Exportați șablonul ca folder ZIP.

Toate. Acum știi cum să faci un șablon WordPress cu propriile mâini. Mult succes cu creatia ta.

Nu uitați să comentați articolul. Autorul celui mai bun comentariu, în opinia mea (pe baza rezultatelor săptămânii), va primi cartea mea plătită „Cum să vând produse afiliate pe Internet și să primești 200% profit” complet gratuit.

LECȚIA VIDEO „Cum să faci un șablon pentru WordPress fără cunoștințe de HTML?

Lucrările de rutină cu documente de același tip pot fi reduse la minimum dacă acestea sunt formate pe bază Șabloane de cuvinte. Materialul nostru de astăzi este despre ce sunt acestea și cum să le creăm.

Destul de des în cursul activităților noastre creăm documente de același tip: acte, ordine, scrisori, contracte, lucrări de termenși așa mai departe. Toate aceste documente, de regulă, conțin ceva text sau elemente grafice- titluri, detalii, sigle, blocuri de text, repetat de la document la document.

Utilizator de text obișnuit Editor de cuvinte, când creez un alt document, sunt obligat să folosesc și să editez un document deja creat de cineva și care conține toate aceste elemente, sau pur și simplu să îl copiez într-un document nou elementele necesare, din nou, dintr-un fișier vechi, în timp ce realizăm că în acest caz editarea este inevitabilă.

Un șablon definește structura de bază a unui document și conține setări ale documentului, cum ar fi elementele AutoText, fonturile, comenzile rapide de la tastatură alocate, macrocomenzi, meniuri, configurarea paginii, formatare și stiluri. (Din Word Help)

Această rutină poate fi minimizată dacă creați un document pe baza unui șablon. Uneori, modelele sunt numite și „pește”. Cu toate acestea, indiferent cum îl numiți, șabloanele vă permit cu adevărat să vă creșteți semnificativ eficiența muncii.

Un șablon poate fi creat în două moduri, luând ca bază un document cu toate elementele prezente, sau începând cu tabula rasa, incluzând în mod independent elementele necesare în el.

Vă voi arăta cum să creați un șablon de la zero, facilitând înțelegerea întregului proces, mai degrabă decât modificarea unui fișier existent. De exemplu, vom crea un șablon de scrisoare formală simplu. Nu este nimic complicat în acest sens dacă urmați instrucțiunile mele pas cu pas.

Asadar, haideti sa începem.

1. Să creăm un document gol.

2. Să-l salvăm imediat. Să mergem la meniul „Fișier” și să selectăm comanda „Salvare ca...”. Se va deschide caseta de dialog „Salvare document”, în care trebuie să selectăm tipul „Șablon de document (*.dot)” în câmpul „Salvare ca tip”.

Se va deschide folderul Șabloane, unde toate șabloanele sunt salvate implicit. Dați un nume fișierului și faceți clic pe butonul „Salvare”.

3. Determinăm ce elemente (text și grafică) și unde exact vor fi amplasate în document.

De regulă, toate scrisorile oficiale conțin elemente precum numele organizației, logo-ul și detalii. Textul scrisorii în sine poate conține o adresă politicoasă către destinatarul scrisorii și, de fapt, textul scrisorii în sine. La sfârșitul scrisorii se află numele funcției de șef al organizației cu semnătura acestuia. Vom lua ca bază o structură similară a scrisorii.

4. Vom plasa numele organizației în partea de sus a documentului în centru. Pentru a face acest lucru, vom tipări numele organizației noastre cu litere mari, de exemplu, SRL „NOPȚI ALBE”. Clic Introduce cheiași mergi la o linie nouă.

5. Putem introduce mai jos linie de separare. Pentru a face acest lucru, faceți clic pe butonul „Desen”. Un panou de desen cu butoane de control va apărea în partea de jos a ecranului. Suntem interesați de linii, așa că selectăm butonul „Linie” corespunzător. Cursorul mouse-ului se transformă într-o cruce.

Vă rugăm să rețineți: este posibil să aveți o așa-numită pânză inserată - o zonă punctată pentru inserarea de forme/desene. Pentru a scăpa cu prudență de inserarea pânzei, accesați meniul „Instrumente” și selectați comanda „Opțiuni”. Faceți clic pe fila General și debifați opțiunea crearea automată Creați automat o pânză de desen când inserați forme automate. Faceți clic pe „OK” și închideți fereastra „Opțiuni”.

6. Mutați cursorul în formă de cruce la numele organizației și chiar dedesubt trageți o linie de la cursorul care clipește până la marginea dreaptă a câmpului, apăsând și apăsat butonul din stanga soareci. Linia este trasă.

7. Puteți lăsa linia așa cum este, sau îi puteți da un aspect mai elegant. Pentru a face acest lucru, există un buton de stil de linie corespunzător pe panoul de desen. Faceți clic pe el și selectați orice tip.

8. După ce v-ați stabilit pe orice tip de linie, faceți dublu clic sub acea linie - adresa și detaliile organizației vor fi tipărite în acest loc. Introduceți datele pe care le considerați necesare: adresa legală și reală, telefon, fax, URL a site-ului web, e-mail, detalii bancare.

9. Acum formatează textul tastat conform ideilor tale. De exemplu, am selectat numele organizației și i-am atribuit stilul „Titlu 1”. De asemenea, am centrat titlul și am creat o spațiere rară de cinci puncte între litere.

Am redus dimensiunea fontului textului de sub linie la nouă puncte și l-am aliniat la centru. Puteți vedea un eșantion mai jos în captură de ecran.

Astfel, am creat o parte permanentă (neschimbabilă) a șablonului nostru, așa-numitul „antet”. Acum să trecem mai departe și să creăm câmpurile în care ulterior vei introduce datele.

În partea stângă a șablonului, sub „antet”, faceți dublu clic și introduceți numele orașului, de exemplu, Moscova. Apoi, în partea opusă (dreapta) a șablonului, faceți dublu clic din nou pe mouse și introduceți data în care cursorul clipește. Pentru aceasta:

1. În meniul „Inserare”, selectați comanda „Dată și oră”. Se va deschide o fereastră în care selectați formatul necesar afișați o dată, de exemplu 18 iulie 2006

2. Bifați caseta „Actualizare automată”. Acum, atunci când creați un document nou bazat pe acest șablon, data va fi deja introdusă în conformitate cu ora curentă pe calculatorul tau.

3. În partea dreaptă a șablonului, sub dată - indentat de la marginea din stânga cu aproximativ 10 cm riglă orizontală- faceți dublu clic pe mouse. Cursorul va clipi, iar în acest loc vom introduce un câmp pentru a înlocui datele destinatarului scrisorii.

4. În meniul „Insert”, selectați comanda „Field”. Se va deschide o fereastră ca în captura de ecran de mai jos:

5. În zona Categorii, selectați Document Automation. În zona Nume câmpuri, selectați comanda MacroButton. În zona „Mesaj” (Afișare text), tastați textul „Inserați numele complet al destinatarului” și faceți clic pe OK.

Strict vorbind, în zona „Nume macrocomandă” ar fi trebuit să specificați NoMacro (adică o comandă fără macro), dar nu era în listă. Prin urmare, îl lăsăm așa cum este, conform macar, nu am întâlnit niciodată erori.

6. Primim un câmp cu textul nostru.

Dacă aveți acest câmp afișat ca text simplu fara umbrire, atunci recomand sa faci o astfel de umbrire. Acest lucru vă va permite să definiți cu ușurință ulterior în document câmpuri obligatorii pentru introducerea datelor. Pentru a face acest lucru, accesați meniul „Instrumente” și selectați comanda „Opțiuni”, iar în fila „Vizualizare”, în grupul „Afișare”, selectați opțiunea „Întotdeauna” din lista de umbrire a câmpului ).

Mai jos puteți introduce un câmp similar pentru adresa și poziția destinatarului.

Tot ce trebuie să facem este să introducem un mesaj de bun venit destinatarului a acestei scrisori, mai jos textul contestației și semnătura expeditorului. Încercați să introduceți singur aceste câmpuri în șablon, pe baza instrucțiunilor date mai sus și nu uitați să salvați șablonul rezultat.

De exemplu, puteți arunca o privire la captura de ecran a șablonului creat de mine:

Acum, pentru a utiliza acest șablon pentru a crea o scrisoare, trebuie să mergeți la meniul „Fișier” și să selectați comanda „Nou”. În partea dreaptă va apărea un panou de activități, în care trebuie să selectați opțiunea „Șabloane generale” (Pe computerul meu). Se va deschide o fereastră cu toate șabloanele disponibile. Selectați șablonul pe care l-ați creat și faceți clic pe „OK”. document nou pe baza șablonului dvs. va fi încărcat în Word. Adăugați datele dvs. în câmpurile corespunzătoare și bucurați-vă de automatizare.

Bună ziua, dragi prieteni și cititori - site!

Astăzi vă voi arăta cum să creați un șablon WordPress de la zero.

Sincer să fiu, nu m-am gândit niciodată că voi înțelege asta, dar setea de cunoaștere m-a învins. Dorința puternică de a înțelege dispozitivul și de a pune în aplicare o grămadă de idei m-a forțat să mă așez și să umplu toate golurile din capul meu.

În fiecare zi apar noi funcții și modalități de implementare a acestora în șabloanele WordPress. Desigur, este imposibil din punct de vedere fizic să studiezi totul și să ții evidența tuturor, dar a avea o idee despre cum funcționează totul va face mult mai ușor să navighezi pe orice subiect.

Pregătirea pentru crearea unui șablon pentru WordPress.

Înainte de a începe să creați un șablon pentru WordPress folosind , trebuie să vă conectați la un server activ de pe Internet sau local instalat pe computer.

Pentru a nu trebui să vă faceți griji cu privire la transferul fișierelor prin FTP, vă sfătuiesc să dezvoltați șabloane pe o mașină virtuală.

Din punctul de vedere al editării și editării codului, recomand cu căldură să utilizați Notepad++. Datorită evidențierii codului și interfață simplă, acest program este de preferat cel mai mare număr Webmasteri.

Mergi la directorul rădăcină conținând Instalări WordPress, accesați wp-content => teme și creați acolo un folder cu numele - „New Theme 3.0”. În interiorul acestui folder loc următoarele fișiere(extensii – PHP, CSS, PN G):

Pasul 1 stil.css

Fișierul va conține toate elementele de stil ale șablonului WordPress. Îl vom folosi mai întâi pentru a declara numele șablonului, numele autorului, un link către site cu o descriere și un număr de versiune:

Aceste informații pot fi modificate în orice moment. Principalul lucru este că totul este comentat ().

Acum, în acest fișier, trebuie să creați câteva definiții de stil de bază, care vor fi ulterior implementate în unele fișiere PHP ale temei WordPress:

Acest cod folosește eticheta body doar pentru a specifica (defini) fonturile folosite pe site și culoarea de fundal (totul se schimbă pentru a se potrivi fiecărui gust). În continuare, declarăm atributele de stil pentru link, precum și unele dintre titlurile pe care le vom folosi pe parcursul temei noastre.

#wrapper - va fi responsabil pentru dimensiunea completă a paginii web. Cu #header, totul este evident, acesta este titlul și #blog, acestea sunt cele mai recente postări de pe pagina principala.

Stilurile de antet și subsol rămase # (anteturi) subsol și bară laterală vor fi aplicate fișierelor corespunzătoare numelor lor, pe care le vom analiza puțin mai târziu.

Pasul 2 header.php.

Acum, vom crea un fișier - care va conține sigla și navigarea obișnuită:

De fapt, nu are rost să explicăm acest cod în detaliu. Trebuie doar să rețineți că trebuie să fie prezent în toate temele WordPress. Dar, dacă sunteți interesat, vă spun.

La început, declarăm tipul de document și cod standard, care va fi folosit pentru a afișa numele site-ului introdus în setările de administrare WordPress. În continuare, există cod PHP care vă permite să lucrați cu comentarii în arbore.

Pasul 3 Adăugarea de navigare personalizată.

Acum că am codificat informațiile noastre de bază, putem adăuga un meniu de navigare personalizat. Dar mai întâi, trebuie să deschideți fișierul functions.php și să scrieți o funcție specială:

După cum puteți vedea, am comentat secțiunile codului. Prima parte, add_action , este folosită pentru a adăuga suport pentru un meniu personalizat, iar a doua parte înregistrează în sine zona principală a meniului. În continuare, să trecem la implementarea în sine în șablonul WordPress.

Pentru a crea un meniu, trebuie să adăugați linia sub codul scris anterior în fișier:

Să o descompunem puțin. Funcția principală care este folosită aici este wp_nav_menu. Variabilele sort_column , container_class și theme_location sunt folosite ca argumente. Sort_column - garantează ordinea de afișare, care este setată în panoul de administrare. Container_class - vă permite să vă selectați meniul. Ei bine, theme_location atribuie pur și simplu meniului primar valorile pe care le manipulăm în timp real.

Pasul 4 Stilul de navigare pentru șablonul WordPress.

Datorită acțiunilor anterioare, tema noastră WordPress a dobândit o navigare personalizată. Dar, meniu obișnuit arată simplu și nu atrăgător. Pentru a remedia acest lucru, vom crea o clasă de navigare în fișierul .

După cum puteți vedea în .nav , am făcut declarații de bază, cum ar fi culoarea de fundal, lățimea de navigare, alinierea și poziția elementului pe monitor. Apoi, setăm ordinea de plasare a elementelor principale și a ferestrelor pop-up.

Pasul final este să adăugați stiluri pentru link-uri din meniul drop-down:

În .nav ul ul, setăm poziția la absolut și facem primul link dropdown 100%, astfel încât să apară sub cel principal. De asemenea, am schimbat fundalul ferestrei derulante pentru a o face diferită de cea existentă. Atributul z-index:99999 a fost adăugat la valorile generale, ceea ce face ca linkurile drop-down să se deschidă deasupra altor obiecte.

În acest moment, adăugarea de stiluri pentru meniul personalizat al șablonului WordPress este completă.

Pasul-5 index.php.

Fișierul index.php va fi responsabil pentru pagina principală a site-ului nostru. Acesta va conține codul pentru a activa antetul, subsolul și bara laterală, despre care vom vorbi mai târziu. De asemenea, va avea o funcție pentru a porni cel mai mult ultimele mesaje pe blog și afișând miniaturile corespunzătoare.

Următoarele linii de cod sunt folosite pentru a afișa toate informațiile din , sidebar.php și footer.php unde le plasați în șablonul WordPress:

În principiu, înțelegerea acestui cod nu este atât de dificilă. După ce apelăm la , folosim #blogul nostru, care a fost creat inițial în . Apoi, adăugăm o buclă pentru afișarea celor mai recente postări de blog și codul pentru antet, pe care îl includem

.

Aici, există o bucată de cod care afișează miniaturile în postările de pe pagina principală a blogului. Deocamdată, este inactiv, dar următorul pas este să folosești functions.php pentru a-l face să funcționeze.

În al cincilea pas, am adăugat o bucată de cod care este responsabilă pentru afișarea miniaturilor postărilor pe pagina principală a blogului. Momentan nu se întâmplă nimic de genul acesta, deoarece este dezactivat. Pentru a-l activa, trebuie să deschideți fișierul functions.php și sub codul meniului de navigare instalat anterior, scrieți următoarele:

După ce a examinat codul cu atenție, scopul său devine imediat evident. Prima linie adaugă suport pentru miniaturi temei dvs. WordPress, iar a doua linie stabilește dimensiunile exacte ale imaginii.

Pasul 7 sidebar.php.

Cred că ați ghicit că fișierul sidebar.php va afișa toate informațiile pe care vrem să le vedem pe bara laterală. Deoarece l-am folosit deja în index.php, tot ce rămâne este să plasăm codul într-un fișier și bara noastră laterală va fi afișată pe pagina principală a site-ului:

Da, acesta este tot codul pe care trebuie să îl adăugați la sidebar.php pentru a-l face funcțional. Acum, voi explica semnificația lui.

Folosind div, apelăm stilurile din fișier, iar codul de mai jos ne oferă posibilitatea de a plasa widget-uri din zona de administrare WordPress, în secvența dorită.

Dar, la fel ca multe funcții, pentru ca acesta să funcționeze, trebuie să scrieți următorul cod în fișierul functions.php:

Acest cod îi spune pur și simplu WordPress să înregistreze bara laterală pe care am declarat-o în sidebar.php. Pentru informații generale, WordPress poate rula cu ușurință mai multe bare laterale într-o singură temă.

single.php este ceea ce va fi folosit pentru o pagină de postare. Codul de mai jos va fi foarte asemănător cu cel pe care l-am pus în index.php. Singura diferență este că am adăugat un șablon de comentarii cu un div și codul care ar trebui să includă comments.php:

Odată cu lansarea WordPress 3.0, dezvoltatorii au decis să ușureze viața autorilor de teme și șabloane WordPress. Au trecut la un standard unic pentru formularele de comentarii.

Codul de mai jos ar trebui să fie plasat în fișierul comments.php:

Acest lucru va adăuga un formular standard de comentarii la postările tale.

În fișierul page.php, vom plasa codul care va fi responsabil pentru paginile statice ale site-ului nostru. Va fi aproape identic cu cel care a fost plasat în single.php. Singurele modificări sunt eliminarea șablonului de comentarii și adăugarea de cod care procesează paginile mai degrabă decât postările. Toate celelalte vor fi la fel:

Fișierul category.php este folosit pentru a afișa mesaje dintr-o anumită categorie sau arhivă pe care o accesează cititorul. Aici, cea mai mare parte a codului va fi similară cu page.php și single.php pe care le-am codificat mai sus, cu excepția bitului de la început:

Fragmentul de cod de mai jos este singurul lucru pe care l-am adăugat după bucla principală:

Aici folosim o mulțime de declarații if/elseif în PHP care arată ceea ce vezi pe blog. De exemplu, dacă ne uităm la o categorie numită - „”, atunci aceasta va fi afișată în Arhiva h2 din categoria: „” în fața tuturor intrărilor, defalcându-le după dată sau autor.

Pasul 12 Configurarea fundalului site-ului.

Odată cu apariția WordPress 3.0, a fost creată o caracteristică care face posibilă schimbarea fundalului site-ului din panoul de administrare, folosind o imagine sau o culoare obișnuită. Pentru a face acest lucru, trebuie să inserați următorul cod în fișierul functions.php:

Deci, fundalurile personalizate sunt incluse. Ca bonus, vom adăuga mai jos un cod care face disponibile link-uri către arhive, comentarii și etichete din fluxul RSS:

Pentru a termina crearea șablonului WordPress, vom adăuga o bucată de cod la footer.php care folosește #footer care a fost declarat în . Subsolul nostru va conține doar informații de bază despre drepturile de autor, precum și un flux RSS de știri și comentarii:

Aceasta completează crearea celui mai simplu șablon (temă) pentru WordPress.

Pentru a-i verifica funcționalitatea, puteți descărca arhiva cu tema creată și o puteți activa pe resursa dvs.:

Ai reușit să creezi primul tău șablon pentru WordPress?

Prieteni, în timp ce scriu o nouă postare, puteți citi următoarele:

Asta e tot pentru azi.

Oricine i-a plăcut articolul se poate abona la actualizările blogului pentru a primi notificări despre lansarea de materiale noi în căsuța de e-mail.

Până la articole noi...

Salutări, Denis Chernikov!

Interesant pe tema:

Vă rugăm să faceți o faptă bună și să spuneți prietenilor tăi despre blog:

96 de comentarii Ce crezi?

Multumesc mult pentru articol! Informații foarte utile pentru tinerii designeri de layout! Am citit un articol despre rap... =)

Denis Cernikov a răspuns:
3 noiembrie 2012 la 14:38

Te rog, Alexandru! Am stat trei zile pufând și pufând peste el, am vrut ca toată lumea să înțeleagă totul! Sper ca am reusit! Regele tipul rap!

Alexander Krasiliy a răspuns:
3 noiembrie 2012 la 15:13

Da, am observat că articolul nu este mic și există o mulțime de mici nuanțe. Dacă nu le iei în calcul, atunci totul va merge prost! Am un prieten care face lucrări de amenajare pură, stă la birou și salariul este decent, în jur de 4000-5000 UAH. Mai mult, este autodidact! Deci am dorință, dar nu suficient timp... =(

Arhiva nu a putut fi instalată. PCLZIP_ERR_BAD_FORMAT (-10): Imposibil de găsit semnătura Sfârșitul înregistrării directorului central

Asta se scrie după ce am vrut să testez acest subiect. Ce s-a întâmplat?

Cu respect și recunoștință, Evgeniy!

Multumesc pentru articolul util. După părerea mea, este mai bine să refaci o temă gata făcută pentru tine.

Denis, șablonul s-a dovedit a fi puțin îngust, în pagina principală din subsol există o mulțime de semne de întrebare în loc de o inscripție, iar editarea intrării este afișată și numai cu semne de întrebare. Asa ar trebui sa fie? și nu este încă în meniul de sus al paginii principale și este incomod să intri în panoul de administrare, doar prin editorul articolului. Dar, în principiu, este foarte bun și de înțeles, mulțumesc.

Iulia a raspuns:
4 noiembrie 2012 la 6:47

Nu știu ce este în neregulă cu șablonul, dar fundalul instalat nu este vizibil pe blog.

Și încă ceva. Nu tot codul este vizibil pe capturi de ecran.

Dar oricum, multumesc pentru articol! esti bine facut! Noroc în viitor!

Salutări, Evgeniy!

Multumesc pentru informatii. Cu siguranță o voi încerca.

Denis, mi-am eliminat vechea temă și am instalat una complexă și nouă. Multe dintre fișierele pe care le descrieți lipsesc, de exemplu, single.php, page.php și category.php. Prin urmare, este dificil să știi ce să faci într-o astfel de situație. Dar pozele cu miniaturi m-au interesat. Când sunt pe pagina principală, nu pot vedea pozele. Dar de îndată ce introduceți un spațiu în căutare și începeți căutarea, toate miniaturile apar imediat. Care crezi că ar putea fi motivul?

Salut Denis! Ei bine, asta este deja acrobație! Creați-vă propriile teme WordPress în loc să descărcați prostește un șablon! Dar încă nu am timp să încerc și eu acest subiect. Mai sunt multe de făcut pentru a implementa ceea ce este interesant în designul site-ului dvs. (săgeată în sus, colț pliabil etc.).

Denis, subiectul este util, iar ochii mei se tem...

Marcat pentru moment...

Am venit la tine din întâmplare, dar mă bucur mult!!! Multumesc foarte mult pentru informatie.

Articolul este foarte relevant, cel puțin pentru mine. Recent m-am întrebat cum să-mi creez propria temă pentru WordPress (șablon) și am găsit acest program - Artisteer. Adevărat, acest program este plătit, DAR, nu pentru ruși dacă înțelegeți ce vreau să spun.

Denis, ai încercat să schimbi culoarea barelor laterale? sau cum să faci asta mai detaliat, în css

Multumesc mult pentru articol. Am căutat informații potrivite pentru a personaliza un șablon WP. În cele mai multe cazuri, doar fraze generale și fără detalii, dar pentru tine este o altă chestiune!

Denis, codul tău se rupe pe alocuri din cauza dimensiunii imaginii... Dar fericirea a fost atât de aproape!

Grozav, multumesc foarte mult! Am crezut că am înțeles greșit ceva.

Denis, salut!

Mulțumesc foarte mult pentru lecție. Am reușit să-mi implementez designul) Dar din anumite motive a existat o problemă cu inserarea fotografiilor în postări - din anumite motive, încadrarea textului în jurul fotografiilor nu funcționează. Este scris asta undeva în șablon? Pur și simplu nu înțeleg ce este în neregulă... nu au mai fost niciodată probleme de genul acesta.

Vă mulțumesc anticipat!

Denis Cernikov a răspuns:
19 martie 2013 la 15:45

Bună, Lyudmila!

Am scris o postare excelentă special pentru asta. Acesta arată cum să împachetați imagini și videoclipuri în postări. Căutați prin căutare sau căutați în lista de articole.

Lyudmila a răspuns:
19 martie 2013 la 15:57

Bine, multumesc!

Din punctul de vedere al editării și editării codului, recomand cu căldură să utilizați Notepad++.

Folosesc Sublime Text 2 - ceva între NotePad++ și binecunoscutul TextMate (Mac OS). Trag proiectul în fereastră și apare ca un arbore. Foarte confortabil! Plus o grămadă de alte funcții care fac viața mai ușoară decât NotePad++! Recomand cu incredere))

Denis, nu am înțeles nimic la prima etapă. De unde pot obține toate aceste coduri? copiați de pe ecranele dvs. de imprimare? Poate pot obține un șablon de undeva și să-l editez?

Mulțumesc foarte mult! Voi încerca să fac totul așa cum este scris! Aspectul individual este mult mai bun))

Bună seara. Sunt începător și nu prea înțeleg cum să îmi „Creați folderele și fișierele necesare” „În acest folder plasați următoarele fișiere (extensii – PHP, CSS, PNG)” Le-am tastat prin intermediul Notepad++ și cum să le transferăm ???

Salut din nou...cum pot face asta????:

În interiorul acestui folder plasați următoarele fișiere (extensii – PHP, CSS, PNG):

Fișierele necesare sunt create pe desktop-ul computerului folosind un notepad obișnuit, cu extensia necesară atribuită.

Nu-mi dau seama cum să plasez fișierele ÎN-UN DOSAR. Când le copiez din Notepad, apar prostii. Vă rugăm să explicați. Exact cum se transferă din Notepad ++ în folderul de fișiere.

De ce am un avatar rău? În general sunt amabil. Cum îl pot schimba???

Salut Denis! Sunt un începător, vă rog să-mi spuneți cum pot crea o temă în Word Press, tema mea nu este afișată în Aspect/Teme...((((

Multumesc, articolul a fost de mare ajutor!

doar adăugați-l la footer.php, altfel panoul de administrare nu va fi vizibil fără el.

Denis, o zi bună!

Sincer să fiu, nu am înțeles nimic din ce s-a scris... Meritul pentru asta nu este al tău - nu am cunoștințe absolut zero în acest domeniu și pentru mine notele tale s-au dovedit a fi o scrisoare chineză... I' cer fie niște clarificări (dacă permiteți), fie pur și simplu să vă șterg comentariul :)

Cum pot schimba numele șablonului care este afișat în meniul din stânga al panoului de administrare pentru unele teme?

Am încercat să vă descarc șablonul - nici fundalul și nici antetul nu se modifică - datele sunt introduse, culoarea este selectată - dar nu se întâmplă modificări pe site :)))))

Buna ziua! Ați putea minimiza subiectul pentru mine pentru o taxă rezonabilă? Am o idee despre cum vreau să văd site-ul dvs., am fotografii pentru temă, dar nu am abilitățile de a lucra cu Photoshop și HTML

Sergey a răspuns:
23 martie 2014 la 1:50

Denis, imi cer scuze degeaba, nu traiesti in layout, ai reusit sa desenezi o astfel de capodopera in doar 3 seri, acum 2 ani am adunat astfel de informatii putin cate putin si iata un astfel de link de comoara catre tine in contact și o plecăciune profundă pentru munca depusă, există într-adevăr unele neajunsuri. Dar totul este bine chiar și cu toate lucrurile mărunte, acest articol mi-ar fi luat 2 ani, oh, cât m-ar fi ajutat cu primul meu proiect. Aveți ceva în JavaScript în arsenalul dvs. Doar că oamenii de nivelul dvs. de educație sunt întotdeauna mai interesați să citească și să studieze informații.

Denis Cernikov a răspuns:
23 martie 2014 la 12:12

Serghei, uneori îmi câștig existența cu aspectul, dar nu-mi place să caut codurile deja proaste încercând să găsesc firul care a ucis întregul site! Îmi este mai ușor să fac lucruri de la zero decât să caut erori pe site-urile clienților. Iar pentru scenarii, am un maestru excelent care face totul cu competență și frumos!

Sergey a răspuns:
23 martie 2014 la 23:59

Nu, nu am nevoie de un programator, ci de informații pentru un demon personal. De fapt, am văzut deja o secțiune întreagă despre Javascript pe site-ul dvs. În general, vă mulțumesc pentru resursa dvs., foarte informativă.

Ajutor, nu pot edita styles.css din panoul de administrare. Mă duc la „aspect - editor”, selectez fișierul de stil, dar se deschide gol. Totul poate fi editat prin FTP, dar acest lucru nu este convenabil pentru mine.

ajută-mă să încarc un site web personalizat pe WP (voi plăti)

Denis, mulțumesc foarte mult pentru articol! Informații foarte valoroase și utile. Cu siguranță îl voi folosi când îmi creez șablonul de la zero.

Dar deocamdată a fost aleasă o temă gata făcută pentru site, iar eu sunt un începător complet... V-aș fi foarte recunoscător pentru ajutorul dvs! Așa că, aveam nevoie să afișez știri doar din categoria „A” pe pagina „ A". Am copiat pagina index.php, am adăugat o linie de cod la ea și am selectat „A” ca șablon pentru pagină. Acum doar înregistrările necesare sunt afișate pe el, dar tot designul a dispărut...) pentru ca designul acestei pagini să nu difere de designul site-ului, trebuie să adăugați ceva la foaia de stil? Sau am făcut totul greșit în primul rând? Mulțumesc)

Denis Cernikov a răspuns:
30 martie 2014 la 21:35

Elena, nu dau astfel de sfaturi! Nu am idee ce faci acolo și nu este întotdeauna clar din descriere!

Elena a raspuns:
1 aprilie 2014 la 16:51

Denis, voi schimba întrebarea: se pot afișa numai articole din categoria „A” pe pagina cu numele „A”, iar articolele doar din categoria „B” pe pagina cu numele „B”? Mulțumesc.

Sergey a răspuns:
30 martie 2014 la 22:37

Elena Nu sunt sigură că asta ți se va potrivi, dar ți-aș rezolva problema cu ajutorul a 2 plugin-uri Display Widgets este un plugin care determină afișarea widget-urilor pe orice pagină de care ai nevoie, iar acest Recent Posts Widget Extended face un frumos ieșire de știri, dar repet că aș face asta

Sergey a răspuns:
30 martie 2014 la 22:41

Totuși, după ce am citit și regândit-o din nou, mi-am dat seama că această opțiune nu este prea potrivită pentru întrebarea ta, Elena.

Elena a raspuns:
1 aprilie 2014 la ora 17:16

Serghei, mulțumesc pentru răspuns! Am încercat pluginul Recent Posts Widget Extended. Un lucru util) As dori exact aceeasi iesire de articole, dar nu in widget-uri, ci pe pagina principala) Multumesc!!

Denis, ajută-mă să înțeleg acest subiect.

Subiectul tău din postare a fost luat ca bază. Am refăcut totul după mine, totul mi se potrivește, dar nu se văd comentarii. Există un formular de comentarii, trec prin moderare, dar după aprobare arată doar numărul de comentarii la postare și formularul în sine, dar comentariile nu sunt vizibile.

Am crezut că am frecat ceva în timp ce lucram cu fișiere, dar nu...

Am instalat originalul dvs., aceeași problemă, spuneți-mi care ar putea fi problema, v-aș fi foarte recunoscător.

PS. Cred că poate problema este că motorul a fost actualizat și după actualizare ceva a mers prost. Există o altă opțiune pentru a încerca să schimbi versiunea php a hosterului.

Denis, mulțumesc foarte mult pentru informațiile care sunt ușor de înțeles. De mult timp caut un site cu template-uri standard care ar putea servi drept surse pentru orice subiect. Peste tot este descris astfel: este creat un fișier index.html, care este apoi tăiat și distribuit în părți în foldere .php. În același timp, textul obișnuit și punctat este plasat în index.html pentru eșantion. Dar nici un subiect nu conține inițial vreun text (este scris de utilizator după crearea unei pagini sau postare). După articolul tău, totul a căzut la loc. Fragmente separate ale mozaicului din capul meu formau o singură imagine. Mulțumesc din nou!

Bună ziua, Denis, am citit articolul și am făcut totul așa cum ai scris, DAR folosind notele și culorile tale, TOTUL A FUNCTAT. Asta e bine))

ÎNTREBARE: Cum să mutați bara laterală astfel încât să fie în stânga și a doua întrebare: aveți un articol despre cum să vă puneți propriile imagini în șablon (adică există un design în PSD deja decupat, eu doriți să-l îmbinați cu șablonul).

Multumesc anticipat pentru raspuns.

Salutari. Acest articol va răspunde la întrebarea cum să creați un șablon unic pentru WordPress, frumos și diferit. Va trebui să încerci să-ți încordezi puțin creierul.

Cum să creați un șablon unic pentru WordPress - să începem

Mai jos este o listă de pași despre cum să creați un șablon WordPress unic cu propriile mâini și gratuit.

1. Schimbați pozele.
2. Schimbați numele șablonului.
3. Faceți modificări minore la stiluri.

Să începem să analizăm fiecare punct în ordine.

Schimbarea pozelor

Mă voi uita la cel mai simplu punct folosind șablonul douăzeci și unsprezece ca exemplu. Înlocuim imaginile stoc cu propriile noastre convertite. Este necesar să schimbați antetul, subsolul, fundalul și altele mici.

Dar nu pot veni cu o soluție anume, șablonul meu are un minim de imagini (iar cele care există sunt uriașe). În general, trebuie să înlocuiți majoritatea imaginilor cu propriile imagini. Să ne uităm la cele două elemente care sunt înlocuite:

• Primul este prin intermediul panoului de administrare în sine.
• Al doilea este prin cod.

Dacă înțelegi principiul, atunci mult respect pentru tine.

Prin intermediul panoului administrativ propriu-zis

ÎN subiecte moderne Există buna functionare setări prin WordPress însuși, de ce să nu le folosiți? Să mergem la panoul administrativ blog, aspect și personalizare.

Dacă subiectul este făcut pentru oameni, atunci setări globale design-urile vor fi aici și ne vom ocupa de micile lucruri de mai jos. În secțiunea despre exemplul lui Twenty unsprezece.

1. Culori tematice generale. Setări pentru elementele de bază (titluri, subtitrări etc.).
2. Imagine antet, adică în antet.
3. Imagine de fundal. Nu este prezent pe toate temele; poate fi personalizat fie cu poza, fie doar cu culoare.

În acest stadiu, asta este ceea ce am primit. Sa trecem peste.

Schimbarea imaginilor manual

Să presupunem că nu sunteți mulțumit de imaginea unui element din șablon și doriți să o schimbați. Ce să fac? Ne vom da seama. De exemplu, voi lua rezultatul unei imagini cu numărul de comentatori.

Sistemul se aplică tuturor subiectelor.

Clic Click dreapta mouse-ul pe element și căutați rezultatul acestuia în cod folosind instrumentul „vizualizare cod”.

1. Elementul în sine, faceți clic dreapta pe el.
2. Selectați opțiunea „Vizualizare cod”.
3. Acesta este codul HTML de ieșire în sine, nu îi acordăm atenție.
4. Aceasta este adresa prețuită la care trebuie să mergeți cu un înlocuitor. Fișierul pe care îl căutați este bubble.png, aflat în folderul imagini din tema în sine.

Adică, trebuie să creați același fișier, cu același nume, și să îl înlocuiți. Sper că știți cum să utilizați manageri de fișiere precum FileZilla. Am vrut să fac o poză care să afișeze numărul de comentarii cu o stea și un contur. L-am făcut în Photoshop și l-am salvat ca imagine cu balonul de nume și extensia png.

Gata, am deschis Filezilla și am mers la subiectul activ twenty unsprezece din folderul imagini (pe care l-am recunoscut mai sus). Și simplu drag and drop introduceți noua imagine în folder, cu înlocuire. Toate detaliile sunt în captură de ecran.

Dacă totul este bine făcut, atunci poza noua apar pe site, aici este un instantaneu.

După cum înțelegeți, puteți schimba orice imagine folosind această metodă dacă nu există setări în panoul administrativ.

Schimbarea numelui șablonului

Te poți schimba doar în teme gratuite, este important.

Sunt două puncte care trebuie făcute:

• Reluarea titlului în fișierul style.css
• Schimbați numele folderului cu teme.

Reluarea numelor în style.css

Pentru a face acest lucru, mergeți la editor ( îmi amintește de editorul de apariție), și găsiți style.css.

Pe ecran vedem inscripția, totul trebuie schimbat aici. Fiecare fișier style.css conține informații despre șablon la început. Trebuie schimbat cel puțin în aceste linii.

Numele temei: moi-template Descriere: Versiunea standard 1.. Licență: GPL

Ar trebui să arate așa după înlocuire.

Completați datele dvs., nu le luați pe ale mele, pentru că noi facem șablonul unic. Schimbați cel puțin numele, autorul și site-ul web.

Ne-am dat seama, să trecem la următorul punct.

Schimbați numele folderului cu teme

O facem prin manager de fișiere, am Filezilla. ÎN paragraful anterior a schimbat numele temei în rândul:

Numele temei: moi-template

Necesar numele original douazeci unsprezece schimbarea la una nouă, în cazul meu, moi-template. Să mergem la folderul FileZilla teme, și găsiți numele original twenty11.

Și îl schimbăm cu unul nou.

Dacă totul a fost făcut corect, va funcționa. Tema pentru motoarele de căutare nu va mai fi standard, ci unică.

Modificări minore ale stilurilor

O singură soluție despre cum să creați șablon unic Nu îl pot afișa pentru WordPress, trebuie doar să te uiți la șablon pur vizual și să vezi ce nu-ți place. Mă uit la bara laterală.

Serios, nu chiar? vreau sa fac font mai mare titluri deoarece sunt mici și se amestecă în fundal. Toți pașii îi vedem în imaginea de mai jos.

1. Selectați elementul pe care vrem să îl editam. Click dreapta.
2. Faceți clic pe „vezi codul”.
3. Întregul stil al acestui titlu.
4. Numele stilului pe care îl cauți.

Deschideți fișierul style.css. Căutăm numele stilului folosind combinația de taste CNTRL + F.

Vreau să fac fontul mai mare, sub el linie solida, modificați culoarea și grosimea textului. Pentru a face acest lucru, modific sau adaug următorii parametri.

Culoare: #1a1a1a; dimensiunea fontului: 15px; greutate font: 600; chenar-jos: 2px solid #271eb1;

Să ne uităm la liniile de cod.

1. Schimbarea culorii.
2. Schimbarea dimensiunii.
3. Modificați lățimea textului.
4. Adăugarea unei subliniere.

Schimbăm sau adăugăm parametrii stilului în consecință. Ar trebui să iasă așa.

Toate modificările vor apărea imediat pe site.

Sarcina mea acum nu este să predau aspectul, acest lucru va dura mult timp și articole, ci să arăt însuși principiul modului de a face un șablon unic.

Deci, cu toate celelalte elemente, aduceți-l la perfecțiune. Vă arăt ce s-a întâmplat în cadrul acestui articol.

Acest articol a răspuns la întrebarea cum să creați un șablon WordPress unic. ȘI tema standard poate fi numit al tău.

Dacă aveți întrebări, vă rugăm să le lăsați în comentarii. Noroc.

Acum voi explica cum să creez o temă WordPress dintr-un șablon HTML simplu folosind exemplul de design din acel articol.

Este posibil să fie nevoie să adaptați un design pentru WordPress din mai multe motive, de exemplu, vă transferați site-ul web odată static într-un CMS sau v-a plăcut un design care nu se află încă în colecția WordPress sau doriți doar să înțelegeți cum sunt temele. a acestui CMS lucrează din interior.

Asadar, haideti sa începem.

Distribuirea codului în fișiere

1. Descărcați șablonul și extrageți-l într-un folder cu Teme WordPress(adresă ca blog_address_wordpress/wp-content/themes/). Dacă doriți, redenumiți folderul cu tema după bunul plac. De exemplu, șablonul meu se află la blog_address_wordpress/wp-content/themes/MyTheme/.

2. Redenumiți fișierul stiluri.css V stil.css.

3. Deschide stil.cssîntr-un editor de cod (cum ar fi Notepad++) și la început, lipiți următoarele rânduri:

/* Numele temei: MyTheme Theme URI: http://test1.ru Autor: NoName Author URI: http://test1.ru Descriere: Exemplu de testare Versiunea: 1.0.0 Licență: GNU General Public License v2 sau ulter License URI : http://www.gnu.org/licenses/gpl-2.0.html */

După cum probabil ați ghicit, asta informatii de serviciu despre tema de design: titlu, autor, descriere, licență, versiune etc. Puteți înlocui părțile potrivite ale liniilor cu propriile dvs., adică setați-vă autoritatea, versiunea, descrierea și alte date.

4. Creați fișiere header.php, index.php, sidebar.php, footer.phpși distribuiți codul de la ei între ei index.html.

4.1. ÎN header.php copiați codul linie cu linie , deoarece acest fișier este responsabil pentru partea de sus a site-ului. stiluri.cssînlocuiți în cod cu stil.css- nou nume de fișier corect.

4.2. ÎN index.php lipiți codul blocului principal (din linie linie cu linie ).

4.3. ÎN sidebar.php copiați codul meniului lateral (de la De ).

4.4. ÎN footer.php lipiți rândurile rămase (cu până la sfârșitul documentului index.html).

5. Scoateți index.html.

6. Accesați panoul de administrare și asigurați-vă că șablonul MyTheme apare în secțiune Aspect-> Teme. Puteți chiar să încercați să îl vizualizați sau să îl activați, dar încă nu va ieși nimic bun, deoarece nu am integrat încă șablonul cu WordPress.

Adaptare antet

Acum vom începe să facem o temă dinamică dintr-un șablon static în care vor fi încărcate datele și setările WordPress.

Șablonul va conține inserții PHP. Acest cod începe cu. Între ele se află codul PHP care apelează cel mai adesea funcții CMS

1. Deschideți fișierul header.php și înlocuiți codul conținut în acesta până la bloc

la urmatorul:

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

Am făcut blocul dinamic

Codul apelează o funcție care returnează atributele limbajului containerului.

">

În loc să specificăm codificarea ca constantă, am apelat la o funcție care preia valoarea din setările CMS și o inserează automat în cod, adică pentru a schimba codificarea nu mai trebuie să editați fișierul temă.

O funcție importantă care asigură că stilurile, pluginurile și scripturile funcționează pe pagină.

2. Continuați să editați fișierul index.php. La început, scrieți

,

Liniile apelează fișierele antet, bară laterală și subsol ale site-ului.

Acum puteți vizualiza sau chiar activa MyTheme. Ca rezultat, browserul va afișa un șablon familiar cu un meniu static și o singură pagină. Pentru ca meniul să devină dinamic și personalizabil și în loc de o singură pagină pentru a afișa toate materialele plasate pe site, trebuie să transformați șablonul în continuare.

Dinamizarea meniului de sus

Deocamdată avem o temă de design complet statică, inclusiv una cu un meniu de sus orizontal neschimbat. Deși nu poate fi configurat din panoul de administrare și dacă lăsați codul în forma sa actuală, atunci pentru a insera/șterge/muta elemente va trebui să editați fișierul de fiecare dată header.php, ceea ce este extrem de incomod.

Pentru a nu filozofa și a nu se cufunda în abisul lumii fascinante a programării, vom da meniului dinamic un nume static. În loc de tabelul de meniu orizontal, lipiți codul

astfel incat sa arate asa: