Hur man anvÀnder murverk för att lÀgga till Pinterest Style Post Grid i WordPress

Hur man anvÀnder murverk för att lÀgga till Pinterest Style Post Grid i WordPress

Pinterest-liknande rutnÀtvisning av inlÀgg har varit en populÀr design för WordPress-bloggs indexsidor ett tag. Det Àr populÀrt inte bara för att det efterliknar utseendet pÄ den populÀra sociala mediesidan, utan ocksÄ för att det utnyttjar platsen pÄ skÀrmen bÀst. PÄ ett WordPress-bloggindex tillÄter det att varje förhandsgranskning av inlÀgget Àr den storlek det naturligtvis 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 kaskadgridlayouter för ditt bloggindex, samt arkivsidor för ditt tema. Jag kommer att ta itu med nÄgra frÄgor som du mÄste tÀnka pÄ för mobiloptimering och hur du löser dem.

Obs: Detta Àr en avancerad nivÄhandledning 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 innehÄller nu den senaste versionen av Masonry.

Först mÄste du ladda murverk 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 murverk och gör den tillgÀnglig för ditt temas mallfiler (se vÄr guide om hur du korrekt lÀgger till JavaScripts och Styles i WordPress). Observera 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 det inte krÀver jQuery utan kan anvÀndas med det. Enligt min erfarenhet Àr initialisering av murverk utan jQuery mer tillförlitligt och öppnar möjligheten att hoppa över laddning av jQuery, vilket kan hjÀlpa till med bÄde sidladdningstider och kompatibilitetsproblem.

Steg 2: Initiera Javascript

NÀsta funktion stÀller in murverk, definierar behÄllarna som ska anvÀndas med det och ser ocksÄ till att allt hÀnder i rÀtt ordning. Murverk mÄste berÀkna storleken pÄ var och en av objekten pÄ sidan för att utforma sitt rutnÀt dynamiskt. Ett problem jag har stött pÄ med murverk i mÄnga webblÀsare Àr att murverk kommer att felberÀkna höjden pÄ objekt med lÄngsamt laddade bilder, vilket leder till överlappande objekt. Lösningen Àr att anvÀnda imagesLoaded för att förhindra att murverk berÀknar layouten tills alla bilder har laddats. Detta sÀkerstÀller korrekt dimensionering.

Detta Àr funktionen och ÄtgÀrden som kommer att initiera initialiseringsskriptet i sidfoten:


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 inline-kommentarer. Vad Javascript-funktionen gör Ă€r att be Masonry att titta inuti en behĂ„llare med id: n “murverk-slinga” för objekt med klassen “murverk-post” och att berĂ€kna rutnĂ€tet först efter att bilder har laddats. Vi stĂ€ller in den yttre behĂ„llaren med querySelector och den inre med itemSelector.

Steg 2: Skapa murverkslinga

IstĂ€llet för att lĂ€gga till HTML-markeringen för murverk direkt i en mall ska vi skapa en separat malldel 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-slingan i sĂ„ mĂ„nga olika mallar som du vill.

I din nya fil lĂ€gger du till koden som visas nedan. Markeringen liknar vad du normalt skulle se för förhandsgranskning av innehĂ„ll. Du kan Ă€ndra det Ă€ndĂ„ du behöver, var noga med att det yttersta elementet har klassen “murverk” som vi stĂ€llde in som itemSelector i det sista 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 markering har klasser för var och en av dess delar sÄ att du kan lÀgga till markering för att matcha ditt tema. Jag gillar att lÀgga till en fin, lite rundad kant till .masonry-entry. Ett annat trevligt alternativ Àr ingen grÀns för .masonry-entry, utan att ge det en liten skugga. Det ser sÀrskilt bra ut nÀr miniatyren av posten strÀcker sig hela vÀgen till behÄllarens kant, vilket kan Ästadkommas genom att ge .masonry-thumbnail marginaler och stoppningar 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 murverkslinga i mallar

Nu nĂ€r vi har vĂ„r malldel kan du anvĂ€nda den i vilken mall du vill i ditt tema. Du kan lĂ€gga till den i index.php, men inte category.php om du inte vill att den ska anvĂ€ndas för kategoriarkiv. Om du bara vill anvĂ€nda den pĂ„ ditt temas startsida, nĂ€r den Ă€r instĂ€lld pĂ„ att visa blogginlĂ€gg, skulle du anvĂ€nda den i home.php. Varhelst du vĂ€ljer Ă€r allt du behöver göra att slĂ„ in din slinga i en behĂ„llare med id: n “murverk-slinga” och lĂ€gga till malldelen i slingan med hjĂ€lp av get_template_part (). Se till att starta behĂ„llaren för murad slinga innan (have_posts ()).

HÀr Àr till exempel huvudslingan frÄn tjugondels 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 det modifierat för att anvÀnda vÄr murverksslinga:


<?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 pÄ murverk

Det finns flera sÀtt att stÀlla in bredden pÄ varje murverk. Du kan stÀlla in bredden med ett antal pixlar nÀr du initierar murverk. Jag Àr inte ett fan av att göra det eftersom jag anvÀnder lyhörda teman och det krÀver nÄgra komplexa mediefrÄgor för att fÄ saker rÀtt pÄ smÄ skÀrmar. För responsiva mönster har jag hittat det bÀsta att göra Àr att stÀlla in ett breddvÀrde för .masonry-entry med en procentsats, baserat pÄ hur mÄnga objekt du vill ha i rad och lÄta murverk göra resten av matematiken Ät dig.

Allt detta krÀver Àr att dela 100 med antalet objekt du vill stÀlla in procent i en enkel post i ditt temas stil.css. Om du till exempel vill ha fyra objekt i varje rad kan du göra det i din masonry.css-fil:

.masonry-entry {bredd: 25%}

Steg 5: Mobiloptimering

Vi kan stanna hÀr, men jag tycker 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 murverket pÄ ditt skrivbord, kolla in det pÄ din telefon. Om du inte Àr nöjd med hur det ser ut pÄ din telefon mÄste du göra lite arbete.

Jag tror inte att det finns tillrÀckligt med utrymme pÄ en telefons skÀrm för allt vi har lagt till vÄr del av innehÄllsmurer. TvÄ bra lösningar tillgÀngliga Àr att förkorta utdraget för telefoner eller hoppa över det helt. HÀr Àr en extra funktion som du kan lÀgga till i ditt temas funktioner. Php för att göra det. Eftersom jag inte tror att dessa problem Àr nÄgot problem pÄ surfplattor anvÀnder jag ett fantastiskt plugin Mobble i alla exemplen i det hÀr avsnittet för att bara göra Àndringar pÄ telefoner, inte surfplattor. Jag kollar ocksÄ för att se om Mobble Àr aktiv innan den anvÀnds och om det behövs faller tillbaka till den mer allmÀnna mobildetekteringsfunktionen 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 du ser börjar vi med att lagra den lĂ„nga utdragslĂ€ngden och den korta utdragslĂ€ngden 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 senare. DĂ€rifrĂ„n testar vi om vi kan anvĂ€nda Mobbles is_phone (). I sĂ„ fall stĂ€ller vi in ​​det korta utdraget för telefoner och det lĂ„nga utdraget om vi inte gör det. Efter det gör vi samma grundlĂ€ggande sak, men att anvĂ€nda wp_is_mobile, vilket kommer att pĂ„verka alla mobila enheter, om is_phone () inte kan anvĂ€ndas. Förhoppningsvis kommer den andra delen av den hĂ€r funktionen aldrig att anvĂ€ndas, men det Ă€r bra att ha en sĂ€kerhetskopia för alla fall. NĂ€r utdragslĂ€ngdslogiken Ă€r instĂ€lld kommer det bara att koppla funktionen till utdragslĂ€ngdsfiltret.

Att förkorta utdraget Àr ett alternativ, men vi kan ocksÄ helt avskaffa det med en enkel process. HÀr Àr en ny version av innehÄllsmurning, med hela utdragets del utelÀmnad 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 anvĂ€nder en telefon / mobil enhet och i sĂ„ fall returnerar vi utdragsdelen av vĂ„r slinga. Om vi ​​anvĂ€nder en telefon / mobil enhet gör vi ingenting.

En annan sak du kanske vill göra Àr att öka bredden pÄ murverkartiklarna, vilket minskar antalet i rad, pÄ mobila enheter. För att göra detta lÀgger vi till en annan inbyggd stil i rubriken baserat pÄ enhetsdetektering. Eftersom denna funktion anvÀnder wp_add_inline_style kommer det att bero pÄ ett specifikt formatmall. I det hÀr fallet anvÀnder jag masonry.css, som du kanske vill, för att hÄlla dina murstilar separata. Om du inte slutar anvÀnda det kan du anvÀnda handtaget frÄn ett annat redan registrerat formatmall.


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


Denna funktion enuques det anpassade formatmallen, och stÀller sedan in ett vÀrde för bredd med hjÀlp av vad som nu borde vara mycket vÀlbekant logik. Efter det skapar vi variabeln $ custom_css genom att skicka vÀrdet för bredd till en annars ser regelbundet CSS-bit med {$ width}. DÀrefter anvÀnder vi wp_add_inline_style för att be WordPress skriva ut vÄra inline-stilar i sidhuvudet nÀr Masonry-stilarket anvÀnds och sedan kopplar vi hela funktionen till wp_enqueue_scripts och vi Àr klara.

Om du valde att kombinera dina murverkstilar till ett befintligt formatmall, var noga med att anvÀnda handtaget pÄ det stilarket med wp_add_inline_style annars kommer dina inbyggda format inte att inkluderas. Jag gillar att anvÀnda wp_add_inline_style eftersom jag vanligtvis lindar actionkroken för att tÀcka murverk i en villkorlig sÄ att den bara lÀggs till nÀr det behövs. Till exempel om jag bara anvÀnder murverk pÄ mitt bloggindex och arkivsidor skulle jag göra detta:


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 din hjÀrna. Du kan till exempel anvÀnda liknande logik för att helt hoppa över murverk pÄ en mobil enhet. OcksÄ wp_add_inline_style () Àr en mindre anvÀnd, men ÀndÄ mycket hjÀlpsam funktion, eftersom den lÄter dig programmatiskt stÀlla in olika stilar baserat pÄ alla typer av villkor. Det kan tillÄta dig att radikalt Àndra stilen för vilket element som helst baserat pÄ inte bara 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 som jag gör som ett tillfÀlle att bli kreativ. Murverk och liknande kaskadgaller har varit populÀra en stund nu, sÄ det Àr dags för nÄgra nya vÀndningar pÄ den hÀr populÀra idén. Visa oss i kommentarerna vilka coola sÀtt du har kommit pÄ för att anvÀnda murverk i ett WordPress-tema.