如何使用 Wordpress 加载砌体和图像答案

【问题标题】：How To Get Masonry and ImagesLoaded To Work With Wordpress如何使用 Wordpress 加载砌体和图像
【发布时间】：2015-05-15 08:23:50
【问题描述】：

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

问题：

我如何让它与 Wordpress 一起工作？

到目前为止我所做的尝试

几乎所有我能在 googs 上想出的东西。（我数了数打开了 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>

备注

禁用所有插件
它是一个自定义的父主题
函数目前是空的，除了上面写的内容
wordpress 4.2.2 版，js 文件夹中确认砌体
我读过 ImagesLoaded 内置于 wordpress 的砌体中

我的猜测

这很明显

【问题讨论】：

标签： javascript wordpress wordpress-theming masonry imagesloaded

【解决方案1】：

答案

对于我自己的问题，令人尴尬的简单答案是我忘记在 footer.php 文件中包含 <?php wp_footer(); ?>。

然而，第二天，我发现 ImagesLoaded 并没有像人们预期的那样从页脚启动，所以这个答案已经被重新编辑，以显示我如何让 ImagesLoaded 正常工作。

我应该注意到，Masonry 已从 html 页面内选项方法正确启动，但帮助文件没有显示使用相同的页面内方法启动 ImagesLoaded 的方法。

背景故事（可能对其他人有用的一些信息）

第二天，在测试博客中添加了一些带有缩略图的测试帖子后，我发现 ImagesLoaded 没有初始化并且所有块相互重叠。

然后我发现尝试使用来自 footer.php 的 Javascript 来初始化 Masonry 也根本不起作用。

又过了一两个小时试图弄清楚为什么两个脚本都不会从 footer.php 或 header.php 初始化，我放弃了，回到this suggestion

..为什么不直接将它添加到 .js 文件中并通过加载将其加入队列依赖砌体脚本？然后你就不必添加 jQuery 代码通过钩子手动添加到页眉/页脚。

然后我又找到了这个问题并回答了How can I make masonry and Imagesloaded work correct. (wordpress)，并解释了如何做到这一点。

感谢这两个人，我将重新编辑此内容，并向您展示我如何让 Wordpress 与 Masonry 一起正常工作，并且它现在是内置的 ImagesLoaded。

如何在您的 Wordpress 主题中添加砌体的一种方法

目标

在您的 wordpress 主题上安装 Masonry 以使其正常运行喜欢 Pinterest。
使页面居中。
防止在每个块元素的顶部堆叠/重叠。

须知

当前的 Wordpress 版本（3.9? 到 4.2.2+）与 Masonry 打包在一起。
位置 - wp-includes/js/masonry.min.js
这个 Wordpress 版本的 Masonry 包括内置的 ImagesLoaded。
Masonry 不再需要 Jquery，但我能找到的唯一方法是在 Wordpress 中初始化它需要一点点。

安装和设置

在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');

注释

因为 Wordpress 可能使用其他脚本和您安装的插件可能依赖于其他一些“排队脚本”是 Wordpress 管理它们的方式，以免相互冲突。我会更详细地介绍，但我没有资格这样做。
您可能会在其他一些网站上看到显示您必须先注册 Masonry 的示例。这不是因为它包含在 Wordpress 中，因此已经注册。
我们在这里排队的两个脚本第一个是 Masonry，第二个是我们的小脚本，用于初始化 masonry。
Jquery 也正在 uhh 中，作为小 Initializer 脚本工作的依赖项加入队列。

在您的主题文件夹中（例如 /wp-content/themes/yourThemeName/）

创建一个名为“js”的文件夹
在该文件夹中创建一个名为 TaS-masonryInitializer.js 的文件
- 它应该看起来像这样 /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));

注释

这一步是初始化 Masonry 和 ImagesLoaded 并调整 Masonry 的选项
如前所述，ImagesLoaded 内置于 Masonry 的 wordpress 版本中，因此无需像在直接的 html 网站上那样将其单独放入 functions.php 中。
测量每个图像的高度，并且它包含块 ImagesLoaded 用于防止在确定这些高度之前加载 Masonry。此暂停/顺序允许 Masonry 正确计算每个块的高度。如果您在图片上使用 height: auto;，这一点很重要，就像许多响应式设计一样。
假设您的页面宽度是响应式的并设置为 100%/未固定，Masonry 需要确定 100% 的实际宽度才能使您的网站在页面上居中。选项"isFitWidth": true 是这样做的。阅读更多关于 here 的信息。
您可以通过让 masonry 选择第一个块的宽度并将其应用为列宽来分配列宽，或者您可以根据 this page 在选项中明确说明列宽。
.masonry-container 是容器的类，它包裹着您想要像砌体一样表现的所有块
如果您愿意，它也可以是一个 ID，#masonry-container
可以是任意名称，请务必在上述函数中进行调整
以上代码取自How can I make masonry and Imagesloaded work correct. (wordpress)以及Masonry自己的说明

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

注释

“masonry-container”类可以是类或 id，也可以是您选择的任何名称，请务必在 TaS-masonryInitializer.js 文件中进行调整
据我回忆，Masonry 需要“js-masonry”类才能找到打开的 div，并且在不干预脚本本身的情况下无法重命名。
每个分类为“block-wrapper”的 div 都是不同的块元素，您将对其应用砌体对齐效果。
“block-wrapper”与“masonry-container”一样，可以是您选择的任何名称，也可以是 id 或类。

在footer.php中

确保在结束正文标记之前包含wp_footer()。

<?php wp_footer(); ?>

</body>
</html>

注释

wp_footer 被 wordpress 用于在一个操作中启用页面上的脚本。您在functions.php 中排队的脚本与wp_footer 挂钩。（请原谅我的术语，我确定我在那里误用了几个词）

在 header.php 中

确保你有..

<?php wp_head(); ?>

就在</head>之前

由于现在大多数人可能都在使用 Masonry 作为移动友好型网站，因此请务必包含以下代码（同样，在 head 和 /head 之间）以使操作在移动浏览器上运行。

<meta name="viewport" content="width=device-width, initial-scale=1">

请让我知道我有任何误解和我忽略的错误，我会尽力纠正它们。

感谢David DeSandro 写了一个很好的脚本。看看他的网站，他还创造了一些其他很酷的东西。

【讨论】：