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

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

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

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');
}
这里是需要借助curl扩展的,如果没有得到话,估计会空白。

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个了,这里再加几个吧,就从友联里面找吧↓
WordPress使用外链短代码美化外链-极客公园

下面是KK的

来个视频

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

-- 完 --

发表评论

电子邮件地址不会被公开。 必填项已用*标注

17 Replies to “WordPress使用外链短代码美化外链”

    1. @hello 尴尬,那个缩略图其实是我偷懒了,这个短代码有一个参数img,默认是img=0,就是图片使用本地随即图,如果img=1,就是启用网站截图缩略图,而这个缩略图其实是一个国外网站的api,你看下代码就知道了