Question

我需要设置围绕没有字幕的帖子中嵌入的图像的元素的样式，但据我所知，没有办法自动为其添加类或定位{{1}只在不使用jQuery或其他内容的情况下使用<a>。

这是他们默认出现的方式：

<img>

是否有一个简单的wordpress PHP方法，我可以用它来设置一个简单的＆＃34; .img＆＃34;默认情况下对所有这些元素进行分类？

如果这不是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

把它放在你的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');

Answer 4

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

尝试将此添加到主题中的functions.php文件中。也请记住，无论有人说什么，都不要编辑核心文件。

这最初是为了在rel="prettyPhoto"代码中添加<a>，请立即尝试，并记得将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);
}

将类添加到Wordpress图像<a> anchor elements</a>

4 个答案:

简要说明和示例

代码（适用于functions.php）

其他注释