Cum se configurează smartphone-uri și PC-uri. Portal informativ
  • Acasă
  • Interesant
  • Creați teme WordPress cu cadre receptive. Ce este aspectul mobil receptiv? Bara laterală și widget-uri

Creați teme WordPress cu cadre receptive. Ce este aspectul mobil receptiv? Bara laterală și widget-uri

De la autor: SitePoint este deja plin de articole despre framework-uri WordPress, dar după cum veți vedea mai jos, există mult mai multe framework-uri: toate au avantajele și dezavantajele lor, fiecare temă are propriul stil de dezvoltare.

Vă prezentăm teme WordPress

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 ce s-a scris deja despre cadre.

Complet încurcat în gândurile mele, mi-a venit o perspectivă. Mi-a trecut prin minte că, atunci când oamenii scriu despre cadrele WordPress, au tendința de a lua în considerare doar elementele de bază... elementele de bază în 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 dificil acolo sau nu vor să scrie despre cadre care vor înceta în curând să fie dezvoltate. Sau dezvoltatorii au un termen limită greu, în lipsa căruia, site-ul se va prăbuși în rezultatele motoarelor de căutare. Cine știe.

Vreau să fac lucrurile diferit, așa că stai pe loc și fă-ți o cafea. Astăzi vom arunca o privire la „Ghidul final pentru temele WordPress”.

De ce "complet"? cuvânt englezesc definiția înseamnă completitatea a ceva. Sinonimul poate fi „final”, „final”.

Ce sunt cadrele de teme WordPress?

Înainte de a vă arunca cu capul în listă, există câteva elemente de bază ale cadrului care trebuie acoperite. La urma urmei, s-ar putea să citești primul articol despre cadre din viața ta. Și nu aș vrea să te sperii să pleci fără să-mi termin articolul. Dacă sunteți deja un veteran, puteți derula în jos până la lista de cadre.

Temele cadru sunt teme părinte la care o echipă sau un dezvoltator își adaugă propriile funcționalități pentru a facilita actualizarea temei și a acesteia. reutilizare fără a afecta designul pentru un anumit site. V tema copilului vor fi setate stiluri proprii, 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 temelor copil, dar diferite tema părintelui nu se folosește același cod (îți spun că sunt cadre când tehnic nu sunt).

În depozitul WordPress, există trei concepte de drop-in, stand-alone și șablonul Temă părinte asociat cu valoarea Teme-cadre. Cred că e chiar mai ușor de explicat decât acolo, în principiu, imposibil. Așa că vă sfătuiesc să citiți cândva acest articol.

În sensul acestui articol, mă voi concentra mai mult pe ultimul 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 tematice

Există 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ă întregul spectru de probleme, ajutând dezvoltatorii web și designerii din întreaga lume să creeze site-uri web avansate cu răspuns rapid și a căror dezvoltare durează mult mai puțin timp atunci când folosesc cadre.

Unele cadre au fost realizate de mulți ani și ore nesfârșite de dezvoltare. Toate acestea au fost necesare pentru a crea un cadru extins, 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 mai multe dispozitive și șabloane.

Nu este surprinzător de ce afacerilor de pe internet le place să folosească cadre. Pe acest moment preferatul meu este SEO Design Framework, conceput pentru SEO.

De ce să folosiți cadre?

Buna intrebare De ce să folosiți 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 cadrul 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ă uitați că fac parte din nucleul WordPress.

Să ne uităm la un exemplu. Noel Tock a dezvoltat site-uri web pentru sectorul hotelier. După ce și-a creat propriul cadru, și-a facilitat foarte mult sarcina: acum putea să creeze site-uri mari pentru clienți și să îmbunătățească și să optimizeze în mod constant cadrul din punct de vedere al performanței, fără a adăuga funcții ale terților de care clienții săi nu vor avea niciodată nevoie.

Această abordare l-a ajutat să accelereze procesul de dezvoltare, precum și să ofere clienților săi sprijin mai lung. Timpul economisit poate fi alocat sprijinirii echipei de dezvoltare și învățând noi instrumente.

Au fost o mulțime de caracteristici pe care trebuia să le ia în considerare, cum ar fi SEO și cele mai bune practiciîn curs de dezvoltare. Avantajul său a fost că nu trebuia să folosească o grămadă de pluginuri pentru a adăuga articolele necesare cum ar fi fragmente de cod, comentarii din rețelele sociale și tehnici mobile first, precum și crearea de formulare de buletine informative mesaje de e-mail pentru determinare potenţiali cumpărători munca lui etc.

Utilizatorii au putut să-și creeze cu ușurință propria design propriu 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 dezavantaje

Există multe beneficii în utilizarea cadrelor tematice WordPress. Când lucrați cu cadre populare, nu trebuie să căutați departe pentru a vedea munca activă a dezvoltatorilor și designerilor pe forumuri și comunități pentru a ajuta utilizatorii confuzi.

Avantajul codului scris conform standardelor WordPress. Un astfel de cod poate fi lipit cu ușurință dintr-un loc în altul pentru a testa pluginuri și servicii precum WP Test, Theme Authenticity Checker (TAC) și Theme Check. niste caracteristici cheie care pot fi atribuite beneficiilor;

Dezvoltare simplificată pentru dezvoltare pe termen lung

Funcționalitate încorporată (mai puțină dependență de plugin)

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 WordPress

Ordinea nu este importantă:

WordPress pornire

Cadrul de design SEO

Cadrul Cherry

Tema cadru de opțiuni

Cadrul UpThemes

Construcția Carrington

Cadrul Simon WP

Concluzie

Este aproape imposibil să le stăpânești pe toate, prea des apar cadre noi și noi. Dacă găsiți un cadru care nu este listat care se bazează pe definiția reală a unui cadru și nu doar că se potrivește tuturor subiectelor, atunci menționați-l în comentariile de mai jos.

Internetul devine din ce în ce mai mobil. Deja pe unele dintre site-urile mele distribuie trafic mobil depaseste 40%. În plus, Google și chiar Yandex au declarat că în rezultatele căutării mobile, se 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 utilitatea site-ului dvs. pentru acest public. De aceea am decis să fac un șablon adaptiv pentru acest blog - un site, dar în același timp să nu-l schimb deloc, ci pur și simplu să reproiectez cel existent cât mai rapid și simplu. În același timp, vom verifica dacă acest lucru va da naștere la trafic. După cum s-a dovedit, acest lucru nu este deloc dificil de făcut, este suficient să faceți modificări minore la cod și totul este disponibil direct din panoul de administrare WordPress.

Și așa, avem de obicei design vechi, care funcționează destul de strâmb pe smartphone-uri, tablete etc., dar îl facem modern pentru confortul utilizatorilor moderni.

Să începem ...

Secretele aspectului receptiv

Mai întâi, trebuie să scrieți o metaetichetă care va calcula clar lățimea ecranului.

1 <meta name = conținut „vizualizare” = „width = device-width, initial-scale = 1”>

Înregistrăm asta în antetul site-ului, în cazul nostru este fișierul header.php, pe care îl găsim în panoul de administrare, elementele de meniu Aspect => Editor.


Apoi, facem aproape toate elementele principale ale site-ului cu o lățime specificată de cauciuc, adică este mai bine să setați lățimea ca procent. Deși, desigur, puteți prescrie o anumită lățime de bloc pentru o anumită lățime a ecranului. Acest lucru ne va ajuta @regula media... Vă permite să scrieți stiluri separate în fișierul css pentru același element la diferite lățimi de ecran. Am decis să combin: nu modificați versiunea completă pentru desktop, ci setați lățimea blocurilor în procente pentru anumite ecrane.
De exemplu, lățimea implicită a site-ului meu este de 1180 de pixeli. Iar la sfârșitul fișierului css foaia de stil (care poate fi editat și prin panoul de administrare, ca și cel precedent), am adăugat regula:

1 2 3 4 5 6 Ecran numai @media și (lățimea maximă: 1200px) (#pagina (marja: 10px automată; lățime: 98%;))

Ecran numai @media și (lățimea maximă: 1200px) (#pagina (marja: 10px automată; lățime: 98%;))

Ceea ce face ca, atunci când lățimea ecranului este mai mică de 1200 de pixeli, lățimea blogului este 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 1030px.

1 2 3 4 5 6 7 8 9 Ecran numai @media și (lățime maximă: 1030 px) (#primar (lățime: 65%;) #secundar (lățime: 32%;))

Ecran numai @media și (lățime maximă: 1030 px) (#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; marjă: 10px automat;))

Ecran numai @media și (lățime maximă: 760 px) (#primar, #secundar (lățime: 95%; float: niciunul; marjă: 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ă: 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%;))

Ecran numai @media și (lățime maximă: 480 px) (. blog .entry-image, .search .entry-image, .archive .entry-image (float: niciunul; margine: 0px auto; lățime: 90%);). imagine-img (înălțime: automată; lățime: 100%;))

Asta e aproape tot - avem un șablon WordPress responsive care se afișează corect pe toate dispozitivele, poți, desigur, să te joci în continuare cu fonturi și indentări - unde să crești, unde să scazi. De asemenea, puteți avea și alte blocuri ale site-ului, a căror lățime trebuie să o modificați. Puteți verifica totul doar la computer, micșorând browserul. De asemenea, în mine lucrare similară Suplimentul Firefox ajută foarte mult - Firebug, vă recomand să îl stăpâniți 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 mai necesita gesturi, dacă, de exemplu, constă din câteva puncte, dar a trebuit totuși să o refac puțin.

Meniul site-ului receptiv

Deoarece există o mulțime de articole din meniul blogului, arătându-le pe toate odată, le puteți prelua pe î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 la clic în astfel de cazuri. Există și alte opțiuni, desigur:

  • Ascundeți partea și afișați partea;
  • Faceți o listă derulantă;
  • Nimic de făcut.

Ascunderea nu este o problemă, doar pentru o lățime dată, pentru acest bloc scriem display: none și atât, dar pentru a o afișa mai târziu, va trebui să adăugați un mic script. Puteți găsi o mare de astfel de scripturi pe Internet atât în ​​javascript, cât și în jquery, îl voi arăta pe cel pe care l-am stabilit eu. Și puneți-l în același mod î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 == "block") (document.getElementById ("mobmenu2") .style .display = "none") else (document.getElementById (" mobmenu2 ") .style .display =" bloc "))

Adică a trebuit să introduc un link cu o poză în codul site-ului, în fața meniului, care este ascuns implicit, iar la o lățime de 480 sau mai puțin este afișat, iar când dai clic pe el, întregul se deschide meniul.

Png "alt =" (! LANG: Meniu mobil"> !}

Și, de asemenea, schimbare proprietatea plutitoare pentru articolele din meniu:

1 2 3 4 5 6 7 8 9 10 @media numai ecran și (max-width: 480px) (# mobmenu2 (afișare: niciunul;) #mobmenu (afișare: bloc;) .main-navigation li (float: none;))

@media numai ecran și (max-width: 480px) (# mobmenu2 (afișare: niciunul;) #mobmenu (afișare: bloc;) .main-navigation li (float: none;))

Mai este o nuanță aici pe care am observat-o deja în proces: dacă meniul este ascuns de un script, adică folosind butonul din versiune mobila, apoi când lățimea crește (de exemplu, dacă ați întors smartphone-ul dintr-o poziție verticală în una orizontală), meniul principal nu mai este afișat. De aceea a trebuit să mai adaug o regulă pentru monitoare de 481 pixeli sau mai mult.

1 2 3 4 Ecran numai @media și (lățime minimă: 481px) (# mobmenu2 (afișare: blocare! important;))

Ecran numai @media și (lățime minimă: 481px) (# mobmenu2 (afișare: blocare! important;))

Voi adauga asta ! important crește prioritatea stilului - acest lucru este foarte convenabil atunci când același bloc intră cazuri diferite sunt prescrise diferite stiluri.

Ei bine, asta este tot, acum avem cu siguranță un design WordPress receptiv convenabil. Desigur, aceleași reguli vor funcționa pentru adaptarea aproape oricărui site pe orice motor. Google spune asta acum 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, dacă va exista o creștere a traficului de pe aceste dispozitive. Despre ce 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...

Astăzi, 10-20% din toate site-urile au aspect adaptiv. 21 aprilie 2015 ani de google Webmasteri „mulțumiți” implicați în construirea site-ului și proprietarii de resurse cu mesaje către e-mail, unde serviciul a avertizat despre inconvenientul utilizării pentru dispozitivele mobile. Și apoi a urmat sistem de căutare refuză să indexeze astfel de pagini. Pentru mulți, aceasta a devenit o pierdere parțială a fluxului de vizitatori de pe internetul mobil.

Astăzi, site-urile care nu acceptă mobilul sunt clasate mai prost. Prin urmare, pentru ca site-ul să fie mai sus în poziții rezultatele cautarii printre paginile de subiecte competitive, se recomandă adaptarea pentru sistemele mobile.

Ce este aspectul mobil receptiv?

Aspectul responsive este un design web comun care se poate adapta la orice rezoluție a ecranului, inclusiv. pentru mobil, astfel încât utilizatorului să fie convenabil să vizualizeze paginile de resurse. Ca soluție la problemă - creați o versiune mobilă a site-ului.

Munca de creare a unui design web receptiv începe cu verificarea servicii Google... De obicei, serviciul oferă o listă de îmbunătățiri care trebuie finalizate pentru a trece la versiunea mobilă. Cu un aspect responsive pe WordPress, se fac modificări la fișierele css, iar în interiorul header.php, în partea head, este scrisă o meta-etichetă cu atributul viewport, care vă permite să ajustați conținutul interfeței la dimensiunea ecranului .

Comoditatea acestei metode este că nu trebuie să creați un nou site web, să monitorizați conținutul și să efectuați din nou optimizarea seo. Cu toate acestea, există probleme cu afișarea în browsere diferite, elementele din unele dintre ele încep să „meargă”. Necesită subțire setare css stiluri.

Pluginuri WordPress pentru personalizarea site-ului web

Mai ales pentru WordPress, creatorii s-au dezvoltat pluginuri gratuite ghid de ajutor, cum ar fi MobilePress, Duda Mobile Website Builder. Ele pot fi descărcate de pe site-ul oficial.

Pluginurile de adaptare pot fi folosite chiar și de un webmaster neprofesionist care nu are un software larg cunoștințe de HTMLși CSS. Pluginurile vă permit să clarificați un șablon existent. Cu toate acestea, uneori există probleme între browsere și erori neașteptate sunt aruncate la stocarea în cache. Dacă în viitor nu se așteaptă să viziteze resursa peste 2000 de oameni, atunci pluginurile sunt o alternativă bună.

Teme WordPress receptive

Găsirea șabloanelor de webmaster adaptabile de calitate nu va dura mult, dar este nevoie de anumite cunoștințe Bazele HTMLși CSS. Șablonul pentru lucru poate fi descărcat și modificat cu ușurință la discreția dvs.

Avantaje:

  • Ușor de instalat și configurat. Dacă doriți, puteți găsi chiar și șabloane premium gratuit;
  • Șabloanele verificate sunt compatibile între browsere;
  • O cantitate mareîn internet;
  • Nu durează mult pentru a trece la design responsive.

Defecte:

  • Va trebui să îl schimbați complet pe cel vechi cu cel nou;
  • În interior există link-uri codificate de la autor sau către alte site-uri.

Metodele enumerate sunt potrivite pentru adaptarea la versiunea mobilă. Cu toate acestea, pentru migrarea site-urilor mai mari, va fi util să învățați cum să lucrați cu stiluri în cascadă.

În zilele noastre, crearea unui design responsive devine vitală. munca importanta... Alții noi apar în fiecare zi dispozitive mobileși smartphone-uri. Acest articol este extrem de important pentru cei care nu sunt încă suficient de familiarizați cu conceptul de design responsive.

În acest tutorial, vom oferi elementele de bază ale creării teme receptive proiecte care lucrează pe interogări media CSS3. Acest articol vă va ajuta să înțelegeți mai bine esența designului responsive și modul în care funcționează.

Tendințele sunt foarte volatile. Toate site-urile cu nume mari se concentrează pe lucrul prin intermediul dispozitivelor mobile. Deci, să aruncăm o privire la ce sunt șabloanele responsive.

Ce sunt șabloanele responsive și de ce sunt atât de importante?

Șabloanele responsive sunt mai populare ca niciodată. Și acesta nu este un accident. Proliferarea smartphone-urilor și tabletelor pentru acces la internet influențează importanța utilizării șabloanelor receptive. Ce este un șablon receptiv? Capacitatea de răspuns a șablonului permite designului site-ului să se adapteze la diferite dimensiuni de ecran... Selectează automat rezoluția și determină pe ce dispozitiv este afișat site-ul, pe monitorul unui computer, tabletă sau smartphone. Dezvoltatorii fac tot posibilul pentru a face șabloanele receptive pentru a le îmbunătăți interfața cu utilizatorulși timpii de încărcare.

Aceasta înseamnă că seria este folosită. anumite cereri CSS3 care optimizează magic pagina site-ului dvs. Lățime fixă este posibil să nu fie întotdeauna afișat corect. Deci, va trebui să folosiți adaptabilitatea. Este necesară pregătirea înainte de a începe lucrul. Nu totul este atât de dificil, mai întâi trebuie să elaborezi elementele de design și să ții cont de specificul lucrării șablon receptiv.

Pentru a fi sincer, ar trebui să fii destul de familiarizat cu elementele de bază ale creării de șabloane wordpress.

Crearea primului șablon copil

Va fi bine dacă creați mai întâi un șablon copil, chiar dacă nu este necesar, dar este recomandat. Dacă nu știți ce este un șablon copil, puteți

Șabloanele pentru copii nu sunt foarte comune, dar au o funcționalitate excelentă pentru WordPress. Aceasta este o modalitate de a vă păstra setările șablonului chiar dacă șablonul părinte este modificat. Oricine, chiar și cu cunoștințe foarte superficiale de HTML și CSS, va putea schimba culorile din șablon. Aici vom oferi un tutorial rapid despre cum să creați un șablon copil pentru șablonul dvs. WordPress actual.

Primul pas:

Crea dosar nou mythemechild în directorul wp-content / themes. Să presupunem că șablonul tău se numește myparenttheme. Desigur, puteți denumi șablonul copilului cum doriți. Nu contează, dar este recomandabil să folosești un nume care să fie similar cu numele șablonului principal, de exemplu, dacă șablonul tău se numește abc, denumește șablonul copil abc-child.

Pasul doi:

Adăugarea styles.css este o necesitate atunci când creați un șablon copil. Creați un fișier styles.css în folderul șablon copil. Alternativ, puteți adăuga alte fișiere șablon în fișierul functions.php al acestui folder.

Pasul trei:

În fișierul styles.css al șablonului copil mythemechild, una dintre condițiile principale este adăugarea unui antet. Mai jos este un exemplu de antet care face ca un șablon copil să funcționeze pentru WordPress.

/ * Numele temei: myParentTheme Child Theme URI: http: // site / Descriere: Prima mea temă WordPress

Să explicăm fiecare linie de cod:

  • Nume șablon. (obligatoriu) Numele șablonului copil.
  • URI al șablonului. (de dorit) Pagina web a șablonului copil.
  • Descriere. (de dorit) Ce este acest șablon. De exemplu: șablonul pentru primul meu copil. Ura!
  • Autor. (opțional) Numele autorului.
  • Probă. (obligatoriu) numele directorului șablonului părinte, distinge între majuscule și minuscule.

Atenţie. Trebuie să comutați la un alt șablon și apoi să reveniți la șablonul copil după ce modificați linia de cod.

Versiune. (de dorit) Versiunea șablonului copil. De exemplu: 0,1, 1,0 etc.

Ultimul pas:

Acum tot ce trebuie să faceți este să exportați foaia de stil din șablonul părinte în șablonul copil. Acest lucru se poate face urmând exemplul de mai jos:

/ * Numele temei: myParentTheme Child Theme URI: http: // Descrierea site-ului: Prima mea temă WordPress

Astfel, ați creat un șablon copil. Acum activează-l accesând Panoul Administratorului WordPress în aparență -> Teme. Sperăm că acum puteți crea cu ușurință un șablon copil.

Interogări media în CSS3

CSS3 oferă multe posibilități și moduri simple pe care designerii și dezvoltatorii îl pot folosi. Cu toate acestea, există unele probleme pe care interogările IE8 le pot gestiona. Ele vă pot ajuta să obțineți următoarele informații:

  1. Aflați lățimea și înălțimea ferestrei curente
  2. Verificați dacă telefonul este în poziție verticală sau orizontală
  3. Obțineți rezoluția dispozitivului, înălțimea și lățimea ecranului.

Dimensiunile ecranului care vor fi acoperite în ghidul nostru

Să definim dimensiunile ecranului existente înainte de programare.

  1. Smartphone-uri- Mai puțin de 480 px (Inclusiv Google nexus S și ​​ASUS Galaxy 7)
  2. Tablete- de la 481px la 1280px (Motorola Xoom cu o rezoluție maximă de 1280)
  3. Monitoare de calculator- 1281 px și mai mare

(Notă: valorile reale pentru smartphone-uri și tablete pot varia în funcție de dispozitivul și ecranul pe care îl vizați.)

Mai jos sunt interogările pe care le vom folosi pentru a crea un șablon receptiv. Nu par complicate, dar este important să țineți cont de sintaxă foarte atent.

Ecran @media și (lățime maximă: 480 px) ( h1 (culoare: roșu;)) Ecran @media și (lățime minimă: 481 px) și (lățime maximă: 1280 px) (/ * Crearea titlurilor Negru care vizează utilizatorii PC * / h1 (culoare: verde;)) Ecran @media și (lățime minimă: 1281 px) (/ * Faceți titlurile roșii pentru utilizatorii de smartphone-uri * / h1 (culoare: negru;))

Testarea modificărilor efectuate

Lucrul foarte important este că după ce adăugați fiecare interogare, puteți verifica rezultatele. Pentru cei care au un smartphone și o tabletă, testarea este mult mai convenabilă. Dar mai este altul instrument la îndemână pentru testare - ScreenFly by quirktools. Îmi place acest instrument pentru acuratețea și ușurința în utilizare. Cu acesta, puteți verifica afișarea site-ului pe aproape orice dispozitiv și ecran major.

De asemenea, merită verificat cu instrumentul ScreenFly

Probleme și soluții

Este important să țineți cont de provocările cu care vă puteți confrunta atunci când creați design-uri receptive. Datorită conținutului său flexibil, acesta diferă de un site static. Următoarele sunt provocările pe care ar trebui să fii pregătit să le înfrunți:

1- Panou lateralși widget-uri

Pentru un începător, acesta poate fi primul obstacol. De obicei, barele laterale sunt aliniate și stilizate folosind proprietățile float: left sau float: right și pot interacționa ușor incorect cu interogările media. Decalajele plutesc: stânga; clar: nici unul, puteți seta locația corectă pentru widget-uri.

2- Meniu de navigare

Navigarea este următoarea provocare. Poate părea nenatural fără ajustare. Dacă aveți instalate efecte nav hover, verificați pentru a vă asigura că totul funcționează bine pe toate dispozitivele tactile.

Multe decizii stilistice vor depinde de complexitatea și calitatea șablonului dvs., dar odată ce obțineți decizia stilistică dorită, totul ar trebui testat pe smartphone și tabletă. Mai jos este cum va arăta totul după ce toate stilurile au fost aplicate.

Rezultate

Designul responsive este important, deoarece totul în lume se schimbă rapid în aceste zile, aparate senzoriale sunt mai răspândite, ceea ce înseamnă că utilizatorii lor ar trebui să aibă și acces excelent la paginile site-ului dvs.

Tendințele de design responsive devin din ce în ce mai populare, dar încă sunt în curs de dezvoltare. Dezvoltatorii explorează noi modalități de a le face mai eficiente și mai puternice. De asemenea, ei ajută întreaga lume, împărtășindu-și cunoștințele și abilitățile.

Crearea unei teme WordPress, poți merge în mai multe moduri. Puteți scrie cod de la zero, editați tema gata sau folosiți un special cadru... În această recenzie, 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țiuni de rutină concentrându-se mai degrabă pe design decât pe codare plictisitoare.

Cu toate acestea, chiar dacă avantaje evidente utilizarea cadrelor, printre experți nu există o opinie unică în privința lor. Unii oameni cred că cadrele oferă un impuls semnificativ în viteza și calitatea dezvoltării. Alții cred că restricționează dezvoltatorii prin întemnițarea lor 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 codificare (cu toate acestea, este clar că în cazul unui cadru, acesta va fi un cost unic).

Oricum ar fi, iar alegerea utilizării cadrului este a ta. Doar tu, pe baza experienței tale și a sarcinii în fața ta, poți decide dacă îl folosești sau nu. Și pentru a face acest lucru, trebuie să o „atingeți” cel puțin, ceea ce vă propunem să facem, folosind, desigur, unul dintre produsele gratuite pentru început.

Cherry Framework de TemplateMonster

În ciuda acesteia poveste scurta, Cadrul Cherry a reușit să câștige o mulțime de recenzii pozitive.

Ultima, 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 renunțe în viitor.

Caracteristici cheie ale cireșului:

  • Structură modulară independentă vă permite să utilizați componentele Cherry separat, ca instrumente independente. Tom J. Nowell de la echipa Automattic este convins că fiecare cadru decent ar trebui să aibă această capacitate;
  • Editor și set de coduri scurte permițându-vă să adăugați diverse obiecte în orice loc de pe pagină;
  • Abilitatea de a fixa poziția unui element (logo, meniu sau șir de căutare) relativ la antet sau subsol;
  • Minificator CSS este un instrument inovator pentru a combina CSS din fișiere diferiteîntr-unul și minimizați-l pentru a accelera încărcarea;
  • Opțiune 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;
  • Furnizarea mecanismului de plugin decizie rapidă sarcini diferite. Se adaugă prezentări de diapozitive, bare laterale și tipuri diferite note - pentru recenzii, portofolii etc.;
  • Compatibil cu instrumente terțe;
  • Sensibilitatea și compatibilitatea cu WPML sunt două funcții vitale astăzi care vă permit să creați site-uri multilingve adaptate oricărui dispozitiv, de la smartphone-uri la computere.

Hybrid Core de ThemeHybrid

Miez hibrid ușor de instalat și configurat cadru care vă permite să vă dezvoltați proiecte complexe fără a recurge la cantităţi mari de codare. Este compatibil cu Schema pentru o bună optimizare SEO. În plus, Hybrid Core are multe caracteristici care simplifică foarte mult munca dezvoltatorului. Printre acestea se numără:
  • Firimituri de pâine (" firimituri de pâine»), care funcționează excelent pe orice pagină, inclusiv pe mesaje de orice tip.
  • Versiune fixă ​​și optimizată a furnizării de coduri scurte control total deasupra galeriei de imagini
  • Media Grabber este o funcție care vă permite să preluaț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.
  • Extensie functie standard paginare, care vă permite să controlați paginarea materialului pe o pagină de rezultate de căutare, pagini arhivate și multe altele.
  • Î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 progresele 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 ușor acceptă SCSS, CSS și LESS.

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

  • Managerul de aspect vă oferă libertate completă de a vă proiecta aspectul.
  • Un sistem de management al conținutului care vă permite să creați, să editați și să publicați materiale.
  • Un designer de meniu vizual care acceptă meniuri pe mai multe niveluri și crearea de elemente de meniu cu pictograme.
  • Megameniu vă permite să creați meniuri derulante non-standard, în care nu numai link-uri, ci și orice html - tabele, formulare, liste, text formatat pot acționa ca sub-articole
  • Interfață de administrare construită cu folosind Ajaxși lucrând cu o viteză incredibilă.
  • Motor puternic de modelare Twig.
  • Gantry are, de asemenea, un configurator orientat spre YAML, bare laterale glisante, capabilități puternice moștenire și un set de tot felul de icoane și fonturi.

Pistă lângă Parallelus

Pistă de decolare- o alta solutie cu deschidere cod sursa concepute pentru a facilita dezvoltarea temelor pentru 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 (definit de utilizator).
  • Structură modulară care vă permite să adăugați funcționalitatea necesară folosind plugin-uri literalmente într-un singur clic.

Wonderflux de Jonny Allbut

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

Caracteristici cheie ale Wonderflux:

  • Markup dinamic care permite temei să se adapteze la orice dimensiune a ecranului.
  • Parametri de aspect flexibili care pot fi modificați din mers.
  • O colecție de peste 100 de coduri scurte care vă permite să încorporați orice tip de cod sau conținut într-o temă
  • Setări administrative pentru configurarea ușoară a site-ului.
  • Compatibil cu Pluginuri WordPress vă permite să rezolvați aproape orice sarcină
  • Un validator de cod care asigură conformitatea cu standardele web, ceea ce este o condiție sine qua non pentru optimizarea calității SEO.

Unyson de ThemeFuse

Unyson este un cadru bogat din punct de vedere funcțional, conceput atât pentru dezvoltator, cât și pentru designer. Vă permite să editați interfața unui site sau blog din panoul administrativ și are o fereastră 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ă când este editat.
  • Peste 20 de opțiuni pentru a simplifica crearea de containere, file și formulare pentru panoul de administrare
  • Panouri glisante laterale dinamice care pot fi personalizate individual pentru fiecare pagină.
  • Automat backup direct din panoul de administrare. Sunt posibile backup-uri programate regulate (zilnic, săptămânal, lunar etc.).
  • Pesmeturi (alias pesmet) adăugând o navigare simplă și directă
  • 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 funcțiilor Unyson. Trebuie menționat și specialul module pentru SEO, formulare de contact, portofoliu, calendar de evenimente, rating cu stele, integrare cu social mediași Flickr.

PressWork

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 pluginuri care extind funcționalitatea de bază a cadrului pentru rezolvarea unei anumite probleme.
  • Media Queries - modulul responsabil pentru optim aspect pe orice dispozitiv.
  • Prezența în setul de fișiere PSD pentru editarea temei, de exemplu, schimbarea siglei sau a elementelor grafice.

Reverie de ThemeFortress

Un cadru multifuncțional pentru crearea de bloguri, sisteme de management al conținutului, cărți online sau orice alt tip de site. Poate fi folosit ca instrument principal, precum și ca instrument auxiliar pentru crearea de teme derivate.

Caracteristici cheie:

  • Cadrul se bazează pe Fundația ZURB și moștenește toată flexibilitatea și puterea sa.
  • Microformatul HTML5 și hNews oferă cod clar, 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 pe smartphone-uri și pe PC-uri.
  • Urmează conceptul de minimalism, oferind doar două widget-uri și două meniuri personalizate.
  • Dacă trebuie să faceți modificări în design, este propusă editarea directă a SCSS și a CSS personalizat.
Din minusuri nu valoreaza nimic optimizare parțială SEO deci se recomandă utilizarea unui plugin suplimentar în acest scop.

Vafpress

Crearea unei părți administrative (backend) cu Vafpress Teme Wordpress devine mai ușor ca niciodată.

Pentru a face acest lucru, dezvoltatorul are la dispoziție:

  • Un script de control al descărcarii care permite doar descărcarea blocurile necesare fără a supraîncărca frontend-ul cu cod inutil.
  • Suport pentru diferite tipuri de câmpuri: text, liste cu opțiuni multiple, casete de selectare, butoane radio și altele
  • Puternic generator de meniuri pe mai multe niveluri. Utilizează XML pentru construcție, 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 caracterelor de subliniere va economisi în mod semnificativ timpul și efortul petrecut pentru dezvoltarea temelor pentru Wordpress.

Principalele caracteristici ale Underscore:

  • Abilitatea de a crea anteturi personalizate.
  • Etichetele personalizate din șabloane evită duplicarea codului.
  • Script pentru conversia meniului într-o listă derulantă comutabilă pentru afișare pe dispozitive mobile.
  • Două șabloane de aspect cu o bară laterală la dreapta sau la stânga.
  • Lean CSS pentru a ușura dezvoltarea.
  • 404 pagini.

Concluzie

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

Top articole similare