将自动链接类应用于嵌入到帖子中的图像

时间:2011-03-10 作者:Tommi Forsström

我非常希望能够有条件地应用CSS类来链接嵌入到帖子中的图像元素,但我似乎无法理解这一点。

基本上,我想实现的是替换默认的嵌入图像链接,该链接将图像链接到其自身的全尺寸版本,然后在色盒中打开它。

我知道我可以通过一些Javascript技巧来实现这一点,但我想知道如何在服务器端实现这一点,然后以简单的方式附加colorbox功能。

那么,我是否应该添加一个过滤器,或者采取什么路线。理想情况下,我希望能够编写代码,这样,如果用户嵌入图像,链接将在色框中打开全尺寸版本,但如果用户指定自定义链接,它将像常规链接一样工作。这应该没那么难。

非常感谢您提前提供的任何帮助!

4 个回复
最合适的回答,由SO网友:Tommi Forsström 整理而成

非常感谢用户t31os 关于在哪里找到我的解决方案的提示!

也要感谢用户orionrush 因为我指出了我犯的一个愚蠢的错误!:)

我是如何得到我想要的:

function add_colorbox_class_to_image_links($html, $attachment_id, $attachment) {
    $linkptrn = "/<a[^>]*>/";
    $found = preg_match($linkptrn, $html, $a_elem);

    // If no link, do nothing
    if($found <= 0) return $html;

    $a_elem = $a_elem[0];

    // Check to see if the link is to an uploaded image
    $is_attachment_link = strstr($a_elem, "wp-content/uploads/");

    // If link is to external resource, do nothing
    if($is_attachment_link === FALSE) return $html;

    if(strstr($a_elem, "class=\\"") !== FALSE){ // If link already has class defined inject it to attribute
        $a_elem_new = str_replace("class=\\"", "class=\\"colorbox ", $a_elem);
        $html = str_replace($a_elem, $a_elem_new, $html);
    }else{ // If no class defined, just add class attribute
        $html = str_replace("<a ", "<a class=\\"colorbox\\" ", $html);
    }

    return $html;
}

add_filter(\'image_send_to_editor\', \'add_colorbox_class_to_image_links\', 10, 3);

SO网友:t31os

可以在上运行筛选器image_send_to_editor, 过滤器在get_image_send_to_editor 函数,该函数负责发送围绕发送到编辑器的图像的链接HTML。

过滤器可在堆芯中找到wp-admin/includes/media 并链接到下面以供快速参考
core.trac.wordpress.org/browser/tags/3.1/wp-admin/includes/media.php

SO网友:Joe Hansen

(发布这个答案是因为这个问题出现在谷歌上,我无法通过谷歌找到我想要的。)


简要说明和示例

从数据库检索帖子后,只要锚定标记中只有图像标记,就会将所有指定的类放入锚定标记中。

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

<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 where anchor has no existing classes
    $replacements[0] = \'<a\\1 class="\' . $classes . \'"><img\\3></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\', 100, 1);, 第一个参数是用于从数据库获取帖子内容的过滤器,第二个参数是我们要使用的函数的名称,第三个参数是过滤器的优先级(稍后执行更高的数字),第四个参数是过滤器的参数数

SO网友:orionrush

如果我在这里说错了,有人会纠正我,但上面给了我$astart的警告-我相信以下几句话:

   if(strstr($astart, "class=\\"") !== FALSE){ // If link already has class defined inject it to attribute
    $a_elem_new = str_replace("class=\\"", "class=\\"colorbox ", $astart);
应为:

if(strstr($a_elem, "class=\\"") !== FALSE){ // If link already has class defined inject it to attribute
    $a_elem_new = str_replace("class=\\"", "class=\\"colorbox ", $a_elem);
但我可能读错了。

此外,我们还可以动态添加uploads文件夹,而不是对其进行硬编码:

    $uploads = wp_upload_dir();
$upload_path = basename($uploads[\'baseurl\']); // dosen\'t account for multi site - not sure how to do that. . .
$is_attachment_link = strstr($a_elem, $upload_path);
可能会替代wp\\U basename,但不确定其优点。。。

结束

相关推荐

Displaying oEmbed errors?

有时,通过oEmbed嵌入项目是不可能的,例如,当YouTube视频已禁用嵌入时。The oEmbed service will return a 401 Unauthorized, 并且不会转换代码。有没有办法通知用户这一点?当前的工作流是非直观的(至少对我来说),我更喜欢在WordPress页面上,或者更好的是,在编辑器中显示一条消息,说明对象无法嵌入。