分别针对帖子中的图像和内容答案

【问题标题】：targeting the images and the content in a post separately分别针对帖子中的图像和内容
【发布时间】：2023-03-03 22:18:01
【问题描述】：

在我的 WP 主题中，我希望能够定位（将 css 挂在我的 style.css 中）我的 single.php 中的图像和内容。

在 single.php 上，它通过循环将内容放入

  <?php while ( have_posts() ) : the_post(); ?>

        <?php get_template_part( 'content', 'single' ); ?>
        <?php bnNav_content_nav( 'nav-below' ); ?>

  <?php endwhile; // end of the loop. ?>

在 content-single.php 上

<div class="container"
  <?php the_content(); ?>
</div>

帖子的内容有图片和文字，但都是在

标签中输出的。我可以将图像定位为能够添加 -margins （混乱但我可以为文本设置不同的边距）但我想为每个添加更多独特的样式

【问题讨论】：

标签： php jquery html css wordpress

【解决方案1】：

您的图片不必包含在段落中。您可以在文本模式下使用 WordPress 编辑器将图像包装在 DIV 中。

通过这种方式，您可以分别为带有图像和段落的 DIV 定义样式。如果您经常需要此功能，您可以为自己准备一个快速标签，即使在编辑器的可视模式下，它也会快速插入带有图像的div。

AddQuicktag-Plugin 是一个很好的工具。

【讨论】：

不知道我能做到这一点。这是一些额外的工作，但似乎是最简单的解决方案
很高兴为您提供帮助。这是额外的工作 - 使用快速标签，您可以将其最小化。如果其他东西更适合您的需求，您不必使用
- 您也可以使用
或
。

【解决方案2】：

似乎没有从post body 抓取媒体的特定功能。您可以在帖子内容中使用regex for wrapping/handling images，也可以只使用这样的 CSS：

.container p img {
 /*styles here*/
    }

另外，既然你提到了 jQuery，你可以用同样的选择器方式访问 post images 节点列表：

$('.container p img').each(function(){
   //$(this) is and <img tag
})

【讨论】：

就像我提到的，我可以使用 '.container p img {' 来定位图像。我想为文本而不是图像添加边距、填充等。但是它们都被包裹在
标签
中
然后你可以用jquery检查： $(".content p").each( function () { if (!$(this).find(".img").length) { / /没有图片 }});