srcmini我预计20分钟后大约4个小时, 我将决定用一些新的wordpress主题设置砖石结构, 我决定最好寻求帮助。
我的Masonry可以很好地处理在我的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的Masonry中
我猜
这很明显
#1
答案
我自己的问题最尴尬的简单答案是我忘了包含<？php wp_footer();。 ？>在footer.php文件中。
但是第二天, 我发现没有像人们期望的那样从页脚启动ImagesLoaded, 因此此答案已经过重新编辑以显示如何使ImagesLoaded正常工作。
我应该注意, Masonry是从html页内选项方法正确启动的, 但是帮助文件没有显示使用相同的页内方法启动ImagesLoaded的方法。
背景故事(一些可能会被他人使用的信息)
第二天, 在将一些带有缩略图的测试帖子添加到测试博客后, 我发现ImagesLoaded尚未初始化, 并且所有块彼此重叠。
然后, 我发现尝试使用footer.php中的Javascript甚至初始化Masonry也不起作用。
又过了一两个小时, 试图弄清楚为什么两个脚本都无法从footer.php或header.php初始化, 我放弃了, 回到了这个建议。
..为什么不只是将其添加到.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()。
<?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)的疯狂道具, 他写了一个很好的剧本。查看他的网站, 他还创建了其他一些邪恶的东西。
评论前必须登录！
注册