这是乔什·波洛克的客座帖子
这是乔什·波洛克的客座帖子
The Pinterest-like 帖子的网格显示 has been a popular design for WordPress blog index pages for a while. It is popular not only because it mimics the look of the popular social media site, but also because it makes the best use of space on the screen. On a WordPress blog index, it allows each post preview to be the size it naturally needs to be, without leaving extra space.
一段时间以来，类似Pinterest 帖子网格显示一直是WordPress博客索引页面的流行设计。 它之所以受欢迎，不仅是因为它模仿了流行的社交媒体网站的外观，而且还因为它可以充分利用屏幕上的空间。 在WordPress博客索引上，它允许每个帖子预览达到其自然所需的大小，而不会留下额外的空间。
在本教程中，我将向您展示如何使用流行的 Masonry JavaScript 库为您的博客索引创建级联网格布局，以及为您的主题创建存档页面。我将讨论移动优化时需要考虑的一些问题以及如何解决这些问题。
在本教程中，我将向您展示如何使用流行的 Masonry JavaScript 库为您的博客索引以及主题的存档页面创建级联网格布局。我将解决您在移动优化方面需要的一些问题以及如何解决这些问题。
注意：这是一个高级教程，适合那些能够轻松编辑 WordPress 主题并具有足够 HTML/CSS 知识的人。
注意：这是一个高级教程，适合那些喜欢编辑 WordPress 主题并具有足够 HTML/CSS 知识的人。
步骤1：将必要的库添加到您的主题 （Step 1: Add Necessary Libraries To Your Theme）
更新: WordPress 3.9 now includes the latest version of Masonry.
更新 ：WordPress 3.9现在包括最新版本的Masonry。
首先，您需要使用以下代码将 Masonry 加载到主题中：
首先，您需要使用以下代码将 Masonry 加载到主题中：
if (! function_exists('slug_scripts_masonry') ) :
if ( ! is_admin() ) :
function slug_scripts_masonry() {
wp_enqueue_script('masonry');
wp_enqueue_style('masonry’, get_template_directory_uri().'/css/’);
}
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
endif; //! is_admin()
endif; //! slug_scripts_masonry exists
This code simply loads masonry and makes it available to your theme’s template files (see our guide on how to properly 在 WordPress 中添加 JavaScript 和样式). Also note that we are not adding jQuery as a dependency for either. One of the advantages of Masonry 3 is that it does not require jQuery, but can be used with it. In my experience, initializing Masonry without jQuery is more reliable, and opens up the possibility of skipping loading jQuery, which can help with both page load times and compatibility issues.
此代码仅加载砌筑并将其提供给主题的模板文件(请参阅有关如何在 WordPress 中正确添加 JavaScript 和样式指南)。 还要注意，我们都没有将jQuery作为依赖项添加。 Masonry 3的优点之一是它不需要jQuery，但可以与它一起使用。 以我的经验，在没有jQuery的情况下初始化Masonry更为可靠，并且可以跳过加载jQuery，这可以帮助解决页面加载时间和兼容性问题。
步骤2：初始化Javascript （Step 2: Initialize The Javascript）
下一个函数设置 Masonry，定义将与其一起使用的容器，并确保一切都按正确的顺序发生。 Masonry 需要计算页面上每个项目的大小，以便动态布局其网格。我在许多浏览器中使用 Masonry 时遇到的一个问题是，Masonry 会错误计算加载图像缓慢的项目的高度，从而导致项目重叠。解决方案是使用 imagesLoaded 来阻止 Masonry 在加载所有图像之前计算布局。这确保了正确的尺寸。
下一个功能是设置砌体，定义将使用它的容器，并确保一切都按正确的顺序排列。 Masonry 需要计算页面上每个项目的大小，以便动态布局其网格。我在许多浏览器中使用 Masonry 时遇到的一个问题是，Masonry 会错误地计算加载缓慢的图像的项目高度，从而导致项目重叠。解决方案是使用 imagesLoaded 来防止 Masonry 在加载所有图像之前计算布局。这可确保尺寸正确。
这是将在页脚中输出初始化脚本的函数和操作：
以下是将初始化脚本输出到页面页脚的函数和操作：
if ( ! function_exists( 'slug_masonry_init' )) :
function slug_masonry_init() { ?>
<script>
//set the container that Masonry will be inside of in a var
var container = document.querySelector('#masonry-loop');
//create empty var msnry
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container, {
itemSelector: '.masonry-entry'
});
});
</script>
<?php }
//add to wp_footer
add_action( 'wp_footer', 'slug_masonry_init' );
endif; // ! slug_masonry_init exists
该函数通过内联注释逐步解释。 Javascript 函数的作用是告诉 Masonry 在 id 为“masonry-loop”的容器内查找具有“masonry-entry”类的项目，并仅在加载图像后计算网格。我们使用 querySelector 设置外部容器，使用 itemSelector 设置内部容器。
通过内联注释逐步解释该功能。 Javascript 函数的作用是告诉 Masonry 在 id 为“masonry-loop”的容器中查找类为“masonry-entry”的项目，并且仅在加载图像后才计算网格。我们使用 querySelector 设置外部容器，使用 itemSelector 设置内部容器。
第2步：创建砌体环 （Step 2: Create Masonry Loop）
我们将为其创建一个单独的模板部分，而不是将 Masonry 的 HTML 标记直接添加到模板中。创建一个名为“content-masonry.php”的新文件并将其添加到您的主题中。这将允许您将 Masonry 循环添加到任意数量的不同模板中。
我们没有将 MasonryHTML 标记直接添加到模板中，而是为其创建一个单独的模板部分。创建一个名为“content-masonry.php”的新文件并将其添加到您的主题中。这将允许您将 Masonry 循环添加到任意数量的不同模板中。
在您的新文件中，您将添加如下所示的代码。标记与您通常在任何内容预览中看到的标记类似。您可以根据需要任意修改它，只需确保最外层元素具有我们在上一步中设置为 itemSelector 的“masonry-entry”类即可。
在新文件中，您将添加以下代码。标记与您通常在任何内容预览中看到的标记类似。您可以进行任何所需的修改，只需确保最外层元素在最后一步中将“Masonry Enter”类设置为 itemSelector 即可。
<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
</div><!--.masonry-thumbnail-->
<?php endif; ?>
<div class="masonry-details">
<h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
</div><!--/.masonry-entry-details -->
</article><!--/.masonry-entry-->
该标记的每个部分都有类，因此您可以添加标记以匹配您的主题。我喜欢为 .masonry-entry 添加一个漂亮的、略圆的边框。另一个不错的选择是 .masonry-entry 没有边框，但给它一个轻微的阴影。当帖子缩略图一直延伸到容器的边界时，这看起来特别好，这可以通过在所有方向上将 .masonry-thumbnail 边距和填充设置为 0 来实现。您需要将所有这些样式添加到主题的 css 目录中名为 masonry.css 的文件中。
标记的每个部分都有类，因此您可以添加标记以匹配您的主题。我喜欢为 .masonry-entry 添加一个漂亮的、略圆的边框。另一个不错的选择是无边框的 .masonry-entry，但给它一个阴影。当帖子缩略图一直延伸到容器的边界时，这看起来特别好，这可以通过在所有方向上为 .masonry-thumbnail 提供 0 的边距和填充来实现。您需要将所有这些样式添加到主题 css 目录中名为 masonry.css 的文件中。
步骤3：将砌体环添加到模板 （Step 3: Add Masonry Loop To Templates）
现在我们有了模板部分，您可以在您喜欢的主题中的任何模板中使用它。如果您不希望将其用于类别档案，则可以将其添加到index.php，但不要添加到category.php。如果您只想在主题的主页上使用它，当它设置为显示博客文章时，您可以在 home.php 中使用它。无论您选择何处，您所需要做的就是将循环包装在 ID 为“masonry-loop”的容器中，并使用 get_template_part() 将模板部分添加到循环中。确保在 while (have_posts() ) 之前启动砌体循环容器。
现在我们有了模板部分，您可以在您喜欢的主题的任何模板中使用它。如果您不希望它用于类别档案，您可以将其添加到index.php而不是category.php。如果您只想在主题的主页上使用它，则可以在将其设置为显示博客文章时在 home.php 中使用它。无论选择什么位置，都需要将循环包装在 ID 为“masonry-loop”的容器中，并使用 get_template_part() 将模板部分添加到循环中。确保在 while(have_posts()) 之前启动砌体循环容器。
例如，以下是二十三的 index.php 的主循环：
例如，这是二十十三的index.php的主循环：
<?php if ( have_posts() ) : ?>
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
这里对其进行了修改以使用我们的 Masonry 循环：
这里修改为使用我们的砌体循环：
<?php if ( have_posts() ) : ?>
<div id="masonry-loop">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', 'masonry' ?>
<?php endwhile; ?>
</div><!--/#masonry-loop-->
<?php twentythirteen_paging_nav(); ?>
<?php else : ?>
<?php get_template_part( 'content', 'none' ); ?>
<?php endif; ?>
步骤4：设置砌体项目的响应宽度 （Step 4: Set Responsive Widths of Masonry Items）
有多种方法可以设置每个 Masonry 项目的宽度。初始化 Masonry 时，您可以使用多个像素设置宽度。我不喜欢这样做，因为我使用响应式主题，并且它需要一些复杂的媒体查询才能在小屏幕上得到正确的结果。对于响应式设计，我发现最好的办法是根据您想要连续显示的项目数为 .masonry-entry 设置一个百分比宽度值，然后让 Masonry 为您完成其余的数学计算。
您可以通过多种方式设置每个砌体项目的宽度。初始化砌体时，您可以使用多个像素设置宽度。我不喜欢这样做，因为我使用响应式主题，并且它需要一些复杂的媒体查询才能在小屏幕上正确显示内容。对于响应式设计，我发现的最好方法是根据您想要的连续项目数设置 .masonry-entry 的宽度值并设置百分比，然后让 Masonry 为您完成其余的数学计算。
所有这一切都需要将 100 除以您想要在主题的 style.css 的简单条目中设置百分比的项目数。例如，如果您希望每行有四个项目，您可以在 masonry.css 文件中执行此操作：
您所需要做的就是用 100 除以您想要在主题的 style.css 的简单条目中设置百分比的项目数量。例如，如果您想要每行四个项目，您可以在 masonry.css 文件中执行以下操作：
.masonry-entry{width:25%}
.masonry-entry{width:25%}
第5步：移动优化 （Step 5: Mobile Optimization）
我们可以到此为止，但我认为最终结果在小手机屏幕上效果不佳。一旦您对桌面上新 Masonry 网格的主题外观感到满意，请在手机上查看。如果您对手机上的外观不满意，那么您需要做一些工作。
我们可以到此为止，但我认为最终结果在小手机屏幕上效果不佳。一旦您对桌面上新 Masonry 网格的主题外观感到满意，请在手机上查看。如果您对手机上的外观不满意，则需要做一些工作。
I don’t think there is enough room on a phone’s screen for everything we added to our content-masonry template part. Two good solutions available to you are to shorten the excerpt for phones or skip it entirely. Here is an extra function you can add to your theme’s functions.php to do that. Because I don’t think these issues are a problem on tablets, I am using a great plugin 莫布尔 in all of the examples in this section to only make the changes on phones, not tablets. I am also checking to see if Mobble is active before using it and if necessary falling back to the more general mobile detection function wp_is_mobile which is built into WordPress.
我认为手机屏幕上没有足够的空间容纳我们添加到内容砌体模板部分的所有内容。 您可以使用两种有效的解决方案来缩短电话摘录或完全跳过摘录。 这是一个额外的功能，您可以将其添加到主题的functions.php中。 因为我认为这些问题在平板电脑上不是问题，所以我在本节的所有示例中都使用了出色的莫布尔插件，仅在手机而非平板电脑上进行了更改。 我还在使用Mobble之前先检查它是否处于活动状态，必要时还可以使用WordPress内置的更通用的移动检测功能wp_is_mobile。
if (! function_exists('slug_custom_excerpt_length') ) :
function slug_custom_excerpt_length( $length ) {
//set the shorter length once
$short = 10;
//set long length once
$long = 55;
//if we can only set short excerpt for phones, else short for all mobile devices
if (function_exists( 'is_phone') {
if ( is_phone() ) {
return $short;
}
else {
return $long;
}
}
else {
if ( wp_is_mobile() ) {
return $short;
}
else {
return $long;
}
}
}
add_filter( 'excerpt_length', 'slug_custom_excerpt_length', 999 );
endif; // ! slug_custom_excerpt_length exists
正如您所看到的，我们首先将长摘录长度和短摘录长度存储在变量中，因为我们将使用这些值两次，并且我们希望能够在以后需要时从一个地方更改它们。从那里我们测试是否可以使用 Mobble 的 is_phone()。如果是这样，我们为手机设置简短摘录，如果不是，则设置长摘录。之后我们做同样的基本事情，但是使用 wp_is_mobile，这将影响所有移动设备，如果 is_phone( ) 不能使用。希望这个函数的 else 部分永远不会被使用，但最好有一个备份以防万一。设置摘录长度逻辑后，只需将函数挂钩到 excerpt_length 过滤器即可。
正如您所看到的，我们首先将长摘录长度和短摘录长度存储在变量中，因为我们将使用这些值两次，并且可以在需要时从一个位置更改它们。从那里我们测试是否可以使用 Mobble 的 is_phone()。如果是，我们设置通话的简短摘录，如果不是，则设置长摘录。之后，我们执行相同的基本操作，但使用 wp_is_mobile，如果 is_phone() 无法使用，这将影响所有移动设备。希望这个函数的 else 部分永远不会被使用，但最好以防万一。一旦设置了摘录长度逻辑，就可以将函数挂接到 excerpt_length 过滤器上。
缩短摘录是一种选择，但我们也可以通过一个简单的过程完全取消它。这是内容砌体的新版本，在手机上省略了整个摘录部分：
缩短摘录是一种选择，但我们也可以通过一个简单的过程完全消除它。这是内容的新版本，通话中省略了整个摘录：
<article class="masonry-entry" id="post-<?php the_ID(); ?>" <?php post_class(); ?> >
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail('masonry-thumb'); ?></a>
</div><!--.masonry-thumbnail-->
<?php endif; ?>
<div class="masonry-details">
<h5><a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>"><span class="masonry-post-title"> <?php the_title(); ?></span></a></h5>
<?php
//put the excerpt markup in variable so we don't have to repeat it multiple times.
$excerpt = '<div class="masonry-post-excerpt">';
$excerpt .= the_excerpt();
$excerpt .= '</div><!--.masonry-post-excerpt-->';
//if we can only skip for phones, else skip for all mobile devices
if (function_exists( 'is_phone') {
if ( ! is_phone() ) {
echo $excerpt;
}
}
else {
if ( ! wp_is_mobile() ) {
echo $excerpt;
}
}
?>
</div><!--/.masonry-entry-details -->
</article><!--/.masonry-entry-->
这次我们正在测试我们是否不在电话/移动设备上，如果是，我们返回循环的摘录部分。如果我们使用电话/移动设备，我们什么也不做。
这次，我们正在测试它是否不在电话/移动设备上，如果是，我们返回循环的摘录部分。如果我们使用电话/移动设备，我们什么也不做。
您可能想做的另一件事是增加 Masonry 项目的宽度，这会减少移动设备上的连续数量。为此，我们将根据设备检测向标头添加不同的内联样式。由于此函数使用 wp_add_inline_styles ，因此它将依赖于特定的样式表。在本例中，我使用您可能需要的 masonry.css 来保持砌体样式独立。如果您最终没有使用它，您可以使用另一个已注册样式表的句柄。
您可能想做的另一件事是增加移动设备上砌体项目的宽度，从而减少连续项目的数量。为此，我们将根据设备检测向标头添加不同的内联样式。由于此函数使用 wp_add_inline_styles，因此它将取决于特定的样式表。在这种情况下，我将使用 masonry.css （您可能需要）来保持砌体样式独立。如果您最终没有使用它，您可以使用另一个已注册样式表的句柄。
if ( ! function_exists ( 'slug_masonry_styles' ) ) :
function slug_masonry_styles() {
//set the wide width
$wide = '25%';
//set narrow width
$narrow = '50%';
/**Determine value for $width**/
//if we can only set narrow for phones, else narrow for all mobile devices
if (function_exists( 'is_phone') {
if ( is_phone() ) {
$width = $narrow;
}
else {
$width = $wide;
}
}
else {
if ( wp_is_mobile() ) {
$width = $narrow;
}
else {
$width = $wide;
}
}
/**Output CSS for .masonry-entry with proper width**/
$custom_css = ".masonry-entry{width: {$width};}";
//You must use the handle of an already enqueued stylesheet here.
wp_add_inline_style( 'masonry', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'slug_masonry_styles' );
endif; // ! slug_masonry_styles exists
该函数枚举自定义样式表，然后使用现在应该非常熟悉的逻辑设置宽度值。之后，我们通过使用 {$width} 将宽度值传递到 CSS 的其他常规位来创建 $custom_css 变量。之后，我们使用 wp_add_inline_style 告诉 WordPress 在使用 Masonry 样式表时在标头中打印内联样式，然后将整个函数挂接到 wp_enqueue_scripts 上，我们就完成了。
该函数使自定义样式表无效，然后使用现在应该非常熟悉的逻辑设置宽度值。之后，我们通过使用 {$width} 将宽度值传递给 CSS 常规外观位来创建 $custom_css 变量。之后，只要使用 Masonry 样式表，我们就使用 wp_add_inline_style 告诉 WordPress 在 header 中打印内联样式，然后将整个函数挂接到 wp_enqueue_scripts 上，就完成了。
如果您选择将 Masonry 样式合并到现有样式表中，请确保将该样式表的句柄与 wp_add_inline_style 一起使用，否则您的内联样式将不会被包含在内。我喜欢使用 wp_add_inline_style ，因为我通常将用于将 Masonry 入队的操作钩子包装在条件中，因此仅在需要时添加它。例如，如果我仅在博客索引和存档页面上使用 Masonry，我会这样做：
如果您选择将 Masonry 样式合并到现有样式表中，请确保通过 wp_add_inline_style 使用该样式表的句柄，否则将不会包含内联样式。我喜欢使用 wp_add_inline_style 因为我通常包装操作钩子以有条件地将砌体排入队列，所以我只在需要时添加它。例如，如果我仅在博客索引和存档页面上使用 Masonry，我会这样做：
if ( is_home() || is_archive() ) {
add_action( 'wp_enqueue_scripts', 'slug_scripts_masonry' );
}
最后几个例子应该会在你的大脑中打开一些其他的想法。例如，您可以使用类似的逻辑在移动设备上完全跳过 Masonry。此外，wp_add_inline_style() 是一个较少使用但非常有用的函数，因为它允许您根据任何类型的条件以编程方式设置不同的样式。它可以让您不仅基于设备检测来从根本上更改任何元素的样式，而且更改还可以基于正在使用的模板，或者即使用户是否登录。
最后几个例子应该会在你的大脑中打开一些其他的想法。例如，您可以使用类似的逻辑在移动设备上完全跳过砌体。 wp_add_inline_style() 也是一个较少使用但非常有用的函数，因为它允许您根据任何类型的条件以编程方式设置不同的样式。它不仅允许您根据设备检测从根本上更改任何元素的样式，而且还可以根据所使用的模板更改它（即使无论用户是否登录）。
我希望您将我所做的这些不同的改变视为发挥创造力的机会。砌体和类似的级联网格系统已经流行了一段时间，所以现在是时候对这个流行的想法进行一些新的改变了。在评论中向我们展示您在 WordPress 主题中使用 Masonry 的酷炫方法。
希望您能将我所做的这些不同的变化视为发挥创造力的机会。砌体和类似的级联网格系统已经存在了一段时间，因此这个流行的想法有了新的变化。请在评论中向我们展示您在 WordPress 主题中使用 Masonry 时想到的最酷的方法。
A multi-purpose WordPress guy, 乔什·波洛克 writes about WordPress, does theme development, serves as the community manager for the Pods Framework and advocates open source solutions for sustainable design.
一个多用途的WordPress专家乔什·波洛克撰写有关WordPress的文章，进行主题开发，担任Pods Framework的社区经理，并倡导可持续设计的开源解决方案。