Share
Am auzit cu toții despre interogările media. Le-am folosit pe larg în temele noastre pentru a le face mai receptivi. Sunt minunate pentru cele mai multe scopuri, dar când vine vorba de layout-urile bazate pe coloane, uneori avem nevoie de mai mult control pentru a face ca modelele noastre să iasă în evidență.
În acest articol, veți afla despre pluginul Selector-Query jQuery și despre cum să îl utilizați în temele WordPress.
Ce este? Ei bine, gândiți-vă la ea ca la ceva ca interogările media, dar în loc să utilizați lățimea browserului ca referință, el folosește lățimea curentă a elementului.
Înainte de a ne îndrepta către gustul ciudat al Selector-Query, să vorbim mai întâi despre întrebările media. Pe scurt, solicitările media permit ca stilurile din CSS să fie aplicate numai atunci când lățimea browserului se află într-un anumit interval.
Interogările media sunt inima și sufletul designului receptiv. În cadrul unei singure pagini de Web și a fișierului CSS, putem face afișarea diferită atunci când este vizualizată cu diferite rezoluții și dispozitive de ecran. Cu ajutorul interogărilor media, nu este nevoie să creați două versiuni desktop și mobile diferite ale unui site Web.
Să facem o scurtă analiză a utilizării sale. Pentru computerele desktop și tablete, putem împacheta regulile noastre CSS cu următoarea interogare media. CSS de mai jos va fi urmat pentru lățimea browserului de 768px Si mai sus:
@media numai pe ecran și (min-width: 768px) / * Regulile CSS merg aici * /
Pentru dispozitivele mai mici, cum ar fi telefoanele inteligente, putem folosi următoarele. Acesta va fi urmat pentru lățimi de 767px si sub:
@media numai pe ecran și (max-width: 767px) / * Regulile CSS merg aici * /
La proiectarea site-urilor web, putem să ne ajustăm designul exact așa cum dorim să se uite la diferite dimensiuni ale ecranului, utilizând interogările media. Cu toate acestea, atunci când vine vorba de proiectarea temelor WordPress, avem nevoie de mai mult control.
Ca autorii temelor WordPress, dorim ca temele noastre să fie atât flexibile, cât și uimitoare în același timp. Am pus în funcții cum ar fi coduri scurte și layouts cu mai multe coloane și le oferim utilizatorilor libertatea de a face tot ce vor.
Cu cât suntem mai fericiți cu clienții, cu happerul.
Să spunem, de exemplu, că unul dintre clienții noștri doreau să pună un cod scurt în interiorul coloanei cu o lățime totală. Să presupunem că am proiectat doar acest scurtcod care să fie plasat unul lângă altul cu alte mărturii (sau orice alt conținut) în 3 sau mai multe coloane:
Pentru acest scenariu, ar fi mai bine să existe un design diferit atunci când codul scurt al mărturiei a fost plasat într-un container mai mare. Poate că un astfel de design ar fi mai bine pentru o coloană cu lățime întreagă:
Din păcate, interogările mass-media nu vor putea ajuta în acest sens. De ce? Deoarece lățimea ecranului este aceeași, indiferent dacă martorul a fost plasat într-o coloană cu lățime întreagă sau într-o treime din coloană!
Bine, ca să te gândești, "Ce zici doar de a folosi clasa coloanei în CSS?" Probabil că veți ajunge la așa ceva în fișierul dvs. CSS:
.mărturie / * două coloane sau mai mult stil aici * / numai în ecranul @media și (min-width: 768px) . o singură coloană .stestimonial / * suprascrie cu stilul de lățime completă aici * /
Ei bine, ceva de genul CSS de mai sus ar funcționa. Cu toate acestea, am o propunere mai elegantă: Selector-Query.
Selector-Query este un plugin jQuery ușor, care permite aplicarea diferitelor stiluri elementelor dvs. pe baza lățimii lor.
Practic, ceea ce face acest plugin se aplică nume de clase suplimentare pentru elementele dvs., în funcție de lățimea lor curentă. Când browserul este redimensionat, numele claselor sunt actualizate corespunzător pentru a reflecta noua lățime a elementului.
Apoi, puteți utiliza aceste nume diferite de clase pentru a modela diferitele aspecte ale conținutului dvs..
Ceea ce Selector-Query face este sa asteptati ca browser-ul debounceed sa redimensioneze evenimentele, apoi va lua latimea elementelor HTML si le va verifica impotriva unei serii de latimi numite widthStops. Dacă lățimea elementului este sub oricare dintre acestea widthStop valori, numele clasei celor mai mari sunt adăugate elementului.
iti voi explica widthStops mai târziu, cu un exemplu, acum să vorbim despre modul de utilizare a pluginului.
Primul lucru pe care trebuie să-l facem este să includeți scriptul plugin jQuery. Puteți descărca Selector-Query din replica lui GitHub și apoi îl includeți în directorul tematic. Puneți-o în dvs. js pentru a vă păstra curat structura fișierului.
Odată ce o ai în directorul tematic, poți adăuga acest cod în lista ta functions.php pentru a elimina Selector-Query chiar înainte de corp este închis. Acest lucru ne-ar economisi timp de încărcare a unei pagini:
Accentsconagua
funcția wp_enqueue_script_selector_query () wp_enqueue_script ('selector-query', get_stylesheet_directory_uri ()) ./js/jquery.selectorquery.min.js ', array (' jquery '), false, true); add_action ('wp_enqueue_scripts', 'wp_enqueue_script_selector_query'); Activarea pluginului jQuery este simplă. Tot ce trebuie să faceți este să sunați selectorQuery pe elementele tale:
jQuery (document) .ready (functie ($) $ ('selector') selectorQuery ();); Si asta e!
În plus, pluginul are două opțiuni configurabile pe care le puteți trece în timpul inițializării.
Puteți personaliza aceste valori în funcție de preferințele dvs.:
$ ('selector') selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280], // o clasă de lățimi 'classPrefix': 'max-' ); widthStops sunt lățimile folosite pentru a verifica lățimea elementului împotriva. classPrefix este utilizat împreună cu widthStops pentru a genera numele de clase. Să examinăm un exemplu pentru a explica lucrurile mai bine.
Să folosim exemplul mărturiei de mai sus și să aplicăm Selector-Query pentru a putea obține o imagine mai clară a modului în care funcționează și cum putem beneficia de ea. De exemplu, să presupunem că HTML-ul mărturiilor noastre este scris astfel:
Un text de mărturie aici
Dacă mărturia noastră div a avut o lățime de 1000px, utilizând valorile implicite pentru widthStops deasupra, Selector-Query ar adăuga câteva nume noi de clasă. S-ar ajunge la:
Atunci, dacă mărturia div devine redimensionat mai mic 800px, ar arata astfel:
Putem folosi aceste nume de clase adăugate dinamic pentru a modela diferite machete pentru mărturia noastră. Putem folosi .max-1024 la lățimile stilului 1024 și mai mari; și putem folosi .max-960 pentru a suprascrie stilurile pentru modelele noastre mai mici.
Dacă ar fi să proiectăm conținutul mărturiilor așa:
Putem folosi aceasta ca CSS:
/ * Mare mărturie * / .stestimonial img float: left; înălțime: 200px; lățime: 200px; .spație tematică display: block; overflow: ascuns; / * Mărturii mici * / .testimonial.max-640 img float: none; afișare: bloc; marja: 0 auto; / * Mărturie măruntă * / .stestimonial.max-480 img height: 150px; lățime: 150px;
Cel mai bun lucru în folosirea selectorului-interogare este că nu trebuie să știm unde este plasat acest conținut de mărturii. Se va schița în funcție de lățimea sa, spre deosebire de CSS-ul nostru anterior, în care designul nostru pentru conținutul mare de mărturii depinde de părinte (amintiți-vă că am folosit .o singură coloană în exemplul anterior).
În acest articol, am aflat despre o nouă modalitate de a modela conținutul nostru în funcție de lățimea sa cu Selector-Query. Sperăm că veți găsi o utilizare minunată pentru acest plugin jQuery în desenele dvs..
Dacă doriți un eșantion live de selector-interogare în acțiune, puteți verifica demo-ul în repo Github.
Sper că ți-a plăcut acest articol. Apreciez foarte mult orice feedback, comentarii și sugestii. Dați-mi voie să știu ce credeți despre Selector-Query.
Veți folosi acest plugin în unul dintre temele viitoare ale WordPress? Împărtășește-ți gândurile de mai jos!
