Pentru, cu siguranță va trebui să adăugați o temă. Se mai numesc si sabloane. Aceasta este baza oricărei resurse web.

Acest articol va acoperi pașii pentru crearea unui șablon și va descrie aspectul fișierelor PSD.

Veți afla, de asemenea, despre cerințele tehnice de bază pentru temele WordPress, care ar trebui să fie șablonul pentru acesta. Drept urmare, vei putea crea un site web cu propria temă, care să corespundă exact cerințelor tale.

Vă rugăm să rețineți că acest ghid nu include o descriere pentru adăugarea unei teme gata făcute - acesta este un manual pentru generarea propriului șablon. Dacă ați descărcat tema și nu știți cum să o instalați, atunci accesați, în secțiunea „Aspect” și adăugați unul dintre modelele disponibile acolo. Și acum vom analiza mai detaliat ce este o temă, de ce este necesară și cum să o creezi singur.

Care este scopul creării manuale a unei teme?

O temă (șablon) este o colecție de fișiere funcționale și de stil care împreună definesc designul unei resurse. Tema determină cum va arăta site-ul, așa că este foarte important să abordați corect procesul de creare a unui șablon. Mulți își pun acum întrebarea: „De ce să-ți creezi propria temă, dacă poți descărca una gata făcută de pe Internet și gratuit?”. Aceasta este o întrebare logică și există un răspuns foarte cuprinzător la aceasta: „Pentru a crea șablonul perfect care să corespundă pe deplin cerințelor dumneavoastră”.

Când cumpărați o temă sau descărcați una dintr-un director de șabloane WordPress gratuit, de obicei sacrificați calitatea. De regulă, astfel de șabloane nu au totul potrivit pentru tine. Dar te resemnezi, cred că una sau două nuanțe nu sunt întregul tablou și că mai târziu vei edita subiectul. Dar, de fapt, se dovedește că site-ul rămâne cu o temă neterminată care nu vă place. Prin urmare, este mai bine să vă faceți pe cont propriu imediat. Și deși aspectul poate părea complicat la început, dar apoi, când înveți, poți chiar să creezi șabloane personalizate.

În plus, după ce ai creat un șablon, te vei simți ca un „medical” WordPress – vei ști ce are site-ul înăuntru. Înțelegeți ce elemente sunt responsabile pentru ce. Apoi site-ul și vei vorbi despre tine. Familiarizați-vă cu etichetele, structura și ciclurile WordPress. Sau poate vrei să o faci profesional și să începi să faci șabloane pentru a-ți câștiga existența.

Deci, iată principalele motive pentru care ar trebui să vă creați propriul șablon de site:

• afla totul despre HTML, CSS și ceva despre PHP;
• poți crea, pentru că web design-ul este și o artă;
• se va putea câștiga bani prin vânzarea de teme;
• descoperi o nouă abilitate;
• creați un design care va fi 100% potrivit pentru viitorul dvs. site.

Ce standarde îndeplinește tema?

Când scrieți un șablon, este foarte important să respectați regulile oficiale. Încălcarea codului, introducerea unei etichete în locul greșit și omiterea acesteia - acest lucru poate dăuna designului și poate strica complet aspectul acestuia. Ar trebui să cunoașteți bine regulile de scriere a codului PHP, precum și HTML, dacă nu sunteți deja familiarizat cu aceste limbaje. În plus, veți avea de-a face cu foile de stil în cascadă CSS, așa că amintiți-vă și elementele de bază - există o mulțime de informații pe Internet despre asta. Ei bine, și ultima cerință cea mai puțin importantă - creați un site ca un designer și nu ca un școlar, astfel încât să obțineți un proiect serios. Altfel, nu are rost să luăm acest caz.

Toate temele WordPress sunt găzduite în folderul wp-content/themes/. În interiorul acestui folder există și alte foldere cu teme separate, un fișier cu funcții suplimentare (functions.php), fișiere de stil și imagini. Pentru a găsi date despre un anumit subiect, trebuie să mergeți la directorul corespunzător. Aceasta va plasa tema Western în folderul wp-content/themes/western/.

Înainte de a începe, ar trebui să aruncați o privire asupra structurii temelor prefabricate de cel puțin câteva ori. Site-ul WordPress implicit vine cu două șabloane implicite pe care le puteți revizui. Acesta este șablonul implicit și clasic. Deschideți fișierele lor în directorul dorit de pe server și comparați diferențele dintre ele.

Veți observa că un șablon constă de obicei din trei formate de fișiere:

1. Style.css este un fișier de stil responsabil pentru aspectul site-ului.
2. Functions.php este un fișier funcțional care adaugă diverse caracteristici paginilor.
3. Alte fișiere php care sunt responsabile pentru caracteristicile șablonului de ieșire pe site, integrarea temei cu WordPress. Aceste fișiere vă permit să traduceți aspectul PSD într-un șablon cu drepturi depline.

Să analizăm fiecare dintre aceste fișiere mai detaliat pentru a înțelege cum decurge aspectul unei teme WordPress.

Reguli pentru crearea unui fișier style.css

În primul rând, trebuie să se conformeze tuturor caracteristicilor de marcare CSS. Acest fișier determină cum va arăta site-ul dvs. Dar nu va funcționa dacă nu îi adăugați o descriere a șablonului creat. Aceasta este prima caracteristică a WordPress care trebuie luată în considerare atunci când se transferă aspectul PSD în motorul WordPress. Trebuie să specificați următorii parametri:

1. Nume șablon.
2. Adresa URL care duce la subiect.
3. Descriere care indică principalele caracteristici ale șablonului. Scurt.
4. Numele autorului. În acest caz, introduceți numele dvs.
5. Link către autor, adică către tine. Puteți furniza un link către profilul dvs. de socializare.
6. Numele temei părinte este opțional.
7. Versiune tematică. Dacă doar a fost creat, atunci v. 1.0.
8. Descrierea completă a șablonului. Puteți scrie pe larg.

Pentru a crea cea mai simplă temă WordPress, trebuie doar să adăugați o versiune editată cu un singur fișier style.css. În acest fișier, lângă linia „șablon”, specificați numele temei părinte. De exemplu, Classic dacă editați un șablon standard. Acum, tema creată va respecta pe deplin șablonul clasic. Prin urmare, va trebui să încărcați fișierele în directorul wp-content/themes/classic.

Astfel, vei putea crea prima ta temă, cea mai simplă, care va fi un „descendent” al unui șablon gata făcut. Dar acesta nu va fi un design cu drepturi depline al site-ului, ci doar o încercare de a-l inventa, așa că ar trebui să continuați să cercetați.

Caracteristicile fișierului de funcționalități suplimentare functions.php

Șabloanele nu folosesc întotdeauna fișierul functions.php, dar în majoritatea cazurilor este necesar. Trebuie plasat în directorul cu tema corespunzătoare. Vă rugăm să rețineți că, dacă acest fișier este prezent în folderul șablon, atunci va fi luat în considerare la inițializarea temei. Funcționează ca un plugin. Și va îndeplini astfel de funcții pe care i le oferiți.

Scopul principal al fișierului functions.php este de a defini funcțiile de personalizare disponibile în zona de administrare pentru o anumită temă. Adică toate funcțiile pe care le introduceți în functions.php vor fi afișate în panoul de administrare, sau pe pagina pentru utilizator. De obicei, aceasta este schimbarea schemei de culori pentru un site WordPress, schimbarea fontului și multe altele. Dar există multe utilizări pentru acest fișier. Cu toate acestea, aceasta este o cu totul altă poveste...

Caracteristicile fișierelor șablon php

Fișierele în format PHP vor fi responsabile pentru părțile individuale ale site-ului. Acestea definesc atât paginile constitutive, cât și titlurile, categoriile și alte secțiuni care vor fi afișate utilizatorului. Deoarece acum ești creatorul temei, doar tu vei determina care și câte fișiere șablon să alegi. După selectarea lor, în panoul de administrare vor apărea noi funcții. Cu cât alegi mai puține fișiere, cu atât site-ul va funcționa mai repede, dar va avea mai puține funcționalități. Gândiți-vă bine la ce fișiere aveți nevoie și de care vă puteți descurca.

Dacă doriți să adăugați o temă minimă pe site sau să încercați propriul aspect PSD, atunci aveți nevoie doar de două fișiere în directorul șablonului:

1. stil.css
2. Index.php

Webmasteri cu experiență reușesc să schimbe fișierul index.php în așa fel încât doar să fie suficient să faci setări pentru subsol, bară laterală, căutare, arhivă, categorii, pagini etc. Dar mai bine încerci să faci un șablon WordPress în care fiecare fișierul va îndeplini funcția respectivă.

Chiar dacă nu specificați accidental un fișier șablon, WordPress va adăuga automat propriile setări implicite pe site. De exemplu, dacă nu adăugați un fișier responsabil pentru comentarii, atunci motorul va găsi propriile versiuni ale acestei funcții în directoare - de exemplu, wp-comments.php. Apoi, comentariile „străine” se vor prăbuși în structura site-ului dvs., care nu va îndeplini cerințele șablonului. Pentru a preveni acest lucru, trebuie să adăugați toate fișierele principale pentru a afișa diferitele componente ale paginii:

• header.php - responsabil pentru antetul site-ului;
• sidebar.php - bare laterale;
• footer.php - subsolul resursei (partea inferioară);
• comments.php și comments-popup.php sunt comentarii.

După generarea fiecăruia dintre aceste fișiere, pentru ca site-ul să înceapă să le afișeze, trebuie să introduceți datele pentru ele în fișierul principal index.php al șablonului. Pentru a face acest lucru, specificați în index.php etichetele care duc la fișierele numite. De exemplu:

• pentru a adăuga un fișier de antet al site-ului (header.php) scrieți eticheta

  etichetă șablon get_header();

• pentru subsol este similar, dar în loc de antet, specificați subsol etc.

Un exemplu de includere a unuia dintre fișierele șablon în index.php ar arăta astfel: . Va trebui să căutați fiecare dintre fișierele șablon cheie specificate pentru informații separate. Găsiți manuale pentru fiecare fișier, precum și mostre, astfel încât să înțelegeți toate funcțiile prescrise în șabloane.

Alegerea funcționalității șablonului

În timp, te vei confrunta cu o dilemă - ce tip de șablon să alegi. Motorul oferă o alegere. Fie puteți alege un șablon cu ierarhia șabloanelor conectată, fie un aspect cu etichete condiționate.

Prima variantă a fost deja luată în considerare. Toate fișierele php șablon sunt ierarhia șabloanelor. Adică, urmând regulile acestei ierarhii, generați treptat fișiere de aspect separate. Astfel, veți crea un șablon cu drepturi depline dintr-un număr de componente php funcționale. Ierarhia în acest caz funcționează pe principiul încărcării la cerere. De exemplu, dacă aveți un fișier de categorie (category.php) și utilizatorul l-a solicitat, atunci această componentă specială a site-ului va fi încărcată în browser. Dacă nu, atunci fișierul șablon de cheie index.php va fi încărcat.

Astfel, puteți modifica aspectul pentru părți individuale ale site-ului folosind principiul Ierarhiei șabloane. Fiecare pagină are propriul său ID specific. Adăugați fișierul categorie-6.php în directorul de teme și când solicitați o categorie cu un ID de 6, acest design se va deschide. Dacă nu este acolo, atunci setările vor rămâne standard - index.php se va extinde.

Uneori, principiul ierarhiei șablonului nu este suficient pentru a oferi cea mai confortabilă afișare a șablonului. În acest caz, programatorii recurg la utilizarea celui de-al doilea principiu - introduc etichete condiționate. Aceste etichete verifică site-ul pentru anumite condiții, iar dacă acestea nu sunt îndeplinite, îi schimbă aspectul. Adică, aceste etichete funcționează pe principiul dacă/altfel (dacă/atunci). Deci nu trebuie să adăugați o mare de fișiere php cu numărul fiecărei categorii, dar puteți scrie condițiile pentru fiecare ID o dată.

Cum este aspectul aspectului PSD în WordPress

Unii oameni le place să creeze mai întâi un aspect al viitorului design folosind diverse programe și abia apoi să îl transfere într-un anumit motor. Acest lucru este cu adevărat convenabil, deoarece unele aplicații vă permit să generați un design excelent fără nicio abilități. Dacă aveți deja un fișier psd și doriți să îl faceți sub motorul WordPress fără a utiliza cod, atunci puteți folosi ajutorul unuia dintre serviciile populare.

Vă rugăm să rețineți că acesta este un serviciu plătit, deoarece șablonul va fi doar jumătatea dvs. Comandă un astfel de serviciu doar ca ultimă soluție, dacă aspectul ți se pare bun, dar nu mai ai puterea să-l inventezi. Există mulți programatori care sunt gata să transfere PSD pe WordPress literalmente peste noapte la un preț mic.

PSD este un fișier din aplicația Photoshop. Este ca o reprezentare grafică a designului tău. Pentru a face acest lucru, trebuie să adăugați un marcaj html într-un editor de text. Treptat, veți schimba fiecare dintre punctele acestui marcaj, obținând rezultatul final, care este afișat pe aspect. Indicați imediat centrarea șablonului dvs., precum și dimensiunile diferitelor părți ale acestuia.

Următorul pas este să adăugați imagini de fundal. De asemenea, le puteți face singur folosind aceeași aplicație Photoshop. Cea mai ușoară opțiune este de a crea imagini de fundal în gradient. Apoi, începeți să creați sigla. Rezolvați treptat toate solicitările care au apărut - ajustați antetul site-ului, subsolul, bara laterală și toate părțile sale, conform aspectului. Nu uitați să adăugați fișiere șablon importante în directorul său, astfel încât site-ul să se încarce conform cerințelor dumneavoastră.

Numai în acest fel, învățând treptat elementele de bază ale diferitelor limbaje de programare, vei putea învăța în mod independent cum să alcătuiești un site. Nimeni nu spune că vei reuși azi sau mâine. Poate că vă vor lua luni de zile pentru a înțelege toate caracteristicile procesului de aspect. Dar nu vă faceți griji - pentru unii durează ani. Acum știți procedura aproximativă pentru crearea unui șablon de la zero, precum și transferul aspectului PSD într-o temă gata făcută pentru o resursă de Internet pe motorul WordPress.

Bună ziua. Cel mai probabil ați auzit deja de mai multe ori că motorul de căutare Google a început să acorde atenție modului în care arată site-ul pe dispozitivele mobile. Și dacă designul nu este adaptat, atunci un astfel de site este clasat mai prost. Și asta nu este bine. Prin urmare, astăzi vreau să vă spun ce este aspectul responsive și cum să îl implementați pe un site WordPress.

După cum am scris mai sus, din 21 aprilie 2015, Google a clasat mai bine acele site-uri care sunt adaptate pentru dispozitive mobile: telefoane, smartphone-uri și tablete. Prin urmare, este foarte important să respectați regulile dacă doriți cele mai înalte linii în rezultatele căutării și, în consecință, mai mult trafic.

În general, porniți muzica și începeți să studiați mini-instrucțiunea pentru adaptarea designului pentru dispozitive mobile.

Literal acum o săptămână, după ce am stat la computer câteva zile, am realizat în sfârșit afișarea corectă și de înaltă calitate a acestui blog pe toate dispozitivele mobile. Puteți vedea singuri accesând acest articol (sau oricare altul) prin, de exemplu, un smartphone.

De asemenea, pentru a crea o versiune mobilă, există multe plugin-uri și servicii diferite. Am vorbit deja despre unul dintre aceste pluginuri mai devreme, în . O puteți citi, vă va fi de folos, pentru că. poate fi folosită și această opțiune, este destul de potrivită pentru prima dată.

Pe lângă pluginuri și servicii, există și următoarele tipuri de creare a unei versiuni mobile:

• Site/versiune individuală
• Tehnologia RES
• Aspect adaptiv

Nu vom analiza fiecare metodă, pentru că. nu este nevoie de asta. Personal, pentru mine, am ales a 4-a metodă, adică aspectul adaptiv, motiv pentru care acest articol va fi discutat în acest articol. Aș dori să vă avertizez imediat că pentru a adapta site-ul veți avea nevoie de cunoștințe minime de html, css și web design.

Deși, în orice caz, puteți cere ajutor de la specialiști, inclusiv de la mine.

Dispozitiv adaptativ pentru a face-o singur

Recent, acest termen a fost pe buzele aproape tuturor celor care sunt cumva conectați cu construirea de site-uri web. Dar ce este? Aspectul responsive este un design web obișnuit, dar capabil să se adapteze la orice rezoluție a ecranului, inclusiv dispozitive mobile, pentru o vizualizare mai convenabilă a paginilor site-ului.

Care este frumusețea designului responsive?

1. Nu este nevoie să creați un design nou/separat.
2. Nu este nevoie să creați un site separat.
3. Implementare relativ simplă.
4. Google iubește site-urile responsive 🙂

Pentru a ne adapta, vom folosi specificația pentru CSS3 numită interogări media. Cu ajutorul acestei reguli, vom putea crea diferite opțiuni pentru afișarea unui element al site-ului pentru diferite rezoluții sau dispozitive. Este foarte confortabil!

Dar, înainte de a ne „focui” în stiluri, trebuie să mergeți la fișierul header.php și la eticheta introduceți următoarea metaetichetă importantă care permite dispozitivului să ajusteze lățimea site-ului la dimensiunea ecranului:

Acum, pentru început, vom adapta containerul (div „a), care afișează toate elementele site-ului, antetul și subsolul, iar restul vom lăsa pentru următoarea parte a articolului.

Deci, în primul rând, trebuie să analizăm șablonul și să colectăm câteva date, și anume, să stabilim identificatorul blocului dorit și lățimea sa inițială. Pentru a face acest lucru, vă recomand să utilizați funcția „Vizualizare cod element” din Chrome sau „Panoul pentru dezvoltatori” din FireFox - foarte convenabil. Voi folosi prima opțiune și voi lua un șablon de test care nu este încă adaptat și voi arăta totul pe el.

După cum putem vedea din imaginea de mai sus, în cazul meu se numește containerul „#container”și are o lățime de 960px.

Dar ce ne oferă asta? Și totul este foarte simplu. Lățimea containerului nostru principal este primul punct în care trebuie să scriem o interogare media. Și pentru aceasta trebuie să mergeți la fișierul cu stiluri, de obicei Style.css și, la sfârșit, să scrieți următoarea bucată de cod:

Ecran @media și (lățime maximă: 960px) (solicitare conținut)

Adică intră în lățimea maximă a site-ului tău, în cazul meu este, repet, 960px Mărimea ta poate fi complet diferită.

După aceea, trebuie să completăm noi valori de bloc, astfel încât acestea să se adapteze la rezoluții mai mici de 960 px lățime. Totul este foarte simplu! Pentru a începe, în loc de textul „solicitați conținut”, introduceți următoarele:

Img (lățime maximă: 100%; înălțime: automat;) /*adaptare imagine*/ #container (lățime: 100%; înălțime: automat;) /*adaptare container*/

De asemenea, pe lângă adaptarea containerului, setăm imediat valorile pentru imagini pentru a le face elastice și să nu le permită să se întindă mai mult decât lățimea ecranului.

Deci, salvați fișierul Style.css, actualizați site-ul și vedeți următoarele:

Adică, după cum putem vedea din captura de ecran de mai sus, site-ul s-a micșorat automat la lățimea dorită a ecranului, în cazul meu 662px. Este grozav, nu-i așa? Și dacă nu s-a întâmplat nimic, atunci recomand să scrieți regula!importantă pentru lățimea containerului, adică se va dovedi:

#container (lățime: 100%!important; înălțime: auto;) /*personalizare container*/

Pentru a verifica adaptarea folosesc funcția aceluiași panou „Vizualizare cod element”.

De asemenea, după adaptarea containerului, site-ul dvs. poate începe să se afișeze incorect. Pălăria, bara laterală, subsolul etc. se pot muta. - asta este normal! Pentru că este necesar să se efectueze această operațiune cu aproape toate elementele site-ului.

În captura mea de mai sus, conținutul articolului și bara laterală sunt afișate corect, deoarece lățimea lor este specificată în %, ceea ce ne permite să ne adaptăm automat la lățimea site-ului în ansamblu. Dar, în majoritatea cazurilor, bara laterală, ca și alte elemente, este scrisă în pixeli și, prin urmare, este necesar să le adaptați separat la lățimea site-ului.

Dar despre asta vom vorbi cu tine în următoarele articole din seria „Aspect adaptiv al site-ului pe WordPress”. Și acum în fișierul de stil ar trebui să aveți:

@media ecran și (max-width:960px) ( img (max-width: 100%; height: auto;) /*personalizare imagine*/ #container (lățime: 100%; înălțime: auto;) /*container customization* / )

Inițial, aveam de gând să scriu un articol lung în care să povestesc pe deplin și să arăt clar cum să faci un design adaptiv dintr-un design obișnuit, dar apoi mi-am dat seama că acest lucru nu este recomandabil. Este mult mai bine să percepi treptat informația și să o pui imediat în practică, ceea ce chiar te sfătuiesc să faci.

Crearea unei teme pentru Wordpress, poți merge în mai multe moduri. Puteți scrie cod de la zero, puteți edita o temă gata făcută sau puteți utiliza o temă specială cadru. În această revizuire, vom lua în considerare a treia opțiune, care, pe de o parte, nu vă limitează imaginația la o temă deja creată și, pe de altă parte, vă permite să scăpați de operațiunile de rutină concentrându-vă pe design și nu despre codificare plictisitoare.

Cu toate acestea, în ciuda avantajelor evidente ale utilizării cadrelor, nu există o opinie fără echivoc în rândul experților despre acestea. Unii oameni cred că cadrele oferă o creștere semnificativă a vitezei și calității dezvoltării. Alții cred că limitează dezvoltatorii, încadrându-i într-un anumit cadru. Și dacă trebuie să rezolvați o sarcină extraordinară, atunci eforturile depuse pentru a ocoli funcționalitatea cadrului îi anulează avantajele. În plus, timpul petrecut pentru mastering poate fi comparat cu timpul petrecut pentru codare (cu toate acestea, este clar că în cazul unui cadru acesta va fi un cost unic).

Oricum ar fi, alegerea utilizării cadrului vă aparține. Doar tu, pe baza experienței tale și a sarcinii pe care o ai în fața ta, poți decide dacă îl folosești sau nu. Și pentru asta, trebuie să o „simți”, ceea ce ne propunem să facem, folosind pentru început, desigur, unul dintre produsele gratuite.

Cherry Framework de TemplateMonster

În ciuda istoriei sale scurte, Cadrul Cherry a reușit să câștige o mulțime de feedback pozitiv.

Cea mai recentă, a patra lansare a acestui produs vă permite să dezactivați opțiunile inutile, lăsând active doar pe cele care sunt necesare în acest caz particular. Puține cadre se pot lăuda cu o astfel de oportunitate, iar cei care au apreciat-o deja este puțin probabil să o poată refuza pe viitor.

Caracteristicile cheie ale cireșului:

• Structură modulară independentă vă permite să utilizați componentele Cherry separat, ca instrumente independente. Tom J. Nowell din echipa Automattic este convins că fiecare cadru decent ar trebui să aibă această capacitate;
• Editor și set de shortcodes, permițându-vă să adăugați diverse obiecte oriunde pe pagină;
• Posibilitatea de a fixa poziția unui element (logo, meniu sau bară de căutare) față de antet sau subsol;
• Minificator CSS- un instrument inovator care vă permite să combinați CSS din fișiere diferite într-unul singur și să îl minimizați pentru o încărcare mai rapidă;
• Opțiuni de backup- o opțiune foarte convenabilă care vă permite să „retroduceți” la starea anterioară dacă nu sunteți mulțumit de rezultatul editării;
• Un mecanism de plugin care oferă o soluție rapidă la diferite sarcini. Acesta este adăugarea de slideshow-uri, bare laterale și diverse tipuri de note - pentru recenzii, portofolii etc.;
• Compatibilitate cu instrumente terțe;
• Capacitatea de reacție și compatibilitatea WPML sunt două dintre caracteristicile vitale de astăzi care vă permit să creați site-uri multilingve adaptate oricărui dispozitiv, de la smartphone-uri la PC-uri.

Hybrid Core de ThemeHybrid

Miez hibrid ușor de instalat și configurat cadru, care vă permite să dezvoltați proiecte complexe fără a recurge la cantități mari de codare. Este compatibil cu standardul Schema, care asigură o bună optimizare SEO. În plus, Hybrid Core are multe caracteristici care simplifică foarte mult munca dezvoltatorului. Printre acestea se numără:

• Un pesmet care funcționează excelent pe orice pagină, inclusiv pe tipuri de postări personalizate.
• Versiune corectată și optimizată a codului scurt, oferind control deplin asupra galeriei de imagini
• Media Grabber este o caracteristică care vă permite să capturați orice conținut media (inclusiv dintr-o notă) și să îl utilizați oriunde pe site.
• mesaje, permițându-vă să creați șabloane pentru diferite tipuri de note, fără a se limita la pagina în ansamblu.
• O extensie a caracteristicii standard de paginare care vă permite să controlați paginarea materialului pe pagina cu rezultatele căutării, paginile arhivate etc.
• Încărcarea automată a suportului multilingv atât pentru temele părinte, cât și pentru cele pentru copii.

Gantry de la RocketTheme

Gantry este o încercare a profesioniștilor de la RocketTheme de a combina toate realizările lor în dezvoltarea temelor WordPress într-un singur cadru. Și încercarea, trebuie să spun, este foarte reușită. Construit folosind o grilă dinamică, acest cadru foarte ușor acceptă SCSS, CSS și LESS.

Aruncă o privire la lista cu principalele caracteristici ale lui Gantry:

• Managerul de layout vă oferă libertate deplină în designul layout-ului.
• Sistem de management al conținutului care vă permite să creați, editați și publicați conținut.
• Un generator de meniuri vizuale care acceptă meniuri cu mai multe niveluri și crearea de elemente de meniu cu pictograme.
• mega meniu vă permite să creați meniuri derulante non-standard, în care nu numai link-uri, ci și orice html pot acționa ca sub-articole - tabele, formulare, liste, text formatat
• O interfață de administrare construită folosind Ajax, care funcționează incredibil de rapid.
• Motor puternic de șabloane Twig.
• Gantry are, de asemenea, un configurator orientat spre YAML, bare laterale glisante, capabilități puternice de moștenire și o selecție de tot felul de pictograme și fonturi.

Pistă lângă Parallelus

pistă de decolare este o altă soluție open source concepută pentru a facilita dezvoltarea temelor WordPress. Temele create cu acesta pot fi distribuite ca produs independent, independent de cadrul în sine.

Principalele caracteristici ale pistei:

• Generator de teme pentru crearea, copierea și editarea temelor.
• Creator de teme- conceput pentru a crea panouri de administrare și înregistrări de tip non-standard (personalizat).
• Structură modulară care vă permite să adăugați funcționalitatea necesară folosind plugin-uri într-un singur clic.

Wonderflux de Jonny Allbut

Încă una cadru open sourceîn selecția noastră - Wonderflux. Un produs de calitate care vă va permite să economisiți timp de dezvoltare fără a pierde din eficiență.

Caracteristici cheie Wonderflux:

• Aspect dinamic, care asigură că tema se adaptează la orice dimensiune a ecranului.
• Opțiuni de marcare flexibile care pot fi modificate din mers.
• Colecție de peste 100 de coduri scurte, care vă permite să încorporați cod sau conținut de orice tip în temă
• Setări administrative care oferă o configurare ușoară a site-ului.
• Compatibilitatea cu pluginurile Wordpress vă permite să rezolvați aproape orice sarcină
• Un validator de cod care asigură conformitatea cu standardele web, care este o condiție prealabilă pentru optimizarea SEO de înaltă calitate.

Unyson de ThemeFuse

Unyson este un cadru bogat în funcții, conceput atât pentru dezvoltatori, cât și pentru designer. Vă permite să editați frontend-ul unui site sau blog din panoul administrativ și are o fereastră de previzualizare în care puteți evalua imediat modificările efectuate.

Caracteristici cheie:

• Creator de pagini glisați și plasați.
• Content Demo Install - O extensie care vă permite să afișați conținutul exact așa cum arată atunci când editați.
• Peste 20 de opțiuni pentru a simplifica crearea de containere, file și formulare pentru panoul de administrare
• Bare laterale dinamice care pot fi personalizate pentru fiecare pagină.
• Backup automat direct din panoul de administrare. Copierea programată regulată (zilnic, săptămânal, lunar etc.) este posibilă.
• Pesmeturi (alias pesmet) care adaugă o navigare simplă și clară
• Modul de prezentare de diapozitive care acceptă atât conținut foto, cât și video.

Desigur, aceasta nu este o listă completă a tuturor caracteristicilor Unyson. Menționăm și despre special module pentru SEO, formulare de contact, portofoliu, calendar de evenimente, evaluare cu stele, integrare în rețelele sociale și Flickr.

munca de presa

Cadru Wordpress gratuit creat folosind HTML5 și CSS3 și destinat unei game largi de utilizatori - dezvoltatori, designeri, bloggeri.

Iată câteva dintre caracteristicile sale:

• Editor front-end - abilitatea de a edita interfața utilizând un editor drag-and-drop.
• Un set de plugin-uri care extind funcționalitatea de bază a cadrului pentru a rezolva o anumită problemă.
• Media Queries - un modul responsabil pentru aspectul optim pe orice dispozitiv.
• Prezența fișierelor PSD în kit pentru editarea temei, de exemplu, schimbarea siglei sau a elementelor grafice.

Reverie de ThemeFortress

Un cadru multifuncțional conceput pentru a crea bloguri, sisteme de management al conținutului, cărți online sau orice alte tipuri de site-uri. Poate fi folosit atât ca instrument principal, cât și ca instrument auxiliar pentru crearea temelor derivate.

Caracteristici cheie:

• Cadrul a fost creat pe baza Fundației ZURB și moștenește toată flexibilitatea și puterea acestuia.
• Microformatul HTML5 și hNews oferă cod curat, ușor de înțeles și ușor de citit. Pentru etichetele HTML5, puteți utiliza funcții personalizate Wordpress.
• Are mecanisme de adaptare la dimensiunea ecranului, așa că arată la fel de bine atât pe smartphone-uri, cât și pe PC-uri.
• Urmează conceptul de minimalism, oferind doar două widget-uri și două meniuri personalizate.
• Dacă trebuie să faceți modificări la design, este oferită editarea directă a SCSS și CSS personalizat.

Din minusuri este util de remarcat optimizare SEO parțială deci se recomandă utilizarea unui plugin suplimentar în acest scop.

Vafpress

Cu Vafpress, crearea părții administrative (backend) a unei teme WordPress este mai ușoară ca niciodată.

Pentru a face acest lucru, dezvoltatorul are:

• Descărcați scriptul de control care vă permite să descărcați numai blocurile necesare fără a supraîncărca interfața cu cod redundant.
• Suport pentru diferite tipuri de câmpuri: text, liste cu opțiuni multiple, casete de selectare (căsuță de selectare), butoane radio (buton radio) și altele
• Puternic generator de meniuri pe mai multe niveluri. Utilizează XML pentru a construi, care poate fi apoi convertit într-o matrice PHP.
• Metabox Builder - vă permite să scrieți metabox în matrice PHP.
• Suport pentru grupuri de câmpuri repetate.

Subliniere

Unii dezvoltatori consideră Underscore un cadru cu drepturi depline, deși unii, inclusiv autorii înșiși, își poziționează produsul ca un fel de temă progenitoare pentru crearea unor teme complete. Oricum ar fi, utilizarea Underscores va economisi semnificativ timpul și efortul petrecut pentru dezvoltarea temelor WordPress.

Principalele caracteristici ale Underscore:

• Posibilitatea de a crea anteturi personalizate.
• Etichetele personalizate din șabloane evită duplicarea codului.
• Script pentru a converti meniul într-o listă derulantă comutabilă pentru afișare pe dispozitivele mobile.
• Două șabloane de marcare cu o bară laterală poziționată la dreapta sau la stânga.
• CSS rațional care facilitează procesul de dezvoltare.
• 404 pagini.

Concluzie

După cum puteți vedea, numărul de cadre demne de atenție este destul de mare și, poate, imediat după revizuirea noastră, veți decide să încercați unul dintre ele în următorul proiect.

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

Poate fi necesar 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ă înțelegeți cum sunt temele. ale acestui CMS sunt dispuse din interior.

Asadar, haideti sa începem.

Distribuiți codul între fișiere

1. Descărcați șablonul și dezarhivați-l în folderul cu teme WordPress (adresă ca blog_url_wordpress/wp-content/themes/). Dacă doriți, redenumiți folderul cu tema după bunul plac. De exemplu, șablonul meu se află la wordpress_blog_url/wp-content/themes/MyTheme/.

2. Redenumiți fișierul stiluri.cssîn 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 ați putea ghici, acestea sunt informații de serviciu despre temă: titlu, autor, descriere, licență, versiune etc. Puteți înlocui părțile potrivite ale liniilor cu ale dvs., adică setați calitatea de autor, versiunea, descrierea și alte date.

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

4.1. LA 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. LA index.php lipiți codul blocului principal (din linie linie cu linie ).

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

4.4. LA 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 a apărut î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.

Adaptează antetul

Acum vom începe de la un șablon static pentru a crea o temă dinamică î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, cel mai adesea apelând 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ă setăm 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ă care asigură funcționarea în pagină a stilurilor, pluginurilor și scripturilor.

2. Continuați cu editarea fișierului index.php. La început, scrie

,

Liniile apelează fișiere antet, bară laterală și subsol.

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 pagină pentru a afișa toate materialele plasate pe site, trebuie să convertiți șablonul în continuare.

Dinamizarea meniului de sus

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

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

astfel incat sa arate asa:

Top articole similare