• 主题更新一下,修复了头像挂掉的问题

  • 后羿更新网站文章可能不会那么闲了

  • 不得不说,美国贴吧的界面真是难看到死

  • 看到网上新闻美国的贴吧将成为中国公司

  • 推送试试

  • 睡觉之前测试一下

  • 发现了一个非常不错的插件

  • 经过确认,微软的必应搜索在中国被屏蔽

  • 给主题增加一个阿里云的代码库

  • 正式通知一下,有赞支付已经停止业务了

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

WordPress 云落 2年前 (2017-08-22) 2970次浏览 17个评论
文章目录[隐藏]

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

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 的

来个视频

最后来个不一样的视频


-- 完 --
WordPress使用外链短代码美化外链
扫码订阅,第一时间获得更新
微信扫码二维码,订阅我们网站的动态,另外不定时发送 WordPress 小技巧,你可以随时退订,欢迎订阅哦~

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress使用外链短代码美化外链

极客公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:WordPress使用外链短代码美化外链
喜欢 (9)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(17)个小伙伴在吐槽
  1. 这个效果不错
    绿软库2017-11-22 03:04 回复 Windows 7 | Chrome 55.0.2883.87
  2. 怎么设置不加图呢?也不生成随机图。
    seven2017-09-25 05:16 回复 Windows 7 | Chrome 60.0.3112.113
  3. 怎么设置不加图呢?也生成随机图。
    seven2017-09-25 05:15 回复 Windows 7 | Chrome 60.0.3112.113
    • 云落
      必须有图
      云落2017-09-26 16:08 回复 Windows 10 | Firefox浏览器 53.0
  4. 这个思路还是很不错的,不过比较容易受制于别人站点的稳定性和防护啥的!
    明月学习笔记Blog2017-09-03 16:35 回复 Windows 10 | Chrome 60.0.3112.113
    • 云落
      是的,主要是标题,摘要可以直接提取,标题确实要匹配的,比如知更鸟的就不行
      云落2017-09-03 16:37 回复 Windows 10 | Firefox浏览器 53.0
  5. 方法确实很棒!但有些外链不稳定,不建议这样使用吧~
    龙笑天2017-09-02 11:20 回复 Windows 7 | Firefox浏览器 28.0
  6. 请问下,外链的有内容,但是提取不到标题是怎么回事呀?
    亿浪博客2017-08-30 01:05 回复 Windows 7 | Chrome 60.0.3112.78
    • 云落
      这个确实有这个情况,我也遇到的,基本都是对方站点的问题,比如开了cdn防护什么的,比如知更鸟的外链就没法读取标题
      云落2017-08-30 01:07 回复 Windows 10 | Firefox浏览器 55.0
  7. 你好,网站截图缩略图那个是怎么搞的呢?
    hello2017-08-24 22:16 回复 Windows 10 | 搜狗浏览器 2.X
    • 云落
      尴尬,那个缩略图其实是我偷懒了,这个短代码有一个参数img,默认是img=0,就是图片使用本地随即图,如果img=1,就是启用网站截图缩略图,而这个缩略图其实是一个国外网站的api,你看下代码就知道了
      云落2017-08-24 22:19 回复 Linux | Chrome 55.0.2883.105
  8. 赶紧上https了,迟早要上的。
    唐门2017-08-23 17:35 回复 Windows 10 | Chrome 55.0.2883.87
    • 云落
      已经上了,刚刚上。。。。。
      云落2017-08-23 21:50 回复 Windows 10 | Firefox浏览器 57.0
    • 云落
      又下了。。。
      云落2017-09-02 12:29 回复 Windows 10 | Firefox浏览器 53.0
  9. 签到成功!签到时间:2017-08-23 11:17:18,每日打卡,生活更精彩哦~
    阁楼藏2017-08-23 11:17 回复 Windows 10 | Chrome 55.0.2883.87
  10. 签到成功!签到时间:2017-08-23 00:53:03,每日打卡,生活更精彩哦~
    感谢2017-08-23 00:54 回复 Windows 10 | Chrome 60.0.3112.101