Hur man använder Masonry för att lägga till ett Pinterest-stil inläggsgaller i WordPress

Detta är ett gästinlägg av Josh Pollock

Det Pinterest-liknande rutnätsvisningen av inlägg har varit en populär design för WordPress bloggindexsidor ett tag. Den är populär inte bara för att den efterliknar utseendet på den populära sociala medier-sajten, utan också för att den utnyttjar utrymmet på skärmen på bästa sätt. På ett WordPress bloggindex tillåter den varje inläggsförhandsgranskning att vara den storlek den naturligt behöver vara, utan att lämna extra utrymme.

I den här handledningen kommer jag att visa dig hur du använder det populära Masonry JavaScript-biblioteket för att skapa kaskadformade rutnätslayouter för ditt bloggindex, samt arkivsidor för ditt tema. Jag kommer att ta upp några problem som du behöver tänka på för mobiloptimering och hur du löser dem.

Notera: Detta är en handledning på avancerad nivå för dem som känner sig bekväma med att redigera WordPress-teman och har tillräcklig HTML/CSS-kunskap.

Steg 1: Lägg till nödvändiga bibliotek i ditt tema

Uppdatering: WordPress 3.9 inkluderar nu den senaste versionen av Masonry.

Först måste du ladda Masonry i ditt tema, med den här koden:

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

Den här koden laddar helt enkelt masonry och gör den tillgänglig för ditt temas mallfiler (se vår guide om hur du korrekt lägger till JavaScript och stilar i WordPress). Notera också att vi inte lägger till jQuery som ett beroende för någon av dem. En av fördelarna med Masonry 3 är att den inte kräver jQuery, men kan användas med det. Erfarenhetsmässigt är det mer tillförlitligt att initiera Masonry utan jQuery, och det öppnar upp möjligheten att hoppa över laddningen av jQuery, vilket kan hjälpa både laddningstider för sidor och kompatibilitetsproblem.

Steg 2: Initiera Javascript

Den här nästa funktionen ställer in Masonry, definierar behållarna som kommer att användas med den och ser också till att allt sker i rätt ordning. Masonry behöver beräkna storleken på vart och ett av objekten på sidan för att dynamiskt kunna lägga ut sitt rutnät. Ett problem jag har stött på med Masonry i många webbläsare är att Masonry felaktigt beräknar höjden på objekt med långsamt laddande bilder, vilket leder till överlappande objekt. Lösningen är att använda imagesLoaded för att förhindra att Masonry beräknar layouten förrän alla bilder har laddats. Detta säkerställer korrekt storlek.

Detta är funktionen och åtgärden som kommer att mata ut initialiseringsskriptet i sidans sidfot:

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

Funktionen förklaras steg för steg med kommentarer i koden. Javascript-funktionen talar om för Masonry att leta i en behållare med id:t "masonry-loop" efter objekt med klassen "masonry-entry" och att beräkna rutnätet först efter att bilderna har laddats. Vi ställer in den yttre behållaren med querySelector och den inre med itemSelector.

Steg 2: Skapa Masonry-loop

Istället för att lägga till HTML-markup för Masonry direkt i en mall skapar vi en separat mall-del för den. Skapa en ny fil som heter “content-masonry.php” och lägg till den i ditt tema. Detta gör att du kan lägga till Masonry-loopen i så många olika mallar som du vill.

I din nya fil lägger du till koden som visas nedan. Märkningen liknar vad du normalt skulle se för en innehållsförhandsgranskning. Du kan ändra den hur du vill, se bara till att det yttersta elementet har klassen “masonry-entry” som vi angav som itemSelector i förra steget.

<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-->

Denna markup har klasser för var och en av dess delar så att du kan lägga till markup som matchar ditt tema. Jag gillar att lägga till en fin, lätt rundad kant till .masonry-entry. Ett annat trevligt alternativ är ingen kant för .masonry-entry, men att ge den en lätt skugga. Det ser särskilt bra ut när inläggets miniatyrbild sträcker sig hela vägen till behållarens kant, vilket kan uppnås genom att ge .masonry-thumbnail marginaler och utfyllnad på 0 i alla riktningar. Du vill lägga till alla dessa stilar i en fil som heter masonry.css i ditt temas css-katalog.

Steg 3: Lägg till Masonry-loop i mallar

Nu när vi har vår mall-del kan du använda den i vilken mall som helst i ditt tema du vill. Du kanske lägger till den i index.php, men inte i category.php om du inte vill att den ska användas för kategoribilder. Om du bara vill att den ska användas på ditt temas startsida, när den är inställd på att visa blogginlägg, skulle du använda den i home.php. Var du än väljer, allt du behöver göra är att linda in din loop i en behållare med id:t "masonry-loop" och lägga till mall-delen i loopen med get_template_part(). Se till att starta masonry-loop-behållaren före while (have_posts() ).

Till exempel, här är huvudloopen från 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; ?>

Och här är den modifierad för att använda vår Masonry-loop:

<?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; ?>

Steg 4: Ställ in responsiva bredder för Masonry-objekt

Det finns flera sätt att ställa in bredden på varje Masonry-objekt. Du kan ställa in bredden med ett antal pixlar när du initierar Masonry. Jag är inte ett fan av att göra det eftersom jag använder responsiva teman och det kräver några komplexa mediafrågor för att få saker rätt på små skärmar. För responsiva designer har jag funnit att det bästa är att ställa in ett breddvärde för .masonry-entry med en procentandel, baserat på hur många objekt du vill ha i en rad och låta Masonry göra resten av uträkningen åt dig.

Allt som krävs är att dividera 100 med antalet objekt du vill ställa in procentandelen för i en enkel post i ditt temas style.css. Till exempel, om du vill ha fyra objekt i varje rad kan du göra detta i din masonry.css-fil:

.masonry-entry{width:25%}

Steg 5: Mobiloptimering

Vi kan sluta här, men jag tror inte att slutresultatet fungerar otroligt bra på små telefonskärmar. När du är nöjd med hur ditt tema ser ut med det nya Masonry-rutnätet på din dator, kolla in det på din telefon. Om du inte är nöjd med hur det ser ut på din telefon, då behöver du göra lite arbete.

Jag tror inte att det finns tillräckligt med utrymme på en telefons skärm för allt vi lade till i vår content-masonry-mall. Två bra lösningar som finns tillgängliga för dig är att förkorta utdraget för telefoner eller hoppa över det helt. Här är en extra funktion du kan lägga till i ditt temas functions.php för att göra det. Eftersom jag inte tror att dessa problem är ett problem på surfplattor, använder jag ett bra plugin Mobble i alla exempel i det här avsnittet för att bara göra ändringarna på telefoner, inte surfplattor. Jag kontrollerar också om Mobble är aktivt innan jag använder det och om nödvändigt faller tillbaka på den mer generella mobiligenkänningsfunktionen wp_is_mobile som är inbyggd i WordPress.

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

Som ni kan se börjar vi med att lagra längden på det långa utdraget och det korta utdraget i variabler, eftersom vi kommer att använda dessa värden två gånger och vi vill kunna ändra dem från en plats om vi behöver det senare. Därifrån testar vi om vi kan använda Mobbles is_phone(). Om så är fallet ställer vi in det korta utdraget för telefoner och det långa utdraget om vi inte är det. Efter det gör vi samma grundläggande sak, men med wp_is_mobile, som kommer att påverka alla mobila enheter, om is_phone() inte kan användas. Förhoppningsvis kommer else-delen av denna funktion aldrig att användas, men det är bra att ha en backup ifall. När logiken för utdragslängden är inställd handlar det bara om att koppla funktionen till filtret excerpt_length.

Att förkorta utdraget är ett alternativ, men vi kan också helt ta bort det med en enkel process. Här är en ny version av content-masonry, med hela utdragsdelen borttagen på telefoner:

<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-->

Den här gången testar vi för att se om vi inte är på en telefon/mobil enhet och om så är fallet returnerar vi utdraget från vår loop. Om vi är på en telefon/mobil enhet gör vi ingenting.

En annan sak du kanske vill göra är att öka bredden på Masonry-objekten, vilket minskar antalet i en rad, på mobila enheter. För att göra detta kommer vi att lägga till en annan inline-stil till headern baserat på enhetsdetektering. Eftersom denna funktion använder wp_add_inline_styles kommer den att vara beroende av ett specifikt stylesheet. I det här fallet använder jag masonry.css, som du kanske vill ha för att hålla dina masonry-stilar separata. Om du inte använder det kan du använda handtaget från ett annat, redan registrerat stylesheet.

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

Den här funktionen lägger till den anpassade stilmallen och ställer sedan in ett värde för bredden med vad som nu borde vara mycket bekant logik. Därefter skapar vi variabeln $custom_css genom att skicka värdet för bredden till en annars vanlig CSS-kod med {$width}. Därefter använder vi wp_add_inline_style för att tala om för WordPress att skriva ut våra inline-stilar i sidhuvudet när Masonry-stilmallen används och sedan kopplar vi hela funktionen till wp_enqueue_scripts och vi är klara.

Om du valde att kombinera dina Masonry-stilar till en befintlig stilmall, se till att använda handtaget för den stilmallen med wp_add_inline_style, annars kommer dina inline-stilar inte att inkluderas. Jag gillar att använda wp_add_inline_style eftersom jag generellt sett slår in åtgärdskroken för att köa Masonry i ett villkor så att den bara läggs till när det behövs. Till exempel, om jag bara använder Masonry på mitt bloggindex och arkivsidor skulle jag göra så här:

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

Dessa sista exempel bör öppna upp några andra idéer i ditt sinne. Till exempel kan du använda liknande logik för att helt hoppa över Masonry på en mobil enhet. Även wp_add_inline_style() är en mindre använd, men mycket användbar funktion eftersom den låter dig programmatiskt ställa in olika stilar baserat på vilken typ av villkor som helst. Den kan låta dig radikalt ändra stilen på vilket element som helst baserat inte bara på enhetsdetektering, utan ändringarna kan också baseras på vilken mall som används, eller till och med om användaren är inloggad eller inte.

Jag hoppas att du ser dessa olika förändringar jag gör som en möjlighet att vara kreativ. Masonry och liknande kaskadgaller har varit populära ett tag nu, så det är dags för några nya vändningar på denna populära idé. Visa oss i kommentarerna vilka coola sätt du har kommit på för att använda Masonry i ett WordPress-tema.

En mångsidig WordPress-person, Josh Pollock skriver om WordPress, gör temautveckling, fungerar som community manager för Pods Framework och förespråkar open source-lösningar för hållbar design.