为WordPress文章图片自动添加链接到原图

知更鸟 WordPress289.1K阅读模式

WordPress日志中插入图片附件显示设置中有四种选择分别是:自定义URL、媒体文件、附件页面和无,一般我们选择第二种链接到媒体文件,只有这样一些图片暗箱放大特效才能启用,但很多童鞋对WP基本功能不是很熟习,插入图片时根本就不知道去选择显示方式,当发现无法启用图片暗箱放大特效后,为时已晚,重新编辑文章不仅工作量大而且很麻烦,这里提供一个补救的方法。

添加下面的JS代码到主题header.php模版文件中:文章源自知更鸟-https://zmingcx.com/wordpress-pictures-auto-add-links.html

  1. <script type="text/javascript">  
  2. $(function() {  
  3.     $('.entry img').each(function(i){  
  4.         if (! this.parentNode.href) {  
  5.             $(this).wrap("<a href='"+this.src+"' class='highslide-image' onclick='return hs.expand(this);'></a>");  
  6.         }  
  7.     });  
  8. });  
  9. </script>  

该脚本会检查文章中的图片是否包含了链接,如果没有,会自动为图片添加链接到原图。文章源自知更鸟-https://zmingcx.com/wordpress-pictures-auto-add-links.html

修改其中的 .entry 为你主题正文的CSS类。文章源自知更鸟-https://zmingcx.com/wordpress-pictures-auto-add-links.html

如果你的主题未加载jquery.js库文件,代码将无效,可以将这句代码加到上面:文章源自知更鸟-https://zmingcx.com/wordpress-pictures-auto-add-links.html

  1. <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>

 文章源自知更鸟-https://zmingcx.com/wordpress-pictures-auto-add-links.html

注:以上方法对HotNews主题无效。文章源自知更鸟-https://zmingcx.com/wordpress-pictures-auto-add-links.html 文章源自知更鸟-https://zmingcx.com/wordpress-pictures-auto-add-links.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
评论  28  访客  26  作者  2
    • 眼幕微启
      眼幕微启 5

      这个没用过

      • Wall·E
        Wall·E 3

        这个好,再也不用手动编辑了,自动添加链接!!

        • 淘金者
          淘金者 4

          呵呵鸟哥真是积极,我刚刚才问了,这么快就写了一篇文章

          • 淘金者
            淘金者 4

            不知道为啥,还是不行,都不自动添加链接

            • 零点
              零点 0

              我都是手动设置的!回去试试效果!

              • 我爱上QQ
                我爱上QQ 6

                我爱上QQ想用同样的方法实现文章图片附件显示为无的功能~

                • 花盗博客
                  花盗博客 1

                  这个主题真不错,早知道就用这个了

                  • 摇滚百科网
                    摇滚百科网 1

                    鸟哥,多谢。学到知识了。

                    • 免费部落
                      免费部落 2

                      这个功能貌似没有多大的意义哦!

                      • 洛阳欧凯网络
                        洛阳欧凯网络 0

                        这个功能实用啊。

                        • pc
                          pc 0

                          使用之后有点小悲剧,已经解决。有时候不是很喜欢图片有链接。不过很方便的东西。支持。

                          • 水马
                            水马 4

                            如果不是绝对路径就最好了,不然更好域名后,就麻烦。

                            • Arthur
                              Arthur 1

                              可以帮忙看看我的正文的CSS类是什么吗,我试了好几个总是不生效啊。
                              谢谢,盼复。

                              • 隔离开关
                                隔离开关 4

                                我目前的情况是几百篇文章都发完了才发现这个问题,怎么办呢?
                                这个会自动给以前发过的文章添加吗?

                                • 隔离开关
                                  隔离开关 4

                                  成功了,但是点进去直接飞到原图里去了,而并非暗箱放大.

                                  • Sunny
                                    Sunny 1

                                    鸟哥,想问下外链图片怎么制作成暗箱效果?

                                    • 图书资讯
                                      图书资讯 2

                                      鸟哥你好,请教你一个困扰很久的问题。
                                      我这个博客:http://smszdk.com/blog/文章内的图片在首页的幻灯片中都显示不出来,包括其它地方也有一样显示不出来的问题,帮忙看看是怎么回事呢?我的文章图片都是外链的,谢谢鸟哥。

                                      • wucoco
                                        wucoco 0

                                        鸟哥我想问一下,比如说我设置了2个图片大小的缩略图。一个是150*150,一个是650*0.
                                        怎么才能让默认的链接不是原图,是650这个大小的?

                                        因为原图实在太大了,影响网页加载。

                                        • 亿网部落
                                          亿网部落 0

                                          鸟哥正文css类怎么查看啊

                                          • 凉生
                                            凉生 0

                                            鸟哥请问把代码加到里面还是外面?
                                            正文css那篇文章看不太懂。小白一只,指教一下 :mrgreen:

                                            • 晓庄
                                              晓庄 1

                                              鸟哥,想问下,添加链接到原图了以后,有没有办法保留图片的多余属性,因为需要一些对齐功能。
                                              我用了这个方法,为图片添加暗箱的,但是图片的多余属性没了。
                                              function auto_post_link($content) {
                                              global $post;
                                              $content = preg_replace(‘/]*?srcs*=s*(’|”)(.*?)\\1[^>]*?/?s*>/i’, “post_title.”” >post_title.”” />“, $content);
                                              return $content;
                                              }
                                              add_filter (‘the_content’, ‘auto_post_link’,0);

                                              • 泥人传说
                                                泥人传说 0

                                                我想问一下,要如何设置函数才能让文章当中的图片自动获取并添加当前文章的链接呢???

                                                • 小艾博客
                                                  小艾博客 1

                                                  确实可以为图片添加上链接 不过添加的是 缓冲图片的链接 不是当前图片的链接 这个怎么办呢? 你可以看一下我的博客 现在还是这个问题 我不会解决 www.erwas.cn

                                                  • Oops
                                                    Oops 0

                                                    好赞,一开始弄了没成功过,发现是因为.entry没有改,改了之后就OK了

                                                    • 八度
                                                      八度 0

                                                      试了一下没有效果,

                                                      • hong
                                                        hong 0

                                                        小白: .entry这个怎么查看我所有的CSS,添加到哪里

                                                      匿名

                                                      发表评论

                                                      匿名网友 填写信息

                                                      :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                                      确定