Share
Wir haben alle von Medienanfragen gehört. Wir haben sie ausgiebig in unseren Themen verwendet, um sie ansprechbar zu machen. Sie eignen sich für die meisten Zwecke, aber wenn es um säulengesteuerte Layouts geht, benötigen wir manchmal mehr Kontrolle, um unsere Designs hervorzuheben.
In diesem Artikel erfahren Sie mehr über das jQuery-Plug-In Selector-Query und wie Sie es in Ihren WordPress-Themes verwenden können.
Was ist es? Stellen Sie sich das als eine Art Medienabfrage vor. Statt jedoch die Browserbreite als Referenz zu verwenden, wird die aktuelle Breite des Elements verwendet.
Bevor wir uns dem eigentlichen Thema von Selector-Query zuwenden, wollen wir zuerst über die Medienfragen sprechen. In einer Nussschale, Durch Medienabfragen können Stile in Ihrem CSS nur angewendet werden, wenn die Breite des Browsers innerhalb eines bestimmten Bereichs liegt.
Medienanfragen sind das Herz und die Seele von Responsive Design. Innerhalb einer einzigen Webseite und CSS-Datei können wir die Anzeige mit unterschiedlichen Bildschirmauflösungen und Geräten unterschiedlich anzeigen. Bei Medienabfragen müssen Sie nicht zwei verschiedene Desktop- und Mobile-Versionen einer Website erstellen.
Lassen Sie uns einen kurzen Überblick über die Verwendung geben. Für Desktops und Tablets können wir unsere CSS-Regeln mit der folgenden Medienabfrage umschließen. Das folgende CSS würde für Browserbreiten von verwendet werden 768px und darüber:
@media only screen und (min-width: 768px) / * CSS-Regeln finden Sie hier * /
Für kleinere Geräte wie Smartphones können wir Folgendes verwenden. Diesem würde für Breiten von folgen 767px und darunter:
@media only screen und (max-width: 767px) / * CSS-Regeln finden Sie hier * /
Bei der Gestaltung von Websites können wir unser Design mithilfe von Medienabfragen genau so anpassen, wie wir es uns wünschen, unterschiedliche Bildschirmgrößen zu betrachten. Bei der Gestaltung von WordPress-Themes benötigen wir jedoch mehr Kontrolle.
Als WordPress-Theme-Autoren möchten wir, dass unsere Designs sowohl flexibel sind als auch gleichzeitig toll aussehen. Wir fügen Funktionen wie Kurzcodes und mehrspaltige Layouts ein und geben unseren Benutzern die Freiheit, zu tun, was sie wollen.
Je zufriedener der Kunde ist, desto besser sind wir.
Nehmen wir zum Beispiel an, einer unserer Kunden wollte einen Kurzbefehl für einen Testimonial in eine Spalte mit voller Breite einfügen. Nehmen wir an, wir haben diesen Shortcode nur so gestaltet, dass er neben anderen Testimonials (oder anderen Inhalten) innerhalb von 3 oder mehr Spalten platziert wird:
Für dieses bestimmte Szenario ist es möglicherweise besser, wenn sich der Kurzcode für den Testimonial in einem größeren Container befindet. Vielleicht wäre ein solches Design besser für eine Spalte mit voller Breite:
Leider können Medienabfragen in diesem Fall nicht helfen. Warum? Weil die Bildschirmbreite immer gleich ist, unabhängig davon, ob das Testimonial in einer Spalte mit voller Breite oder in einem Drittel platziert wurde!
Okay, du denkst vielleicht nach, "Wie wäre es, wenn Sie einfach die Klasse der Spalte in CSS verwenden?" Sie werden wahrscheinlich in Ihrer CSS-Datei so etwas enden:
.testimonial / * zweispaltig oder mehr hier styling * / @media only screen und (min-width: 768px) .one-column. testimonial / * überschreiben mit Full-width-Style hier * /
Nun, so etwas wie CSS könnte funktionieren. Ich habe jedoch einen eleganteren Vorschlag: Selector-Query.
Selector-Query ist ein leichtes jQuery-Plugin, mit dem verschiedene Stile basierend auf ihrer Breite auf Ihre Elemente angewendet werden können.
Grundsätzlich werden durch dieses Plugin in Abhängigkeit von der aktuellen Breite zusätzliche Klassennamen auf Ihre Elemente angewendet. Wenn die Größe des Browsers geändert wird, werden die Klassennamen entsprechend der neuen Elementbreite entsprechend aktualisiert.
Sie können dann diese unterschiedlichen Klassennamen verwenden, um die verschiedenen Layouts für Ihren Inhalt zu gestalten.
Bei Selector-Query wird auf abgelehnte Browsergrößenänderungsereignisse gewartet. Anschließend wird die Breite Ihrer HTML-Elemente verwendet und anhand eines Arrays mit den genannten Breiten geprüft widthStops. Wenn die Elementbreite unter einem dieser Werte liegt widthStop Werte werden die Klassennamen der größeren zu dem Element hinzugefügt.
Ich werde erklären widthStops Später mit einem Beispiel, lassen Sie uns jetzt über die Verwendung des Plugins sprechen.
Das erste, was wir tun müssen, ist das jQuery-Plugin-Skript einzubinden. Sie können Selector-Query von seinem GitHub-Repo herunterladen und dann in Ihr Designverzeichnis aufnehmen. Legen Sie es in Ihre js Ordner, um Ihre Dateistruktur sauber zu halten.
Sobald Sie ihn in Ihrem Design-Verzeichnis haben, können Sie diesen Code in Ihr Verzeichnis einfügen Functions.php Selector-Query direkt vor dem Karosserie ist geschlossen. Dies würde uns einige Seitenladezeit sparen:
Accentsconagua
Funktion 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'); Das Aktivieren des jQuery-Plugins ist einfach. Sie müssen nur anrufen SelectorQuery auf deinen Elementen:
jQuery (document) .ready (Funktion ($) $ ('. selector'). selectorQuery ();); Und das ist es!
Zusätzlich verfügt das Plugin über zwei konfigurierbare Optionen, die Sie während der Initialisierung übergeben können.
Sie können diese Werte nach Ihren Wünschen anpassen:
$ ('. selector'). selectorQuery ('widthStops': [320, 480, 640, 960, 1024, 1280]) // Ein Array mit Breiten 'classPrefix': 'max-' // Hiermit werden Klassennamen vorangestellt ); widthStops sind die Breiten, mit denen die Breite des Elements verglichen wird. Das classPrefix wird zusammen mit verwendet widthStops um die Klassennamen zu generieren. Schauen wir uns ein Beispiel an, um die Dinge besser zu erklären.
Verwenden Sie unser Testimonial-Beispiel oben und wenden Sie Selector-Query an, um ein klareres Bild davon zu bekommen, wie es funktioniert und wie wir davon profitieren können. Nehmen wir zum Beispiel an, dass der HTML-Code unseres Testimonials so geschrieben ist:
Hier ein Testimonialtext
Wenn unser Zeugnis div hatte eine Breite von 1000px, Verwenden der Standardwerte für widthStops oben würde Selector-Query einige neue Klassennamen hinzufügen. Wir würden am Ende mit:
Dann wenn das Zeugnis div wird kleiner verkleinert 800px, es würde dann so aussehen:
Wir können diese dynamisch hinzugefügten Klassennamen verwenden, um verschiedene Layouts für unser Testimonial zu gestalten. Wir können benutzen .max-1024 Breiten von 1024 und größer; und wir können verwenden .max-960 Stile für unsere kleineren Designs überschreiben.
Wenn wir den Inhalt des Zeugnisses so gestalten würden:
Wir können dieses als CSS verwenden:
/ * Großes Testimonial * / .testimonial img float: left; Höhe: 200px; Breite: 200px; . testimonial span display: block; Überlauf versteckt; / * Kleiner Erfahrungsbericht * / .testimonial.max-640 img float: none; Bildschirmsperre; Marge: 0 auto; / * Tiny Zeugnis * / .testimonial.max-480 img height: 150px; Breite: 150px;
Das Beste an Selector-Query ist, dass wir nicht wissen müssen, wo sich dieser Inhalt befindet. Es wird abhängig von seiner Breite gestylt, anders als in unserem früheren CSS, wo unser Design für den großen Inhalt von Testimonials von seinem übergeordneten Element abhing (denken Sie daran, dass wir es verwendet haben) .einspaltiges. testimonial im vorherigen Beispiel).
In diesem Artikel haben wir erfahren, wie wir mit Selector-Query eine neue Art der Gestaltung unserer Inhalte in Abhängigkeit von ihrer Breite gestalten können. Hoffentlich würden Sie dieses Plugin für jQuery in Ihren Designs verwenden.
Wenn Sie eine Live-Auswahl von Selector-Query in Aktion wünschen, können Sie die Demo im Github-Repo testen.
Ich hoffe, Ihnen hat dieser Artikel gefallen. Ich freue mich über jedes Feedback, Kommentare und Vorschläge. Lassen Sie mich wissen, was Sie von Selector-Query halten.
Verwenden Sie dieses Plugin in einem Ihrer kommenden WordPress-Themes? Teilen Sie unten Ihre Gedanken mit!
