So verwenden Sie Masonry, um ein Pinterest-ähnliches Beitragsraster in WordPress hinzuzufügen

Dies ist ein Gastbeitrag von Josh Pollock

Die Pinterest-ähnliche Rasteranzeige von Beiträgen ist seit einiger Zeit ein beliebtes Design für die Indexseiten von WordPress-Blogs. Sie ist beliebt, nicht nur weil sie dem Aussehen der beliebten Social-Media-Seite ähnelt, sondern auch, weil sie den Platz auf dem Bildschirm optimal nutzt. Auf einem WordPress-Blog-Index ermöglicht sie, dass jede Beitragsvorschau die Größe hat, die sie natürlich benötigt, ohne zusätzlichen Platz zu hinterlassen.

In diesem Tutorial zeige ich Ihnen, wie Sie die beliebte Masonry JavaScript-Bibliothek verwenden, um kaskadierende Rasterlayouts für Ihren Blog-Index sowie für Archivseiten Ihres Themes zu erstellen. Ich werde einige Probleme ansprechen, die Sie für die mobile Optimierung berücksichtigen müssen, und wie Sie diese lösen können.

Hinweis: Dies ist ein Tutorial für Fortgeschrittene, für diejenigen, die sich mit der Bearbeitung von WordPress-Themes wohlfühlen und über ausreichende HTML/CSS-Kenntnisse verfügen.

Schritt 1: Notwendige Bibliotheken zu Ihrem Theme hinzufügen

Update: WordPress 3.9 enthält jetzt die neueste Version von Masonry.

Zuerst müssen Sie Masonry in Ihr Theme laden, indem Sie diesen Code verwenden:

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 exists

Dieser Code lädt einfach Masonry und stellt es Ihren Theme-Template-Dateien zur Verfügung (siehe unseren Leitfaden, wie Sie JavaScript und Styles in WordPress richtig hinzufügen). Beachten Sie auch, dass wir jQuery nicht als Abhängigkeit für beides hinzufügen. Einer der Vorteile von Masonry 3 ist, dass es kein jQuery benötigt, aber damit verwendet werden kann. Meiner Erfahrung nach ist die Initialisierung von Masonry ohne jQuery zuverlässiger und eröffnet die Möglichkeit, das Laden von jQuery zu überspringen, was sowohl die Ladezeiten von Seiten als auch Kompatibilitätsprobleme verbessern kann.

Schritt 2: Initialisieren Sie das Javascript

Diese nächste Funktion richtet Masonry ein, definiert die damit zu verwendenden Container und stellt sicher, dass alles in der richtigen Reihenfolge geschieht. Masonry muss die Größe jedes Elements auf der Seite berechnen, um sein Raster dynamisch zu layouten. Ein Problem, auf das ich bei Masonry in vielen Browsern gestoßen bin, ist, dass Masonry die Höhe von Elementen mit langsam ladenden 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 Größenberechnung.

Dies ist die Funktion und Aktion, die das Initialisierungsskript im Seiten-Footer ausgibt:

if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
    //set the container that Masonry will be inside of in a var
    var container = document.querySelector('#masonry-loop');
    //create empty var msnry
    var msnry;
    // initialize Masonry after all images have loaded
    imagesLoaded( container, function() {
        msnry = new Masonry( container, {
            itemSelector: '.masonry-entry'
        });
    });
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists

Die Funktion wird Schritt für Schritt mit Inline-Kommentaren erklärt. Die JavaScript-Funktion weist Masonry an, in einem Container mit der ID „masonry-loop“ nach Elementen mit der Klasse „masonry-entry“ zu suchen und das Raster erst zu berechnen, nachdem die Bilder geladen sind. Wir setzen den äußeren Container mit querySelector und den inneren mit itemSelector.

Schritt 2: Masonry-Schleife erstellen

Anstatt das HTML-Markup für Masonry direkt zu einer Vorlage hinzuzufügen, erstellen wir einen separaten Vorlagenteil dafür. Erstellen Sie eine neue Datei namens „content-masonry.php“ und fügen Sie sie Ihrem Theme hinzu. Dies ermöglicht es Ihnen, die Masonry-Schleife zu beliebig vielen verschiedenen Vorlagen hinzuzufügen.

In Ihrer neuen Datei fügen Sie den unten gezeigten Code hinzu. Das Markup ähnelt dem, was Sie normalerweise für eine Inhaltsvorschau sehen würden. Sie können es nach Belieben ändern, stellen Sie nur sicher, dass das äußerste Element die Klasse „masonry-entry“ hat, die wir im letzten Schritt als itemSelector festgelegt haben.

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <div class="masonry-post-excerpt">
            <?php the_excerpt(); ?>
        </div><!--.masonry-post-excerpt-->
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Dieses Markup hat Klassen für jeden seiner Teile, sodass Sie Markup hinzufügen können, das zu Ihrem Theme passt. Ich füge gerne einen schönen, leicht abgerundeten Rand zu .masonry-entry hinzu. Eine weitere schöne Option ist kein Rand für .masonry-entry, aber ihm einen leichten Schatten zu geben. Das sieht besonders gut aus, wenn das Beitrags-Thumbnail bis zum Rand des Containers reicht, was durch die Angabe von Rändern und Abständen von 0 in alle Richtungen für .masonry-thumbnail erreicht werden kann. Sie werden all diese Stile in einer Datei namens masonry.css im CSS-Verzeichnis Ihres Themes hinzufügen wollen.

Schritt 3: Masonry-Schleife zu Vorlagen hinzufügen

Jetzt, da wir unseren Vorlagenteil haben, können Sie ihn in jeder Vorlage Ihres Themes verwenden. Sie könnten ihn zu index.php hinzufügen, aber nicht zu category.php, wenn Sie ihn nicht für Kategoriearchive verwenden möchten. Wenn Sie ihn nur auf der Startseite Ihres Themes verwenden möchten, wenn er so eingestellt ist, dass er Blogbeiträge anzeigt, würden Sie ihn in home.php verwenden. Wo auch immer Sie sich entscheiden, Sie müssen nur Ihre Schleife in einen Container mit der ID „masonry-loop“ einpacken und den Vorlagenteil mit get_template_part() in die Schleife einfügen. Stellen Sie sicher, dass Sie den Masonry-Schleifen-Container vor while (have_posts() ) starten.

Hier ist zum Beispiel die Hauptschleife aus twentythirteen’s index.php:

<?php if ( have_posts() ) : ?>

    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', get_post_format() ); ?>
    <?php endwhile; ?>

    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Und hier ist es modifiziert, um unsere Masonry-Schleife zu verwenden:

<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
    <?php /* The loop */ ?>
    <?php while ( have_posts() ) : the_post(); ?>
        <?php get_template_part( 'content', 'masonry' ?>
    <?php endwhile; ?>
</div><!--/#masonry-loop-->
    <?php twentythirteen_paging_nav(); ?>

<?php else : ?>
    <?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>

Schritt 4: Responsive Breiten von Masonry-Elementen festlegen

Es gibt mehrere Möglichkeiten, die Breite jedes Masonry-Elements festzulegen. Sie können die Breite mit einer Pixelanzahl festlegen, wenn Sie Masonry initialisieren. Ich bin kein Fan davon, da ich responsive Themes verwende und es einige komplexe Media Queries erfordert, um die Dinge auf kleinen Bildschirmen richtig hinzubekommen. Für responsive Designs habe ich festgestellt, dass es am besten ist, eine Breitenangabe 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 zu lassen.

Alles, was dazu benötigt wird, ist die Division von 100 durch die Anzahl der Elemente, die Sie in einem einfachen Eintrag in der style.css Ihres Themes als Prozentsatz festlegen möchten. Wenn Sie beispielsweise vier Elemente pro Zeile wünschen, könnten Sie dies in Ihrer masonry.css-Datei tun:

.masonry-entry{width:25%}

Schritt 5: Mobile Optimierung

Wir könnten hier aufhören, aber ich glaube nicht, dass das Endergebnis auf kleinen Handybildschirmen besonders gut funktioniert. Wenn Sie mit dem Aussehen Ihres Themes mit dem neuen Masonry-Grid auf Ihrem Desktop zufrieden sind, überprüfen Sie es auf Ihrem Handy. Wenn Sie nicht zufrieden sind, wie es auf Ihrem Handy aussieht, müssen Sie ein wenig Arbeit investieren.

Ich glaube nicht, dass auf dem Bildschirm eines Telefons genug Platz für alles ist, was wir unserem content-masonry-Template-Teil hinzugefügt haben. Zwei gute Lösungen, die Ihnen zur Verfügung stehen, sind, den Auszug für Telefone zu kürzen oder ihn ganz zu überspringen. Hier ist eine zusätzliche Funktion, die Sie zu functions.php Ihres Themes hinzufügen können, um dies zu tun. Da ich nicht glaube, dass diese Probleme auf Tablets auftreten, verwende ich ein großartiges Plugin Mobble in allen Beispielen dieses Abschnitts, um die Änderungen nur auf Telefonen und nicht auf Tablets vorzunehmen. Ich prüfe auch, ob Mobble aktiv ist, bevor ich es verwende, und falle bei Bedarf 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 ) {
    //set the shorter length once
    $short = 10;
    //set long length once
    $long = 55;
    //if we can only set short excerpt for phones, else short for all mobile devices
    if (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 exists

Wie Sie sehen können, speichern wir zunächst die Länge des langen Auszugs und die Länge des kurzen Auszugs in Variablen, da wir diese Werte zweimal verwenden werden und sie bei Bedarf von einer Stelle aus ändern können möchten. Von dort aus testen wir, ob wir Mobble's is_phone() verwenden können. Wenn ja, setzen wir den kurzen Auszug für Telefone und den langen Auszug, wenn wir es nicht tun. Danach machen wir dasselbe im Grunde, aber mit wp_is_mobile, was alle mobilen Geräte betrifft, wenn is_phone() nicht verwendet werden kann. Hoffentlich wird der else-Teil dieser Funktion nie verwendet, aber es ist gut, vorsichtshalber eine Sicherung zu haben. Sobald die Logik für die Auszugslänge festgelegt ist, kommt es nur noch darauf an, die Funktion an den excerpt_length-Filter zu hängen.

Das Kürzen des Auszugs ist eine Option, aber wir können ihn auch mit einem einfachen Prozess ganz weglassen. Hier ist eine neue Version von content-masonry, bei der der gesamte Auszugsteil auf Handys weggelassen wird:

<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
    <div class="masonry-thumbnail">
        <a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
    </div><!--.masonry-thumbnail-->
<?php endif; ?>
    <div class="masonry-details">
        <h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
        <?php 
            //put the excerpt markup in variable so we don't have to repeat it multiple times.
            $excerpt = '<div class="masonry-post-excerpt">';
            $excerpt .= the_excerpt();
            $excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
            if (function_exists( 'is_phone') {
                if ( ! is_phone() ) {
                    echo $excerpt;
                }
            }
            else {
                if ( ! wp_is_mobile() ) {
                    echo $excerpt;
                }
            }
        ?>
    </div><!--/.masonry-entry-details -->  
</article><!--/.masonry-entry-->

Dieses Mal testen wir, ob wir uns nicht auf einem Telefon/Mobilgerät befinden, und wenn ja, geben wir den Auszugsteil unserer Schleife zurück. Wenn wir uns auf einem Telefon/Mobilgerät befinden, tun wir nichts.

Eine weitere Sache, die Sie vielleicht tun möchten, ist die Erhöhung der Breite der Masonry-Elemente, wodurch die Anzahl pro Zeile auf Mobilgeräten reduziert wird. Um dies zu tun, fügen wir basierend auf der Geräteerkennung einen anderen Inline-Stil zum Header 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 Masonry-Stile getrennt zu halten. Wenn Sie dies nicht verwenden, können Sie den Handle eines anderen, bereits registrierten Stylesheets verwenden.

if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
    //set the wide width
    $wide = '25%';
    //set narrow width
    $narrow = '50%';
    /**Determine value for $width**/
    //if we can only set narrow for phones, else narrow for all mobile devices
    if (function_exists( 'is_phone') {
        if ( is_phone() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }        
    }
    else {
        if ( wp_is_mobile() ) {
            $width = $narrow;
        }
        else {
            $width = $wide;
        }
    }
    /**Output CSS for .masonry-entry with proper width**/
    $custom_css = ".masonry-entry{width: {$width};}";
    //You must use the handle of an already enqueued stylesheet here.
    wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists

Diese Funktion lädt das benutzerdefinierte Stylesheet und setzt dann einen Wert für die Breite mit einer Logik, die Ihnen jetzt sehr vertraut sein sollte. Danach erstellen wir die Variable $custom_css, indem wir den Wert für die Breite in ein ansonsten regulär aussehendes CSS mit {$width} einfügen. Danach verwenden wir wp_add_inline_style, um WordPress anzuweisen, unsere Inline-Styles im Header auszugeben, wann immer das Masonry-Stylesheet verwendet wird, und dann hängen wir die gesamte Funktion an wp_enqueue_scripts und sind fertig.

Wenn Sie Ihre Masonry-Stile mit einer vorhandenen Stylesheet kombinieren möchten, stellen Sie sicher, dass Sie den Handle dieser Stylesheet mit wp_add_inline_style verwenden, sonst werden Ihre Inline-Stile nicht übernommen. Ich verwende gerne wp_add_inline_style, da ich den Action Hook für das Enqueueing von Masonry normalerweise in eine Bedingung packe, sodass es nur bei Bedarf hinzugefügt wird. Wenn ich Masonry zum Beispiel nur auf meinen Blog-Index- und Archivseiten verwende, würde ich das so machen:

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önnten zum Beispiel ähnliche Logik verwenden, um Masonry auf einem Mobilgerät ganz zu überspringen. Auch wp_add_inline_style() ist eine weniger genutzte, aber sehr hilfreiche Funktion, da sie es Ihnen ermöglicht, verschiedene Stile programmatisch basierend auf jeder Art von Bedingung festzulegen. Sie kann es Ihnen ermöglichen, den Stil eines beliebigen Elements radikal zu ändern, nicht nur basierend auf der Geräteerkennung, sondern die Änderungen könnten auch darauf basieren, welche Vorlage verwendet wird, oder sogar ob der Benutzer angemeldet ist oder nicht.

Ich hoffe, Sie sehen diese verschiedenen Änderungen, die ich vornehme, als Gelegenheit, kreativ zu werden. Masonry und ähnliche kaskadierende Grid-Systeme sind schon seit einiger Zeit beliebt, daher ist es Zeit für einige neue Wendungen dieser beliebten Idee. Zeigen Sie uns in den Kommentaren, welche coolen Wege Sie gefunden haben, Masonry in einem WordPress-Theme zu verwenden.

Ein vielseitiger WordPress-Experte, Josh Pollock schreibt über WordPress, entwickelt Themes, ist Community Manager für das Pods Framework und setzt sich für Open-Source-Lösungen für nachhaltiges Design ein.