Doriți să aflați rapid cum să creați site-uri și bloguri pe WordPress cu un design unic?
Obțineți cel mai complet sistem de training gratuit pentru crearea de site-uri pe WordPress
Ce este același lucru cu:
Odată ce WP execută filtrul customize_previewable_devices, este afișată o listă de vizualizări din matrice. În prima celulă, cheia implicită este setată la adevărată, adică Această vizualizare va fi instalată în mod prestabilit (chiar dacă alte celule au exact aceeași cheie cu o valoare adevărată). Celula de etichetare nu este afișată pe ecran, chiar și în atributul titlu. Acest câmp este utilizat de cititorul de ecran. Cel mai probabil, nici măcar nu trebuie să modificați valorile acestor celule.
Doriți să aflați rapid cum să creați site-uri și bloguri pe WordPress cu un design unic?
Obțineți cel mai complet sistem de training gratuit pentru crearea de site-uri pe WordPress
Acestea sunt valori implicite. Acestea sunt specificate în fișierul CSS și nu pot fi editate prin filtrul utilizat mai sus. Dacă totuși doriți să modificați valorile implicite, puteți face acest lucru cu fișierul dvs. CSS. În centrul WP, nu trebuie să urcați și nu vă recomandăm.
Creați un fișier CSS într-un dosar cu o temă. Voi suna fișierul custom-responsive-views.css și îl voi pune în rădăcina directorului din tema mea. Puteți alege numele și directorul.
Accesați fișierul functions.php al temei, conectați noul fișier de stil utilizând acțiunea admin_enqueue_scripts.
Acum WP va citi acest fișier și va schimba stilurile. Să analizăm un exemplu concret. Spuneți că doriți să afișați modul tabletă în modul vertical. Pentru a face acest lucru, trebuie să scrieți codul de mai jos în fișierul dvs. CSS.
Pentru a face acest lucru, să revenim la funcția de apel invers din filtrul customize_previewable_devices. După cum am văzut mai sus, WP afișează toate aparițiile dispozitivelor de tip array sub formă de butoane. Pentru a crea o vizualizare nouă, trebuie să adăugați celula în matrice, după cum se arată mai jos.
Puteți face această vizualizare implicită utilizând cheia implicită cu o valoare adevărată (nu uitați să dezactivați aceeași cheie într-un mod diferit).
WP va genera un nou buton cu funcția de apel inversă corespunzătoare din JS: prin apăsarea butonului de previzualizare va fi preluată automat clasa CSS. În exemplul de mai sus, vizualizarea a fost preluată de clasa de previzualizare-tabletă-peisaj.
Aici există o problemă: butonul creat de noi nu este aproape vizibil. Dacă știi unde să te uiți, o poți găsi, dar avem nevoie de ceva mai bun. Pentru a afișa corect, trebuie să adăugați stiluri. Pentru a face acest lucru, vom folosi fișierul CSS pe care l-am creat.
Pictograma din buton este un pseudo-element: înainte. Puteți găsi butonul după numele specificat. În exemplul de mai sus, .wp-full-overlay-footer .devices .preview-tabletă-peisaj: înainte de linie este responsabil pentru pictograma. Trebuie doar să specificați pictograma dvs. Butoanele din WP folosesc pictogramele de font Dashicons. O listă completă de pictograme poate fi găsită pe resursele WordPress Developer. În exemplul nostru, avem o tabletă, luăm pictograma f471. Cod CSS:
Tableta noastră este în modul vertical și pictograma este în modul portret. Aici vom ajuta CSS: codul de mai jos transformă pictograma în modul vertical.
Apoi puteți utiliza funcția wp.customize.previewedDevice.bind (). Funcția are un argument - un șir cu o nouă vizualizare. La margine, dacă vizualizarea a fost modificată la mobil, linia va fi mobilă. În cazul noului nostru aspect, acesta va fi un peisaj-peisaj. Mai jos este un exemplu care arată o nouă vizualizare în consola.
Acest cod poate fi plasat într-un fișier JS și conectat utilizând funcția wp_enqueue_script (). Pentru a apela funcția, avem nevoie de acțiunea admin_enqueue_scripts, pe care am apelat-o mai sus.
Cuvintele finale
Pentru cei care au nevoie de exemple din articol, am creat un plugin care poate fi descărcat de pe link. Acest plug-in pe care l-am creat pentru un singur motiv: crearea unui exemplu de plug-in este mult mai ușor și mai ușor de înțeles decât exemplul de subiect. Cu toate acestea, funcționalitatea pluginului este legată de subiecte. Asta este, acest lucru ar trebui să fie întotdeauna implementat în temă, nu plug-in.
Ediție: Comanda webformself.
Doriți să aflați rapid cum să creați site-uri și bloguri pe WordPress cu un design unic?
Obțineți cel mai complet sistem de training gratuit pentru crearea de site-uri pe WordPress
Cele mai recente știri despre dezvoltarea IT și web pe canalul nostru de telegrame
Doriți să aflați rapid cum să creați site-uri și bloguri pe WordPress cu un design unic?
Obțineți cea mai completă în sistemul gratuit de instruire RuNet pentru crearea de site-uri pe WordPress "Unic site de la zero"