Share
Vi har alle hørt om medieforespørsler. Vi har brukt dem i stor utstrekning i våre temaer for å gjøre dem lydhør. De er flotte for de fleste formål, men når det gjelder kolonne-drevne layouter, trenger vi noen ganger mer kontroll for å gjøre våre design skiller seg ut.
I denne artikkelen vil du lære om plugin for Selector-Query jQuery, og hvordan du bruker det i WordPress-temaene dine.
Hva er det? Vel, tenk på det som noe som mediesøk, men i stedet for å bruke nettleserbredden som referanse, bruker den elementets nåværende bredde.
Før vi drar oss videre til den nitty gritty av Selector-Query, la oss først snakke om hva media spørringer er. I et nøtteskall, Medieforespørsler tillater at stiler i CSS bare brukes når nettleserens bredde kommer innenfor et bestemt område.
Medieforespørsler er hjertet og sjelen til responsiv design. Innenfor bare en enkelt nettside og CSS-fil, kan vi få det til å vises annerledes når det vises med forskjellige skjermoppløsninger og enheter. Med medieforespørsler er det ikke nødvendig å opprette to forskjellige desktop- og mobilversjoner av et nettsted.
La oss ta en rask gjennomgang av bruken. For stasjonære og tabletter kan vi pakke inn våre CSS-regler med følgende medieforespørsel. CSS nedenfor vil bli fulgt for nettleserbredder på 768px og over:
@media bare skjerm og (min-bredde: 768px) / * CSS regler gå her * /
For mindre enheter som smarte telefoner kan vi bruke følgende. Denne ville bli fulgt for bredder på 767px og under:
@media bare skjerm og (maks bredde: 767px) / * CSS regler gå her * /
Når du designer nettsteder, kan vi justere vårt design akkurat slik vi vil at det skal se på forskjellige skjermstørrelser ved hjelp av medieforespørsler. Men når det gjelder å designe WordPress-temaer, trenger vi mer kontroll.
Som WordPress-temaforfattere ønsker vi at våre temaer skal være både fleksible og se fantastiske ut på samme tid. Vi legger inn funksjoner som kortkoder og flerkolonneoppsett, og vi gir brukerne friheten til å gjøre hva de vil.
Jo lykkeligere kunden, den happer vi er.
La oss for eksempel si at en av våre kunder ønsket å legge inn en anbefalingskode i en fullbreddskolonne. La oss si at vi bare laget denne kortnummeret for å bli plassert side ved side med andre testimonials (eller annet innhold) innen 3 eller flere kolonner:
For dette bestemte scenariet kan det være bedre om det var et annet design når testkortet ble plassert i en større beholder. Kanskje et design som dette ville være bedre for en fullbreddskolonne:
Dessverre vil ikke media spørringer være i stand til å hjelpe i denne. Hvorfor? Fordi skjermbredden fortsatt er den samme om testamentet ble plassert i en kolonne med full bredde eller en tredjedel av kolonnen!
Ok, så du kan tenke, "Hva med bare å bruke kolonnens klasse i CSS?" Du vil nok ende opp med noe som dette i CSS-filen din:
.vitnemål / * to-kolonne eller mer styling her * / @media bare skjerm og (min bredde: 768px) .one-column.testimonial / * overstyre med full bredde stil her * /
Vel, noe som CSS ovenfor ville fungere. Jeg har imidlertid et mer elegant forslag: Selector-Query.
Selector-Query er et lette jQuery-plugin som tillater ulike stiler som skal brukes på elementene dine basert på bredden.
I utgangspunktet, hva dette plugin gjør det gjelder flere klassenavn til elementene dine, avhengig av deres nåværende bredde. Når nettleseren blir endret, oppdateres klassenavnene på riktig måte for å gjenspeile den nye elementbredden.
Du kan da bruke disse forskjellige klassenavnene til å utforme de forskjellige layoutene for innholdet ditt.
Hva Selector-Query gjør er å vente på debounced browser resize hendelser, så tar det bredden på HTML-elementene dine og sjekker dem mot en rekke bredder som heter widthStops. Hvis elementbredden er under noen av disse widthStop Verdier, klassenavnene til de større blir lagt til elementet.
jeg skal forklare widthStops senere med et eksempel, for nå, la oss snakke om hvordan du bruker plugin.
Det første vi må gjøre er å inkludere jQuery-plugin-skriptet. Du kan laste ned Selector-Query fra sin GitHub-repo, og ta den med i temakatalogen. Plasser den i din js mappe for å holde filstrukturen ren.
Når du har det i temakatalogen din, kan du legge til denne koden i din functions.php å benytte Selector-Query rett før kropp er stengt. Dette vil spare oss for litt sidetilpasningstid:
Accentsconagua
funksjon 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'); Aktivering av jQuery-plugin er enkelt. Alt du trenger å gjøre er å ringe selectorQuery på elementene dine:
jQuery (dokument) .ready (funksjon ($) $ ('.selector'). selectorQuery ();); Og det er det!
I tillegg har plugin to konfigurerbare alternativer som du kan passere under initialisering.
Du kan tilpasse disse verdiene til din smak:
$ 'selector'). selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280], // En rekke bredder 'classPrefix': 'max-' // Prefiks klassenavn med dette ); widthStops er breddene brukt til å kontrollere elementets bredde mot. De classPrefix brukes sammen med widthStops å generere klassenavnene. La oss sjekke ut et eksempel for å forklare ting bedre.
La oss bruke vårt testimonialeksempel ovenfor og bruke Selector-Query til det slik at vi kan få et klarere bilde av hvordan det fungerer og hvordan vi kan dra nytte av det. For eksempel, la oss si at vår testimonials HTML er skrevet slik:
Noen testimonialtekst her
Hvis vår testamente div hadde en bredde på 1000px, bruker standardverdiene for widthStops ovenfor, vil Selector-Query legge til noen nye klassenavn til den. Vi ville ende opp med:
Så hvis testamentet div blir endret mindre til 800px, det ville da se slik ut:
Vi kan bruke disse dynamisk lagt klassenavnene til å utforme forskjellige layouter for vår anbefaling. Vi kan bruke .max-1024 å style bredder av 1024 og større; og vi kan bruke .max-960 å tilsidesette stiler for våre mindre design.
Hvis vi skulle utforme innholdet på vitnesbyrd slik:
Vi kan bruke denne som vår CSS:
/ * Stor anbefaling * / .testimonial img float: left; høyde: 200px; bredde: 200px; .testimonial span display: block; overløp: skjult; / * Små vitnemål * / .testimonial.max-640 img float: none; skjerm: blokk; margin: 0 auto; / * Tiny testimonial * / .testimonial.max-480 img høyde: 150px; bredde: 150px;
Det beste ved å bruke Selector-Query er at vi ikke trenger å vite hvor dette testimonialinnholdet er plassert. Det vil bli stylet avhengig av bredden, i motsetning til vår tidligere CSS, hvor vårt design for det store testimonialinnholdet var avhengig av dets overordnede (husk vi brukte .en-kolonne.testimonial i det tidligere eksemplet).
I denne artikkelen lærte vi om en ny måte å utforme innholdet vårt avhengig av bredden deres med Selector-Query. Forhåpentligvis vil du finne noen fantastisk bruk for dette jQuery-pluginet i designene dine.
Hvis du vil ha et levende utvalg av Selector-Query i aksjon, kan du sjekke ut demoen i Github repo.
Jeg håper du likte denne artikkelen. Jeg setter stor pris på tilbakemeldinger, kommentarer og forslag. Gi meg beskjed om hva du synes om Selector-Query.
Vil du bruke denne plugin-modulen i et av dine kommende WordPress-temaer? Del dine tanker nedenfor!
