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