WordPress文章页面添加“复制短链接”按钮

技术百科 码拜 8年前 (2013-05-18) 1672次浏览 0个评论

如果你开启了固定链接,使用类似%postname%.html这样的格式,可能会遇到的一个问题就是“文章页面的地址过长”,这样在分享post的地址时候会遇到一些问题,比如论坛签名长度限制,百度知道回答问题时候的“参考资料”文本框有长度限制。所以需要一个复制短链接的方式。

其实,wordpress的默认文章地址在自定义固定链接格式后仍然是有效的,“xxx/?p=xx”这样的格式不会随着固定链接格式的改变而失效,在后台编辑文章的时候就可以看到“获取短链接地址”的按钮。我们也可以在文章页面添加上同样的按钮,方便读者获得文章的短地址,方法很简单
1.打开single.php模板,或者你想要修改的其他模板
2.在loop的适当位置,一般是the_content()的前后,但是要在loop里面,插入下面的代码

<input id=”shortlink” value=”<?php bloginfo(‘url’)?>/?p=<?php the_id()?>” type=”hidden”><a href=”#” onclick=”prompt(‘URL:’, jQuery(‘#shortlink’).val()); return false;”>获取本文短链接</a>

静态带标题的URL虽然对 SEO 有好处,但是长地址不美观也不方便分享,特别在微博中。WordPress 3.0 之后引入 the_shortlink 提供 URL shortening 缩短网址服务,以便在社交网络、微博或某些缩短网址服务时使用。
使用wordpress 原生的短网址函数就可以很方便得实现文章链接短网址功能。
在编辑文章时会出现 “Shortlink” 按钮,可以查看到当前文章的短链接。或者在管理员模式下进入某篇文章时,顶部也会有”Shortlink” 按钮,这就是wordpress 原生的短网址函数了。短网址效果如本文短链接:http://www.wjzhb.com/?p=388

在网页的任意位置(当然要在wordpress站内)调用shortlink函数:

四个参数:

text——显示文本,默认是“This is the short link.”
title——提示文本,默认是post标题
before——为链接地址前增加文本或HTML标记,该参数及下面的after参数一般是用来为缩短网址风格化使用。
after——为链接地址后增加文本或HTML标记

比如调用函数为:

 <?php the_shortlink(‘short link’, null, ‘<ul><li>’, ‘</li></ul>’); ?>
<?php the_shortlink(‘short link’, wjzhb, ‘<ul><li>’, ‘</li></ul>’); ?>

则实际输出代码为:

1
2
<ul><li><a rel=”shortlink” href=”http://www.wjzhb.com/?p=388″>ShortLink</a></li></ul>
<ul><li><a title=”wjzhb” rel=”shortlink” href=”http://www.wjzhb.com/?p=388″>ShortLink</a></li></ul>

the_shortlink()函数默认所在文件wp-includes/link-template.php

在文章页面显示短链接地址
其实显示该短网址的方法也非常简单,以便于读者复制。
显示为文章的标题:

1
<a href=”<?php echo wp_get_shortlink( $post->ID ); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a>

显示为短网址:

1
<a href=”<?php echo wp_get_shortlink( $post->ID ); ?>” title=”<?php the_title(); ?>”><?php echo wp_get_shortlink( $post->ID ); ?></a>

我本人使用的代码:

1
本文短链接:<?php echo wp_get_shortlink( $post->ID ); ?><a rel=”nofollow” href=”#” onclick=”copy_code(‘<?php echo wp_get_shortlink( $post->ID ); ?>’); return false;”>复制短链接</a>

另外复制需要用到JS脚本。

注:在网上找了代码,测试后没有实现Chrome和其他浏览器的复制。所以只用了以下IE中的方法。如有人实现其他浏览器方法,欢迎指教。

1
<script type=”text/javascript”>
function copy_code(copyText)
{
if (window.clipboardData)
{
window.clipboardData.setData(“Text”, copyText);
alert(‘复制成功!’);
}
}
</script>

CodeBye 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明WordPress文章页面添加“复制短链接”按钮
喜欢 (0)
[1034331897@qq.com]
分享 (0)

文章评论已关闭!