个人中心
gpt4 book ai didi

javascript - 如何获取 masonry 和图像以与Wordpress一起使用

转载 作者：行者123 更新时间：2023-11-30 12:23:33 31 4
gpt4 key购买 nike

我预计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中（已加载图片） 

<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，因此此答案已经过重新编辑以显示我如何使ImagesLoaded正常工作。

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



背景故事（一些可能会被他人使用的信息）

第二天，在将一些带有缩略图的测试帖子添加到测试博客后，我发现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中进行初始化。




安装与设定



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




在您的主题文件夹中（例如/ 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中。
用来测量每个图像的高度，并且包含在其中的图像加载块可以防止在确定这些高度之前加载砌体。此暂停/顺序允许砌筑正确地计算每个块的高度。如果您像许多响应式设计一样在图像上使用 height: auto;，则这一点很重要。
假设您的页面宽度是自适应的并且设置为100％/不固定，Masonry需要确定100％实际能够将您的网站居中在页面上的宽度。选项 "isFitWidth": true是完成此操作的方法。阅读有关该 here的更多信息。
您可以通过让砌体选择第一个图块的宽度并将其应用为列宽来分配列宽，也可以按照 this page在选项中明确说明列宽。
.masonry-container是容器的类，该容器将您要按照砌体行为表现的所有块包裹起来
如果您更喜欢＃masonry-container，它也可以是ID
它可以是任何名称，只需确保在上述功能中对其进行了调整
上面的代码摘自 How can I make masonry and Imagesloaded work correct. (wordpress)以及石工自己的指令




在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”（例如“砌体容器”）可以是您选择的任何名称，并且可以是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编写疯狂的好脚本而疯狂的道具。查看他的网站，他还创建了其他一些邪恶的东西。

关于javascript - 如何获取 masonry 和图像以与Wordpress一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30254833/

31 4 0
文章推荐： javascript - 单选按钮颜色在 IE 11 中默认为黑色，但在 IE 8 中默认为蓝色。如何使 IE 11 的单选按钮与 IE 8 相同？
文章推荐： html - 将字体属性添加到 HTML 渲染的 UILabel swift
文章推荐： ios - 使用或不使用全局变量访问 UITabBarController 内的函数/变量？
文章推荐： javascript - d3.max 不从 csv 文件返回最高值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com