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

本篇文章云落讲述下使用短代码加载外链，增加美观效果

前言

前几天在大发那里看到了一篇使用内链短代码的文章，里面江苏了使用方法，文章如下↓
https://fatesinger.com/76585
然后又在料神那里看到了完善的代码，如下↓
https://www.liaosam.com/wordpress-insert-internal-links.html
借助料神的文章，自己小小改改，然后坐到了自己的主题里面，但是想了下，内链可以，外链应该也可以吧，所以有了这篇文章。

代码

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

//给文章加外链短代码
function git_external_posts($atts, $content = null){
	extract(shortcode_atts(array('img' => '0'), $atts));
	$ch = curl_init( $content );
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	$result = curl_exec($ch);
	curl_close($ch);
	$title = preg_match('!<title>(.*?)</title>!i', $result, $matches) ? $matches[1] : '因为某些不可控制原因，标题已丢失，请勿想念';
	$tags = get_meta_tags( $content );
	$description = $tags['description'];
	if( $img ==0){
	$imgpath = get_template_directory_uri() . '/css/img/pic/' . mt_rand(1, 12) . '.jpg';}if( $img ==1){
	$imgpath = '//image.thum.io/get/width/160/' . $content . '';}
	global $post;
	$contents = '';
        setup_postdata($post);
        $contents .= '<div class="neilian wailian"><div class="fll"><a target="_blank" href="' . $content . '" class="fll linkss"><i class="fa fa-link fa-fw"></i>  ';
        $contents .= $title;
        $contents .= '</a><p class="note">';
        $contents .= $description;
        $contents .= '</p></div><div class="frr"><a target="_blank" href="' . $content . '"><img src=';
        $contents .= $imgpath;
        $contents .= ' class="neilian-thumb"></a></div></div>';
    wp_reset_postdata();
    return $contents;
}if ( function_exists('curl_init') ) { 
add_shortcode('wailian', 'git_external_posts');
}

CSS代码

.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代码吧，这里贴一下，【修改为[↓

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

使用说明

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

短代码示范

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


下面是KK的

来个视频

最后来个不一样的视频
https://www.bilibili.com/video/av5384127/

-- 完 --