无作为
不仅仅是一种态度!
当前位置: 无作为 » 技术教程 » wordpress技术经验 » wordpress纯代码添加文章下载按钮

wordpress纯代码添加文章下载按钮

如果你经常分享软件,但是博客有没有下载按钮的功能,每次只能通过a标签的超链接来实现下载,不如使用纯代码给自己的wordpress添加一个下载的按钮吧,支持前后台同步哦,

当然我们也可以使用下载插件,目前无作为自用的插件就是:WordPress独立下载页面-xydown插件免费下载,

当然如果我们并不需要那样的插件就只是简单的添加一个下载按钮即可,那么就采用无作为分享的这个方法吧,

不过首先你要确定你主题是否自己自带了这个功能,比如dux的这个功能就叫直达页面,

纯代码添加文章下载按钮

教程开始之前,我们先来看看截图,看看是否值得拥有:

wordpress纯代码添加文章下载按钮
wordpress纯代码添加文章下载按钮

教程代码

将以下代码放进主题目录中的functions.php中

//添加下载按钮
function appthemes_add_quicktags() {
?><script type="text/javascript">// <![CDATA[
QTags.addButton( 'downs', '下载按钮', '<div class="sg-dl"><span class="sg-dl-span"><a href="','" target=_blank title="文件下载" rel=nofollow><button type="button" class="btn-download">本地下载</button></a></span></div>' );
// ]]></script><?php } add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

这样我们就已经实现了下载功能,只要你在写文章的时候,将可视化编辑器调整成文本模式即可看到下载按钮,如下图。

wordpress纯代码添加文章下载按钮

然后我们还需要一个css样式,这里无作为自己简单的写了一下,大家可以自己修改大小颜色

css样式代码

.btn-download{color:#fff;background:#169FE6;border-top:0;border:2px solid #fff;padding:10px 16px;font-size:18px;line-height:1.33;border-radius:5px;opacity:.8;text-indent:0;margin-top:5px;margin-bottom:5px;display:inline-block;font-weight:400;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;} .btn-download:hover{color:#169FE6;background-color:#fff;border-color:#169FE6;} .sg-dl{margin:20px 0 10px 0;text-align:center;} .sg-dl .sg-dl-span{margin:0 auto;}

到这里我们就实现了纯代码给自己的wordpress博客文章页面添加下载按钮的教程。

所有免费资源、福利、电影、破解软件未经允许不得转载:www.wuzuowei.net无作为 » wordpress纯代码添加文章下载按钮
分享到: 更多 (0)

来句评论吧! 2

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-19

    css样式代码单独放还是放在别的css里面 啊 站长

    文辉8个月前 (05-09)回复
    • @文辉 放在通用的css代码里面,或者直接插入网页代码里面

      无作为8个月前 (05-09)回复

无作为-不仅仅是一种态度

登录/注册文章归档