本篇文章云落讲述下使用短代码加载外链,增加美观效果
前言
前几天在大发那里看到了一篇使用内链短代码的文章,里面江苏了使用方法,文章如下↓
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代码
将css代码放进自己的style文件,因为是从我网站直接复制的,所以没有美化,自己凑合看看吧。
.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/
-- 完 --
这个效果不错
怎么设置不加图呢?也不生成随机图。
怎么设置不加图呢?也生成随机图。
@seven 必须有图
这个思路还是很不错的,不过比较容易受制于别人站点的稳定性和防护啥的!
@明月学习笔记Blog 是的,主要是标题,摘要可以直接提取,标题确实要匹配的,比如知更鸟的就不行
方法确实很棒!但有些外链不稳定,不建议这样使用吧~
请问下,外链的有内容,但是提取不到标题是怎么回事呀?
@亿浪博客 这个确实有这个情况,我也遇到的,基本都是对方站点的问题,比如开了cdn防护什么的,比如知更鸟的外链就没法读取标题
你好,网站截图缩略图那个是怎么搞的呢?
@hello 尴尬,那个缩略图其实是我偷懒了,这个短代码有一个参数img,默认是img=0,就是图片使用本地随即图,如果img=1,就是启用网站截图缩略图,而这个缩略图其实是一个国外网站的api,你看下代码就知道了
赶紧上https了,迟早要上的。
@唐门 已经上了,刚刚上。。。。。
@唐门 又下了。。。
签到成功!签到时间:2017-08-23 11:17:18,每日打卡,生活更精彩哦~
@阁楼藏 😆
签到成功!签到时间:2017-08-23 00:53:03,每日打卡,生活更精彩哦~