Cum se creează o versiune mobilă a unui site web WordPress-Hosting – Namecheap.com
cum să creați o versiune mobilă a unui site web WordPress
recunoașteți-o: a avea o versiune mobilă frumoasă și pe deplin funcțională a site-ului dvs. web WordPress este o necesitate, având în vedere că volumul semnificativ al navigării pe internet provine de pe dispozitive mobile. Este ușor să creați un site web mobil cu WordPress la Namecheap, indiferent dacă vă abonați la Găzduire Partajată sau Găzduire WordPress EasyWP.
este posibil să fi observat deja că, uneori, versiunile web și mobile ale aceluiași site web au un conținut puțin diferit. Acest lucru se face pentru a exclude anumite caracteristici din versiunea mobilă WordPress, deoarece acestea pot apărea sau funcționa incorect sau pur și simplu pot fi copleșitoare pe un ecran mai mic. În plus, algoritmul motorului de căutare Google clasează site-urile mobile mai sus.
în acest articol vom acoperi mai multe moduri de a face site-ul dvs. WordPress mobile-friendly:
crearea de site-uri cu design receptiv: Același conținut și URL sunt încărcate pe fiecare dispozitiv, dar CSS este utilizat pentru a modifica redarea paginii în funcție de rezoluția afișajului mobil.
site-uri dinamice de servire: o adresă URL este încărcată, dar se utilizează conținut diferit și CSS, în funcție de dispozitivul utilizat.
crearea de adrese URL Separate pentru Desktop și dispozitive Mobile: diferite adrese URL și, prin urmare, site-uri web sunt încărcate, de ex., nctest.info și m.nctest.info
rețineți că fiecare mod are argumente pro și contra, de aceea vă recomandăm să faceți o cercetare SEO înainte de a continua.
Responsive Web Design
Responsive Web design utilizează interogări media CSS3. Media Queries este un modul CSS3 care permite redarea conținutului să se adapteze la Condiții precum rezoluția ecranului, lățimea și înălțimea, orientarea.
de obicei, fișierul pe care va trebui să îl editați este stil.css. Acesta este situat în directorul/wp-content/themes/ theme_name/.
o interogare media CSS3 arată de obicei ca:
@media only screen și (max-width: 480px) {
}
este un cod condițional care spune browserului să ajusteze toți parametrii de styling dacă dimensiunea ecranului este mai mică sau egală cu 480px.
pentru a merge mai granular, puteți adăuga min-lățime și Max-lățime intervale pentru a viza diferite dispozitive:
@media numai ecran și (Min-lățime: 768px) și (Max-lățime: 959px) {
}
toate ajustările suplimentare de styling ar trebui să fie adăugate între {…} paranteze.
ca exemplu, vom lua tema implicită Twenty Ten, care nu răspunde în mod implicit.
primul cod setează dimensiunea cadrului principal al temei la 550px:
#access .meniu-antet, div.meniu, #colophon, #branding, #main, #wrapper, # site-titlu {
lățime:550px;
}
comparați cum va arăta în acest caz site-ul web pe un dispozitiv mobil:
deși, după cum puteți vedea, nu toate elementele sunt ajustate la ecranul dispozitivului. Trebuie să ajustați separat practic toate elementele pe care le aveți pe site – ul dvs. web-Imaginea antetului, descrierea blogului, lățimea barei de navigare, poziția stratului de conținut etc.
este posibil să ascundeți unele dintre ele, cum ar fi glisoarele sau imaginile antetului, de exemplu. În acest fel, aspectul versiunii mobile a site-ului dvs. web va fi optimizat și ușor de utilizat.
trebuie utilizat următorul cod (de exemplu, pentru imaginea antetului):
# branding img {
display: none;
}
dacă doriți să redimensionați elementul (imaginea antetului în exemplu), utilizați
#branding img {
Lățime:100%
}
notă: editarea stilului.fișier css necesită cunoștințe de dezvoltare web, de asemenea. Nu uitați să faceți o copie de rezervă a fișierului înainte de al schimba.
odată ce toate părțile Site-ului dvs. web sunt ajustate în consecință, ar trebui să aibă un aspect frumos pe dispozitivele mobile:
majoritatea temelor WordPress sunt create pentru a fi receptive – atunci când instalați o temă nouă, puteți verifica aspectul atașat pe dispozitivele mobile în plus.
dacă nu există niciunul și nu sunteți sigur dacă tema care v-a plăcut este una receptivă sau nu, o puteți defini în filtrele de funcții în timp ce căutați tema.
1. Conectați-vă la tabloul de bord al administratorului WordPress (yourdomain.com/wp-admin), navigați la meniul Aspect, faceți clic pe teme.
2. Faceți Clic Pe Adăugare Nou:
3. Faceți clic pe filtru caracteristică și verificați aspectul receptiv. Verificați alte opțiuni dacă este necesar pentru a găsi o temă dorită.
4. Faceți clic pe Aplicare filtre:
în câteva momente veți vedea lista de teme care corespund caracteristicilor de căutare pe care le setați.
site-uri dinamice de servire
alternativ, puteți configura diferite CSS și conținut pentru a fi tras în funcție de tipul dispozitivului. Acest lucru poate fi realizat prin intermediul pluginurilor WordPress. Cele mai multe dintre ele au o serie de setări de bază disponibile gratuit.
ca exemplu, vom folosi unul dintre cele mai populare pluginuri pentru proiectarea blogurilor Mobile – WPtouch Mobile Plugin.
mai întâi, trebuie să îl instalați și să îl activați în tabloul de bord Admin.
după ce ați terminat, ar trebui să alegeți o temă pentru versiunea dvs. mobilă a site – ului web-navigați la meniul WPtouch, faceți clic pe teme & extensii (1). Alegeți tema dorită și faceți clic pe Configurare (2):
odată ce configurarea sa terminat, veți putea face modificările și corecțiile necesare. Opțiunile pluginului permit efectuarea multor acțiuni, iar majoritatea sunt auto-explicative.
Iată cum arată meniul pluginului mobil WPtouch:
după terminarea tuturor ajustărilor, salvați modificările și verificați modul în care site-ul web este afișat pe un dispozitiv desktop și mobil:
crearea de adrese URL Separate pentru Desktop și dispozitive Mobile
ultima modalitate este cea mai consumatoare de timp, deoarece va trebui să:
1. Creați un subdomeniu corespunzător pentru versiunea dvs. mobilă, cum ar fi m.nctest.info.
2. dezvoltați sau copiați conținutul site-ului în calea directorului subdomeniu creat.
3. Instalați și configurați un plugin de redirecționare mobilă.
notă: Dacă mergeți cu această opțiune, rețineți că cele două versiuni ale site-ului dvs. web nu vor fi sincronizate automat, deoarece din punct de vedere tehnic, sunt instalații diferite. Orice modificări pe care le faceți vor trebui reproduse pentru cealaltă versiune.
odată ce subdomeniul este creat și site-ul este ajustat, mergeți mai departe și instalați pluginul în tabloul de bord principal al administratorului site-ului web.
ca exemplu vom folosi pluginul de redirecționare a site-ului mobil.
1. Navigați la meniul Setări și faceți clic pe redirecționarea site-ului mobil.
2. Introduceți adresa URL mobilă pe care doriți să o aveți. Verificați orice opțiuni suplimentare, dacă este necesar.
3. Faceți clic pe Actualizare Setări: 
notă: nu oferim servicii de depanare a codului și de dezvoltare a site-urilor web. Acest articol este furnizat ca o chestiune de curtoazie pentru confortul dumneavoastră numai.În cazul în care întâmpinați probleme cu versiunea mobilă a site-ului dvs. web, vă sugerăm să consultați forumurile de asistență sau să contactați dezvoltatorul site-ului web.
asta e!