将类别添加到Wordpress图片< a>锚元素 [英] Add class to Wordpress image <a> anchor elements

问题描述

我需要设置元素的样式，使其围绕嵌入没有标题的帖子中的图像，但是据我所知，没有办法自动向其添加类或使用<a>定位目标<img>仅在内部使用而不使用jQuery之类的东西.

I need to style the element that goes around images embedded in a post that don't have captions, but as far as I can tell there is no way to automatically add a class to it or target <a>s with an <img> inside only without using jQuery or something.

这是它们默认情况下的显示方式:

This is how they come out by default:

<a href="sample.jpg"><img class="alignnone size-full wp-image-20" src="sample.jpg" alt="Sample Image" width="1280" height="914"></a>

是否有一个简单的wordpress PHP方法，默认情况下，我可以通过该方法在所有这些元素上设置一个简单的".img"类?

Is there a simple wordpress PHP method with which I can just set a simple ".img" class on all those elements by default?

对于在Wordpress中这不是标准功能感到困惑，很多人对此表示抱怨，但据我所知没有实际的解决方案.

Confused how this is not standard functionality in Wordpress, lots of people complaining about it but no actual solutions as far as I can see.

需要澄清的是，这应该适用于帖子中的现有图像，而不仅仅是我以后发表的帖子！

推荐答案

简要说明和示例

从数据库中检索帖子后，只要其中有一个仅带有图像标签的锚标签，就会将所有指定的类放入该锚标签中.

Brief Explanation and Example

After retrieving the post from the data base, this will put all of the specified classes into the anchor tag whenever there is an anchor tag with only an image tag inside of it.

它可以在一个帖子中使用许多图像标签，以及其他各种奇怪的可能性.例如，像这样的

It works with many image tags in one post, as well as a variety of other weird possibilities. For instance, something like this

<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>

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 has no existing classes
    $replacements[0] = '<a\1 class="' . $classes . '"><img\2></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>. (有关环顾的更多信息，请参见.)
• 在正则表达式中，我认为[^>]*比.*好. [^>]*表示零个或多个不是>的字符.如果没有[^>]*，我认为如果一行上或其他怪异情况下有多个>字符，可能会出现问题.
• 在正则表达式中，反斜杠后跟数字(例如在'<a\1 class="' . $classes . '"><img\3></a>'中)是指相应模式中相应括号内的内容.换句话说，\1的意思是放入与第一组括号内的内容匹配的内容".
• 在add_filter('the_content', 'add_classes_to_linked_images', 10, 1);行中，第一个参数是用于从数据库获取帖子内容的过滤器，第二个参数是我们要使用的函数的名称，第三个参数是过滤器的优先级(较高的数字将在以后执行)，第四个参数是过滤器的参数数量.
• 假设锚点和图像组合已经具有要添加的类，此功能将使其在页面的源代码中显示两次. (不用担心，它最多只会显示两次，并且不会引起任何问题.请参见上面的示例.)

• In the first regular expression pattern, (?![^>]*class) is a negative lookahead so that the first regex replace rule only affects <a href...><img></a>, not <a class... href...><img></a>. (Read more on lookarounds.)
• In regular expressions for this, I think [^>]* is better than .*. [^>]* means zero or more characters that are not a >. Without [^>]*, I think there could be problems if there are multiple > characters on one line or in other weird situations.
• In the regular expressions, the backslash followed by a number in the replacements such as in '<a\1 class="' . $classes . '"><img\3></a>' refers to the stuff inside corresponding parenthetical block in the corresponding pattern. In other words, \1 means "put the stuff that matches what's inside the first set of parentheses".
• In the line add_filter('the_content', 'add_classes_to_linked_images', 10, 1);, the first parameter is the filter for getting the content of a post from the database, the second parameter is the name of the function we want to use, the third parameter is the priority of the filter (higher numbers are executed later), and the fourth parameter is the number of arguments for the filter.
• Assuming your anchor and image combination already has the class you want to add, this function will cause it to show up twice in the source code of your page. (Don't worry, it will only show up twice at most and it won't cause any issues. See example above.)

这篇关于将类别添加到Wordpress图片< a>锚元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！