WordPress使用外链短代码美化外链

借助料神的文章，自己小小改改，然后坐到了自己的主题里面，但是想了下，内链可以，外链应该也可以吧，所以有了这篇文章。

代码

这里面代码说一下，支持两种图片方法，一个本地随机图，目录是你的主题目录/css/img/pic/图片.jpg，自己根据自己的改一下吧。

1. //给文章加外链短代码
2. function git_external_posts($atts, $content =null){
3. extract(shortcode_atts(array(‘img’=>‘0’), $atts));
4. $ch = curl_init( $content );
5. curl_setopt($ch, CURLOPT_RETURNTRANSFER,1);
6. $result = curl_exec($ch);
7. curl_close($ch);
8. $title = preg_match(‘!<title>(.*?)</title>!i’, $result, $matches)? $matches[1]:‘因为某些不可控制原因，标题已丢失，请勿想念’;
9. $tags = get_meta_tags( $content );
10. $description = $tags[‘description’];
11. if( $img ==0){
12. $imgpath = get_template_directory_uri().‘/css/img/pic/’. mt_rand(1,12).‘.jpg’;}if( $img ==1){
13. $imgpath =‘//image.thum.io/get/width/160/’. $content .”;}
14. global $post;
15. $contents =”;
16. setup_postdata($post);
17. $contents .=‘<div class=”neilian wailian”><div class=”fll”><a target=”_blank” href=”‘. $content .‘” class=”fll linkss”><i class=”fa fa-link fa-fw”></i> ‘;
18. $contents .= $title;
19. $contents .=‘</a><p class=”note”>’;
20. $contents .= $description;
21. $contents .=‘</p></div><div class=”frr”><a target=”_blank” href=”‘. $content .‘”><img src=’;
22. $contents .= $imgpath;
23. $contents .=‘ class=”neilian-thumb”></a></div></div>’;
24. wp_reset_postdata();
25. return $contents;
26. }if( function_exists(‘curl_init’)){
27. add_shortcode(‘wailian’,‘git_external_posts’);
28. }

CSS 代码

1. .fll{float:left}.frr{float:right}.neilian{margin–bottom:25px;padding:10px;width:98%;height:120px;border:1px solid #e8e8e8;background:#fff;box-shadow:0 1px 0 rgba(0,0,0,.1);cursor:pointer;-webkit-transition:box-shadow 218ms;-moz-transition:box-shadow 218ms;-o-transition:box-shadow 218ms;transition:box-shadow 218ms}.neilian:hover{box-shadow:0 1px 8px 1px rgba(0,0,0,.1)}.neilian .fll{width:72%}.neilian .frr{padding:5px 5px;width:24%}.neilian .fll a{display:block;margin-right:15px;padding:8px 5px;width:100%;color:#35a56b!important;text-decoration:none;font-size:16px;border:none}.neilian .fll .note{margin:0 0 5px;padding-left:10px;color:#888;font-size:14px}.neilian .neilian-thumb{width:160px;height:110px}.neilian .linkss{word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.fll .note{max-height: 81px ;overflow:hidden;}.wailian:hover {box-shadow: 0 1px 8px 1px #1098F7;}

js 代码

这里说得对 js 文件其实是短代码按钮方案，其实都有类似的 js 代码吧，这里贴一下，【修改为[↓

1. QTags.addButton(‘wl’,‘文章外链’,‘【wailian img=0】’,‘【/wailian】’);

使用说明

这里说明一下，代码支持两种图片方案，一个是随机图，另一个是网站截图缩略图，短代码里面有一个img=0是缩略图选择的，默认是 0，也就是本地随机图，如果想实现外链网站缩略图，就把 0 改为 1，默认是 0，也就是本地随机图。
另外外链随机图使用的是国外网站的 api，所以速度可能会比较慢，自己选择吧。

短代码示范

说是示范，其实上面已经有了 2 个了，这里再加几个吧，就从友联里面找吧↓

下面是 KK 的