修改 WordPress 循环以输出帖子中的所有图像，并在图像标签中包含缩略图？

Question

这个问题需要一些 php、一些 jquery 和一些通用的编程逻辑。

在previous questions 的慷慨帮助下，我构建了一个脚本，用于扫描 WordPress 帖子中的图像附件，如果找到，将其移动到帖子外部新创建的<ul> 中列出项目。这样做的原因是为了让我在主题中硬编码的滑块 (RoyalSlider) 可以使用图像（出于多种原因，我不想使用 WP 插件版本）。

您可以看到我正在开发的网站here。

相同的脚本提供了网站的几个部分 - 顶部两个部分中的滑块和最后一部分中的客户端徽标。

我现在需要将缩略图导航添加到第二部分的滑块。如果您检查代码，您可以看到，我已经修改了 WP 循环（在本节的页面模板中），以便它返回附加到帖子的任何图像的缩略图（以及显然图像本身）。

这是我用来执行此操作的代码：

<?php 
    $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . $post->ID );
    foreach( $images as $imageID => $imagePost )
    echo wp_get_attachment_image($imageID, 'thumbnail', false);
?>

问题是这目前正在与我的 jQuery 脚本交互，因此这些缩略图被移动到列表项并作为图像包含在滑块中！相反，目标是将每个缩略图包含在其各自图像的<img> 标记中，如下所示：

 <img class="rsImg" src="image.jpg" data-rsTmb="small-image.jpg" alt="image description" />

所以这是问题的逻辑部分：让这些缩略图表现得像缩略图而不是图像的最佳方法是什么？我怀疑我需要以某种方式在 WP 页面模板循环中标记它们，然后才能将它们“回显”到帖子中，以便其他脚本不会接收它们？即可能将它们作为一系列变量传递，然后使用我的脚本检查这些，如果找到它们，将它们按顺序分配给图像，从头到尾？这可能吗？还是有更好的方法来解决这个问题？我可以直接从 WP 循环中输出所需代码 sn-p 中的图像和缩略图吗？

除了基本的包含之外，我对如何编写 PHP 的知识几乎为零，因此无法真正对此进行试验。

非常感谢您对此的任何帮助 - 我知道这个问题是一项艰巨的任务，因为它需要多个领域的专业知识并且非常具体，但我认为它可能会在类似情况下帮助其他人，而且我肯定会学到很多东西从知道如何接近/完成这个！

Answer 1

我不知道我是否做对了。我知道您不希望缩略图与您的 jQuery 匹配。

您可以通过修改 jquery 代码的匹配元素来解决它。这不是最好的解决方案，但根据您所做的更简单。

为缩略图添加一个类：

echo wp_get_attachment_image($imageID, 'thumbnail', false);

到

echo wp_get_attachment_image($imageID, 'thumbnail', false, array('class' => 'thumbsimg'));

参考：http://codex.wordpress.org/Function_Reference/wp_get_attachment_image

并更改您的 jQuery 代码：

var matchesEl = "img, iframe"

到

var matchesEl = "img:not(.thumbsimg), iframe"

Answer 2

代替

echo wp_get_attachment_image($imageID, 'thumbnail', false);

^ 这会返回一个 HTML img 元素。

使用

wp_get_attachment_image_src( $imageID, $size, $icon );

^ 这将返回一个包含图像的 Url、Width、Height 的 Array。

你的例子：

$images =& get_children( 
               array(
                     'post_type'      => 'attachment',
                     'post_mime_type' => 'image',
                     'post_parent'    => $post->ID,
                     'posts_per_page' => -1
                    )
              );

foreach ( (array) $images as $imageID => $imagePost ) {
   // Getting the full image size and thumbnail
   $thumbnail = wp_get_attachment_image_src( $imageID, 'thumbnail');
   $full = wp_get_attachment_image_src( $imageID, 'full');

   echo '<img class="rsImg" src="'. $full[0] .'" data-rsTmb="'. $thumbnail[0] .'" alt="'. $imagePost->post_content .'" />';

}