Aspect pentru WordPress. Crearea unei teme WordPress simple
De la autor: dacă astăzi alegi profesia de designer de layout și decizi să lucrezi într-un studio web, atunci fii pregătit pentru faptul că doar cunoștințele despre HTML și CSS și despre aspectul site-ului în sine nu mai sunt suficiente astăzi. Realitățile de astăzi necesită cunoștințe suplimentare, de exemplu, aspectul pentru WordPress sau alt CMS popular. În acest articol, vom încerca să aflăm cum diferă aspectul site-ului web pentru WordPress de doar aspectul site-ului web și cum să facem un aspect al site-ului web pe WordPress.
Ce ar trebui să știe un designer modern de layout?Vremurile în care un web designer avea nevoie doar să cunoască HTML și CSS au trecut de mult. Anterior, pentru a obține un loc de muncă ca designer de layout, aveai nevoie doar de capacitatea de a lucra cu un aspect PSD gata făcut și de a așeza o pagină conform aspectului furnizat. Și au fost chiar și momente în care doar cunoașterea HTML era suficientă... dar asta, desigur, a fost cu foarte mult timp în urmă, în acele zile când totul era alcătuit folosind tabele.
Acum, dacă deschideți site-uri de locuri de muncă și introduceți interogarea de căutare corespunzătoare, veți vedea că de multe ori poziția modernă a unui designer de layout necesită cunoștințe și responsabilități suplimentare care anterior au fost atribuite în întregime unui programator. De exemplu, aceasta este cunoștințele despre JavaScript și jQuery, cunoștințele de bază ale PHP sau chiar MySQL și capacitatea de a face layout-uri pentru CMS-uri populare. Doar că cunoștințele despre HTML și CSS nu interesează nimeni astăzi.
Ei bine, deoarece WordPress este acum cel mai popular CMS, nu este surprinzător că mulți angajatori au nevoie de abilități de lucru cu WordPress și capacitatea de a face layout WordPress. Deși, în opinia mea, aspectul site-ului pentru WordPress este încă opera unui programator, nu a unui designer de layout, dar, după cum se spune, timpul și realitățile pieței ne dictează propriile reguli, pe care doar le putem urma.
Aspect WordPressDacă nu ai întâlnit încă aspectul unui site pe WordPress, ești îngrijorat și te întrebi dacă vei reuși, pentru că nu ești programator, atunci voi încerca să te liniștesc. Aspectul pe WordPress nu este prea complicat și va necesita adesea să cunoașteți doar elementele de bază ale programării în PHP.
WordPress are o documentație excelentă, inclusiv traduceri, ceea ce face mult mai ușor lucrul cu acesta și crearea unui site web pe WordPress. Adesea, va fi suficient să apelați funcțiile WordPress în locul potrivit în șablonul HTML personalizat, care poate fi adesea copiat direct din documentație. De fapt, aceasta este, în mare, toată diferența dintre aspectul pentru WordPress și doar aspectul unui șablon.
De exemplu, ne confruntăm cu o sarcină banală - să afișam postări pe pagină. De acord, nu este deloc dificil să căutați pe Google cea mai simplă interogare Wordpress pentru ieșirea postărilor și să citiți în documentația despre ciclul WordPress și să folosiți un exemplu de ciclu din aceeași documentație în aspectul site-ului dvs.
Desigur, dacă aveți nevoie de aspect și crearea unui aspect non-standard sau complex, atunci nu vă puteți lipsi de cunoștințe solide despre WordPress și programare, dar toate acestea vin cu practică. După ce ați realizat aspectul a câteva site-uri WordPress simple, veți înțelege și veți putea să configurați și să implementați proiecte mai complexe pentru dvs. și să creați machete WordPress complexe și non-standard.
Ei bine, dacă este mai convenabil pentru cineva să perceapă informații de pe ecran, atunci există și aici o alegere - multe lecții și cursuri diferite, atât plătite, cât și gratuite. Da, nu trebuie să mergi departe. Dacă sunteți în căutarea unor lecții de layout pentru WordPress, atunci cu siguranță îl veți găsi util. După ce ai studiat cursul, vei învăța cum să faci layout WordPress și, în practică, vei aranja trei teme diferite pentru WordPress.
În general, pot spune că învățarea cum să codificați pentru WordPress este destul de simplă. În câteva zile de la începerea studiului, veți putea să vă creați primul site simplu. Ei bine, într-o săptămână sau două ar putea fi un site web și un ordin de mărime mai complicat. Deci totul este în mâinile tale. Ei bine, cu asta îmi iau rămas bun de la tine. Ne mai vedem!
Internetul devine din ce în ce mai mobil. Deja, pe unele dintre site-urile mele ponderea traficului mobil depășește 40%. În plus, Google și chiar Yandex au declarat că în rezultatele căutării mobile acordă preferință acelor site-uri care sunt afișate corect pe dispozitivele mobile. Deci, dacă cineva nu a făcut acest lucru încă, este timpul să vă gândiți la ușurința de utilizare a site-ului dvs. pentru acest public. De aceea am decis să fac un șablon adaptiv pentru acest blog - un site web, dar să nu-l schimb deloc, ci pur și simplu să-l refac pe cel existent cât mai repede și ușor. În același timp, vom verifica dacă acest lucru va duce la o creștere a traficului. După cum sa dovedit, acest lucru nu este deloc dificil de făcut, trebuie doar să faceți modificări minore la cod și totul este disponibil direct din zona de administrare WordPress.
Și așa, avem designul vechi obișnuit, care funcționează foarte strâmb pe smartphone-uri, tablete etc., și îl facem modern pentru confortul utilizatorilor moderni.
Să începem...
Secretele layout-ului adaptivMai întâi, trebuie să scrieți o metaetichetă care va calcula clar lățimea ecranului.
| 1 |
Scriem asta în antetul site-ului, în cazul nostru este fișierul header.php, pe care îl găsim în panoul de administrare, elemente de meniu Aspect => Editor. 
Apoi, facem aproape toate elementele principale ale site-ului cu o anumită lățime de cauciuc, adică este mai bine să setați lățimea ca procent. Deși, desigur, puteți specifica o anumită lățime de bloc pentru o anumită lățime a ecranului. Regula @media ne va ajuta în acest sens. Vă permite să scrieți stiluri separate într-un fișier CSS pentru același element la diferite lățimi de ecran. Am decis să combin: nu modificați întreaga versiune desktop, ci setați lățimea blocului ca procent pentru anumite ecrane.
De exemplu, lățimea implicită a site-ului meu este de 1180 de pixeli. Iar la sfârșitul fișierului de stil css (care poate fi editat și prin panoul de administrare, ca și cel anterior), am adăugat următoarea regulă:
| 1 2 3 4 5 6 | Ecran numai @media și (lățime maximă: 1200px ) ( #pagină ( marjă: 10px automată; lățime: 98% ; ) ) |
Ecran numai @media și (lățime maximă: 1200px)( #pagină (marja: 10px automată; lățime: 98%; ) )
Ceea ce face ca, cu lățimea ecranului mai mică de 1200 de pixeli, lățimea blogului să fie de 98%.
Apoi am două coloane: în stânga cu textul principal, a cărui lățime este de 660 de pixeli, iar în dreapta - bara de site, a cărei lățime este de 300 de pixeli. Așa că am adăugat și o regulă care le face și cauciucate, dar numai când lățimea monitorului este mai mică de 1030 pixeli.
| 1 2 3 4 5 6 7 8 9 | Ecran numai @media și (lățime maximă: 1030px ) ( #primar ( lățime : 65 % ; ) # secundar ( lățime : 32 % ; ) ) |
Ecran numai @media și (lățime maximă: 1030px)( #primar ( lățime: 65%; ) #secundar ( lățime: 32%; ) )
| 1 2 3 4 5 6 7 | Ecran numai @media și (lățime maximă: 760 px ) ( #primar , #secundar ( lățime : 95 % ; float : niciunul ; margine : 10 px automat ; ) ) |
Ecran numai @media și (lățime maximă: 760 px)( #primar, #secundar ( lățime: 95%; float: niciunul; margine: 10px automat; ) )
Și pentru o lățime de 480 de pixeli sau mai puțin, a trebuit să mutăm imaginile din fluxurile de știri în centru și să le setăm și lățimea ca procent.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | Ecran numai @media și (lățime maximă: 480 px) ( .blog .entry-image, .search .entry-image, .archive .entry-image (float: none ; margin: 0px auto ; width: 90% ; ) . imagine-img (înălțime: automată; lățime: 100%;)) |
Ecran numai @media și (max-width: 480px)(.blog .entry-image, .search .entry-image, .archive .entry-image (float: niciunul; margine: 0px automat; lățime: 90%; ). imagine-img (înălțime: automată; lățime: 100%; ))
Asta este aproape tot - avem un șablon WordPress receptiv care se afișează corect pe toate dispozitivele, poți, desigur, să te joci în continuare cu fonturi și indentări - le crește în unele locuri, le reduce în altele. Este posibil să aveți și alte blocuri de site a căror lățime trebuie să o modificați. Puteți verifica totul pur și simplu în timp ce stați la computer prin reducerea lățimii browserului. De asemenea, add-on-ul Firefox, Firebug, mă ajută foarte mult în acest gen de lucru, vă recomand să îl stăpâniți cu siguranță dacă intenționați să lucrați cu codul site-ului;
Adevărat, a mai rămas un defect - acesta este meniul. În unele cazuri, nu va necesita alte mișcări dacă, de exemplu, constă din câteva puncte, dar a trebuit totuși să o refac puțin.
Meniu adaptiv al site-uluiDeoarece există destul de multe elemente de meniu de blog, afișarea lor pe toate odată poate ocupa întregul prim ecran, ceea ce nu este întotdeauna bun. De aceea am decis să-l ascund pentru ecranele mai mici de 480 de pixeli și să-l extind în astfel de cazuri făcând clic pe el. Desigur, există și alte opțiuni:
- Ascunde o parte din ea și arată o parte din ea;
- Faceți o listă derulantă;
- Nimic de făcut.
Ascunderea nu este o problemă, doar că, cu o lățime dată, pentru un anumit bloc scriem afișare: niciunul și atât, dar pentru a o afișa mai târziu va trebui să adăugăm un mic script. Puteți găsi o mulțime de astfel de scripturi pe Internet, atât în javascript, cât și în jquery, vă voi arăta pe cel pe care l-am instalat pentru mine. Și l-am inserat și în header.php:
| 1 2 3 4 5 6 7 8 | < script language= "JavaScript" type= "text/JavaScript" >funcția showmobmenu() ( dacă (document.getElementById ("mobmenu2") .style .display == "bloc" ) ( document.getElementById ("mobmenu2") .style .display = "niciunul") else ( document.getElementById (" mobmenu2" ) .style .display = "bloc" ) ) |
funcția showmobmenu() ( if (document.getElementById("mobmenu2").style.display == "bloc") (document.getElementById("mobmenu2").style.display = "none") else (document.getElementById(" mobmenu2").style.display = "blocare") )
Adică a trebuit să introduc un link cu o imagine în codul site-ului, înainte de meniu, care este ascuns implicit, dar cu o lățime de 480 sau mai puțin este afișat, iar când dai clic pe el se deschide întregul meniu .
Png" alt="Meniu mobil"> !}
Și, de asemenea, modificați proprietatea float pentru elementele de meniu:
| 1 2 3 4 5 6 7 8 9 10 | @media numai ecran și (max-width: 480px ) ( #mobmenu2 ( display : none ; ) #mobmenu ( display : block ; ) .main-navigation li ( float : none ; ) ) |
ecran numai @media și (lățime maximă: 480px)( #mobmenu2( display: none; ) #mobmenu ( display: block; .main-navigation li ( float: none; ) )
Mai există o nuanță aici pe care am observat-o deja în proces: dacă meniul este ascuns de un script, adică folosind un buton în versiunea mobilă, atunci când lățimea crește (de exemplu, dacă rotiți smartphone-ul dintr-un poziție verticală la una orizontală), meniul principal nu mai este afișat. De aceea a trebuit să adăugăm o altă regulă pentru monitoarele de 481 de pixeli și mai mari.
| 1 2 3 4 | Ecran numai @media și (lățime minimă: 481px) ( #mobmenu2 ( afișare: bloc !important; ) ) |
Ecran numai @media și (lățime minimă: 481px)( #mobmenu2( display: block !important; ) )
Voi adăuga că !important crește prioritatea stilului - acest lucru este foarte convenabil atunci când stiluri diferite sunt atribuite aceluiași bloc în cazuri diferite.
Ei bine, asta este tot, acum avem cu siguranță un design WordPress receptiv convenabil. Desigur, aceleași reguli sunt potrivite pentru adaptarea aproape oricărui site web pe orice motor. Google spune acum că acest blog are un 99 din 100 pentru utilizarea mobilă. 
Acum vom vedea cum va afecta acest lucru utilizatorii de pe smartphone-uri sau tablete și dacă va exista o creștere a traficului de pe aceste dispozitive. Despre care voi scrie într-unul din articolele următoare.
Dacă ați avut deja o experiență similară, atunci împărtășiți-o în comentarii. Ei bine, toate întrebările pot fi puse și acolo...
Acest articol vă va arăta cum să creați cea mai simplă temă WordPress. Deși Codex oferă o documentație extinsă pe acest subiect, mi se pare un pic complex pentru un începător. Prin urmare, în acest „tutorial” vă voi spune principiile modului în care funcționează temele WordPress și vă voi arăta cum să adaptați un șablon HTML brut la acestea. În același timp, nu ți se cere să cunoști PHP, dar este bine dacă știi Photoshop și CSS pentru a crea un design.
1. Blog FrontendÎnainte de a începe, să aruncăm o privire la o temă standard WordPress și să înțelegem în ce constă. Să marchem elementele (antet, titlul postării, formular de căutare, navigare, subsol etc.).
Prima pagină standard ( index.php)
Single standard ( singur.php)
2. Aspecte PhotoshopPe baza aspectului temei standard, proiectați machete Photoshop pentru blogul dvs. De exemplu, folosesc GlossyBlue, una dintre temele mele gratuite. Descărcați demo.zip pentru a vedea fișierul Photoshop finalizat.
Odată ce designul PSD este gata, creați un șablon HTML+CSS pentru fiecare pagină. Urmând pașii din acest tutorial puteți folosi fișierele mele HTML GlossyBlue din demo.zip. După despachetarea arhivei, veți vedea index.html, single.htmlȘi pagina.html. În continuare le voi folosi pentru a le transforma într-un șablon.
De ce să creați mai întâi HTML static? Acest lucru se datorează în principal faptului că va simplifica foarte mult procesul de dezvoltare. De obicei creez un fișier HTML pentru fiecare șablon, verific valabilitatea acestora (marcaj HTML și CSS) în toate browserele. După aceea, tot ce mai rămâne este să tăiați și să lipiți codul WordPress. Deci nu mai trebuie să vă faceți griji cu privire la erorile din HTML sau CSS.
4. Cum funcționează o temă WordPress?Dacă mergeți la folderul de teme implicit ( wp-content/teme/implicit), veți vedea multe fișiere php (numite fișiere șablon) și un fișier stil.css. WordPress folosește de obicei mai multe fișiere șablon ( index.php , header.php, sidebar.php,Și footer.php).
Mai multe detalii în Codex: „Arhitectura site-ului” și „Ierarhia șabloanelor”.
5. Fișiere șablon duplicatCopiați folderul HTML din GlossyBlue în folder wp-conținut/teme. După aceea, mergeți la directorul de teme implicit, copiați comentarii.phpȘi searchform.phpîntr-un folder albastru lucios.
Accesați folderul tema implicit, deschideți fișierul stil.css. Copiați textul comentat la începutul fișierului și inserați-l în stil.css Teme GlossyBlue. Dacă doriți, puteți modifica titlul și informațiile despre autor. 
Acum trebuie să ne dăm seama unde să împărțim fișierele HTML în părți: header.php , sidebar.php și footer.php. Captura de ecran de mai jos arată o versiune simplificată a fișierului meu index, precum și principiul împărțirii acestuia.
Deschis index.html. Trebuie să tăiați secțiunea de sus până unde se termină, să o lipiți într-un fișier php nou și să salvați ca header.php. 
Accesați folderul de teme implicit, deschideți un nou header.php. Copiați și înlocuiți etichetele acolo unde codul php o cere: titlu, link, foi de stil, h1 și div class=description.
Meniul de navigare (wp_list_pages) Înlocuiți etichetele li din ul id=nav cu ;
Intoarce-te index.html, tăiați codul de unde începe formularul id=searchform până la eticheta de închidere div id=sidebar, plasați-l într-un fișier php nou și salvați ca sidebar.php.
- Înlocuiți formularul id=searchform cu tot conținutul cu .
- Înlocuiți etichetele din categoria li cu
- Înlocuiți etichetele li ale arhivelor cu
Intoarce-te index.html. Extrageți codul de acolo din div id=footer inclusiv cu eticheta div id=footer până la sfârșitul /html apoi puneți-l într-unul nou footer.php.
Postări recente Aici am folosit query_post pentru a afișa cele mai recente 5 postări de blog.
„Ultimele comentarii” „Ultimele comentarii” generate de plugin (inclus în folderul cu teme)
Acum în tine index.html Ar trebui să rămână doar div id=conținut. Salvați fișierul ca index.php. Introduceți rândurile: get_header , get_sidebar și get_footer în ordinea în care apar în șablon. 
Bucla afișează postări de blog secvenţial, pe baza setărilor dvs. Captura de ecran de mai jos ilustrează cum funcționează. Inițial, bucla verifică prezența înregistrărilor și dacă nu găsește niciuna, afișează mesajul „Negăsit”.
Accesați directorul de teme implicit, deschideți index.php. Copiați ciclul din cel standard index.php la al tău - între div id=conținut../div . După aceea, înlocuiți textul static cu etichete de șablon WordPress: data postării, titlul, categoria, comentariile, linkul următor și anterior.
Felicitări! Ați creat partea publică (partea principală a șablonului). Acum accesați panoul de administrare, accesați fila Design, ar trebui să vedeți tema GlossyBlue. Activați-l și accesați partea publică pentru a vedea rezultatul în acțiune.
15. Single.phpEste timpul să creați un șablon singur.php. Dacă doriți, puteți repeta pașii, transferând codul din tema standard. Dar mi se pare mai ușor să-l folosesc pe cel pe care tocmai l-am creat index.php, salvându-l ca singur.php. Deschis singur.php din tema standard și copiați etichetele șablonului în locurile necesare. Apoi, conectați comments_template . Următoarea captură de ecran arată modificările pe care le-am făcut:
Acum nou singur.php salvează cu nume pagina.php. Eliminați data intrării, formularul de comentarii, linkurile următoare/anterioare. Asta e, asta e tot - șablonul tău pagina.php gata .
17. Eliminarea fișierelor HTMLEliminați toate fișierele HTML din folder albastru lucios(nu vom mai avea nevoie de ele). Din punct de vedere tehnic, acest lucru este suficient pentru a crea o temă de bază WordPress. Poate ați observat că tema standard are mai multe fișiere PHP. Ei bine, de fapt, nu prea ai nevoie de ele dacă vrei o temă simplă. De exemplu, dacă căutare.php sau 404.php nu va fi în folderul cu teme, WordPress va folosi automat index.php pentru a afișa pagina. Citiți Ierarhia șabloanelor pentru mai multe detalii.
18. Șablon de pagină WordPressAcum, pentru exemplul final, vă voi arăta cum să utilizați șablon de pagină pentru a crea o pagină de arhivă care va conține o listă cu toate postările de pe blogul dvs. (utilă pentru o hartă a site-ului). Copie arhive.php din folderul cu tema standard. Eliminați codul inutil și obțineți ceva de genul acesta:
De la autor: site-ul SitePoint era deja plin de articole despre framework-uri WordPress, dar după cum veți vedea mai jos, există mult mai multe framework-uri: toate au propriile argumente pro și contra, fiecare temă are propriul stil de dezvoltare.
Tocmai stăteam la birou, mă scărpinam în cap și mă gândeam la cadrele WordPress. Înainte de a începe lucrul la articol, am petrecut zile, săptămâni, chiar luni studiind problema, gândindu-mă ce să scriu: textul trebuia să fie diferit de tot ceea ce fusese deja scris despre cadre.
Complet pierdut în gânduri, am avut o epifanie. Mi-a trecut prin minte că, atunci când oamenii scriu despre cadrele WordPress, tind să acopere doar elementele de bază... elementele de bază pe care dezvoltatorii comunității WordPress Meetup sunt specializați: cadre precum Genesis, Thesis sau WooCommerce.
De ce se întâmplă asta? Poate dezvoltatorii nu cred că totul este atât de complicat sau nu vor să scrie despre cadre care vor înceta în curând să fie dezvoltate. Sau dezvoltatorii au un termen limită strâns, iar dacă îl ratează, site-ul va scădea brusc în rezultatele motoarelor de căutare. Cine ştie.
Vreau să fac lucrurile diferit, așa că stai pe loc și fă-ți niște cafea. Astăzi ne vom uita la „Ghidul final pentru cadrele de teme WordPress”.
De ce „plin”? Definiția cuvântului englezesc înseamnă completitatea a ceva. Un sinonim poate fi „final”, „final”.
Ce sunt cadrele de teme WordPress?Înainte de a vă scufunda cu capul întâi în listă, este necesar să vorbim despre câteva cadre de bază. La urma urmei, este posibil să citești primul articol din viața ta despre cadre. Și nu aș vrea să te sperii ca să pleci fără să termini articolul meu. Dacă sunteți deja un veteran, puteți derula în jos până la lista de cadre.
Temele cadru sunt teme părinte în care o echipă sau un dezvoltator își adaugă propriile funcționalități care facilitează actualizarea temei și reutilizarea acesteia fără a afecta designul pentru un anumit site. Tema copilului își va stabili propriile stiluri, iar funcționalitatea va fi în cadrul principal.
Notă – cele de mai sus nu înseamnă că fiecare temă părinte este un cadru. Creatorii de șabloane oferă teme părinte cu sute de variații ale temei copil, dar cealaltă temă părinte nu folosește același cod (vă spun că sunt cadre când, din punct de vedere tehnic, nu sunt).
În depozitul WordPress, valoarea Teme Framework este asociată cu trei concepte: drop-in, stand-alone și șablon de temă părinte. Cred că este practic imposibil de explicat chiar mai simplu decât acolo. Așa că vă sfătuiesc să citiți cândva acest articol.
Ca parte a articolului nostru, voi acorda mai multă atenție ultimului termen „Șabloane de teme părinte” sau șabloane de teme părinte. Acest termen este cunoscut de majoritatea comunității de dezvoltatori și de publicul larg.
Diferite tipuri de cadre tematiceExistă cadre diferite și rezolvă diferite probleme în afaceri și design. Unele dintre ele sunt gratuite, altele sunt plătite.
Există așa-numitele cadre de bază, universale. Ele nu ocupă nicio nișă specifică, dar rezolvă o întreagă gamă de probleme, ajutând dezvoltatorii web și designerii din întreaga lume să creeze site-uri avansate cu răspuns rapid și a căror dezvoltare durează mult mai puțin timp atunci când folosesc cadre.
Unele cadre au durat mulți ani și ore nesfârșite de dezvoltare. Toate acestea au fost necesare pentru a crea un cadru cuprinzător, bine documentat, cu suport excelent.
Caracteristicile avansate ale unor astfel de cadre includ editori drag and drop front-end și back-end, shortcodes, dezvoltare pentru o varietate de dispozitive și șabloane.
Nu este de mirare de ce afacerilor online le place să folosească cadre. În acest moment, preferatul meu este SEO Design Framework, conceput pentru promovare în rezultatele căutării.
De ce să folosiți cadre?Bună întrebare, de ce folosesc oamenii cadre WordPress? S-ar putea să credeți că nu va trebui niciodată să vă creați propriul cadru, dar este posibil să utilizați deja un cadru fără să vă dați seama. Framework-uri precum Genesis, WooFramework și Thesis sunt atât de comune în zilele noastre încât s-ar putea să uiți pur și simplu că fac parte din nucleul WordPress.
Să ne uităm la un exemplu. Noel Tock a dezvoltat site-uri web pentru sectorul hotelier. Creându-și propriul framework, și-a ușurat mult munca: acum putea să creeze site-uri web mari pentru clienți și să îmbunătățească și să optimizeze în mod constant cadrul în ceea ce privește performanța, fără a adăuga funcții terțe de care clienții săi nu ar avea nevoie niciodată.
Această abordare l-a ajutat să accelereze procesul de dezvoltare și, de asemenea, să ofere suport pe termen lung clienților săi. Timpul economisit poate fi cheltuit susținând echipa de dezvoltare și învățând noi instrumente.
Au fost multe caracteristici pe care trebuia să le ia în considerare, cum ar fi SEO, precum și cele mai bune practici de dezvoltare. Avantajul său a fost că nu a fost nevoit să folosească o grămadă de pluginuri pentru a adăuga elemente necesare, cum ar fi fragmente de cod, comentarii din rețelele sociale și tehnici mobile first, precum și pentru a crea formulare de e-mail pentru a identifica potențialii cumpărători ai lucrării sale etc.
Utilizatorii au putut să-și creeze cu ușurință propriul design pe baza celui actual prin editarea noilor fișiere style.css și functions.php. Dezvoltatorul a trebuit să recurgă la Sass, iar mai târziu cadrul său s-a transformat în serviciul Happy Tables.
Avantaje și dezavantajeExistă multe beneficii în utilizarea cadrelor tematice WordPress. Când lucrați cu cadre populare, nu trebuie să căutați departe pentru a vedea dezvoltatorii și designerii lucrând activ pe forumuri și comunități pentru a ajuta utilizatorii confuzi.
Avantajul codului scris conform standardelor WordPress. Acest cod poate fi inserat cu ușurință dintr-un loc în altul pentru a testa pluginuri și servicii precum WP Test, Theme Authenticity Checker (TAC) și Theme Check. Unele caracteristici cheie care pot fi considerate avantaje sunt;
Dezvoltare simplificată pentru dezvoltare pe termen lung
Funcționalitate încorporată (dependență mai mică de pluginuri)
Calitatea codului
Actualizări
Și dezavantaje;
Educaţie
Cârlige și filtre
Cod excesiv
Limitări (dacă cadrul nu este al tău)
Actualizări și asistență
Lista de cadre de teme WordPressOrdinea nu este importantă:
WordPress Jump Start
Cadrul de design SEO
Cadrul Cherry
Tema cadru de opțiuni
Cadrul UpThemes
Construcția Carrington
Cadrul Simon WP
ConcluzieEste aproape imposibil să le stăpânești pe toate prea des sunt lansate din ce în ce mai multe cadre noi. Dacă găsiți un cadru nelistat care are o definiție reală a unui cadru în spate și nu doar că se potrivește tuturor subiectelor, vă rugăm să îl menționați în comentariile de mai jos.
Designul responsive devine încet, dar sigur, standardul pentru dezvoltatorii web. În acest tutorial, vă vom arăta cum să integrați un cadru de design receptiv într-o temă WordPress pe care o creați.
Anterior, trebuia să ne îngrijorăm doar să ne asigurăm că site-ul acceptă toate cele mai populare browsere, dar acum trebuie să luăm o viziune mai amplă - site-ul trebuie să fie vizualizat perfect pe diferite platforme și dispozitive. Până de curând, computerul era singurul nostru punct de acces la Internet, dar acum accesăm internetul folosind telefoanele mobile, televizoarele, tabletele etc. În zilele noastre, un site web ar trebui să arate și să funcționeze grozav pe orice dispozitiv electronic.
Designul responsive se bazează pe crearea de layout-uri fluide și componente responsive care se modifică în funcție de dimensiunea ecranului. Cu toate că WordPress nu funcționează bine cu metodele de design receptiv, există modalități de a face acest lucru. Cât de adaptabil va fi designul site-ului dvs.? Acest lucru depinde direct de cât timp sunteți dispus să petreceți creării acestuia.
Cadre pentru crearea de design responsiveExistă mai multe cadre bune din care să alegeți. Probabil că veți dori să petreceți puțin timp uitându-vă la fiecare dintre ele mai în detaliu pentru a determina care dintre ele este potrivită pentru proiectul dvs. Dacă nu știți de unde să începeți, acordați atenție cadrelor descrise mai jos:
Bootstrap din Stare de nervozitate bazat pe o grilă modulară adaptivă cu 12 coloane. Include șabloane din cauciuc și statice. În plus, cadrul acceptă următoarele JavaScript-pluginuri precum: Carusel de imagini, Cap de tip, Comutați fileleși multe altele.
Mai puțin cadru bazat pe 4 șabloane și 3 seturi de presetări tipografice. Less Framework folosește șablonul principal ca punct de plecare și apoi creează șabloane „copil” folosind CSS3 interogări media.
fundație este un sistem modular bazat pe 12 coloane care nu au o latime fixa. Dimensiunile coloanelor se modifică în funcție de rezoluția ecranului sau de dimensiunea ferestrei browserului. Acest cadru vine cu un set de butoane, stiluri de formulare încorporate și multe altele.
YAML are un aspect cu mai multe coloane bazat pe o grilă modulară cu o lățime specificată ca procent. Acest cadru are, de asemenea, o mică funcționalitate încorporată și acceptă mai multe jQuery-pluginuri precum: File accesibileȘi SyncHeight.
Pasul 1: Descărcați și instalați cadrulPentru a începe, descărcați fundațieși adăugați fișierele sale în folderele css și js situate în directorul temei WordPress. Cel mai simplu mod de a adăuga fișierele necesare la tema este să folosești și .
A adauga JavaScript-fisiere pentru functionare corecta fundație Trebuie să creați o funcție care apelează wp_enqueue_script.
funcția responsive_scripts_basic() //înregistrați scripturile în tema noastră wp_register_script ("foundation-mod" , get_template_directory_uri () . "/js/modernizr.foundation.js" , array ( "jquery" ), true ) ; wp_register_script ("fundație-principal" , get_template_directory_uri () . "/js/foundation.js" , true ); wp_register_script ("fundație-aplicație", get_template_directory_uri () . "/js/app.js" , true ); wp_enqueue_script("fundație-mod"); wp_enqueue_script("fundație-principal"); wp_enqueue_script("fundație-aplicație"); add_action ("wp_enqueue_scripts" , "responsive_scripts_basic" , 5 ); |
Acum trebuie să adăugăm CSS-fisiere-cadru fundație astfel încât plasa modulară să devină cauciuc. Introduceți această funcție imediat după cea pe care tocmai ați creat-o.
funcția responsive_styles() //înregistrează stiluri wp_register_style ("stil fundație", get_template_directory_uri () . "/css/foundation.css" , array () , "toate"); wp_register_style ("foundation-appstyle" , get_template_directory_uri () . "/css/app.css" , array () , "all" ); wp_enqueue_style ("stil de fundație"); wp_enqueue_style("stil-aplicație"); add_action ("wp_enqueue_scripts" , "responsive_styles" ); |
După salvarea modificărilor, reveniți la pagina site-ului dvs. și verificați sursele pentru a vă asigura că fișierele au fost adăugate corect. Ar trebui să vezi așa ceva:
< link rel = "stylesheet" id = "foundation-style-css" href = "http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/foundation.css?ver=all" type = "text/css" media = "all" / > < link rel = "stylesheet" id = "foundation-appstyle-css" href = "http://thatonegeek.com/sandbox/wp-content/themes/Starkers/css/app.css?ver=all" type = "text/css" media = "all" / >
|
Toată lumea adoră să depună efort suplimentar pentru a se asigura că totul funcționează. Internet Explorer, nu-i așa? Pentru a fi sigur că cadrul fundație va funcționa corect în Internet Explorer Trebuie să adăugați câteva declarații condiționale. Acest bloc de cod ar trebui să fie plasat în fișierul header.php înainte de eticheta head de închidere.
< ! -- [ if lt IE 9 ] > < link rel = "stylesheet" href = "/css/ie.css" > < ! [ endif ] -- >> |
Acum că tema dvs. este configurată pentru fundație Trebuie să creați un șablon folosind grila modulară a acestui cadru pentru a profita de toate caracteristicile sale. Grilă modulară fundație este format din 12 coloane. Acest cadru include presetări de stil pentru butoane, file, tabele și multe altele. Veți găsi instrucțiuni detaliate pentru a lucra cu cadrul în.
Folosind teme gata făcuteExistă multe teme gratuite și plătite pentru WordPress folosind design responsive. Dacă doriți să începeți cu ceva gata făcut, atunci încercați aceste teme:
Worpress Bootstrap este o temă dezvoltată pe cadru Bootstrap din Stare de nervozitate. Ea are 4 Diverse șabloane de pagină din care să alegeți și mai multe opțiuni din bara laterală. Designul acestei teme este pe deplin receptiv. După instalare, puteți vizita bootswatch.comși alegeți oricare dintre schemele de culori ale temei.
Pe baza cadrului Themify. Utilizează interogări media pentru a se adapta la diferite ecrane. Tema vine cu un glisor personalizabil, un widget social media și două opțiuni de culoare diferite.
Subiect Receptiv Twenty Ten Suportă imagini cauciucate, căptușeală și imagini mobile. A fost creat pe baza temei Doua zeci zece.
(Șablon plătit)
Bun Minimal este un șablon curat, minimalist, receptiv, care se adaptează cu ușurință la o varietate de afișaje și dispozitive. Vine cu două stiluri diferite, acceptă widget-uri personalizate nelimitate, mai multe meniuri derulante și alte câteva funcții.
(Șablon plătit)
Modulo– adaptiv, sablon de cauciuc, de sustinere fonturi google, mai multe glisoare, o pagină de portofoliu și setări de culoare. Vine cu 5 widget-uri, dintre care unul afișează cele mai recente postări cu miniaturi.
concluziiDesignul responsive devine din ce în ce mai popular în fiecare zi. Să știi cum să-l folosești va fi esențial pentru succes. Puteți folosi cadrul pentru propriile teme sau puteți folosi teme receptive gata făcute. Design responsive pentru teme va fi în curând WordPress va deveni standardul.
Creați teme cu design responsive? Poate utilizați cadrul menționat? Spune-ne în comentarii.
