Wie man Masonry verwendet, um ein Beitragsraster im Stil von Pinterest in WordPress hinzuzufügen

Dies ist ein Gastbeitrag von Josh Pollock

Die Pinterest-ähnliche Gitterdarstellung von Beiträgen ist seit einiger Zeit ein beliebtes Design für WordPress-Blog-Indexseiten. Es ist nicht nur beliebt, weil es das Aussehen der beliebten Social-Media-Website nachahmt, sondern auch, weil es den Platz auf dem Bildschirm optimal nutzt. In einem WordPress-Blog-Index kann jede Beitragsvorschau die Größe haben, die sie natürlich haben muss, ohne zusätzlichen Platz zu lassen.

In diesem Tutorial zeige ich Ihnen, wie Sie mit der beliebten Masonry JavaScript Library kaskadierende Grid-Layouts für Ihren Blog-Index sowie Archivseiten für Ihr Thema erstellen können. 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, die mit der Bearbeitung von WordPress-Themes vertraut sind und über ausreichende HTML/CSS-Kenntnisse verfügen.

Schritt 1: Fügen Sie die erforderlichen Bibliotheken zu Ihrem Theme hinzu

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 macht es für die Vorlagendateien Ihres Themes verfügbar (siehe unsere Anleitung zum korrekten Hinzufügen von JavaScripts und Styles in WordPress). Beachten Sie auch, dass wir jQuery nicht als Abhängigkeit für beide hinzufügen. Einer der Vorteile von Masonry 3 ist, dass es jQuery nicht benötigt, aber mit ihm 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 bei den Seitenladezeiten als auch bei Kompatibilitätsproblemen helfen kann.

Schritt 2: Initialisieren Sie das Javascript

Diese nächste Funktion richtet Masonry ein, definiert die Container, die mit ihm verwendet werden, und sorgt dafür, dass alles in der richtigen Reihenfolge geschieht. Masonry muss die Größe der einzelnen Elemente auf der Seite berechnen, um sein Raster dynamisch zu gestalten. Ein Problem, auf das ich mit 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 ist, imagesLoaded zu verwenden, um zu verhindern, dass Masonry das Layout berechnet, bis alle Bilder geladen sind. Dies gewährleistet eine korrekte Größenbestimmung.

Dies ist die Funktion und Aktion, die das Initialisierungsskript in der Fußzeile der Seite 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 der Klasse „masonry-entry“ zu suchen und das Raster erst nach dem Laden der Bilder zu berechnen. 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 in eine Vorlage einzufügen, werden wir einen separaten Vorlagenteil dafür erstellen. Erstellen Sie eine neue Datei mit dem Namen „content-masonry.php“ und fügen Sie sie zu Ihrem Thema hinzu. Auf diese Weise können Sie die Masonry-Schleife in so viele verschiedene Vorlagen einfügen, wie Sie möchten.

In die neue Datei fügen Sie den unten abgebildeten Code ein. Das Markup ist ähnlich wie das, was Sie normalerweise für jede Inhaltsvorschau sehen. Sie können ihn 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 jedes seiner Teile, so dass Sie Markup hinzufügen können, das zu Ihrem Thema passt. Ich mag es, einen schönen, leicht abgerundeten Rahmen zu .masonry-entry hinzuzufügen. Eine weitere gute Möglichkeit ist, .masonry-entry keinen Rahmen zu geben, sondern einen leichten Schatten zu erzeugen. Das sieht besonders gut aus, wenn die Miniaturansicht des Beitrags bis zum Rand des Containers reicht, was erreicht werden kann, indem man .masonry-thumbnail Ränder und Abstände von 0 in alle Richtungen gibt. Fügen Sie alle diese Stile in einer Datei namens masonry.css im css-Verzeichnis Ihres Themas hinzu.

Schritt 3: Masonry-Schleife zu Vorlagen hinzufügen

Jetzt, wo wir unseren Vorlagenteil haben, können Sie ihn in jeder beliebigen Vorlage in Ihrem Thema verwenden. Sie können ihn in index.php einfügen, aber nicht in category.php, wenn Sie ihn nicht für Kategoriearchive verwenden wollen. Wenn Sie es nur auf der Startseite Ihres Themes verwenden wollen, wenn es Blogbeiträge anzeigt, würden Sie es in home.php verwenden. Wo auch immer Sie die Schleife einsetzen wollen, Sie müssen sie nur in einen Container mit der ID „masonry-loop“ packen und den Template-Teil mit get_template_part() in die Schleife einfügen. Stellen Sie sicher, dass Sie den Container „masonry-loop“ vor while (have_posts() ) starten.

Hier ist zum Beispiel die Hauptschleife aus der index.php von twentythirteen:

<?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 sie geändert, 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 der Masonry-Elemente einstellen

Es gibt mehrere Möglichkeiten, die Breite der einzelnen Masonry-Elemente festzulegen. Sie können die Breite mit einer Anzahl von Pixeln festlegen, wenn Sie Masonry initialisieren. Ich bin kein Fan dieser Methode, da ich responsive Themes verwende und es einige komplexe Media-Queries erfordert, um die Dinge auf kleinen Bildschirmen richtig zu machen. Für responsive Designs ist es am besten, einen Breitenwert für .masonry-entry mit einem Prozentsatz festzulegen, der davon abhängt, wie viele Elemente Sie in einer Reihe haben möchten, und Masonry den Rest der Mathematik für Sie erledigen zu lassen.

Dazu müssen Sie nur 100 durch die Anzahl der gewünschten Elemente teilen, um den Prozentsatz in einem einfachen Eintrag in der style.css Ihres Themas festzulegen. Wenn Sie zum Beispiel vier Elemente in jeder Zeile haben möchten, können 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 Telefonbildschirmen besonders gut funktioniert. Wenn Sie damit zufrieden sind, wie Ihr Thema mit dem neuen Masonry-Gitter auf Ihrem Desktop aussieht, sehen Sie es sich auf Ihrem Handy an. Wenn Sie mit der Darstellung auf Ihrem Handy nicht zufrieden sind, müssen Sie ein wenig nachbessern.

Ich glaube nicht, dass auf dem Bildschirm eines Telefons genug Platz für alles ist, was wir zu unserem Content-Masonry-Vorlagenteil hinzugefügt haben. Zwei gute Lösungen sind, den Auszug für Handys zu kürzen oder ihn ganz wegzulassen. Hier ist eine zusätzliche Funktion, die Sie in die functions.php Ihres Themes einfügen können, um dies zu tun. Da ich nicht glaube, dass diese Probleme auf Tablets auftreten, verwende ich in allen Beispielen in diesem Abschnitt das großartige Plugin Mobble, um die Änderungen nur auf Handys und nicht auf Tablets vorzunehmen. Ich überprüfe auch, ob Mobble aktiv ist, bevor ich es verwende, und greife gegebenenfalls auf die allgemeinere Funktion zur Erkennung von Mobilgeräten 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 und des kurzen Auszugs in Variablen, da wir diese Werte zweimal verwenden werden und wir sie bei Bedarf später an einer Stelle ändern können möchten. Von dort aus testen wir, ob wir Mobbles is_phone() verwenden können. Wenn ja, setzen wir den kurzen Auszug für Telefone und den langen Auszug, wenn dies nicht der Fall ist. Danach machen wir das Gleiche, verwenden aber 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, für den Fall der Fälle ein Backup zu haben. Sobald die Logik für die Auszugslänge festgelegt ist, muss die Funktion nur noch mit dem Filter excerpt_length verknüpft werden.

Den Auszug zu kürzen ist eine Möglichkeit, aber wir können ihn auch mit einem einfachen Verfahren ganz abschaffen. Hier ist eine neue Version von content-masonry, bei der der gesamte Auszug auf Telefonen weggelassen wurde:

<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 andere Sache, die Sie vielleicht tun möchten, ist, die Breite der Masonry-Elemente zu erhöhen, was die Anzahl in einer Reihe auf mobilen Geräten reduziert. Dazu fügen wir der Kopfzeile einen anderen Inline-Stil hinzu, der auf der Geräteerkennung basiert. Da diese Funktion wp_add_inline_styles verwendet, ist sie von einem bestimmten Stylesheet abhängig. In diesem Fall verwende ich die Datei masonry.css, die Sie vielleicht verwenden möchten, um die Stile für Ihre Mauerwerke getrennt zu halten. Wenn Sie das nicht verwenden, können Sie das 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 ruft das benutzerdefinierte Stylesheet auf und setzt dann einen Wert für die Breite mit einer Logik, die nun sehr vertraut sein sollte. Danach erstellen wir die Variable $custom_css, indem wir den Wert für die Breite in ein ansonsten normal aussehendes Stück CSS mit {$width} einfügen. Danach verwenden wir wp_add_inline_style, um WordPress mitzuteilen, dass es unsere Inline-Stile im Header ausgeben soll, wenn das Masonry-Stylesheet verwendet wird, und dann haken wir die ganze Funktion an wp_enqueue_scripts an und sind fertig.

Wenn Sie Ihre Masonry-Stile in ein bestehendes Stylesheet einbinden wollen, müssen Sie das Handle dieses Stylesheets mit wp_add_inline_style verwenden, sonst werden Ihre Inline-Stile nicht berücksichtigt. Ich verwende gerne wp_add_inline_style, weil ich den Aktionshaken für das Einreihen von Masonry in eine Bedingung verpacke, damit er nur bei Bedarf hinzugefügt wird. Wenn ich zum Beispiel Masonry nur auf meinen Blog-Index- und Archivseiten verwende, würde ich dies tun:

if ( is_home() || is_archive() ) {
    add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}

Diese letzten Beispiele sollten Ihnen weitere Ideen in den Sinn kommen lassen. Sie könnten zum Beispiel eine ähnliche Logik verwenden, um Masonry auf einem mobilen Gerät ganz zu überspringen. Auch wp_add_inline_style() ist eine wenig genutzte, aber sehr hilfreiche Funktion, die es Ihnen ermöglicht, programmatisch verschiedene Stile auf der Grundlage einer beliebigen Art von Bedingung festzulegen. Mit dieser Funktion können Sie den Stil eines beliebigen Elements radikal ändern, und zwar nicht nur auf der Grundlage der Geräteerkennung, sondern auch je nachdem, welche Vorlage verwendet wird oder ob der Benutzer eingeloggt ist oder nicht.

Ich hoffe, Sie sehen diese verschiedenen Änderungen, die ich vornehme, als eine Gelegenheit, kreativ zu werden. Masonry und ähnliche kaskadierende Gittersysteme sind schon seit einiger Zeit beliebt, es ist also an der Zeit, diese beliebte Idee neu zu interpretieren. Zeigen Sie uns in den Kommentaren, welche coolen Möglichkeiten Sie sich für die Verwendung von Masonry in einem WordPress-Theme ausgedacht haben.

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