Versiunea mobilă a site-ului WordPress fara plugin - optimizare site, mnogoblog

Dacă nu doriți să-și petreacă o mulțime de timp pe optimizarea motorului de căutare în Google și Yandex - apoi lăsați această chestiune pentru profesioniști, atunci va avea o mulțime de timp pentru a se angaja în activitatea dvs. preferate, cum ar fi, de scrierea de articole utile pentru site-ul tau. Și pentru a vedea dacă site-ul dvs. pentru dispozitive mobile - Google oferă webmasterilor un serviciu de 2 linii:

2. Serviciul PageSpeed ​​Insights - «developers.google.com/speed/pagespeed/insights/»

Prin urmare, Google consideră că site-ul nostru optimizat - este necesar pentru a obține rezultate pozitive în cele de mai sus două servicii.

De exemplu, să ia o temă simplă și non-optimizat liber - GlossyBlue, care poate fi descărcat de aici: «ndesign-studio.com/wp-themes/glossyblue».

În ambele servicii de pe site-ul Google cu subiectul optimizat deprotejat.
Vom proceda la optimizarea subiectului!

Rezultatul înainte de optimizare:

În instrucțiunile de la Google spun că paginile unui site optimizat pentru dispozitive mobile, în cap de bloc ar trebui să fie prezent meta viewport.

Așa cum s-ar arăta codul:

În continuare, în același fișier - header.php specificați fișierul stil care va fi utilizat, în cazul în care site-ul este vizualizat pe dispozitive mobile, și pentru că trebuie să înlocuiți linia:

În acest exemplu, al doilea tabel al stelă - /print.css a fost deja subiect GlossyBlue - acesta este utilizat atunci când imprimarea paginilor.

Prin urmare, în cazul în care tema neoptimizat are un fișier de stil pentru site-ul de imprimare, ceva de genul print.css, acesta poate fi folosit ca o versiune mobilă a site-ului ...

Dacă nu aveți acest fișier, puteți crea unul singur.

Aici este un exemplu de cod fișier CSS pentru dispozitive mobile:

Să examinăm mai în detaliu codul de mai sus:

ecran de proprietate «@media și ...«:

În cele mai multe WordPress astăzi, folosiți următoarea tehnică simplu pentru a crea o versiune mobilă a site-ului, iar celălalt - în fișierul de stil (style.css) se adaugă următoarea etichetă:

Codul de mai sus înseamnă că afișează rezoluția maximă a ecranului de 320px utilizați următoarele stiluri.
Astfel, este posibil să se înregistreze afișajul site-ului pentru diferite rezoluții - mobile și alte dispozitive de format mare ..
Un mare exemplu de utilizare a acestei metode poate fi găsită în tema standard de noi WordPress, de exemplu, Douăzeci Fourteen (se concentrează deja pe marile ecrane), această bucată de fișier de cod stiluri sale:

Proprietatea font-size
De asemenea, folosind proprietățile font-size poate fi crescută dimensiunea fontului, de exemplu, 180%.

float proprietate
Bineînțeles că doriți să utilizați proprietățile float (responsabile de poziționare), cu nici o valoare bara laterală nu se află pe dreapta / stânga și sub conținut.

Legate de intrări:

Doamne!
Multe mulțumiri pentru sfaturi de care aveți nevoie.
Avem un site pe WP și problema de adaptare pentru telefoanele mobile nu mai suntem bântuit.
Și apoi câteva linii schimbat și a lucrat.
Vă mulțumim!