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

Posted 2023-03-06

【中文标题】将类添加到 Wordpress 图像 <a> 锚元素

【英文标题】：Add class to Wordpress image <a> anchor elements

【发布时间】：2014-07-25 10:12:27

【问题描述】：

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

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

<a href="sample.jpg"><img class="alignnone size-full wp-image-20" src="sample.jpg"   ></a>

是否有一个简单的 wordpress php 方法，默认情况下我可以在所有这些元素上设置一个简单的“.img”类？

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

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

【问题讨论】：

检查我修改后的答案 - 它应该处理现有和未来的内容。

尽管这是一个老问题，但我添加了一个新答案，解决了通过 Google 找到的常见答案中的一些问题。您在 Google 上找到的大部分内容都来自一篇博客文章，该文章确实很有帮助，但存在一些问题。

@Joseph 我不再使用 Wordpress，但我希望在这里选择最佳答案。您的新答案是否比@cale_b 的答案更多？

@mattaningram 是的。 （如果一页上有很多图像，包括如果只有其中一些已经定义了类属性。有更精确的正则表达式......）

【参考方案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');

【讨论】：

我遇到了这个问题，但它只适用于以后的帖子，我需要一些东西来将该类添加到现有帖子中的所有图像锚点。

好的，我试试这个，但它怎么知道<a> 是否包装了<img>？

太棒了，成功了。据我所知，我认为这个解决方案在网络上的任何地方都不存在，我建议你在你的博客上做广告或其他什么哈哈！

如果您的实例在同一篇文章中有许多图像，而其中只有一些锚标记已经具有类属性，则此解决方案可能不起作用。我对这个问题的回答有效：***.com/a/30540598/756329

此外，如果一行中有很多 html 或奇怪的 HTML，此解决方案可能会出现其他问题，因为正则表达式经常使用 .*。而? 在.*? 这样的表达式中是多余的。

【参考方案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);行中，第一个参数是从数据库中获取帖子内容的过滤器，第二个参数是我们要使用的函数名，第三个参数是过滤器的优先级（更大的数字稍后执行），第四个参数是过滤器的参数数量。 假设您的锚点和图像组合已经有您要添加的类，此功能将导致它在您的页面源代码中显示两次。 （别担心，它最多只会显示两次，不会引起任何问题。请参见上面的示例。）

【讨论】：

你介意帮助解决一个类似的问题吗？它只是一个需要添加数据属性的简单 元素？

@Tanner 我没有示例或方法来测试它。简短的回答：只需删除多余的东西。像 '<img([^>]*)>' 这样为 img 创建一个模式，并像这样 '<img\1 ' . 'new stuff here' . '>' 进行替换

【参考方案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);

【参考方案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');

【讨论】：

这个可能是是解决现有内容的绝佳解决方案，但是：它不会将类放在a 元素上，而是将它放在@987654323 上@。此外，您没有定义要添加的新类。

我需要包装''元素上的类，而不是''元素。

现在它只处理未来的帖子。 OP 需要它来解决当前和现有问题。