Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Programe
  • Crearea manuală a diverselor teme WordPress și folosind programe. Aspectul unui șablon Wordpress din aspect HTML

Crearea manuală a diverselor teme WordPress și folosind programe. Aspectul unui șablon Wordpress din aspect HTML

Să presupunem că am deschis o nouă prezentare Powerpoint, până acum goală. Și ce vedem?

Și aveți culori și fonturi corporative pe care trebuie să le modificați de fiecare dată. Șablonul vă va permite să faceți acest lucru o dată pentru toată viața.

Iar primul diapozitiv din prezentarea dvs. va arăta automat așa ÎNTOTDEAUNA fără efort suplimentar.


Șablonul include:

  • Culori
  • Fonturi
  • Substituenți (secțiuni în care inserăm text, imagine, diagramă etc.)

Mai jos veți găsi instrucțiuni pas cu pas pentru a vă crea propriul șablon Powerpoint.

1. Creați un fișier nou în Powerpoint.

2. Selectați „Slide Master” din meniul de sus din fila Vizualizare.


În stânga apare un master de diapozitive standard.

Aici vom lucra cu el. Și vom face non-standard din standard.

3. Selectați tema fontului dorită sau creați una nouă.

O temă de font este tipul de fonturi pe care le utilizați în prezentarea dvs. Crede-mă, există o mulțime de alte fonturi bune în afară de Calibri. Specificați-le o singură dată și vor fi înlocuite automat în întreaga prezentare sau șablon.


4. Selectați fundalul dorit (culoare sau model). Puteți alege același fundal pentru toate diapozitivele simultan sau unul special pentru unul singur.

5. După cum putem vedea, există multe opțiuni pentru locația textului, titlului etc. în stânga. Dar dacă avem nevoie de unul care nu există? De exemplu, să aibă 3 poze cu semnături.


Apoi ne va ajuta funcția Insert Layout + Insert Placeholder.

După ce faceți clic pe „Insert Layout” este creat un diapozitiv gol. Și îl putem umple după cum dorim.


7. Acum, dacă vom crea un nou diapozitiv, atunci vedem opțiunile din șablonul nostru.

8. Creați o nouă prezentare și v-ați „pierdut” șablonul? Accesați fila Design și căutați-l acolo.

Înainte de a codifica un șablon de site web în HTML / CSS, acesta trebuie să fie elaborat. Este obișnuit să desenezi un design în Photoshop. Aspectul final este salvat într-un fișier cu formatul .PSD.

De exemplu, să creăm designul site-ului din imaginea de mai jos.

1. Deschide Photoshopși creați un nou document în el ( Fișier -> Nou sau Ctrl + N).

2. Setăm parametrii inițiali.În practică, este aproape imposibil să te gândești la un design cu acuratețe a pixelilor - în procesul de layout, cu siguranță va trebui să schimbi ceva, să-l muți, să-l refaci. Prin urmare, dimensiunile pot fi setate aproximative și este recomandabil să indicați lățimea și înălțimea documentului în mod deliberat mai mult decât dimensiunea planificată a site-ului, astfel încât toate elementele să se încadreze exact în aspect. Vom face documentul nostru la 1000 de pixeli lățime și 1500 de pixeli înălțime. Vă rugăm să rețineți: pixeli, nu centimetri. Alți parametri pot fi lăsați în pace.

3. Aprindem conducătorii.În timpul lucrului, acestea vor fi necesare, deoarece riglele vă permit să măsurați foarte precis distanțele. Verificați dacă aveți rigle activate. Dacă da, veți vedea scale în partea stângă și sub bara de instrumente de sus.

Dacă nu există rigle, porniți-le ( Vizualizare -> Rigle sau Ctrl + R).

Riglele ar trebui să arate valoarea în pixeli. Pentru a trece la ele de la o altă măsură de lungime, faceți clic dreapta pe riglă și bifați caseta corespunzătoare din meniul care se deschide.

4. Verificați dacă dimensiunea fontului este specificată în pixeli și nu în puncte. Dacă nu este configurat corect, accesați Editare -> Setări -> General, în fereastra care apare, accesați fila Unități de măsură și rigle, în lista derulantă Text alege Pixeliși apăsați O.K.

5. Realizează imediat fundalul site-ului. Avem acest grad de umplere portocaliu, care se transformă în galben. În panoul din stânga, selectați instrumentul Gradient.

Pe panoul care apare în partea de sus, apăsați butonul Gradient de oglindă, alegeți o culoare din paleta din stânga.

Folosind instrumentele ferestrei deschise Editor de gradient, alege culorile dorite. Pentru a seta culoarea exactă a punctului de control, faceți clic pe el, apăsați butonul Culoare iar în fereastra de selectare a culorilor specificați-l în RGB, HSB, CSS sau orice alt format disponibil.

Ca urmare a manipulărilor, gradientul s-a dovedit după cum urmează.

Pentru a aplica un gradient layer-ului curent, trageți cursorul peste el în timp ce țineți apăsat butonul stâng al mouse-ului.

6. Salvați fundalul într-un fișier. Ceea ce am făcut ar trebui să fie afișat sub pagina principală și să ocupe întreaga fereastră a browserului - un fel de fundal. De exemplu, un site are o lățime de 800 de pixeli, iar rezoluția ecranului utilizatorului este mult mai mare. Restul spațiului (totul cu excepția celor 800 px care vor fi ocupați de blocul de pagină) va fi umplut cu un fundal gradient.

Deoarece rezoluția ecranului nu poate fi prezisă, puteți tăia o bandă de un pixel gros din fundalul creat și o puteți salva ca imagine. Browserul va umple fundalul cu el pe toată lățimea.

6.1. Alegerea unui instrument Zona dreptunghiulara.

6.2. Selectați o bandă de lățime arbitrară, dar pe toată lungimea stratului.

6.3. Copiați selecția ( Ctrl + C).

6.4. Creați un document nou ( Ctrl + N), setați-i lățimea la 1 pixel și lipiți fișierul copiat ( Ctrl + V).

6.5. Salvați fișierul în Jpg-format.

7. Creați fundalul paginii. Fundalul va fi alb simplu. Alegerea unui instrument Dreptunghiși setați parametrii necesari în fereastra de proprietăți. Avem un dreptunghi de 800x1100 pixeli, al cărui colț din stânga sus se află la punctul 100.0.

8. Faceți fundalul antetului. Umplere cu gradient asemănător mat cu dimensiuni 780x80px.

Salvați-l ca fișier grafic separat de 1 pixel, așa cum am făcut cu fundalul.

9. Creați meniul de sus. Folosind instrumentul Text orizontal, adăugați primul element de meniu la aspect - Acasă... Stratul va fi creat și chiar redenumit automat, așa că nu trebuie să faceți nimic cu el.

Este important aici ca toate punctele să fie distribuite uniform, de aceea este foarte recomandat să folosiți rigle. Pentru a extinde o verticală, trageți în timp ce țineți apăsat butonul mouse-ului de la stânga la dreapta. Folosiți riglele pentru a măsura distanța, având în vedere că fiecare element de meniu ar trebui să ocupe 120 de pixeli în cazul nostru.

10. În mod similar, introduceți restul elementelor de meniu.

11. Adăugați un logo. Avem deja unul gata făcut, așa că tot ce rămâne este să îl introducem cu atenție în aspect. Pentru a face acest lucru, faceți clic Fișier -> Deschide, apoi faceți clic pe imagine și, în timp ce țineți apăsat butonul mouse-ului, mutați-l la titlul documentului șablon, când acesta se deschide, trageți imaginea în locul dorit în aspect și eliberați butonul mouse-ului.

12. Scriem numele și sloganul site-ului. Cu instrumentul pe care îl cunoaștem deja, completăm logo-ul aproape creat cu inscripții.

13. Accesați panoul lateral. Mai întâi, să creăm și să salvăm într-un fișier separat o umplere cu gradient pentru titlurile sale. Sunteți familiarizat cu instrumentele, nu sunt necesare explicații.

14. Adăugați textul titlului blocului de informații la gradientul nou creat.

15. Desenați o chenar pentru zonă. Pentru a face acest lucru, este suficient să folosiți un dreptunghi transparent cu linii negre de contur. Selectați instrumentul Dreptunghi, setați tipul de umplere al formei la Fără culoare, faceți clic pe pictograma Setați tipul de contur și selectați negru, altfel nu vor exista linii. Dacă conturul este prea gros, setați lățimea liniei la 0,5 pt.

16. Mai jos, adăugați un antet de bloc cu umplere în gradient, ca în articolele 12-13.

17. Creați blocul de meniu din panoul din stânga. Adăugați un dreptunghi portocaliu de 100 px cu un contur galben de 0,2 pt.

18. Adăugați text la acesta.

19. Cu ajutorul dublării straturilor și riglelor creați încă cinci elemente de meniu din panoul din stânga.

20. Scrieți textul în partea principală a paginii folosind același instrument.

21. Adăugați o fotografie în partea principală a paginii, așa cum am făcut cu logo-ul. Pentru a copia o imagine, pur și simplu mișcați-o cu mouse-ul în timp ce țineți apăsată tasta. Alt... Dacă brusc imaginea nu se potrivește ca dimensiune, utilizați instrumentul Transformare ( Ctrl + T).

22. Desenați fundalul subsolului site-ului - un gradient portocaliu de 64 px.

23. Salvați banda lată de 1 pixel a fundalului de jos într-un fișier grafic separat.

24. Reduceți înălțimea paginii. S-a dovedit că toate elementele au fost deja desenate și mai este spațiu suplimentar. Aici au fost utile numele de straturi semnificative. Printre altele, selectați stratul de fundal (noi îl numim Fundal) și utilizați instrumentul Transformare pentru a reduce înălțimea dreptunghiului nostru alb până la marginea de jos a subsolului paginii.

25. Salvați șablonul într-un format de fișier .PSD (Fișier -> Salvare).

26. Rezultatul acestei acțiuni este încă un șablon de site simplu, dar deja normal.

Acum, din aspectul PSD, rămâne să folosiți HTML / CSS pentru a alcătui șablonul site-ului, dar despre asta voi vorbi în articolul următor.

Dacă doriți ca site-ul dvs. wordpress să arate promițător, atunci mai întâi ar trebui să vă gândiți să creați o temă unică pentru el. Acest proces este destul de laborios, deoarece este direct legat de diverse codificări și scripturi. Să o dezactivăm de la zero.

Aproape fiecare temă wordpress este instalată în directorul wp-content / themes și constă din 3 categorii de fișiere:

  1. fisiere de foi de stil;
  2. fișiere de funcționalități suplimentare;
  3. fișiere șablon.

Fișierele foilor de stil sunt style.css. Ei sunt responsabili pentru culoarea, dimensiunea, fontul și alți parametri ai elementelor site-ului. Fiecare site are doar 1 fișier style.css. Dacă deschideți acest fișier, atunci în partea de sus puteți vedea informații despre titlu, autor și o scurtă descriere a subiectului. Când vă creați propria temă, puteți introduce informații despre dvs. în style.css.

Următoarea categorie este fișierele cu funcționalități suplimentare. Acestea includ functions.php, al cărui principiu îl face să arate ca un plugin. Datorită acestui fișier, puteți personaliza vizual tema chiar în panoul de administrare. De obicei, lista de setări nu este foarte largă (numele site-ului, culoarea navigației și panourile laterale ale site-ului etc.). Dacă tema este multifuncțională, atunci lista de setări va fi mult mai largă.

Acum să trecem la fișierele șablon. Funcția lor principală este de a genera pagini care sunt solicitate de vizitatorii site-ului. Fișierele șablon au extensia „.php”. Cele mai multe teme de bază pot conține doar un fișier șablon numit index.php. În acest caz, toate paginile site-ului vor fi identice. Acest design este cel mai adesea folosit pentru a crea resurse Internet cu baze de date, atunci când designul nu joacă un rol cheie.

Dacă nu ați mai făcut niciodată un design, ar trebui să încercați mai întâi să creați o temă simplă. Pentru funcționarea normală, aveți nevoie de cel puțin 2 dintre următoarele fișiere: style.css și index.php.

După cum înțelegeți, fișierele cu funcționalități suplimentare în acest caz nu pot fi utilizate. Dintre fișierele șablon, index.php este unul dintre cele mai flexibile. Poate genera independent anteturi, diverse blocuri, subsol (subsol), conținut și alte elemente ale site-ului.

Este de remarcat faptul că acei parametri care nu sunt generați de fișierul index.php vor fi generați de fișiere standard. De exemplu, dacă tema dvs. este formată din doar 2 dintre fișierele de mai sus, dar utilizatorul are nevoie să genereze un formular pentru adăugarea de comentarii, atunci această funcție va fi realizată de standardul comments.php. Prin urmare, dacă doriți ca tema dvs. să fie mai unică, atunci merită să faceți fișiere șablon suplimentare. Să le luăm în considerare pe cele principale.

  1. Pentru a adăuga comentarii, ați ghicit, se folosește șablonul comments.php.
  2. Dacă doriți să faceți un pop-up cu comentarii, atunci în astfel de scopuri aveți nevoie de comments-popup.php.
  3. Pentru a genera pagina de pornire, se folosește home.php.
  4. Fișierul single.php este responsabil pentru afișarea articolelor site-ului. Dacă nu aveți un astfel de fișier, atunci index.php își va executa funcția.
  5. Fișierul page.php generează pagini individuale ale site-ului.
  6. Pentru a afișa informații despre autor, aveți nevoie de author.php.
  7. Category.php este responsabil pentru categorii.
  8. Afișarea arhivelor, a datei și a căutării se realizează prin fișierele archive.php, date.php și respectiv search.php.
  9. Pentru ca site-ul dvs. să afișeze o pagină unică de eroare 404, va trebui să adăugați 404.php.
  10. Subsolul și subsolul site-ului sunt generate de fișierele header.php și, respectiv, footer.php.

Crearea manuală a unei teme unice de la zero

Mai întâi trebuie să instalați un șablon potrivit. Poate fi găsit atât pe site-ul oficial wordpress.org, cât și în altă parte. Se recomandă utilizarea site-ului oficial, deoarece orice terță parte poate conține fișiere rău intenționate și link-uri rupte.

După ce ați făcut alegerea, puteți începe să descărcați arhiva. La sfârșitul procesului, va trebui să îl despachetați și să încărcați fișierele în anumite foldere de pe site (arhiva conține de obicei o mică instrucțiune). Descărcarea se poate face folosind programul FileZilla sau direct din hosting, dacă acceptă această opțiune. Acum trebuie doar să mergeți la secțiunea „Teme”, să o selectați pe cea pe care ați descărcat-o și să faceți clic pe butonul „Activare”.

De asemenea, îl puteți selecta chiar în panoul de administrare wordpress. În acest caz, nu trebuie să îl descărcați. Trebuie doar să faceți clic pe butonul „Instalare” și apoi pe „Activare”. Înainte de instalare, se recomandă să efectuați o previzualizare.

Acum că tema este activată, puteți trece la unicizarea acesteia. Primul pas este să vă gândiți la partea de sus a site-ului (header). Acesta este primul lucru care atrage atenția vizitatorilor tăi, așa că ar trebui să-l iei cu responsabilitate. De obicei, antetul constă din numele site-ului, logo și informații scurte despre conținut. Antetul poate fi creat în orice editor grafic. Chiar și în Paint standard. Designerii mai avansați folosesc Adobe Photoshop.

Numele site-ului ar trebui să fie scurt și ușor de reținut. Există multe stiluri diferite din care puteți alege în Adobe Photoshop. Când creați un logo, este posibil să aveți nevoie de forme diferite. Acestea pot fi descărcate de pe site-ul oficial Adobe Photoshop.

După ce faceți un desen al antetului într-un editor grafic, va trebui să îl încărcați pe site-ul dvs. web. Când descărcarea este completă, o adresă URL va apărea în dreapta imaginii și va trebui copiată. Apoi trebuie să mergeți la secțiunea „Editor” și să selectați fișierul care este responsabil pentru generarea antetului (header.php). În ea, va trebui să găsiți adresa URL a imaginii curente și să o înlocuiți cu cea pe care ați primit-o la încărcarea imaginii antet. După aceea, va trebui să actualizați fișierul. Acum puteți trece la verificarea afișajului antetului.

Dacă antetul tău are alți parametri decât cel standard, atunci aceștia pot fi ajustați în header.php. Lățimea este controlată de atributul width, iar înălțimea este controlată de înălțime. Ajustările pot fi făcute în pixeli și procente. Deci, dacă doriți doar să întindeți capacul, atunci setați-l la 100%.

Dacă doriți, puteți adăuga link-uri active către paginile site-ului wordpress în antet. Acest lucru se poate face folosind diverse servicii. Există o mulțime de ele pe Internet. Majoritatea lucrează pe același principiu. Conturați zona dorită a antetului, care va fi rezervată pentru link, iar serviciul vă va oferi codul de care aveți nevoie. Apoi va trebui să adăugați acest cod în fișierul header.php. Aveți grijă când îl adăugați. Fiecare punct contează. Dacă adăugați codul în locul greșit, linkurile active nu vor apărea în antet.

După înlocuirea antetului standard, puteți începe să înlocuiți fundalul implicit al site-ului wordpress, widget-urile, navigarea, subsolul și alte componente ale site-ului wordpress. De asemenea, pot fi desenate în orice editor grafic și încărcate pe site sub forma unei imagini.

Cu tine merită să iei în considerare că nu ar trebui să fie strălucitor. Majoritatea webmasterilor preferă să folosească un fundal alb. Nu rănește ochii și nu distrage atenția de la conținutul principal.

Pentru a crea o navigare de calitate de la zero, aveți nevoie de puține cunoștințe despre etichete, cum ar fi




  • Primul este responsabil pentru crearea blocurilor de site, al doilea este responsabil pentru adăugarea de link-uri către site-ul wordpress. Al treilea poate fi folosit pentru a crea coloane. Acesta din urmă este necesar pentru a personaliza celulele. Primul pas este să decideți locația în care va fi localizată navigația. De obicei se găsește chiar sub capac. Navigarea în layout este un proces destul de rapid. Mai jos este un mic exemplu despre cum puteți aranja un mic bloc de navigare.

    După cum ați înțeles deja, numele convențional al blocului de navigare este navigacia. Blocul este format dintr-o celulă „titlul paginii”. Rețineți că fiecare etichetă este închisă cu un caracter „/”. Dacă etichetele nu sunt închise, site-ul poate funcționa defectuos.

    Nu ar trebui să fie mare. Cele mai populare sunt calendar, tag cloud, meta, arhive, căutare, rss, video și știri de ultimă oră. Pentru a le adăuga, trebuie să accesați fila „Aspect” și să faceți clic pe câmpul „Widgets”. Apoi veți vedea o listă de opțiuni disponibile. De asemenea, widget-urile pot fi instalate folosind plugin-uri. Acestea pot fi descărcate atât de pe site-ul oficial, cât și direct prin panoul de administrare WordPress. Pentru a adăuga un videoclip care se află pe YouTube, trebuie doar să inserați un link către acesta în locul dorit de pe site. În caz contrar, videoclipul va trebui să fie încărcat pe site. Dacă vă place să programați, puteți adăuga propriul widget pe site. Pentru a face acest lucru, trebuie să faceți clic pe opțiunea „Text” și să introduceți acolo codul necesar.

    În setările fiecărui widget, vi se va oferi opțiunea de a schimba anteturile implicite. De asemenea, puteți alege unde să afișați widgetul (bara laterală din dreapta sau din stânga) și așa mai departe. Nu ar trebui să existe probleme cu ștergerea widget-ului. Pentru a face acest lucru, trebuie doar să faceți clic pe butonul „Ștergere” din setări.

    Crearea unei teme unice folosind programe și servicii speciale de la zero

    1. Cel mai popular este Artisteer. Nu aveți nevoie de cunoștințe speciale de programare pentru a lucra cu el. Procesul de creație are loc vizual. Ceea ce desenați va fi reprezentat folosind un cod care respectă standardul internațional „XHTML 1.0 Transitional”. Datorită acestui fapt, tema viitorului tău site va fi acceptată de toate browserele.

    Pentru muncă, vi se va oferi o selecție largă de efecte diferite, stiluri și multe altele. Acest program acceptă rusă, engleză, germană și alte limbi. Trebuie remarcat faptul că acest program are unele dezavantaje. Cel mai important, programul costă aproximativ 50 USD. Există și o versiune gratuită, dar conține foarte puține opțiuni. Pentru a crește unicitatea șablonului, va trebui să cercetați mai departe codificarea.

    Să mergem direct la instrucțiunile de lucru cu acest program Artisteer. De îndată ce deschideți programul, va apărea prima opțiune numită „Idei”. Ea vă va oferi diverse combinații de elemente standard. Dacă vrei ca designul tău să fie unic, atunci
    nu aveți nevoie de această opțiune. Pentru a stăpâni programul, trebuie doar să faceți clic pe opțiuni și să vizualizați parametrii. Acest program este ușor, așa că nu ar trebui să aveți probleme cu el.

    Acordați atenție opțiunii „Header”. Ea este responsabilă pentru afișarea antetului site-ului. Puteți utiliza un antet standard sau puteți încărca propriul antet. Știi deja să faci o pălărie unică.

    Pentru a regla lățimea site-ului, va trebui să utilizați opțiunea „Foaie”. Lățimea este dată în pixeli. Acest program vă va oferi inițial o lățime de 900 de pixeli. De asemenea, folosind această opțiune, puteți configura diverse efecte (umbră, margini rotunjite și așa mai departe).

    Opțiunea Fundal este responsabilă pentru setarea fundalului, ați ghicit. Îl puteți alege dintre opțiunile standard sau îl puteți încărca pe al dvs.

    Dacă doriți să personalizați aspectul elementelor site-ului, atunci ar trebui să utilizați opțiunea „Layout”.

    O opțiune la fel de importantă este „Articole”. În ea are loc aspectul designului articolelor site-ului. Aceasta include locația imaginii, textul, comentariile, diverse blocuri și așa mai departe.

    Pentru a alege o culoare, o dimensiune sau un font pentru text, aveți nevoie de opțiunea Culori și fonturi.

    După pașii finalizați, vă puteți salva creația. Pentru a face acest lucru, faceți clic pe paleta din colțul din stânga sus. O fereastră va apărea în fața ta. În ea trebuie să faceți clic pe „Salvare ca”. După aceea, trebuie doar să alegeți numele și locația fișierului. Vă rugăm să rețineți că fișierul trebuie să aibă extensia „.artx”. În timpul lucrului suplimentar cu programul, trebuie să faceți clic pe „Salvare” o singură dată pentru a salva.

    Când tema dvs. este complet finalizată, puteți continua să o exportați. Pentru a face acest lucru, trebuie să faceți clic pe fila „Export” și să selectați „Temă WordPress”.

    2. Dacă sunteți fluent în Adobe Photoshop, atunci ar trebui să instalați add-on-ul Divine Elemente. Datorită acestuia, puteți converti cu ușurință fișierul „.psd” în formatul care va fi acceptat de toate browserele.

    3. Dacă nu ai bani pentru Artisteer, poți folosi serviciul gratuit Lubith. Este disponibil online pe site-ul oficial lubith.com. Serviciul conține multe opțiuni utile și este deosebit de rapid. În doar câteva minute veți stăpâni pe deplin toate opțiunile sale.

    4. Analogul serviciului anterior este WordPress Theme Generator. De asemenea, este ușor de utilizat și conține o mare varietate de opțiuni diferite. Acest serviciu este absolut gratuit. Singurul dezavantaj este că acest serviciu acceptă doar limba engleză.

    5. XTemplate Generator este un generator rusificat de teme pentru site. Opțiunile sale sunt în fereastra din stânga, iar în cea din dreapta puteți vedea rezultatul vizual al lucrării dvs. Acest generator este, de asemenea, gratuit.

    6. WPTheme Generator este mult mai puternic decât precedentele, deoarece conține de câteva ori mai multe opțiuni. Singura avertizare este că acest serviciu este plătit. Pretul este de 30 USD. De asemenea, merită remarcat faptul că aspectul din acesta este realizat în întregime în limba engleză.

    7. CSSEZ nu este mai puțin popular decât precedentul. Înainte de a începe, trebuie să treceți printr-o mică înregistrare. În acest serviciu, puteți aranja până la 4 coloane pentru materialele de șantier. Puteți încărca propriul fundal.

    8. Dotemplate vă oferă aproximativ 11 șabloane wordpress diferite pe care le puteți modifica. Singurul dezavantaj este incapacitatea de a încărca propriul fișier grafic. Prin urmare, va trebui să descărcați singur antetul prin managerul de fișiere al site-ului.

    9. Weebly diferă de restul prin faptul că are opțiunea de a adăuga videoclipuri direct de pe YouTube sau Google oriunde pe site. Un site web care are un videoclip este un succes, deoarece informațiile sunt vizual mai rapid și mai ușor de perceput.

    10. În serviciul Eris' Template Generator puteți adăuga până la 3 coloane pentru a afișa materialele site-ului, adăugați diverse etichete, calendar și alte widget-uri.

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

    Este posibil să fie nevoie să adaptați designul pentru WordPress din mai multe motive, de exemplu, vă transferați site-ul odată static într-un CMS sau vă place un design care nu este încă în colecția WordPress sau doriți doar să vă dați seama cum temele acestui CMS lucrează din interior.

    Asadar, haideti sa începem.

    Distribuirea codului în fișiere

    1. Descărcați șablonul și dezarhivați-l în folderul cu teme WordPress (adresă ca wordpress_blog_address / wp-content / teme /). Redenumiți folderul cu tema după bunul plac, dacă doriți. De exemplu, șablonul meu se află la wordpress_blog_address / wp-content / teme / 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 chiar la începutul acestuia, lipiți următoarele rânduri:

    / * Numele temei: MyTheme URI temă: http://test1.ru Autor: NoName URI autor: http://test1.ru Descriere: Exemplu de versiune de testare: 1.0.0 Licență: GNU General Public License v2 sau o versiune ulterioară URI a licenței : http://www.gnu.org/licenses/gpl-2.0.html * /

    După cum probabil ați ghicit, acestea sunt informații de serviciu despre tema designului: titlu, autor, descriere, licență, versiune etc. Puteți înlocui părțile potrivite ale liniilor cu propriile dvs., adică setați-vă propria calitate de autor, versiune, descriere și alte date.

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

    4.1. V 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 valid.

    4.2. V index.php lipiți codul blocului principal (din linie pe linie ).

    4.3. V sidebar.php copiați codul meniului lateral (de la pe ).

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

    5. Ștergeț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.

    Adaptarea antetului

    Acum vom începe de la un șablon static pentru a realiza o temă dinamică, în care vor fi încărcate datele și setările WordPress.

    Vor fi inserări PHP în șablon. 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 înainte de bloc

    la urmatorul:

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

    Am făcut blocul dinamic

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

    ">

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

    O funcție importantă pentru a face pagina să funcționeze cu stiluri, pluginuri și scripturi.

    2. Treceți la editarea fișierului index.php. La început, scrie

    ,

    Rândurile apelează fișierele de antet, bara laterală și de jos ale site-ului.

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

    Dinamizarea meniului de sus

    Până acum, 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 așa cum este, 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 viclean și a nu ne plonja în abisul lumii fascinante a programării, vom atribui un nume static meniului dinamic. Lipiți codul în loc de tabelul de meniu orizontal

    astfel încât să obțineți următoarele:

Top articole similare