Share
We hebben allemaal gehoord over mediaquery's. We hebben ze uitgebreid gebruikt in onze thema's om ze responsive te maken. Ze zijn geweldig voor de meeste doeleinden, maar als het gaat om kolomgestuurde lay-outs, hebben we soms meer controle nodig om onze ontwerpen op te laten vallen.
In dit artikel leert u over de plug-in Selector-Query jQuery en hoe u deze in uw WordPress-thema's kunt gebruiken.
Wat is het? Beschouw het als media-queries, maar in plaats van de browserbreedte als referentie te gebruiken, wordt de huidige breedte van het element gebruikt.
Voordat we naar de kern van Selector-Query gaan, laten we eerst praten over wat mediaquery's zijn. In een notendop, Met mediaquery's kunnen stijlen in uw CSS alleen worden toegepast wanneer de breedte van de browser binnen een bepaald bereik komt.
Mediaquery's zijn het hart en de ziel van responsief ontwerp. Binnen slechts één webpagina en een CSS-bestand kunnen we het anders weergeven als het wordt bekeken met verschillende schermresoluties en apparaten. Met mediaquery's is het niet nodig om twee verschillende desktop- en mobiele versies van een website te maken.
Laten we een kort overzicht geven van het gebruik ervan. Voor desktops en tablets kunnen we onze CSS-regels omspannen met de volgende mediaquery. De CSS hieronder zou worden gevolgd voor browserbreedtes van 768px en hoger:
@media only screen en (min-width: 768px) / * CSS-regels gaan hier naartoe * /
Voor kleinere apparaten zoals smartphones kunnen we het volgende gebruiken. Deze zou worden gevolgd voor de breedtes van 767px en onder:
@media only-scherm en (max-width: 767px) / * CSS-regels gaan hier naartoe * /
Bij het ontwerpen van websites kunnen we ons ontwerp aanpassen aan de manier waarop we het willen laten kijken naar verschillende schermformaten met behulp van mediaquery's. Als het echter gaat om het ontwerpen van WordPress-thema's, hebben we meer controle nodig.
Als auteurs van WordPress-thema's willen we dat onze thema's zowel flexibel zijn als er tegelijkertijd geweldig uitzien. We hebben functies zoals shortcodes en lay-outs met meerdere kolommen toegevoegd en we geven onze gebruikers de vrijheid om te doen wat ze willen.
Hoe blijer de klant, de happer die we zijn.
Laten we bijvoorbeeld zeggen dat een van onze klanten een kortingscodering met reacties wilde plaatsen in een kolom met volledige breedte. Laten we zeggen dat we deze shortcode alleen hebben ontworpen om naast andere getuigschriften (of andere inhoud) te worden geplaatst binnen drie of meer kolommen:
Voor dit bepaalde scenario is het misschien beter als er een ander ontwerp is wanneer de korte code van de testimonial in een grotere container is geplaatst. Misschien is een dergelijk ontwerp beter voor een kolom over de volledige breedte:
Helaas kunnen mediaquery's niet helpen in deze. Waarom? Omdat de schermbreedte nog steeds hetzelfde is, ongeacht of de testimonial in een kolom met de volledige breedte of in een kolom van een derde is geplaatst!
Oké, dus je denkt misschien, "Hoe zit het gewoon met het gebruik van de kolom van de kolom in de CSS?" Je zult waarschijnlijk eindigen met iets als dit in je CSS-bestand:
.testimonial / * twee kolommen of meer stylen hier * / @media only screen en (min-width: 768px) .one-column .testimonial / * negeren hier met volledige-breedte stijl * /
Nou, zoiets als de CSS hierboven zou werken. Ik heb echter een eleganter voorstel: Selector-Query.
Selector-Query is een lichtgewicht jQuery-invoegtoepassing waarmee verschillende stijlen kunnen worden toegepast op uw elementen op basis van hun breedte.
Kortom, wat deze plug-in doet, passen extra klassenamen toe op uw elementen, afhankelijk van hun huidige breedte. Wanneer de grootte van de browser wordt gewijzigd, worden de klassenamen op de juiste manier bijgewerkt om de nieuwe elementbreedte weer te geven.
U kunt deze verschillende klassenamen gebruiken om de verschillende lay-outs voor uw inhoud te stijlen.
Wat Selector-Query doet, is wachten op mislukte browsergrootte-events, dan neemt het de breedte van uw HTML-elementen in beslag en vergelijkt het met een reeks van breedten genaamd widthStops. Als de elementbreedte onder een van deze valt widthStop waarden, de klassenamen van de grotere worden toegevoegd aan het element.
ik zal het uitleggen widthStops later met een voorbeeld, laten we het nu hebben over het gebruik van de plug-in.
Het eerste dat we moeten doen, is het script jQuery-plug-in opnemen. Je kunt Selector-Query downloaden van de GitHub-repo en het vervolgens opnemen in je themamap. Plaats het in uw js map om uw bestandsstructuur schoon te houden.
Zodra je het in je themadirectory hebt staan, kun je deze code toevoegen aan je functions.php om Selector-Query in te palmen vlak voor de lichaam is gesloten. Dit zou ons enige pagina-laadtijd besparen:
Accentsconagua
functie 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'); Het inschakelen van de plug-in jQuery is eenvoudig. Het enige dat u hoeft te doen is bellen selectorQuery op uw elementen:
jQuery (document) .ready (functie ($) $ ('. selector'). selectorQuery ();); En dat is het!
Bovendien heeft de plug-in twee configureerbare opties die u kunt doorgeven tijdens de initialisatie.
U kunt deze waarden naar wens aanpassen:
$ ('. selector'). selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280], // Een reeks van breedtes 'classPrefix': 'max-' // Voorvoegsel klassennamen met dit ); widthStops zijn de breedten die worden gebruikt om de breedte van het element te controleren. De classPrefix wordt samen met gebruikt widthStops om de klassenamen te genereren. Laten we een voorbeeld bekijken om dingen beter uit te leggen.
Laten we ons testimonialvoorbeeld hierboven gebruiken en Selector-Query daarop toepassen, zodat we een duidelijker beeld krijgen van hoe het werkt en hoe we er voordeel uit kunnen halen. Laten we zeggen dat de HTML van onze testimonial bijvoorbeeld zo is geschreven:
Hier enkele testimonialtekst
Als onze getuigenis div had een breedte van 1000px, de standaardwaarden gebruiken voor widthStops hierboven zou Selector-Query enkele nieuwe klassenamen toevoegen. We zouden eindigen met:
Dan als de getuigenis div wordt kleiner gemaakt naar 800px, het zou er dan als volgt uitzien:
We kunnen deze dynamisch toegevoegde klassenamen gebruiken om verschillende lay-outs te stylen voor onze getuigenis. We kunnen gebruiken .max-1024 om breedtes van te stylen 1024 en groter; en we kunnen gebruiken .max-960 om stijlen te overschrijven voor onze kleinere ontwerpen.
Als we de testimonial-inhoud als volgt zouden ontwerpen:
We kunnen deze gebruiken als onze CSS:
/ * Grote getuigenis * / .testimonial img float: left; hoogte: 200 px; breedte: 200 px; .testimonial span display: block; overloop verborgen; / * Kleine testimonial * / .testimonial.max-640 img float: none; weergave: blok; marge: 0 auto; / * Kleine getuigenis * / .testimonial.max-480 img height: 150px; breedte: 150 px;
Het beste aan het gebruik van Selector-Query is dat we niet hoeven te weten waar deze testimonial-inhoud wordt geplaatst. Afhankelijk van de breedte wordt het gestileerd, in tegenstelling tot onze eerdere CSS waar ons ontwerp voor de grote inhoud van de testimonial van zijn ouder afhankelijk was (onthoud dat we .een kolom .testimonial in het eerdere voorbeeld).
In dit artikel hebben we kennisgemaakt met een nieuwe manier om onze inhoud in te delen op basis van hun breedte met Selector-Query. Hopelijk zou je een geweldig gebruik voor deze jQuery-plug-in in je ontwerpen kunnen vinden.
Als u een live voorbeeld van Selector-Query in actie wilt, kunt u de demo bekijken in de Github-repo.
Ik hoop dat je dit artikel leuk vond. Ik stel elke feedback, opmerkingen en suggesties zeer op prijs. Laat me weten wat je van Selector-Query vindt.
Gebruik je deze plug-in in een van je aankomende WordPress-thema's? Deel je gedachten hieronder!
