WordPress 将类应用于保存图像的每个段落？

问题描述

将图像添加到页面或帖子中时，Wordpress 会自动添加段落标签<p> 作为父母持有该图像。像这样：

<p><img src="my-image.jpg" alt=""></p>

由于 CSS 中没有父选择器，我很乐意找到一个解决方案来将具体的类名应用于持有实际图像的段落。因此，上述示例将导致：

<p class="my-class"><img src="my-image.jpg" alt=""></p>

任何想法，如果我可以使用 add_filter()为每个 p 持有一个图像应用一个类名？

最佳解决方案

如果您不介意依靠 JavaScript 添加类，则可以使用 jQuery 。

$(document).ready(function() {
    $('p:has(img)').addClass('image');
});

更新：.has()方法可能更快，看到这个 jsperf.com test 。

$(document).ready(function() {
    $('p').has('img').addClass('image');
});

次佳解决方案

如果你需要这个 PHP 解决方案。您可以使用’the_content’ 过滤器进行此类操作。这将在 Wordpress 打印您的帖子内容时将类名”content-img-wrap” 添加到仅包含图像标签的任何段落。所以这不会包含带有图像和跨度的段落。看到更新，如果这是你的寻找。

add_filter( 'the_content', 'img_p_class_content_filter' ,20);
function img_p_class_content_filter($content) {
    // assuming you have created a page/post entitled 'debug'
    $content = preg_replace("/(<p)(>[^<]*<img[^>]+>[^<]*)(</p>)/i", "$1 class='content-img-wrap'$2$3", $content);

    return $content;
}

**以下更新：响应需要更灵活的包装。我创建并快速测试了这个正则表达式对 3 个自动包装的段落 (意味着我没有添加 p 标签，WP 做) 与一个帖子结尾的图像。它们各自还包含一些随机标签和回车，用于测试可能的情况和灵活性。这个想法是，您不必在< img> 之后匹配任何内容。因为存在任何< img> 证明了我们的例子。然后，我们只需添加我们的自定义类 (更好的欢迎)：

function img_p_class_content_filter($content) {
    // assuming you have created a page/post entitled 'debug'
    $content = preg_replace("/(<p[^>]*)(>.*)(<img.*)(</p>)/im", "$1 class='content-img-wrap'$2$3$4", $content);

    return $content;
}

参考文献

Apply class to every paragraph that holds image?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

WordPress 将类应用于保存图像的每个段落？