Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Puchar WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Jak użyć Masonry do dodania siatki wpisów w stylu Pinterest w WordPressie?

Wpis gościnny autorstwa Josha Pollocka

Wyświetlanie wpisów w formie siatki przypominającej Pinterest jest od jakiegoś czasu popularnym projektem stron indeksowych blogów WordPress. Jest popularny nie tylko dlatego, że naśladuje wygląd popularnej witryny mediów społecznościowych, ale także dlatego, że najlepiej wykorzystuje przestrzeń na ekranie. W indeksie bloga WordPress pozwala to na podgląd każdego wpisu w rozmiarze, w jakim naturalnie powinien być, bez pozostawiania dodatkowego miejsca.

W tym poradniku pokażę ci, jak używać popularnej biblioteki JavaScript Masonry do tworzenia kaskadowych układów siatki dla indeksu twojego bloga, a także stron archiwum dla twojego motywu. Poruszę kilka problemów, które należy wziąć pod uwagę przy optymalizacji mobilnej i jak je rozwiązać.

Screenshot of Masonry Grid Layout in WordPress

Uwaga: Jest to poradnik na poziomie zaawansowanym dla tych, którzy czują się komfortowo edytując motywy WordPress i mają wystarczającą wiedzę HTML/CSS.

Krok 1: Dodaj niezbędne biblioteki do twojego motywu

Aktualizacja: WordPress 3.9 zawiera teraz najnowszą wersję Masonry.

Najpierw musisz wczytywać Masonry do twojego motywu, używając tego kodu:

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

.

Ten kod po prostu wczytuje masonry i udostępnia go plikom szablonu twojego motywu (zobacz nasz przewodnik na temat prawidłowego dodawania skryptów JavaScript i stylów w WordPressie). Należy również pamiętać, że nie dodajemy jQuery jako zależności. Jedną z zalet Masonry 3 jest to, że nie wymaga jQuery, ale może być z nim używany. Z mojego doświadczenia wynika, że inicjalizacja Masonry bez jQuery jest bardziej niezawodna i otwiera możliwość pominięcia wczytywania jQuery, co może być pomocne zarówno w przypadku czasu wczytywania strony, jak i problemów z kompatybilnością.

Krok 2: Inicjalizacja Javascript

Ta następna funkcja konfiguruje Masonry, definiuje kontenery, które będą z nim używane, a także upewnia się, że wszystko dzieje się we właściwej kolejności. Masonry musi obliczyć rozmiar każdego elementu na stronie, aby dynamicznie układać swoją siatkę. Problem, który napotkałem z Masonry w wielu przeglądarkach, polega na tym, że Masonry błędnie oblicza wysokość elementów z wolno wczytującymi się obrazkami, co prowadzi do nakładania się elementów. Rozwiązaniem jest użycie funkcji imagesLoaded, aby uniemożliwić Masonry obliczanie układu, dopóki wszystkie obrazki nie zostaną wczytywane. Zapewnia to prawidłowy rozmiar.

Jest to funkcja i działanie, które spowoduje wyświetlenie skryptu inicjalizacyjnego w stopce strony:

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

.

Funkcja jest wyjaśniona krok po kroku z komentarzami inline. Funkcja Javascript nakazuje Masonry szukać wewnątrz kontenera o identyfikatorze „masonry-loop” elementów z klasą „masonry-entry” i obliczać siatkę dopiero po wczytywaniu obrazków. Zewnętrzny kontener ustawiamy za pomocą querySelector, a wewnętrzny za pomocą itemSelector.

Krok 2: Tworzenie pętli masońskiej

Zamiast dodawać znaczniki HTML dla Masonry bezpośrednio do szablonu, utworzymy dla niego osobny fragment szablonu. Utwórz nowy plik o nazwie „content-masonry.php” i dodaj go do twojego motywu. Umożliwi to dodanie pętli Masonry do dowolnej liczby szablonów.

W twoim nowym pliku utwórz kod pokazany poniżej. Znaczniki są podobne do tych, które normalnie można zobaczyć w podglądzie treści. Możesz go zmodyfikować w dowolny sposób, po prostu upewnij się, że najbardziej zewnętrzny element ma klasę „masonry-entry”, którą ustawiliśmy jako itemSelector w ostatnim kroku.

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

.

Ten znacznik ma klasy dla każdej z jego części, więc możesz dodać znaczniki pasujące do twojego motywu. Lubię dodawać ładne, lekko zaokrąglone obramowanie do .masonry-entry. Inną fajną opcją jest brak obramowania dla .masonry-entry, ale nadanie mu lekkiego cienia. Wygląda to szczególnie dobrze, gdy miniaturka wpisu rozciąga się na całą drogę do granicy kontenera, co można osiągnąć poprzez nadanie .masonry-thumbnail marginesów i dopełnienia 0 we wszystkich kierunkach. Wszystkie te style należy dodać do pliku o nazwie masonry.css w katalogu css twojego motywu.

Krok 3: Dodanie pętli masonry do szablonów

Teraz, gdy mamy już nasz fragment szablonu, możesz go użyć w dowolnym szablonie twojego motywu. Możesz dodać go do index.php, ale nie do category.php, jeśli nie chcesz, aby był używany w archiwach kategorii. Jeśli chcesz, aby był używany tylko na stronie głównej twojego motywu, gdy jest ustawiony na wyświetlanie wpisów na blogu, użyj go w home.php. Gdziekolwiek wybierzesz, wszystko co musisz zrobić, to zawinąć twoją pętlę w kontener o identyfikatorze „masonry-loop” i dodać fragment szablonu do pętli za pomocą get_template_part(). Upewnij się, że kontener pętli masonry został uruchomiony przed while (have_posts()).

Na przykład, oto główna pętla z index.php strony 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; ?>

.

A tutaj jest zmodyfikowana, aby użyć naszej pętli Masonry:

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

.

Krok 4: Ustawianie responsywnych szerokości elementów Masonry

Istnieje kilka sposobów na ustawienie szerokości każdego elementu Masonry. Możesz ustawić szerokość za pomocą liczby pikseli podczas inicjalizacji Masonry. Nie jestem fanem tego sposobu, ponieważ używam responsywnych motywów i wymaga to skomplikowanych zapytań o media, aby uzyskać prawidłowe działanie na małych ekranach. W przypadku projektów responsywnych najlepszą rzeczą do zrobienia jest ustawienie wartości szerokości dla .masonry-entry z wartością procentową, w oparciu o liczbę elementów w rzędzie i pozwolenie Masonry na wykonanie reszty obliczeń za Ciebie.

Wszystko, czego to wymaga, to podzielenie 100 przez liczbę elementów, które chcesz ustawić procentowo w prostym wpisie w style.css twojego motywu. Na przykład, jeśli chcesz mieć cztery elementy w każdym rzędzie, możesz to zrobić w twoim pliku masonry.css:

.masonry-entry{width:25%}

Krok 5: Optymalizacja mobilna

Moglibyśmy zatrzymać się w tym miejscu, ale nie sądzę, aby efekt końcowy działał niesamowicie dobrze na małych ekranach telefonów. Gdy już będziesz zadowolony z wyglądu twojego motywu z nową siatką Masonry na komputerze, sprawdź go na telefonie. Jeśli nie jesteś zadowolony z tego, jak wygląda na twoim telefonie, będziesz musiał trochę popracować.

Nie sądzę, aby na ekranie telefonu było wystarczająco dużo miejsca na wszystko, co dodaliśmy do naszego fragmentu szablonu Masonry. Dwa dobre rozwiązania dostępne dla ciebie to skrócenie zajawki dla telefonów lub pominięcie jej całkowicie. Oto dodatkowa funkcja, którą możesz dodać do functions.php twojego motywu, aby to zrobić. Ponieważ nie sądzę, aby te problemy były problemem na tabletach, używam świetnej wtyczki Mobble we wszystkich przykładach w tej sekcji, aby wprowadzić zmiany tylko na telefonach, a nie tabletach. Sprawdzam również, czy Mobble jest włączana przed jej użyciem i w razie potrzeby wracam do bardziej ogólnej funkcji wykrywania urządzeń mobilnych wp_is_mobile, która jest wbudowana w 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

.

Jak widać, zaczynamy od przechowywania długości długiego i krótkiego zajawki w zmiennych, ponieważ będziemy używać tych wartości dwukrotnie i chcemy mieć możliwość zmiany ich z jednego miejsca, jeśli zajdzie taka potrzeba później. Następnie sprawdzamy, czy możemy użyć funkcji is_phone() Mobble. Jeśli tak, ustawiamy krótką zajawkę dla telefonów i długą, jeśli nie. Następnie robimy tę samą podstawową rzecz, ale używając wp_is_mobile, co będzie miało wpływ na wszystkie urządzenia mobilne, jeśli nie można użyć is_phone(). Miejmy nadzieję, że część else tej funkcji nigdy nie zostanie użyta, ale dobrze jest mieć kopię zapasową na wszelki wypadek. Po ustawieniu logiki długości zajawki wystarczy podpiąć funkcję do filtra excerpt_length.

Skrócenie zajawki jest jedną z opcji, ale możemy też całkowicie z niej zrezygnować za pomocą prostego procesu. Oto nowa wersja content-masonry, z całą zajawką pominiętą na telefonach:

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

.

Tym razem sprawdzamy, czy nie jesteśmy na telefonie / urządzeniu mobilnym, a jeśli tak, zwracamy zajawkę naszej pętli. Jeśli jesteśmy na telefonie/urządzeniu mobilnym, nie robimy nic.

Inną rzeczą, którą możesz chcieć zrobić, jest zwiększenie szerokości elementów Masonry, co zmniejsza liczbę w rzędzie na urządzeniach mobilnych. Aby to zrobić, dodamy inny styl inline do nagłówka w oparciu o wykrywanie urządzenia. Ponieważ ta funkcja używa wp_add_inline_styles, będzie zależna od konkretnego arkusza stylów. W tym przypadku używam pliku masonry.css, który może być przydatny, jeśli chcesz oddzielić twoje style masonry. Jeśli nie chcesz z niego korzystać, możesz użyć uchwytu z innego, już zarejestrowanego arkusza stylów.

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

.

Ta funkcja wywołuje własny arkusz stylów, a następnie ustawia wartość szerokości przy użyciu bardzo dobrze znanej logiki. Następnie tworzymy zmienną $custom_css, przekazując wartość szerokości do normalnie wyglądającego fragmentu CSS za pomocą {$width}. Następnie używamy wp_add_inline_style, aby powiedzieć WordPressowi, aby drukował nasze style inline w nagłówku za każdym razem, gdy używany jest arkusz stylów Masonry, a następnie podpinamy całą funkcję do wp_enqueue_scripts i gotowe.

Jeśli zdecydujesz się połączyć swoje style Masonry z istniejącym arkuszem stylów, pamiętaj, aby użyć uchwytu tego arkusza stylów z wp_add_inline_style, w przeciwnym razie twoje style inline nie zostaną uwzględnione. Lubię używać wp_add_inline_style, ponieważ zazwyczaj zawijam hak działania dla enqueueing Masonry w warunku, więc jest on dodawany tylko wtedy, gdy jest to potrzebne. Na przykład, jeśli używam Masonry tylko na indeksie bloga i stronach archiwum, zrobiłbym to:

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

.

Te kilka ostatnich przykładów powinno otworzyć kilka innych pomysłów w twoim mózgu. Na przykład można użyć podobnej logiki, aby całkowicie pominąć Masonry na urządzeniach mobilnych. Również wp_add_inline_style() jest rzadziej używaną, ale bardzo pomocną funkcją, ponieważ pozwala programowo ustawiać różne style w oparciu o dowolny rodzaj warunku. Umożliwia ona radykalną zmianę stylu dowolnego elementu w oparciu nie tylko o wykrywanie urządzenia, ale zmiany mogą być również oparte na używanym szablonie, a nawet na tym, czy użytkownik loguje się, czy nie.

Mam nadzieję, że te różne zmiany, które wprowadzam, będą okazją do wykazania się kreatywnością. Masonry i podobne kaskadowe systemy siatki są popularne już od jakiegoś czasu, więc nadszedł czas na nowe zwroty w tym popularnym pomyśle. Pokaż nam w komentarzach, jakie fajne sposoby na wykorzystanie Masonry w motywie WordPress wymyśliłeś.

Josh Pollock, wielozadaniowy WordPressowiec, pisze o WordPressie, zajmuje się tworzeniem motywów, służy jako menedżer społeczności dla Pods Framework i opowiada się za rozwiązaniami open source dla zrównoważonego projektowania.

Ujawnienie: Nasze treści są wspierane przez czytelników. Oznacza to, że jeśli klikniesz na niektóre z naszych linków, możemy otrzymać prowizję. Zobacz jak WPBeginner jest finansowany, dlaczego to ma znaczenie i jak możesz nas wspierać. Oto nasz proces redakcyjny.

Avatar

This post was written by a guest contributor. You can see their details in the post above. If you'd like to write a guest post for WPBeginner, then check out our Write for WPBeginner page for details. We'd love to share your tips with our community.

Najlepszy zestaw narzędzi WordPress

Uzyskaj BEZPŁATNY dostęp do naszego zestawu narzędzi - zbiór produktów i zasobów związanych z WordPressem, które każdy profesjonalista powinien mieć!

Reader Interactions

39 komentarzyZostaw odpowiedź

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Gabi

    Hi, i wanted to know if there is a way of using the masonry grid to show registered users. Any ideas?

  3. Neil

    Just a quick note if you’re getting the „imagesLoaded” error, try adding the Javascript code after the wp_footer call in your footer.php.

    This work for me:

    Add to functions.php

    add_action( 'wp_enqueue_scripts’, 'slug_masonry’ );
    function slug_masonry( ) {
    wp_enqueue_script(’masonry’); // note this is not jQuery
    }

    In your loop, make sure your div is:

    And the image class is:

    and then after wp_footer in your footer.php this:

    //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’
    });
    });

  4. Marisa Di Monda

    Hi Andy I just tried this and I couldn’t get it to work. Everything is still running vertically in one column.
    Any solutions?

  5. Marisa Di Monda

    I’m having the same problem. Did you guys solve it?

  6. Peter

    did not work for me. i see only two images on my front page which are arranged underneath. don’t know where is the problem :(

  7. Eva

    For some reason my posts will just all show just in rows like normal, not in masonry form, I’m not really sure how this can happen. Any ideas?

    • Peter

      yeah, i have the same error. any solutions for this?

  8. jcbrmn06

    For anyone still having issues with this, I noticed that this code:

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

    });

    });

    Was before the masonry JS library. Therefore you get the imagesLoaded error. Like Andy suggested below putting it in the header should fix it. Basically you just have to make sure the library has to come before this code.

  9. Andy Giesler

    Thanks again for this tutorial, it really helped start me on my way.

    Even with everything in place, I saw intermittent problems where the tiles simply ran down the left of the page in a single column, and Firebug confirmed that sometimes the Masonry code didn’t execute. This happened only occasionally, and only in Firefox.

    It seemed that under certain load scenarios, there were probems with code trying to execute before the required files were loaded. I don’t think this was an imagesLoaded problem, since that has different symptoms.

    I fixed the problem as follows:

    1. The „slug_masonry_init” function places the masonry init code inline into the footer. I removed that whole function (as well as the add_action 'wp_footer’ code) and moved the JS into an extenal file: masonry-init.js

    2. I wrapped the masonry init code in jQuery to take advantage of its document.ready ability. It’s unfortunate to pull in jQuery since this is the jQuery-free version of Masonry, but document.ready seemed necessary for the code to execute in all load scenarios.

    (function( $ ) {
    „use strict”;
    $(function() {

    });
    }(jQuery));

    3. I enqueued the scripts like this:

    wp_enqueue_script( 'masonry’ );
    wp_enqueue_script( 'jquery’ );
    wp_enqueue_script( 'masonryInit’, get_stylesheet_directory_uri().’/js/masonry-init.js’, array( 'masonry’, 'jquery’ ) );

  10. Daniel Nikolovski

    Done exactly as the tutorial says, wp 3.9.1.. imagesLoaded isn’t even being loaded. Some help would be highly appreciated

  11. Tiago Celestino

    This , where is define 'masonry-thumb’?? this default thumbnail size with masonry Wordpress?

  12. Jenny Beaumont

    I’m having trouble getting this to work…followed things accordingly, based on _s, but my columns don’t wrap – just get one long one. Have any css examples to go with? I’m obviously missing something. cheers!

    • marisa

      Hi Jenny

      I am having the same trouble. Did you solve your problem?

  13. caratcake

    I’m desperately confused. I performed every step down to the letter, and my site just goes blank. A problem with the functions file. My browser doesn’t even allude to which line causes any error, all I get is ”
    Server error
    The website encountered an error while retrieving (url) It may be down for maintenance or configured incorrectly.”

    The same happened for the WP Admin login page. I deleted functions.php in my theme folder, and the login screen was restored, but the front page was not. If you could give me any clues to what the problem might be, I would be very grateful. Regardless, many thanks for the tutorial and in depth explanations.

  14. Andy Giesler

    In case this helps others to get the sample working:

    It wasn’t working for me even after I made the fix that others have noted — changing „function slug_masonry_exists()” to „function slug_masonry_init()”. The libraries were being loaded, but Masonry wasn’t doing its thing.

    Then I changed the wp_enqueue_script calls so that Masonry and imagesLoaded got loaded in the header instead of at the bottom.

    Suddenly everything worked.

    • Jean

      Hi, i can´t figure out how do change the wp_enqueue_script. I will really appreciate if you can explain that in detail. Thanks!

  15. gabi

    Hello, It doesn’t work for me I have this error message :
    ” Parse error: syntax error, unexpected T_ENDIF in…”…functions.php on line 17

    It means an error on the script from the 3td step. What did I miss ?

  16. werner

    Will you update your post due to the fact that now with 3.9 Masonry3 is in Wordpress core?

  17. Steven Gardner

    The initialization script keeps being called before imagesloaded has been defined so I get

    Uncaught ReferenceError: imagesLoaded is not defined

    How can I make sure imagesLoaded is there first before I start to initialise things?

    • Violacase

      imagesLoaded is called before enqueueing has been established. Give it a low priority so that it is called last, like:

      add_action( 'wp_footer’, 'slug_masonry_init’, 100000 );

      This did the trick for me.

      Nota: I think this article needs to be updated. Not only because of this issue.

      • Chplusink

        Thanks! This is the only solution that worked for me.

  18. Kate

    Thanks for this post. I am trying to set up a blog page with Masonry posts, but I’m snagged at step 1. Whenever I add the functions for adding the two libraries to my functions file, my site goes totally blank. Since I am developing in a subdirectory, I tried to make the paths to the js files absolute rather than relative, but that didn’t help. Any idea what I’m missing?

  19. Angie Lee

    Hi,

    I’m getting this error: „ReferenceError: imagesLoaded is not defined” please help.

  20. Amitabha Ghosh

    Thanks. It’s a great post and it is working for me. I am doing a template with this code and it is working perfect. But two obstacles I am facing
    1. I want to limit my posts in my index page so that it shows first 6 to 7 posts and below will be a button with „Load More” feature which when clicked shall load the other posts.

    2. I am trying to integrate infinite scroll javascript of Paul Irish but I couldn’t make it work. Any help??

    Thanks

  21. Ismar Hadzic

    Well I followed all of your steps and I run on fatal error ” PHP Fatal error: Call to undefined function wp_enquqe_style() ” and i still don’t understand why wp_enquqe_style() i don’t understand why can you check that out.

    • AndyM

      Hi

      I was going to comment to point out that it’s a typo and should be:

      wp_enqueue_style

  22. Andre

    Great tutorial…just one thing in step 3…this:

    …has a missing bracket:

  23. Aurélien Denis

    Hi there!

    This post is great start but I found some mistakes…

    1/ You should use the_title_attribute() for the attribute title instead of the title
    2/ add_action( 'wp_footer’, 'slug_masonry_exists’ ); is the correct code and not add_action( 'wp_footer’, 'slug_masonry_init’ );

    Cheers!

    • AndyM

      I’m wondering if

      if ( ! function_exists( 'slug_masonry_init’ )) :
      function slug_masonry_exists() { ?>

      should be:

      if ( ! function_exists( 'slug_masonry_init’ )) :
      function slug_masonry_init() { ?>

  24. Ben Racicot

    Can’t get this working with an infinite scroll setup in my $ajax success CB. Any advice would be great.

  25. Tomasz Bystrek

    I was looking for this effect, but I did’t know how it is called and how to search for it, until now. I’ll definitely try it in one of my future project of photo blog. Thanks!

  26. Katrina Moody

    Great post – wish it was around when I started working with Masonry on a theme a few weeks ago :D

    A couple variations – I created a new post-thumbnail image size to pull in so that both horizontal and vertical images would have equal attention within the Masonry pages – it’s fairly easy to change out the actual image for a new one (I did that at first, creating a new „entry-thumbnail” size and allowing unlimited length so that horizontal images would display properly). Then I just edited the post-thumbnail ;-)

    I also wrapped the post-thumbnail within an tag so that I could allow it to return to the post permalink (I changed that out to return the media file link so I could implement a lightbox effect – per a client’s request) so visitors could go directly to the post.

    I also added a hover effect to the post-thumbnail to indicate it was clickable :D

    Now I need to pick through what I’ve done and compare it to yours and see what I can improve with your knowledge (love the WordPress community!)

    • Ivan Vilches

      guys all that code is on functions.php ? thanks

Zostaw odpowiedź

Dziękujemy za pozostawienie komentarza. Pamiętaj, że wszystkie komentarze są moderowane zgodnie z naszymi polityka komentarzy, a Twój adres e-mail NIE zostanie opublikowany. NIE używaj słów kluczowych w polu nazwy. Przeprowadźmy osobistą i konstruktywną rozmowę.