Wordperss

首页 - Wordperss - [WordPress教程]免插件给WordPress添加一个下载按钮

[WordPress教程]免插件给WordPress添加一个下载按钮

今天闲着没事想改改主题,然后就想到弄个段代码下载按钮,然后看了一些教程,然后就给折腾了一下。

不过似乎现在很多主题都已经有加上这种短代码,没有的同学就可以自己动手试试了!

教程很简单,只需要在functions文件跟style.css文件添加几段代码就完成了。

添加代码:

首先在functiaos文件添加一段代码:

//添加HTML编辑器自定义快捷标签按钮www.vpao.net
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' );

可以直接添加在functions文件的最后,然后再在style.css添加美化的代码:

.btn - download {
 color: #fff;
 background: #5fbaac;
 border - top: 0;
 box - shadow: 0 0 0 1px#EEE;
 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: before {
 content: "\f0ed";
 display: inline - block;
 font - style: normal;
 font - family: FontAwesome;
 text - align: center;
 margin - right: 8px
}.sg - dl {
 margin: 20px 0 10px 0;
 text - align: center
}.sg - dl.sg - dl - span {
 margin: 0 auto
}

使用方法:

在编辑器点击文本,然后可以看到下载按钮,然后选中地址,然后点击下载按钮即可!

主题需要用到font-awesome字体。如果主题自己带了就不用,如果没有就需要自己添加。

然后就可以得到这样的下载按钮了!当然,你也可以修改成其他的按钮~

本文由 V泡网 作者:Lefat 发表,转载请注明来源!

关键词:, , ,
梯子铺SS

热评文章