WordPress文章所有图片自动添加链接(图片路径|url|alt|class)

摘要让WordPress文章里所有的图片自动添加超链接的方法汇总,可以链接到当前图片路径或者文章链接,也可以自定义图片和链接样式、属性,非常方法。WordPress文章里全部图片自动超链接也有弊端,下面小拼会做详细的分析。欢迎拍砖!

首先,引入图片处理函数,打开你的主题目录下的functions.php,找个位置加上下面的代码

不论你如何处理文章里图片的链接,这都是必须的,这里把处理图片函数放在/inc/imgformat.php里,本人有代码洁癖,不喜欢functions.php里太多杂项了,找起来太费劲!

  1. //引入图片处理函数,这里你可以注释下,养成好习惯
  2. require get_template_directory() . '/inc/imgformat.php';

WordPress文章所有图片自动添加超链接(当前图片路径|文章链接)

1、让WordPress文章全部图片自动链接到这篇文章,在imgformat.php里加入以下代码:

  1. <?php
  2. //图片自动增加超链接到文章,并添加标题和ALT属性
  3. function auto_post_link($content) {
  4.     global $post;
  5.         $content = preg_replace('/<\s*img\s+[^>]*?src\s*=\s*(\'|\")(.*?)\\1[^>]*?\/?\s*>/i', "<a href=\"".get_permalink()."\" title=\"".$post->post_title."\" ><img src=\"$2\" alt=\"".$post->post_title."\" /></a>"$content);
  6.     return $content;
  7. }
  8. add_filter ('the_content', 'auto_post_link',0);
  9. ?>
弊端:必须文章里的图片是有链接的,不然会多出一个原来的链接。
 举一反三,如果想让图片的链接变成原图的路径,那很简单,直接讲上面代码里的 href=\"".get_permalink()."\" 改为 href=\"$2\" 就可以了;
 给链接或者图片增加样式,同下面的方法类似。

2、给WordPress文章里所有图片加上额外样式,现在很多的幻灯样式都会用到,比如本站的图片点击效果。

  1. <?php
  2. //图片自动链接到原图、增加额外样式
  3. function pirobox_auto($content) {
  4.     global $post;
  5.     $pattern = "/<a(.*?)href=('|\")([A-Za-z0-9\/_\.\~\:-]*?)(\.bmp|\.gif|\.jpg|\.jpeg|\.png)('|\")([^\>]*?)>/i";
  6.     $replacement = '<a$1href=$2$3$4$5$6 class="cboxElement" rel="example_group"'.$post->ID.'>';
  7.     $content = preg_replace($pattern$replacement$content);
  8.     return $content;
  9. }
  10. add_filter('the_content', 'pirobox_auto', 0);
  11. ?>
其中 class="cboxElement" rel="example_group" ,你可以随意替换成你所需要的样式。
 弊端:必须文章里的图片是有链接的,不然替换不到。

小结:

关于WordPress文章所有图片自动添加超链接到原来的图片路径,目前小拼SEM博客用的是前端jquery的处理方法,并没有涉及PHP操作,顺便也分享下好了

  1. $(document).ready(function() {  
  2. //图片自动链接  
  3.     $('.single-content img').each(function(i){  
  4.         if (! this.parentNode.href){  
  5.             $(this).wrap("<a href=\""+this.src+"\" class=\"cboxElement\" rel=\"example_group\"></a>");    
  6.         }  
  7.     });  
  8.  });  

为什么小拼不用上面的PHP正则函数处理呢?

其一,文章(有些文章字节多)全部用正则替换,还是会影响性能的,特别是高流量的站点;

其二,上面的方法也不是很完善,提供个思路,先正则清除所有的图片链接然后再继续即可;

其三,会丢失原来设置的图片样式、ALT标记等。

目前留言:8   其中:访客:4   博主:4

  1. douyaolai

    请问如果让首页(index.php)中的图片都添加额外的class属性?

    • 李 勇

      你好!推荐你使用文末的前端jquery方法,非常方便,直接在你首页的JS文件里加入上述代码即可。单独页面不推荐PHP函数处理。

      • douyaolai

        谢谢你的提醒, 我想让index.php 中的图片img中自动加上 data-img-src 这个,(小白,如果打扰,请见谅!)

  2. secmemory

    大神,前台应该怎么写?

    • 李 勇

      这个很详细的介绍啊,建议你了解下js

      • 李 勇

        你的操作有瑕疵,肯定没问题。

  3. yimo

    求一个给img标签中图片url添加自定义后缀的代码。
    例如name.jpg 变为 name.jpg?1823469569

    • 李 勇

      这个很简单,PHP直接str_replace或者正则替换即可。

评论加载中...

给我留言

图片 表情