(发布这个答案是因为这个问题出现在谷歌上,我无法通过谷歌找到我想要的。)
简要说明和示例
从数据库检索帖子后,只要锚定标记中只有图像标记,就会将所有指定的类放入锚定标记中。
它可以在一篇文章中使用许多图像标签,以及各种其他奇怪的可能性。比如像这样的
<article>
<a href="an_image.jpg">
<img src="an_image.jpg">
</a>
<a class="media-img" href="another_image.jpg">
<img src="another_image.jpg">
</a>
<p>Text with a <a href="google.com">link</a></p>
<a class="big gray ugly" href="third_image.jpg">
<img src="third_image.jpg">
</a>
<a foo="bar" class="big" href="fourth_image.jpg">
<img src="fourth_image.jpg">
</a>
</article>
将成为
<article>
<a class="media-img" href="an_image.jpg">
<img src="an_image.jpg">
</a>
<a class="media-img media-img" href="another_image.jpg">
<img src="another_image.jpg">
</a>
<p>Text with a <a href="google.com">link</a></p>
<a class="media-img big gray ugly" href="third_image.jpg">
<img src="third_image.jpg">
</a>
<a foo="bar" class="media-img big" href="fourth_image.jpg">
<img src="fourth_image.jpg">
</a>
</article>
代码(用于functions.php)
function add_classes_to_linked_images($html) {
$classes = \'media-img\'; // can do multiple classes, separate with space
$patterns = array();
$replacements = array();
$patterns[0] = \'/<a(?![^>]*class)([^>]*)>\\s*<img([^>]*)>\\s*<\\/a>/\'; // matches img tag wrapped in anchor tag where anchor tag where anchor has no existing classes
$replacements[0] = \'<a\\1 class="\' . $classes . \'"><img\\3></a>\';
$patterns[1] = \'/<a([^>]*)class="([^"]*)"([^>]*)>\\s*<img([^>]*)>\\s*<\\/a>/\'; // matches img tag wrapped in anchor tag where anchor has existing classes contained in double quotes
$replacements[1] = \'<a\\1class="\' . $classes . \' \\2"\\3><img\\4></a>\';
$patterns[2] = \'/<a([^>]*)class=\\\'([^\\\']*)\\\'([^>]*)>\\s*<img([^>]*)>\\s*<\\/a>/\'; // matches img tag wrapped in anchor tag where anchor has existing classes contained in single quotes
$replacements[2] = \'<a\\1class="\' . $classes . \' \\2"\\3><img\\4></a>\';
$html = preg_replace($patterns, $replacements, $html);
return $html;
}
add_filter(\'the_content\', \'add_classes_to_linked_images\', 100, 1);
第一个正则表达式模式中的其他注释,(?![^>]*class)
是一个负前瞻,因此第一个正则表达式替换规则仅影响<a href...><img></a>
, 不<a class... href...><img></a>
. (阅读更多信息lookarounds.)在正则表达式中,我认为[^>]*
优于.*
. [^>]*
表示零个或多个非>
. 没有[^>]*
, 我认为如果有多个>
一行或其他奇怪情况下的角色在正则表达式中,反斜杠后跟替换中的数字,如In\'<a\\1 class="\' . $classes . \'"><img\\3></a>\'
指对应模式中对应的插入块内的内容。换句话说,\\1
意思是“把与第一组括号中的内容相匹配的东西放进去”排队等候add_filter(\'the_content\', \'add_classes_to_linked_images\', 100, 1);
, 第一个参数是用于从数据库获取帖子内容的过滤器,第二个参数是我们要使用的函数的名称,第三个参数是过滤器的优先级(稍后执行更高的数字),第四个参数是过滤器的参数数假设您的锚定和图像组合已经有了要添加的类,此函数将使其在页面的源代码中显示两次。(别担心,它最多只会出现两次,不会引起任何问题。请参见上面的示例。)