Doriti sa previzualizati versiunea mobila a site-ului WordPress?
Cu siguranta se poate vizualiza site-ul live pe un dispozitiv mobil (telefon, tableta, etc), dar acest lucru nu este de ajutor mai ales intr-o faza de dezvoltare a website-ului.
Skaleweb Hosting, pune la dispozitie utilitarul Softaculous care faciliteaza instalarea de WordPress intr-o serie de pasi simpli.
Chiar si in situatia in care site-ul este live, de cele mai multe ori este mai usor sa vizualizati versiunea mobila a site-ului direct pe un computer/desktop, astfel incat sa puteti efectua rapid modificari si sa observati efectul acestora.
In acest articol, o sa prezentam doua moduri simple de a previzualiza modul in care este afisat site-ul WordPress pe un dispozitiv mobil, fara a utiliza dispozitive diferite.
De ce ar trebui sa previzualizati site-ul pe varianta mobila?
Peste aproximativ 50% din vizitatorii unui website, vor folosi telefoanele mobile pentru a accesa site-urile. Aproximativ 3% vor utiliza o tableta.
Acest lucru inseamna ca un site trebuie sa functioneze excelent pe telefon mobil sau tableta.
Dispozitivele mobile sunt atat de importatante incat Google foloseste acum un index “mobile-first” pentru algoritmul lor de clasificare a website-urilor.
Este estentiala verificarea site-ului pe un dispozitiv mobil, chiar daca este utilizata o thema WordPress responsive. Exista posibilitatea sa fie necesar crearea de versiuni diferite a paginilor avand ca destinatie principala utilizatori de telefoanelor mobile, iar aceste pagini trebuiesc cat mai bine optimizate pentru dispozitivele mobile.
In cele ce urmeaza vom prezenta doua metode diferite de verificare a site-ului pe mobil utilizand browser-ele de pe desktop.
Este important de retinut ca majoritate previzualizarilor mobile nu vor fi perfecte, deoarece exista multe dimensiuni diferite pentru ecranul mobilului. Testul final va trebui intotdeauna sa fie efectuat pe un dispozitiv mobil real.
1. Utilizarea Theme Customizer-ului din WordPress
Se poate utiliza WordPress Theme Customizer pentru a verifica afisarea site-ului WordPress in varianta mobila.
In panoul admin WordPress se acceseaza optiunea de “Appearance”, si aici optati pentru optiunea “Customize”.
Acesand sectiunea mentionata mai sus va deschide optiunea de WordPress Theme Customizer. In functie de tema(theme) utilizata se vor identifica optiuni usor diferite in meniul din partea stanga:
In partea stanga jos, se va actiona cu click asupra icoanei mobil. Ulterior site-ul va fi afisat asemenea accesari de pe un dispozitiv mobil.
NOTA: Simbolul albastru de editare, este prezent doar in modul de customizare. Iconita respectiva nu este prezenta pe varianta live a site-ului.
Aceasta metoda de previzualizare a versiunii mobile a site-ului este utila cand inca nu a fost finalizat blog sau cand site-ul se afla in modul de mentenanta.
2. Folosind modul DevTools al browser-ului Google Chrome
Browser-ul Google Chrome are un set de instrumente pentru dezvoltatori care permit efectuarea diverselor verificari pentru orice site web, inclusiv previzualizarea site-ului pe dispozitivele mobile.
In browser-ul Google Chrome pe desktop-ul folosit accesati pagina pe care doriti sa o verificati.
In continuare click dreapta pe pagina si selectati optiunea de “Inspect” sau Ctrl+Shift+I.
Se va deschide un panou pe partea dreapta, sub forma:
In optiunea de “Inspect” – developer view, se poate vedea codul sursa HTML al site-ului verificat.
Pentru a verifica varianta mobila a site-ului in partea dreapta sus se face clicke pe butonul de “Toggle Device Toolbar” sau Ctrl+Shift+M.
Dupa activarea optiunii de “Toggle Device Toolbar” se poate observa cum este afisat site-ul pe un dispozitiv mobil.
In exemplul de mai sus, meniul site-ului este acum prezent in pictograma din dreapta si optiunea de cautare(Search) s-a mutat in partea stanga a ecranului.
Daca cursorul mouse-ului este trecut pe ecran, acesta va deveni un cerc. Cercul respectiv poate fi mutat cu mouse-ul pentru a imita ecranul tactil a unui dispozitiv mobil.
De asemenea daca este apasata tasta “Shift” si ulterior click pe ecran, daca mouse-ul este dus in sus sau in jos acesta va simula optiunea de zoom de pe mobil.
In partea de centru sus a optiunii de “Toggle Device Toolbar” se pot identifica o serie de optiuni suplimentare.
Optiuniile respective permit efectuarea unor modificari in plus. Se poate verifica cum arata site-ul pe diferite versiuni de smartphone(la sectiunea responsive) si diferite rezolutii de telefon mobil. De asemenea, se poate simula performanta site-ului pe conexiuni de internet mobile rapide sau conexiuni 3G lente. Se poate roti chiar si ecranul mobil folosind iconita de rotire.
Speram ca acest articol v-a ajutat sa aflati cum sa previzualizati site-ul pe dispozitivele mobile direct de pe desktop.
Va invitam sa consultati pagina noastra de blog – AICI pentru alte articole si tutoriale cu privire la CMS-ul WordPress.
Pentru tutoriale de hosting si domenii SkaleWeb Hosting va pune la dispozitie o gama variata de tutoriale pentru cPanel, email, domenii, etc.