wordpress - 在 wordpress 中显示砌体布局
问题描述
如何实现砌体布局以在 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 作为核心。快速浏览后它实际上包括 2(本机 Javascript)和 jQuery - 您正在加载本机 Javascript - 更改:
wp_enqueue_script('masonry');
到:
wp_enqueue_script( 'jquery-masonry' );
作为参考,这里列出了 WordPress 包含和注册的所有默认脚本的页面
推荐阅读
- c - 为什么我不能编译这段代码并且我得到分段错误:C 代码中的 11
- node.js - 使用 NodeJS 部署一个反应应用程序并表达到 Heroku
- sql - 将一个表中的列值连接到另一个表的新列中的行
- python-3.x - 如何在 tkinter 中设置字体大小
- wpf - 使用 ReactiveUI 和 WPF 重新加载图像
- javascript - 无法读取未定义的属性“移动”-Vue/Vuetify/Storybook
- r - 无法打开文件'test.csv':没有这样的文件或目录文件中的错误(文件,“rt”):无法打开连接
- javascript - 使用 Spring Security 时出现意外的 403 错误
- python - 从文件中读取字典并打印键
- python - 将每个条目 '(,)' 列表转换为无字符串