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个标签，试图找到答案）这是我开始时的简单变化..

在functions.php中的

（函数中没有其他内容）

function enqueue_masonry() {
    wp_enqueue_script('masonry');
}
add_action('wp_enqueue_scripts','enqueue_masonry');

在footer.php（imagesloaded）

<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的砌体中

我的猜测

这是显而易见的事情

Answer 1

答案

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

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

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

Backstory （可能对他人有用的一些信息）

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

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

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

..为什么不将它添加到.js文件中并使用加载对其进行排队依赖于砌体脚本？那么你就不必添加了 jQuery代码通过钩子手动到页眉/页脚。

然后我再次找到这个问题并回答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内置。
砌体不再需要Jquery，虽然我能找到让它在Wordpress中初始化的唯一方法需要一点点。

安装和设置

// 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可能会使用您安装的其他脚本和插件，可能依赖于其他一些脚本和排队脚本＆＃39;是Wordpress如何管理它们以免彼此冲突。我会详细介绍，但我没有资格这么做。
您可能会在其他一些网站上看到显示您必须首先注册砌体的示例。这不是因为它包含在Wordpress中，因此已经注册。
我们在这里招揽的两个剧本是第一个砌体，第二个是我们的小脚本，以便砌筑初始化。
Jquery也是呃，作为小初始化程序脚本工作的依赖项排队。

（例如/ wp-content / themes / yourThemeName /）

创建名为＆＃39; js＆＃39;
在该文件夹中创建一个名为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中，因此无需在functions.php中单独将其排队，就像在直接的html网站上一样。
测量每个图像的高度，它包含的块ImagesLoaded用于防止在确定这些高度之前加载砌体。此暂停/顺序允许砌体正确计算每个块的高度。如果您在图像上使用height: auto;这很重要，就像许多响应式设计一样。
假设您的页面宽度响应并设置为100％/未修复，Masonry需要确定100％实际上能够将您的网站集中在页面上的宽度。选项"isFitWidth": true就是这样做的。详细了解here。
您可以通过让砌体选择第一个块的宽度并将其应用为列宽来指定列宽，或者您可以根据this page明确说明选项中的列宽。
.masonry-container是容器的类，它包裹了您希望在砌体行为中表现的所有块
如果您愿意，也可以是#masonry-container
它可以是任何名称，只需确保在上述功能中进行调整
上述代码取自How can I make masonry and Imagesloaded work correct. (wordpress)以及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>

注释

班级＆＃34;砌筑容器＆＃34;可以是类或id，可以是您选择的任何名称，只需确保在TaS-masonryInitializer.js文件中进行调整

我的回忆，班级＆＃34; js-masonry＆＃34; Masonry需要找到开头的div，如果不干涉脚本本身就无法重命名。

每个div分类＆＃34;块包装＆＃34;是您正在应用砌体对齐效果的不同块元素。

＆＃34; block-wrapper＆＃34;，＆＃34; masonry-container＆＃34;，可以是您选择的任何名称，也可以是ID或类。

在footer.php中

确保在结束身体标记之前包含wp_footer()。

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

注释

wp_footer由wordpress用于在一个操作中启用页面上的脚本。你在functions.php中排队的脚本被挂钩到wp_footer。（请原谅我的术语，我确定我误用了几句话）

header.php中的

确保你有..

<?php wp_head(); ?>

在</head>之前

由于现在大多数人都在使用Masonry作为适合移动设备的网站，所以请确保包含以下代码（在头部和/头部之间），以便在移动浏览器上运行..

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

请告诉我有任何误解和我忽略的错误，并且我会尝试纠正错误。

用于编写hella好脚本的疯狂道具David DeSandro。看看他的网站，他创造了一些其他邪恶的东西。

如何让砌体和图像加载到Wordpress

如何使用Wordpress？

1 个答案:

答案

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

要知道的一些东西

安装和设置