Share
Vi har alla hört talas om mediefrågor. Vi har använt dem i stor utsträckning i våra teman för att göra dem lyhörda. De är bra för de flesta ändamål, men när det gäller kolonnstyrda layouter behöver vi ibland mer kontroll för att våra mönster ska sticka ut.
I den här artikeln kommer du att lära dig om plug-in för Selector-Query jQuery och hur du använder det i WordPress-teman.
Vad är det? Tja om det som något som mediasökningar, men istället för att använda webbläsarens bredd som referens använder den elementets nuvarande bredd.
Innan vi fortsätter till den nitty gritty av Selector-Query, låt oss först prata om vilka mediafrågor som är. I ett nötskal, Mediefrågor tillåter att stilar i din CSS endast tillämpas när webbläsarens bredd ligger inom ett visst intervall.
Mediefrågor är hjärtat och själen av lyhörd design. Inom bara en enda webbsida och CSS-fil kan vi få det att visas annorlunda när det ses med olika skärmupplösningar och enheter. Med mediefrågor behöver du inte skapa två olika skrivbords- och mobilversioner av en webbplats.
Låt oss ta en snabb recension om användningen. För stationära datorer och tabletter kan vi paketera våra CSS-regler med följande mediefråga. CSS nedan skulle följas för webbläsarbredder av 768px och ovan:
@media-skärm och (min-bredd: 768px) / * CSS-regler går här * /
För mindre enheter som smarta telefoner kan vi använda följande. Denna skulle följas för bredder av 767px och under:
@media bara skärm och (max bredd: 767px) / * CSS regler gå här * /
Vid utformning av webbplatser kan vi anpassa vår design till exakt hur vi vill att den ska titta på olika skärmstorlekar genom att använda mediafrågor. Men när det gäller att utforma WordPress-teman behöver vi mer kontroll.
Som WordPress-temförfattare vill vi att våra teman är både flexibla och ser fantastiska ut samtidigt. Vi lägger in funktioner som kortkoder och layouter med flera kolumner, och vi ger våra användare friheten att göra vad de vill ha.
Ju lyckligare kunden, den happer vi är.
Låt oss exempelvis säga att en av våra kunder ville ha en kortfattad recension inom en fullbreddskolumn. Låt oss säga att vi endast har utformat denna kortnummer för att placeras sida vid sida med andra testimonialer (eller annat innehåll) inom 3 eller flera kolumner:
För detta visst scenario kan det vara bättre om det fanns en annan design när testkortsnummeret placerades i en större behållare. Kanske skulle en sådan design vara bättre för en fullbreddskolumn:
Tyvärr kommer mediefrågor inte att kunna hjälpa till med detta. Varför? Eftersom skärmens bredd fortfarande är densamma om testen placerades i en kolumn med full bredd eller en tredjedel kolumn!
Okej, så du kanske tänker, "Vad sägs om att bara använda kolonnens klass i CSS?" Du kommer förmodligen att sluta med något liknande här i din CSS-fil:
.vittnesmål / * två kolumner eller mer styling här * / @media bara skärm och (min bredd: 768px) .one-column.testimonial / * åsidosätt stil med full bredd här * /
Tja, något som CSS ovan skulle fungera. Men jag har ett mer elegant förslag: Selector-Query.
Selector-Query är ett lätta jQuery-plugin som gör att olika stilar kan tillämpas på dina element baserat på deras bredd.
I grund och botten, vad gör det här pluginet, det gäller ytterligare klassnamn på dina element beroende på deras nuvarande bredd. När webbläsaren ändras, uppdateras klassnamnen på lämpligt sätt för att återspegla den nya elementbredden.
Du kan sedan använda dessa olika klassnamn för att utforma de olika layouterna för ditt innehåll.
Vad Selector-Query gör är att vänta på debounced browser resize events, då tar det bredden på dina HTML-element och kontrollerar dem mot en rad bredder som heter widthStops. Om elementets bredd ligger under någon av dessa widthStop värden läggs klassnamnen på de större till elementet.
jag ska förklara widthStops senare med ett exempel, låt oss nu prata om hur du använder plugin.
Det första vi behöver göra är att inkludera jQuery-plugin-skriptet. Du kan ladda ner Selector-Query från sin GitHub-repo och inkludera den i din temakatalog. Placera den i din js mapp för att hålla din filstruktur ren.
När du har det i din temakatalog kan du lägga till den här koden i din functions.php för att inse Valector-Query precis före kropp Stängt. Detta skulle rädda oss lite laddningstid på sidan:
Accentsconagua
funktion wp_enqueue_script_selector_query () wp_enqueue_script ('selector-query', get_stylesheet_directory_uri (). '/js/jquery.selectorquery.min.js', array ('jquery'), falskt, sant); add_action ('wp_enqueue_scripts', 'wp_enqueue_script_selector_query'); Aktivering av jQuery-plugin är enkelt. Allt du behöver göra är att ringa selectorQuery på dina element:
jQuery (dokument) .ready (funktion ($) $ ('.selector'). selectorQuery ();); Och det är allt!
Dessutom har plugin två konfigurerbara alternativ som du kan överföra under initialiseringen.
Du kan anpassa dessa värden till din smak:
$ 'selector'). selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280], // En grupp med bredder 'classPrefix': 'max-' // Prefix klassnamn med detta ); widthStops är bredderna som används för att kontrollera elementets bredd mot. De classPrefix används tillsammans med widthStops att generera klassnamnen. Låt oss kolla in ett exempel för att förklara saker bättre.
Låt oss använda vårt testimonialsexempel ovan och tillämpa Selector-Query på det så att vi kan få en tydligare bild av hur det fungerar och hur vi kan dra nytta av det. Låt oss till exempel säga att vår testimonials HTML är skrivet så här:
Några testimonial text här
Om vår testimonial div hade en bredd av 1000px, använder standardvärdena för widthStops ovan skulle Selector-Query lägga till några nya klassnamn till den. Vi skulle sluta med:
Då om testimonialen div får storlek mindre till 800px, det skulle då se ut så här:
Vi kan använda dessa dynamiskt tillförda klassnamn för att utforma olika layouter för vårt testamente. Vi kan använda .max-1024 att stil bredder av 1024 och större; och vi kan använda .max-960 att åsidosätta stilar för våra mindre konstruktioner.
Om vi skulle utforma testinnehållet så här:
Vi kan använda den här som vår CSS:
/ * Stort omdöme * / .testimonial img float: left; höjd: 200px; bredd: 200px; .Testimonial span display: block; överflöde: gömd; / * Små vittnesmål * / .testimonial.max-640 img float: none; display: block; marginal: 0 auto; / * Tiny testimonial * / .testimonial.max-480 img height: 150px; bredd: 150px;
Det bästa med att använda Selector-Query är att vi inte behöver veta vart detta testinnehållsinnehåll är placerat. Det kommer att bli stylat beroende på dess bredd, till skillnad från i vår tidigare CSS där vår design för det stora testinnehållet berodde på dess förälder (kom ihåg att vi använde .en-kolumn.testimonial i det tidigare exemplet).
I den här artikeln lärde vi oss om ett nytt sätt att utforma vårt innehåll beroende på deras bredd med Selector-Query. Förhoppningsvis skulle du hitta någon fantastisk användning för detta jQuery-plugin i dina mönster.
Om du vill ha ett liveprov av Selector-Query i åtgärd, kan du kolla in demoen i Github repo.
Jag hoppas att du haft den här artikeln. Jag uppskattar all feedback, kommentarer och förslag. Låt mig veta vad du tycker om Selector-Query.
Kommer du använda det här pluginet i en av dina kommande WordPress-teman? Dela dina tankar nedan!
