javascript - 如何使用 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 一起工作？

到目前为止我尝试过的

几乎所有我能在谷歌上想出的东西。（我数了 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 的砌体中

我猜

这是显而易见的事情

score 6 · Accepted Answer

答案

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

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

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

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

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

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

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

..为什么不直接将它添加到 .js 文件中，并使用对砌体脚本的加载依赖项将其排入队列？这样您就不必通过钩子手动将 jQuery 代码添加到页眉/页脚。

然后我再次找到了这个问题并回答了如何使砖石和图像加载工作正确。（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，第二个是我们的小脚本，用于初始化砌体。
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是如何完成的。在此处阅读更多相关信息。
您可以通过让砌体选择第一个块的宽度并将其应用为列宽来分配列宽，或者您可以根据此页面在选项中明确说明列宽。
.masonry-container 是容器的类，它包裹着你想要表现得像砌体一样的所有块
如果您更喜欢#masonry-container，它也可以是一个 ID
它可以是任何名称，只要确保在上面的函数中对其进行调整
上面的代码取自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 或类。

在页脚.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">

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

疯狂的道具大卫德桑德罗写了一个很好的剧本。看看他的网站，他还创造了一些其他很酷的东西。

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

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

1 回答 1

答案

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

一些要知道的东西

安装和设置

Related

Reference