将类添加到 Wordpress 图像 <a> 锚元素

Question

我需要为嵌入在没有标题的帖子中的图像周围的元素设置样式，但据我所知，没有办法自动向它添加一个类或以<a>s 为目标<img> 只在里面，不使用 jQuery 什么的。

这是它们默认的输出方式：

<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”类？

很困惑这不是 Wordpress 中的标准功能，很多人抱怨它，但据我所知没有实际的解决方案。

澄清一下，这应该适用于帖子中的现有图片，而不仅仅是我以后发布的帖子！

Answer 1

如果您有能力编辑您的functions.php 文件，请添加此代码。它已经过测试和证明：

/**
 * Attach a class to linked images' parent anchors
 * Works for existing content
 */
function give_linked_images_class($content) {

  $classes = 'img'; // separate classes by spaces - 'img image-link'

  // check if there are already a class property assigned to the anchor
  if ( preg_match('/<a.*? class=".*?"><img/', $content) ) {
    // If there is, simply add the class
    $content = preg_replace('/(<a.*? class=".*?)(".*?><img)/', '$1 ' . $classes . '$2', $content);
  } else {
    // If there is not an existing class, create a class property
    $content = preg_replace('/(<a.*?)><img/', '$1 class="' . $classes . '" ><img', $content);
  }
  return $content;
}

add_filter('the_content','give_linked_images_class');

Answer 2

简要说明和示例

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

它适用于一篇文章中的许多图像标签，以及各种其他奇怪的可能性。比如这样的

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

Answer 3

我的朋友在尝试在他的图片上添加 prettyPhoto rel 时遇到了同样的问题，有 1000 个链接。

尝试将其添加到主题中的 functions.php 文件中。也请记住永远不要编辑核心文件，不管别人怎么说。

这最初是为了在<a> 标签中添加rel="prettyPhoto"，现在试试，记得将class="newClassHere" 更改为您的班级。

add_filter('wp_get_attachment_link', 'rc_add_rel_attribute');
function rc_add_rel_attribute($link) {
    global $post;
    return str_replace('<a href', '<a class="newClassHere" href', $link);
}

Answer 4

把它放在你的functions.php中

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'img'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" >', $html);
  }
  return $html;
}
add_filter('the_content','give_linked_images_class');