Has*_*len 1 javascript wordpress wordpress-theming imagesloaded masonry
在 20 分钟之后大约 4 小时，我预计需要使用一些新的 wordpress 主题来设置砌体，我决定最好寻求帮助。
我的 html 模型站点中加载的图像可以正常工作，这是精简的 html 代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="imagesloaded.pkgd.min.js"></script>
<script src="masonry.pkgd.min.js"></script>
</head>
<body>
<div class="masonry-container js-masonry" data-masonry-options='{ "isFitWidth": true }'>
<div class="block-wrapper">content</div>
<div class="block-wrapper">content</div>
<div class="block-wrapper">content</div>
</div><!-- end masonry-container js-masonry -->
<script>
var container = document.querySelector('.masonry-container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
</body>
</html>
问题：
到目前为止我尝试过的
几乎所有我能想出的东西。（我数了 40 多个打开的选项卡试图找到答案）这是我开始时的简单变化..
在functions.php中（函数中绝对没有其他东西）
function enqueue_masonry() {
wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts','enqueue_masonry');
在footer.php中（图片加载）
<script>
var container = document.querySelector('.masonry-container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
</body>
在 index.php 中（也尝试从 functions.php 而不是在 html 中初始化）
<div class="masonry-container js-masonry" data-masonry-options='{ "isFitWidth": true }'>
在 header.php 中
<?php wp_head(); ?>
</head>
笔记
我猜
这是显而易见的事情
我自己的问题的令人尴尬的简单答案是我忘记包含<?php wp_footer(); ?>在 footer.php 文件中。
然而，第二天，我发现 ImagesLoaded 并没有像人们预期的那样从页脚启动，因此此答案已被重新编辑以显示我如何让 ImagesLoaded 正常工作。
我应该注意到 Masonry 是从 html 页内选项方法正确启动的，但帮助文件没有显示使用相同的页内方法启动 ImagesLoaded 的方法。
背景故事（一些可能对其他人有用的信息）
第二天，在向测试博客添加了一些带有缩略图的测试帖子后，我发现 ImagesLoaded 没有初始化并且所有块都相互重叠。
然后我发现尝试使用来自 footer.php 的 Javascript 初始化 Masonry 也根本不起作用。
又过了一两个小时试图弄清楚为什么这两个脚本都不会从 footer.php 或 header.php 初始化我放弃并回到这个建议
..为什么不直接将它添加到 .js 文件中，并通过对砌体脚本的加载依赖将它排入队列？这样您就不必通过钩子手动将 jQuery 代码添加到页眉/页脚。
然后我又发现了这个问题和答案如何使砌体和图像加载正确工作。(wordpress)并解释如何执行此操作。
多亏了这两个人，我将再次编辑它，并向您展示我是如何让 Wordpress 与 Masonry 正常工作的，它现在是内置的 ImageLoaded。
目标
在functions.php中
// to use scripts with wordpress they must first be enqueued
function enqueue_scripts() {
wp_enqueue_script('masonry');
wp_enqueue_script('masonryloader', get_stylesheet_directory_uri() . '/js/TaS-masonryInitializer.js', array( 'masonry', 'jquery' ) );
}
add_action('wp_enqueue_scripts','enqueue_scripts');
笔记
在您的主题文件夹中（例如 /wp-content/themes/yourThemeName/）
创建一个名为“js”的文件夹
在该文件夹内创建一个名为 TaS-masonryInitializer.js 的文件
将此 Javascript 复制并粘贴到该文件中。
(function( $ ) {
"use strict";
$(function() {
// set the container that Masonry will be inside of in a var
// adjust to match your own wrapper/container class/id name
var container = document.querySelector('.masonry-container');
//create empty var msnry
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
// adjust to match your own block wrapper/container class/id name
itemSelector: '.block-wrapper',
// option that allows for your website to center in the page
isFitWidth: true
});
});
});
}(jQuery));
笔记
height: auto;在图像上使用，这一点很重要，就像许多响应式设计一样。"isFitWidth": true是如何做到这一点。在此处阅读更多相关信息。在 index.php（或其他模板文件中，具体取决于您要使用砌体的站点的位置）
<div class="masonry-container js-masonry">
<div class="block-wrapper">content</div>
<div class="block-wrapper">content</div>
<div class="block-wrapper">content</div>
</div><!-- end masonry-container js-masonry -->
笔记
在页脚.php
确保wp_footer()在您的结束正文标签之前包含。
<?php wp_footer(); ?>
</body>
</html>
笔记
在 header.php 中
确保你有..
<?php wp_head(); ?>
就在之前 </head>
并且由于现在大多数人可能将 Masonry 用于移动友好的网站，因此请务必包含以下代码（再次，在 head 和 /head 之间）以使事情在移动浏览器上工作..
<meta name="viewport" content="width=device-width, initial-scale=1">
请让我知道我有任何误解和我忽略的错误，我会尽力纠正它们。
疯狂道具大卫德桑德罗写了一个很好的剧本。看看他的网站，他创造了其他一些很酷的东西。
| 归档时间： |
|
| 查看次数： |
3464 次 |
| 最近记录： |