Pentru a face acest lucru, aveți nevoie de cel puțin o cunoaștere de bază a regulilor CSS, acesta este tabelul principal care este responsabil pentru proiectarea și aspectul site-ului. Oferă oportunități excelente în design, creând o varietate de efecte, efecte speciale sunt limitate doar la imaginația designerului.
Să mergem la afaceri.
Primul pas este conectarea tabelului CSS pentru dispozitivele mobile. Pentru aceasta, mergeți la subiectul instalat și deschideți fișierul header.php. Aici găsim conexiunea CSS standard, arată cam așa:
Și vom schimba aceste linii la următoarele:
Al doilea pas este crearea de tabele pentru versiunea mobilă. Din nou, la rândul său, subiectul nostru, găsim principalul tabel CSS «style.css» și copiați-l într-un folder sau pe desktop (în cazul în care preferați), copia principală. Apoi, redenumirea stil mobil (rețineți că am montat anterior tabelul pentru dispozitive mobile numite mobile-style.css. Dacă redenumiți un nume complet diferit, nu uitați să-l schimbe și conectați.) Mutați înapoi subiectul nostru.
Al treilea pas este pasul principal. Trebuie să schimbăm complet structura site-ului, să eliminăm proprietățile inutile, să redimensionăm și să modificăm cursul afacerilor. Deschidem tabelul creat de noi pentru dispozitivele mobile în cazurile mele mobile-style.css. Și mai întâi de toate, vom aborda principalele blocuri în care se află întregul site. În multe subiecte, este definită de o clasă sau un identificator numit "wrapper", vom schimba aceste stiluri de bloc la aproximativ următoarele:
Principalele stiluri sunt lățimea blocului "lățime", am fixat-o în 300px, cred că aceasta este dimensiunea optimă. De asemenea, puteți seta lățimea în procente "100%", dar mă concentrez asupra dispozitivului mobil, deci nu am nevoie de lățimea plutitoare. Apoi, schimbăm stilul blocului #header la ceva de genul:
Apoi apare numele "logo" al site-ului, afișat în interiorul blocului antet. da aceste stiluri:
Apoi de navigare, apoi un pic mai complicat, este de dorit să-l transforme într-o listă drop-down pentru mai multe elemente de meniu pentru a urca pe partea de sus a reciproc, ceea ce nu este foarte bun. Există mai multe opțiuni pentru a rezolva această problemă, cel mai simplu, pentru a instala un plugin special, se numește WP Mobile Menu. În cazul în care plug-in - aceasta nu este opțiunea dumneavoastră, puteți face meniul mobil folosind jQuery, script-uri, dar aici este necesar să se joace.
Apoi avem un bloc central "conținut", de asemenea, trebuie să schimbe stilurile, aproximativ următoarele:
Rețineți că am schimbat proprietățile flotorului: stânga; sau poate pluti: dreapta; pe plutitor: nici unul; Astfel, anulam fluxul din jurul blocurilor și structura construcției sitului va fi acum construită într-un rând, unul după altul.
Ultimul lucru pe care a mai rămas este de a finaliza detaliile, setați footer'a Procentaj dimensiunea lățimii fontului schimbare (dacă este necesar), iar restul care nu arata corect. În general, este greu să spunem exact ce va trebui să fie schimbat, totul este făcut de cauza problemei. Principalul lucru pe care l-am tratat - acesta este principalul lucru, de asemenea merită luat în considerare, identificatorii pe care i-am citat ca exemple sunt condiționați. Aceasta nu este în toate subiectele pe care le pot fi numite, așa că vă sfătuiesc să utilizați plug-in-ul pentru Mozilla Firebug. Acesta a fost unul dintre modurile de a crea o versiune mobilă a site-ului pentru WordPress.
Citiți și:
Mobile WordPress Plugin
Set de pictograme pentru diferite teme
Creative logo-uri pentru inspirație
Efecte animate atunci când plasați cursorul peste pictogramele web utilizând fontul Font Awesome
Articole similare
-
Cele mai bune pluginuri pentru crearea unei versiuni mobile a site-ului wordpress
-
Cum să vizualizați versiunea completă a site-ului în safari pe ios 8, știri Apple
Trimiteți-le prietenilor: