WordPressでPinterestスタイルの投稿グリッドを追加するメイソンリーの使い方

38件のコメント返信を残す

1. Gabi

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

   返信

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

   返信

3. 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?

   返信

4. Marisa Di Monda

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

   返信

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

   返信

6. 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?

     返信

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

   返信

8. 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’ ) );

   返信

9. Daniel Nikolovski

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

   返信

10. Tiago Celestino

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

    返信

11. WPBeginner Staff

    Checkout our guide on how to properly add javascript and styles in 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?

    返信

    • Editorial Staff

      Yes we’re working on updating it.

      返信

      管理者

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?

    返信

    • Steven Gardner

      Yeah me too.

      I’m using version 3.8.3 so wordpress haven’t upgraded to V3 of masonry yet which I though may have been the issue.
      they do plan to in the 3.9 release http://make.wordpress.org/core/2014/03/27/masonry-in-wordpress-3-9/

      返信

19. Angie Lee

    Hi,

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

    返信

    • Violacase

      See above

      返信

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!

    返信

    • Zulian

      Actually, you don’t need to use title attributes.

      返信

    • 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

    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

    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

      返信