是否将类应用于包含图像的每个段落？

时间：2011-04-30 作者：mathiregister

将图像添加到页面或帖子时，Wordpress会自动添加段落标记 作为持有图像的父级。像这样：

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

由于CSS中没有父选择器，我很想找到一种解决方案，将特定的类名应用于那些包含实际图像的段落。因此，上述示例将导致：

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

知道我能不能用add_filter() 将类名应用于每个p 有图像吗？

4 个回复

最合适的回答,由SO网友:Geert 整理而成

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

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

更新：the.has() 方法可能更快，请参见jsperf.com test.

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

SO网友:OnethingSimple

如果您需要这是一个PHP解决方案。您可以使用“内容”过滤器执行类似操作。这将在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;
}

SO网友:Cliff P

虽然我理解希望前端尽可能精简，因此表示您需要一个PHP解决方案。。。

JS/jQuery可能已经加载到您的前端了，JS/jQuery正是为这个用例而设计的（您已经有了答案，我还没有测试过它）

PHP正则表达式并不是处理这个问题的理想方法。。。进一步阅读（点击链接）https://stackoverflow.com/questions/18664997/how-can-i-use-regular-expression-to-grab-an-img-tag#comment27488762_18664997

例如：

此屏幕截图的规则将匹配 甚至 （最简单的匹配，尚未尝试对已经有类或有其他属性但没有类的P标记进行匹配），但必须在整个结束标记块内进行匹配（其中用于HTML的PHP正则表达式在接缝处分开）。。。箭头指向关闭P标记和打开P标记在同一行上的位置，因此如果要将其计为查找，然后替换<p 具有<p class="my-class", 您将添加my-class 到错误的段落。

如果您不想要这样的“每个场景”用例，那么可以通过regex实现。如果你把范围缩小一点。

如果您决定限制您的范围，您可能会对以下信息感兴趣：

    From wp-includes/default-filters.php
    these run on the_content with default priority (10):
        wptexturize
        convert_smilies
        convert_chars
        wpautop
        shortcode_unautop
        prepend_attachment
    shortcode renders may add new paragraphs and/or new images
        do_shortcode runs on the_content priority 11 so we hook in afterwards so $content already has shortcodes rendered
*/
add_filter(\'the_content\', \'se_16033\', 15); //a priority higher than 11

如果您确实强迫自己走这条复杂的路线（而不是通过jQuery），下面是一些起始代码：

    function se_16033($content) {
    if( !is_singular() || !is_main_query() //https://pippinsplugins.com/playing-nice-with-the-content-filter/
    ) {
        return $content;
    }

    $content = force_balance_tags($content); //We do not want to be REGEXing on unbalanced HTML tags so we must make sure they are balanced before we get started -- garbage in, worse garbage out -- http://codex.wordpress.org/Data_Validation#HTML

    $patterns = array();
    $patterns[0] = \'/quick/\'; //first match p tags with existing classes because we just want to add an additional class
    $patterns[1] = \'/brown/\'; //second, match p tags with space (e.g. style) but without class=""
    $patterns[2] = \'/fox/\'; //third, match <p> tags without attributes
    ksort($patterns);

    $replacements = array();
    $replacements[0] = \'slow\';
    $replacements[1] = \'black\';
    $replacements[2] = \'bear\';
    ksort($replacements);

    preg_replace_all($patterns, $replacements, $content);

    return $content;

}

注意使用http://codex.wordpress.org/Function_Reference/force_balance_tags默认情况下，它用于摘录和评论如果查看其源代码，它实际上使用REGEX：https://core.trac.wordpress.org/browser/tags/4.1/src/wp-includes/formatting.php#L1453

Sidenote我假设他们之所以使用REGEX（不理想）是因为WP需要在几乎任何可以想象的主机的PHP配置上运行（即，如果PHP扩展被禁用，不想加载库）。您可以选择在您自己的解决方案中加载一个专门用于此目的的PHP库/旁注

每次都要运行大量的代码is_singular(). 因此，当您的站点可能已经在使用JS/jQuery时，我不确定它是否值得作为一些复杂PHP解决方案的灵感。

即使在不支持JS的浏览器上，这个P类也需要工作吗请分享您的想法。

SO网友:Steven

Wordpress使用autop 要添加的函数 在内容中换行。

可以在第373行的formatting.php. 一个选项是禁用默认的autop（见下文），创建一个新版本的函数来添加类，然后将其应用到内容中（也请参见下面的链接）。我想您应该在442行附近添加一个正则表达式来实现这一点。

如果您只想删除段落的效果，可以禁用autop 像这样：

remove_filter( \'the_content\', \'wpautop\' );
remove_filter( \'the_excerpt\', \'wpautop\' );

可在autop page:

结束

小码农CODE

是否将类应用于包含图像的每个段落？

相关推荐

内存中断-需要PHP/WP/IT专家