Teilen Sie dies:
Wie man Mauerwerk verwendet, um ein Pinterest-Stil-Postraster in WordPress hinzuzufügen
Dies ist ein Gastbeitrag von Josh Pollock
Das Pinterest-ähnliche Raster der Beiträge ist seit einiger Zeit ein beliebtes Design für WordPress-Blog-Indexseiten. Es ist nicht nur deshalb beliebt, weil es das Erscheinungsbild der beliebten Social-Media-Site nachahmt, sondern auch, weil der Platz auf dem Bildschirm optimal genutzt wird. In einem WordPress-Blog-Index kann jede Post-Vorschau so groß sein, wie sie normalerweise benötigt wird, ohne zusätzlichen Platz zu lassen.
In diesem Lernprogramm werde ich Ihnen zeigen, wie Sie die beliebte Masonry JavaScript Library verwenden, um Layout-Layouts für Ihr Blog zu erstellen und Archivseiten für Ihr Design zu erstellen. Ich werde auf einige Probleme eingehen, die Sie für die Optimierung von Mobilgeräten und deren Lösung berücksichtigen müssen.
Hinweis: Dies ist ein Lernprogramm für Fortgeschrittene für diejenigen, die sich beim Bearbeiten von WordPress-Themes wohl fühlen und über ausreichende HTML / CSS-Kenntnisse verfügen.
Schritt 1: Fügen Sie Ihrem Theme die notwendigen Bibliotheken hinzu
Aktualisieren: WordPress 3.9 enthält jetzt die neueste Version von Masonry.
Zuerst müssen Sie Masonry mit diesem Code in Ihr Design laden:
if (! function_exists ('slug_scripts_masonry')): if (! is_admin ()): function slug_scripts_masonry () wp_enqueue_script ('masonry'); wp_enqueue_style ('masonry', get_template_directory_uri (). '/ css /'); add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); endif; //! is_admin () endif; //! slug_scripts_masonry existiert Dieser Code lädt einfach Mauerwerk und stellt es den Schablonendateien Ihres Themas zur Verfügung (siehe unser Handbuch zum richtigen Hinzufügen von JavaScripts und -Stilen in WordPress). Beachten Sie auch, dass wir für beide keine jQuery als Abhängigkeit hinzufügen. Einer der Vorteile von Masonry 3 ist, dass jQuery nicht benötigt wird, aber damit verwendet werden kann. Nach meiner Erfahrung ist die Initialisierung von Masonry ohne jQuery zuverlässiger und eröffnet die Möglichkeit, das Laden von jQuery zu überspringen, was sowohl beim Laden von Seiten als auch bei Kompatibilitätsproblemen helfen kann.
Schritt 2: Javascript initialisieren
Diese nächste Funktion richtet Masonry ein, definiert die Container, die damit verwendet werden, und sorgt dafür, dass alles in der richtigen Reihenfolge abläuft. Mauerwerk muss die Größe jedes Elements auf der Seite berechnen, um das Raster dynamisch zu gestalten. Ein Problem, das ich in vielen Browsern mit Masonry kennengelernt habe, ist, dass Masonry die Höhe von Elementen mit langsamen Bildern falsch berechnet, was zu überlappenden Elementen führt. Die Lösung besteht darin, imagesLoaded zu verwenden, um zu verhindern, dass Masonry das Layout berechnet, bis alle Bilder geladen sind. Dies gewährleistet eine korrekte Dimensionierung.
Dies ist die Funktion und Aktion, die das Initialisierungsskript im Seitenfuß ausgeben wird:
if (! function_exists ('slug_masonry_init')): function slug_masonry_init () ?> // Legt den Container fest, in dem sich Masonry in einem var befindet. var container = document.querySelector ('# masonry-loop'); // leere Variable erstellen msnry var msnry; // Mauerwerk initialisieren, nachdem alle Bilder imagesLoaded geladen haben (container, function () msnry = new Masonry (container, itemSelector: '.masonry-entry');); Die Funktion wird Schritt für Schritt mit Inline-Kommentaren erklärt. Die Javascript-Funktion sagt Masonry, dass es in einen Container mit der ID "Masonry-Loop" für Elemente mit der Klasse "Masonry-entry" schauen und das Raster erst berechnen muss, nachdem Bilder geladen wurden. Wir setzen den äußeren Container mit querySelector und den inneren mit itemSelector.
Schritt 2: Masonry Loop erstellen
Anstatt das HTML-Markup für Masonry direkt einer Vorlage hinzuzufügen, erstellen wir einen separaten Vorlagenteil. Erstellen Sie eine neue Datei mit dem Namen "content-masonry.php" und fügen Sie sie Ihrem Design hinzu. Auf diese Weise können Sie die Masonry-Schleife zu so vielen verschiedenen Vorlagen hinzufügen, wie Sie möchten.
In Ihrer neuen Datei fügen Sie den unten gezeigten Code hinzu. Das Markup ähnelt dem, was Sie normalerweise für jede Inhaltsvorschau sehen würden. Sie können ihn auf jeden Fall ändern, stellen Sie jedoch sicher, dass das äußerste Element die Klasse "Maurer-Eintrag" hat, die wir im letzten Schritt als itemSelector festgelegt haben.
Dieses Markup verfügt über Klassen für jeden Teil, sodass Sie Ihrem Motiv Markierungen hinzufügen können. Ich mag es, einen schönen, leicht abgerundeten Rand zu .masonry-entry hinzuzufügen. Eine weitere nette Option ist keine Grenze für .masonry-Eintritte, sondern um einen leichten Schatten zu erzeugen. Das sieht besonders gut aus, wenn das Postminiaturbild den ganzen Weg bis zum Rand des Containers reicht, was erreicht werden kann, indem .masonry-thumbnail-Ränder und Auffüllungen von 0 in alle Richtungen angegeben werden. Sie sollten alle diese Stile in einer Datei namens masonry.css im css-Verzeichnis Ihres Themes hinzufügen.
Schritt 3: Fügen Sie den Masonry Loop Vorlagen hinzu
Jetzt, da wir unseren Vorlagenteil haben, können Sie ihn in jeder beliebigen Vorlage Ihres Designs verwenden. Sie können es zu index.php hinzufügen, nicht jedoch category.php, wenn Sie nicht möchten, dass es für Kategoriearchive verwendet wird. Wenn Sie möchten, dass nur die Homepage Ihres Themas verwendet wird und Blog-Beiträge angezeigt werden, würden Sie sie in home.php verwenden. Wo immer Sie sich entscheiden, wickeln Sie Ihre Schleife in einen Container mit der ID "masonry-loop" ein und fügen den Schablonenteil mithilfe von get_template_part () in die Schleife ein. Stellen Sie sicher, dass Sie den Mauerschleifencontainer vor (while_posts ()) starten..
Zum Beispiel ist hier die Hauptschleife aus dem Index.php von twentythirteen:
Und hier wird es modifiziert, um unsere Mauerwerkschleife zu nutzen:
Schritt 4: Legen Sie die responsive Breite der Mauerwerkselemente fest
Es gibt mehrere Möglichkeiten, die Breite jedes Mauerwerks festzulegen. Sie können die Breite mithilfe einer Anzahl von Pixeln festlegen, wenn Sie Mauerwerk initialisieren. Ich bin kein Fan davon, da ich responsive Themes verwende, und es erfordert einige komplexe Medienabfragen, um die Dinge auf kleinen Bildschirmen richtig zu machen. Für responsive Designs habe ich festgestellt, dass es am besten ist, einen Breitenwert für .masonry-entry mit einem Prozentsatz festzulegen, basierend darauf, wie viele Elemente Sie in einer Reihe haben möchten, und Masonry den Rest der Berechnung für Sie erledigen lässt.
Dazu müssen Sie nur die 100 durch die Anzahl der Elemente dividieren, für die Sie den Prozentsatz eines einfachen Eintrags in style.css Ihres Themas festlegen möchten. Wenn Sie beispielsweise vier Elemente in jeder Zeile haben möchten, können Sie dies in Ihrer masonry.css-Datei tun:
.Mauerwerkseintrag Breite: 25%
Schritt 5: Mobile Optimierung
Wir könnten hier aufhören, aber ich denke nicht, dass das Endergebnis auf kleinen Telefonbildschirmen unglaublich gut funktioniert. Wenn Sie mit dem neuen Masonry-Raster auf Ihrem Desktop zufrieden sind, sehen Sie es auf Ihrem Handy aus. Wenn Sie sich nicht darüber freuen, wie es auf Ihrem Telefon aussieht, müssen Sie ein wenig arbeiten.
Ich glaube nicht, dass auf dem Bildschirm des Telefons genügend Platz für alles ist, was wir zu unserem Content-Maurerarbeitsvorlagenteil hinzugefügt haben. Es gibt zwei gute Lösungen, die Ihnen zur Verfügung stehen, wenn Sie den Auszug für ein Telefon verkürzen oder ganz weglassen. Hier ist eine zusätzliche Funktion, die Sie zu den Funktionen Ihres Themes hinzufügen können. Da ich nicht der Meinung bin, dass diese Probleme auf Tablets ein Problem darstellen, verwende ich in allen Beispielen in diesem Abschnitt ein großartiges Plugin, um nur die Änderungen an Handys und nicht an Tablets vorzunehmen. Ich überprüfe auch, ob Mobble vor dem Einsatz aktiv ist, und greife ggf. auf die allgemeinere mobile Erkennungsfunktion wp_is_mobile zurück, die in WordPress integriert ist.
if (! function_exists ('slug_custom_excerpt_length')): function slug_custom_excerpt_length ($ length) // setzt die kürzere Länge einmal ein $ short = 10; // long length einmal setzen $ long = 55; // wenn wir nur einen kurzen Auszug für Telefone festlegen können, ansonsten Abkürzung für alle mobilen Geräte, wenn (function_exists ('is_phone') if (is_phone ()) return $ short; else return $ long; else if (wp_is_mobile ()) return $ short; else return $ long; add_filter ('excerpt_length', 'slug_custom_excerpt_length', 999); endif; //! slug_custom_excerpt_length ist vorhanden Wie Sie sehen, beginnen wir damit, die lange Auszugslänge und die kurze Auszugslänge in Variablen zu speichern, da wir diese Werte zweimal verwenden werden und wir möchten, dass sie von einem Ort aus geändert werden können, wenn wir dies später tun müssen. Von dort aus testen wir, ob wir is_phone () von Mobble verwenden können. Wenn ja, setzen wir den kurzen Auszug für Telefone und den langen Auszug, wenn wir nicht sind. Danach machen wir dasselbe, aber mit wp_is_mobile, das sich auf alle mobilen Geräte auswirkt, wenn is_phone () nicht verwendet werden kann. Hoffentlich wird der übrige Teil dieser Funktion niemals verwendet, aber es ist gut, ein Backup für alle Fälle zu haben. Wenn die Logik für die Ausschnittslänge festgelegt ist, muss die Funktion nur noch mit dem Filter "excerpt_length" verknüpft werden.
Die Verkürzung des Ausschnitts ist eine Möglichkeit, aber wir können auch ganz auf einen einfachen Prozess verzichten. Hier ist eine neue Version von Content-Maurerarbeit, bei der der gesamte Auszug für Telefone verwendet wird:
Dieses Mal testen wir, ob wir uns nicht auf einem Telefon / Mobilgerät befinden, und wenn ja, senden wir den Ausschnitt unserer Schleife zurück. Wenn wir uns auf einem Telefon / Mobilgerät befinden, tun wir nichts.
Möglicherweise möchten Sie auch die Breite der Mauerwerkselemente erhöhen, wodurch sich die Anzahl der hintereinander liegenden Elemente auf mobilen Geräten verringert. Dazu fügen wir dem Header basierend auf der Geräteerkennung einen anderen Inline-Stil hinzu. Da diese Funktion wp_add_inline_styles verwendet, ist sie von einem bestimmten Stylesheet abhängig. In diesem Fall verwende ich masonry.css, was Sie vielleicht möchten, um Ihre Mauerwerksstile voneinander zu trennen. Wenn Sie das nicht verwenden, können Sie den Griff aus einem anderen, bereits registrierten Stylesheet verwenden.
if (! function_exists ('slug_masonry_styles')): function slug_masonry_styles () // setze die Breite $ wide = '25% '; // schmale Breite einstellen $ narrow = '50% '; / ** Wert für $ width ermitteln ** / // wenn wir nur schmal für Telefone festlegen können, andernfalls schmal für alle mobilen Geräte if (function_exists ('is_phone') if (is_phone ()) $ width = $ narrow; else $ width = $ wide; else if (wp_is_mobile ()) $ width = $ narrow; else $ width = $ wide; / ** CSS für den .masonry-Eintrag mit der richtigen Breite ausgeben ** / $ custom_css = ".masonry-entry width: $ width;"; // Sie müssen hier das Handle eines bereits in die Warteschlange eingereihten Stylesheets verwenden. wp_enqueue_scripts ',' slug_masonry_styles '); endif; //! slug_masonry_styles existiert Diese Funktion legt das benutzerdefinierte Stylesheet fest und legt dann einen Wert für die Breite fest, der nun eine sehr vertraute Logik sein sollte. Danach erstellen wir die Variable $ custom_css, indem wir den Wert für width mit $ width in ein ansonsten normal aussehendes CSS-Bit übergeben. Danach verwenden wir wp_add_inline_style, um WordPress anzuweisen, unsere Inline-Stile im Header zu drucken, wenn das Masonry-Stylesheet verwendet wird. Dann haken wir die gesamte Funktion in wp_enqueue_scripts ein und fertig.
Wenn Sie Ihre Masonry-Stile in ein vorhandenes Stylesheet kombinieren, müssen Sie unbedingt den Ziehpunkt dieses Stylesheets mit wp_add_inline_style verwenden, da sonst Ihre Inline-Stile nicht enthalten sind. Ich verwende gerne wp_add_inline_style, weil ich normalerweise den Action-Hook für das Enqueueing von Masonry in einer Bedingung umhalte, so dass er nur bei Bedarf hinzugefügt wird. Wenn ich zum Beispiel nur Masonry auf meinem Blogindex und meinen Archivseiten verwende, würde ich Folgendes tun:
if (is_home () || is_archive ()) add_action ('wp_enqueue_scripts', 'slug_scripts_masonry'); Diese letzten Beispiele sollten einige andere Ideen in Ihrem Gehirn eröffnen. Sie können beispielsweise eine ähnliche Logik verwenden, um Masonry auf einem mobilen Gerät insgesamt zu überspringen. Auch wp_add_inline_style () ist eine weniger benutzte, aber sehr hilfreiche Funktion, da Sie programmgesteuert verschiedene Stile basierend auf jeder Art von Bedingung festlegen können. Sie können den Stil jedes Elements radikal ändern, nicht nur aufgrund der Geräteerkennung. Die Änderungen können auch davon abhängen, welche Vorlage verwendet wird oder ob der Benutzer angemeldet ist oder nicht.
Ich hoffe, Sie sehen diese verschiedenen Veränderungen, die ich mache, als Chance, kreativ zu werden. Mauerwerk und ähnliche kaskadierende Gittersysteme sind seit einiger Zeit populär, daher ist es Zeit für einige neue Wendungen an dieser populären Idee. Zeigen Sie uns in den Kommentaren, mit welchen coolen Möglichkeiten Sie Masonry in einem WordPress-Theme verwenden.
Ein vielseitiger WordPress-Typ, Josh Pollock, schreibt über WordPress, erarbeitet die Themenentwicklung, fungiert als Community-Manager für das Pods Framework und setzt sich für Open Source-Lösungen für nachhaltiges Design ein.