如何加载砖石和图像使用Wordpress

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

我的猜测

这是明显的

答案

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

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

我应该注意到Masonry是从html in page options方法正确启动的，但帮助文件没有显示用这个相同的in page方法启动ImagesLoaded的方法。

背景(一些可能对其他人有用的信息)

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

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

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

。。为什么不直接将它添加到.js文件中，并将其与加载一起排队呢依赖砖石脚本？那么您就不必添加jQuery通过钩子手动将代码查询到页眉/页脚。

然后我又找到了这个问题和答案我如何才能使砖石和Imageslooaded工作正确。(wordpress)并解释如何做到这一点。

因此，感谢这两个人，我将再次编辑这篇文章，并向您展示我是如何让Wordpress与Masonry一起正常工作的，它现在是在ImagesLoaded中构建的。

如何将砖石添加到Wordpress主题的一种方法

目标

在wordpress主题上安装Masonry以使其表现良好比如Pinterest
使页面居中
防止在每个块元素的顶部堆叠/重叠

一些需要了解的信息

当前Wordpress版本(3.9？至4.2.2.+)附带Masonry
位置-wp包含/js/masonary.min.js
此Wordpress版本的Masonry内置ImagesLoaded
Masonry不再需要Jquery，尽管我能找到的在Wordpress中初始化它的唯一方法需要一点Jquery

安装和设置

在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-masonyInitializer.js 的文件
- 它应该像这样/wp-content/themes/yourThemeName/js/TaS-masonaryInitializer.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内置在wordpress版本的Masonry中，因此无需像在纯html网站上那样在functions.php中单独排队
测量每个图像及其包含块的高度ImagesLoaded用于在确定这些高度之前防止Masonry加载。此暂停/顺序允许Masonry正确计算每个块的高度。如果您在图像上使用height: auto;，这一点非常重要，就像许多响应式设计一样
假设你的页面宽度是有响应的，并设置为100%/不固定，Masonry需要确定100%的实际宽度，以便能够将你的网站集中在页面上。选项"isFitWidth": true就是这样做的。点击此处了解更多信息
您可以通过让砖石选择第一个块的宽度并将其应用为列宽来指定列宽，也可以根据此页面在选项中明确说明列宽
.砖石容器是包裹所有块的容器类，您希望这些块的行为与砖石行为相同
如果你喜欢#砖石容器，它也可以是一个ID
它可以是任何名称，只要确保在上面的函数中进行调整即可
上面的代码取自How can I make masony and Imageslooaded 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 -->

票据

类"masony-container"可以是类或id，也可以是您选择的任何名称，只需确保在TaS-masonryInitializer.js文件中进行调整即可
据我回忆，masonry需要类"js"来查找开头的div，如果不干预脚本本身，就无法重命名该类
每个div类的"块包装器"都是一个不同的块元素，您将对其应用砖石对齐效果
"块包装器"one_answers"砖石容器"一样，可以是您选择的任何名称，也可以是id或类

在footer.php中

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

<?php wp_footer(); ?>
</body>
</html>

票据

wordpress使用

wp_footer在一个操作中启用页面上的脚本。您在functions.php中排队的脚本已挂接到wp_footer中。(请原谅我的术语，我肯定我在那里误用了几个词)

在header.php中

确保你有。。

<?php wp_head(); ?>

就在</head>之前

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

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

请告诉我任何误解和我忽略的错误，我会尽力纠正。

疯狂地支持大卫·德桑德罗写了一个非常好的剧本。看看他的网站，他还创造了一些非常酷的东西。

如何使用Wordpress

答案

如何将砖石添加到Wordpress主题的一种方法

一些需要了解的信息

安装和设置

相关内容

最新更新

热门标签：