如何获取Masonry和图像以与WordPress一起使用 _WordPress主题

我预计20分钟后大约4个小时, 我将决定用一些新的wordpress主题设置砖石结构, 我决定最好寻求帮助。
我的Masonry可以很好地处理在我的html模型站点中加载的图像, 这是精简的html代码。

< !doctype html> < html> < head> < meta charset="utf-8"> < script src="http://www.srcmini.com/imagesloaded.pkgd.min.js"> < /script> < script src="http://www.srcmini.com/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的Masonry中

我猜
这很明显
#1答案我自己的问题最尴尬的简单答案是我忘了包含< ？php wp_footer(); 。？> 在footer.php文件中。
但是第二天, 我发现没有像人们期望的那样从页脚启动ImagesLoaded, 因此此答案已经过重新编辑以显示如何使ImagesLoaded正常工作。
我应该注意, Masonry是从html页内选项方法正确启动的, 但是帮助文件没有显示使用相同的页内方法启动ImagesLoaded的方法。
背景故事(一些可能会被他人使用的信息)
第二天, 在将一些带有缩略图的测试帖子添加到测试博客后, 我发现ImagesLoaded尚未初始化, 并且所有块彼此重叠。
然后, 我发现尝试使用footer.php中的Javascript甚至初始化Masonry也不起作用。
又过了一两个小时, 试图弄清楚为什么两个脚本都无法从footer.php或header.php初始化, 我放弃了, 回到了这个建议。

【如何获取Masonry和图像以与WordPress一起使用】..为什么不只是将其添加到.js文件中, 并使其与砌筑脚本具有加载依赖关系而入队？然后, 你不必通过挂钩将jQuery代码手动添加到页眉/页脚。

然后, 我又找到了这个问题和答案, 如何使砖石和Imageloaded工作正确。 (wordpress), 并附有如何执行此操作的说明。
因此, 多亏了这两个人, 我将再次对其进行编辑, 并向你展示如何使Wordpress与Masonry一起正常工作, 并且它是内置的ImagesLoaded。
如何在你的Wordpress主题中添加Masonry的一种方法目标

在你的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也被作为一个小初始化程序脚本的依赖项而入队。

在你的主题文件夹中(例如/ 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内置在Wordpress版本的Masonry中, 因此无需像直接在html站点上那样将其分别放入functions.php中。
用来测量每个图像的高度, 并且包含在其中的图像加载块可以防止在确定这些高度之前加载Masonry。此暂停/顺序允许砌筑正确地计算每个块的高度。如果你使用height, 这一点很重要。像许多自适应设计一样在你的图像上显示。
假设你的页面宽度是自适应的并且设置为100％/不固定, Masonry需要确定100％实际能够将你的网站居中在页面上的宽度。选项” isFitWidth” ：true是完成此操作的方法。在这里阅读更多关于它的信息
你可以通过让Masonry选择第一个图块的宽度并将其应用为列宽来分配列宽, 也可以按照此页面在选项中明确说明列宽。
.masonry-container是容器的类, 该容器将你要按照Masonry行为表现的所有块包裹起来
如果你更喜欢＃masonry-container, 它也可以是ID
它可以是任何名称, 只需确保在上述功能中对其进行了调整
上面的代码取自” 我如何使Masonry和Imagesloaded工作正确” 。 (wordpress)以及Masonry自身的说明

在index.php中(或其他模板文件, 具体取决于你要使用Masonry的网站)

< 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都是要应用Masonry对齐效果的不同块元素。
” block-wrapper” (例如” Masonry容器” )可以是你选择的任何名称, 并且可以是id或class。

在footer.php中
确保在结束标记之前包含wp_footer()。