点击登录
  • 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

WordPress 云落 2个月前 (08-22) 363次浏览 已收录 13个评论
文章目录[隐藏]

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

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

前言

前几天在大发那里看到了一篇使用内链短代码的文章,里面江苏了使用方法,文章如下↓

WordPress 文章内链短代码 – Fatesinger

WordPress 文章内链短代码 - 作者: bigfa,首发于Fatesinger


然后又在料神那里看到了完善的代码,如下↓
WordPress创建带缩略图文章内链(短代码/添加编辑器按钮) | 料网 | 外贸前线_分享外贸实战经验和网络营销知识

如何用 WordPress 短代码或可视化编辑器按钮来创建一个图文混排的文章内链 文章内链在 SEO 链接建设中一直是相当重要的,良好的内链结构对 SEO 十分有益。当你有在当前文章页调用站内其他文章或页面时,积极在页面中增加内链可以极大地提高蜘蛛抓取的次数和深度,在增加了收录量的同时也提高了锚文本关键词的收录。有些旧文章如果更新了,你也可以通过在新文章中添


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

代码

这里面代码说一下,支持两种图片方法,一个本地随机图,目录是你的主题目录/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使用外链短代码美化外链

海外破解网易云音乐和QQ音乐的版权限制 - 远方的海

音乐是海外华人必不可少的娱乐项目了,本文是海外突破网易云音乐,QQ音乐,虾米音乐等音乐大陆地区外版权的教程,可以在iPhone, iPad, Mac, Android和windows上使用。教程的原理是使用检测代理文件Pac。 网易云音…


下面是KK的

来个视频

最后来个不一样的视频

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

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

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