在 wordpress 中显示砌体布局答案

【问题标题】：Displaying masonry layout in wordpress在 wordpress 中显示砌体布局
【发布时间】：2018-12-06 15:47:05
【问题描述】：

如何实现在wordpress中显示帖子的砌体布局？

我想以砖石网格布局显示我的帖子

这是我在functions.php中尝试过的代码

add_action( 'wp_enqueue_scripts', 'site_scripts' );

function site_scripts() {
wp_enqueue_script('masonry');
wp_enqueue_script( 'site-script', get_template_directory_uri() . '/js/script.js', array(), false, true );

}

在我的页面中我添加了以下代码

<div class="grid">
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-1.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-2.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-3.jpg' ?>">
</div>
<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-4.jpg' ?>">
</div>
    `enter code here`<div class="grid-item">
    <img src="<?php echo get_stylesheet_directory_uri().'/images/image-5.jpg' ?>">
</div>

我添加了以下javascript

jQuery(function($) {
// init Masonry
var $grid = $('.grid').masonry({
    // options
    itemSelector: '.grid-item',
    columnWidth: 400
});
// layout Masonry after each image loads
$grid.imagesLoaded().progress( function() {
    $grid.masonry('layout');
}); });

但我没有在砖石布局中得到它，而是一个接一个地向下显示。

有人可以帮我吗？

【问题讨论】：

您是否在控制台中看到任何错误消息？

标签： wordpress masonry

【解决方案1】：

直到 WordPress 包含 Masonry 作为核心。快速浏览后，它实际上包括 2（本机 Javascript）和 jQuery - 您正在加载本机 Javascript - 更改：

wp_enqueue_script('masonry');

到：

wp_enqueue_script( 'jquery-masonry' );

供参考，这里是列出所有Default Scripts Included and Registered by WordPress的页面

【讨论】：