Verwenden von jQuery Masonry für das Pinterest-Like-Posting

Durch die Aufnahme von jQuery Masonry in die WordPress 3.5-Kernbibliothek war es noch nie einfacher, das Layout einer Vorlage für das aktuelle Posting zu ändern.

Durch die Bereitstellung Ihrer Inhalte in einem Mauerwerk-Layout kann der Blog-Teil Ihrer Website für Ihre Leser visuell interessanter werden. Bei jQuery Masonry spielt es keine Rolle, wie lang Ihr Postauszug ist (natürlich), er passt sich an, um jeden Platz zu füllen. In diesem Tutorial wird die Idee der Verwendung der neu enthaltenen jQuery Masonry-Bibliothek mit WordPres 3.5 erläutert.

Was ist ein Mauerwerk??

Wenn Sie von einer Mauerwerksmauer gehört haben (denken Sie an eine Mauer), haben Sie ein ziemlich gutes Bild davon, wie ein Mauerwerk-Layout auf Ihrer Website aussehen könnte. Wenn Sie immer noch verwirrt sind, besuchen Sie Pinterest und sehen Sie sich an, wie sie die jeweiligen "Pins" auf ihrer Website angeordnet haben. Alles ist vertikal angeordnet und füllt den gesamten verfügbaren Platz aus. Es ist wichtig, den Begriff "vertikal" in diesem letzten Satz zu beachten. Sie können den gleichen Mauerwerkseffekt mit CSS-Floats erzielen, es kann jedoch zu Problemen mit dem Abstand kommen. Dies ist darauf zurückzuführen, dass CSS-Floats im Gegensatz zu jQuery Masonry Elemente zuerst horizontal und dann vertikal anordnen. Dies kann zu sehr inkonsistenten und manchmal unerwünschten Lücken in Ihrem Layout führen. Mit jQuery Masonry kann dieses Problem gelöst werden.

CSS-Float-Beispiel

Beachten Sie, dass bei der Verwendung von CSS-Floats Lücken zwischen Posts unterschiedlicher Höhe bestehen.

jQuery Masonry Beispiel

Mit jQuery Masonry fügt sich jeder Pfosten gut ein und hinterlässt keine unangenehmen Lücken.

Nun, da wir wissen, was ein Masonry-Layout ist, können wir ein einfaches jQuery Masonry-Layout für unsere letzten Beiträge erstellen.

Schritt 1 Verwenden von `wp_enqueue_script` um die Bibliothek zu laden

Bevor wir mit dem Aufbau unserer Mauer beginnen können, müssen Sie das entsprechende Skript laden. Sie müssen den folgenden Code zu Ihrem hinzufügen Functions.php Datei.

 function mason_script () wp_enqueue_script ('jquery-maurerarbeit');  add_action ('wp_enqueue_scripts', 'mason_script');

Schritt 2 Einrichten des Gitters

Für meine grundlegende Mauerwerksstruktur werde ich den folgenden HTML-Code in meine Schleife (oder benutzerdefinierte Vorlage - wo immer Sie Ihre Mauer bauen möchten) implementieren. Zuerst werde ich den Container für die Mauer aus Mauerwerk einrichten und dann den Container für jeden Pfosten in der Wand einrichten.

CSS einrichten

Sie müssen die Containerbreite und die Pfostenbreite definieren, um den tatsächlichen Mauereffekt zu erzielen. Für meine Demo habe ich meinen Container auf 960 Pixel breit eingestellt und möchte 4 Postsäulen haben. Ich muss also ein paar einfache Berechnungen durchführen, um herauszufinden, wie groß jeder Pfosten an meiner Wand sein sollte.

Ziegelsteinbreite = 960px / 4 Pfosten = jeweils 240 Pixel.

Mit dieser Zahl kann ich mein Layout in meinem Stylesheet einrichten:

 #container width: 960px; // Breite des gesamten Containers für die Wand .brick width: 220px; // Breite jedes Ziegels abzüglich der Polsterung zwischen Polsterung: 0px 10px 15px 10px;

Schritt 3 Richten Sie die Funktion ein

Als Nächstes müssen wir die Mauerwerk-Funktion so einrichten, dass unsere Div-Container alle in der Wand ineinandergreifen. Verwenden Sie dazu den folgenden Code:

 jQuery (document) .ready (Funktion ($) $ ('#container') .masonry (columnWidth: 220););

Fazit

Maurerarbeit enthält viele integrierte Optionen, die die Verwendung mit WordPress sehr attraktiv machen. Sie können beispielsweise die Animationsoption anwenden, um Ihre Post-Arrangements zu "animieren", zusätzliche Elemente an die Wand anzuhängen (ideal für Portfolio-Layouts) oder sie mit Infinte Scroll von Paul Irish integrieren. Unabhängig davon, wie Sie das Skript jQuery Masonry verwenden möchten, ist es eine willkommene Ergänzung zu WordPress 3.5.

Randnotiz: Diesen Effekt kann man auch in CSS3 erreichen. Sie müssen jedoch die neue "Spalten" -Funktion verwenden, die noch nicht in jedem Browser unterstützt wird.

Code