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

Question

我预计在 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 多个打开的选项卡试图找到答案）这是我开始的简单变体..

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

in 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 的砖石结构中

我的猜测

这很明显

Answer 1

答案

对我自己的问题的简单回答是我忘了在 footer.php 文件中包含 <?php wp_footer(); ?>。

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

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

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

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

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

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

..why not just add it to a .js file and enqueue it with a loading dependency on the masonry script? Then you wouldn't have to add the jQuery code manually to the header/footer via hooks.

然后我又找到了这个问题和答案 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 可能会使用其他脚本，您安装的插件可能依赖于其他一些 'enqueueing scripts' Wordpress 管理它们的方式是为了不相互冲突。我会详细介绍，但我没有资格这样做。
您可能会在其他一些网站上看到表明您必须先注册 Masonry 的示例。事实并非如此，因为它包含在 Wordpress 中，因此已经注册。
我们在这里排队的两个脚本第一个是 Masonry，第二个是我们的小脚本来初始化 Masonry。
Jquery 也在排队，作为小初始化脚本工作的依赖项。

在您的主题文件夹中（例如/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。这 pause/order 允许 Masonry 正确计算每个块的高度。如果您像许多响应式设计一样在图像上使用 height: auto;，这一点很重要。
假设您的页面宽度是响应式的并设置为 100%/不固定，Masonry 需要确定 100% 的实际宽度能够使您的网站在页面上居中。选项 "isFitWidth": true 是这样做的。详细了解 here。
您可以通过让 masonry 选择第一个块的宽度并将其用作列宽来分配列宽，或者您可以根据 this page.
.masonry-container 是容器的 class，它包裹着所有你想要表现得像砌体一样的方块
如果您愿意，它也可以是 ID #masonry-container
可以是任何名字，一定要在上面的函数中调整一下
以上代码摘自How can I make masonry and Imagesloaded work correct. (wordpress)以及Masonry自己的说明

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

笔记

class "masonry-container" 可以是 class 也可以是 id，可以是你选择的任何名字，一定要在 TaS-masonryInitializer.js 文件
根据我的记忆，Masonry 需要 class "js-masonry" 才能找到开口 div 并且不能在不干预脚本本身的情况下重命名。
每个 div classed "block-wrapper" 是您要应用砌体对齐效果的不同块元素。
"block-wrapper"，如 "masonry-container"，可以是您选择的任何名称和 ID 或 class。

在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 写了一个好剧本。看看他的网站，他还创造了一些其他很酷的东西。

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

How To Get Masonry and ImagesLoaded To Work With Wordpress

javascript

wordpress

wordpress-theming

imagesloaded

masonry

我如何让它与 Wordpress 一起使用？

答案

如何将砌体添加到您的 Wordpress 主题的一种方法

一些要知道的东西

安装和设置