当前位置:秋硕笔记 > 记录 > 正文

WordPress 自定义下载按钮纯代码实现

来自文字咖博客的代码。学习记录如下:

1. 定义下载按钮短代码:

代码一:

[cc]
//添加下载按钮
function appthemes_add_quicktags() {
?> add_action(‘admin_print_footer_scripts’, ‘appthemes_add_quicktags’ );
[/cc]

添加完这段代码后,在传统编辑器的文本编辑框会出现一个下载按钮,在 href=” 后面添加你的下载地址即可。

 

代码二:


//定义下载按钮短代码
function wzk_down($atts, $content=null){
return '

';
}
add_shortcode('wzk_down','wzk_down');

//添加下载按钮
function appthemes_add_wzk_down() {
? >

2. 添加 css 样式

如果是使用 DUX 的主题,将下面的代码添加到 main.css 中;如果是使用其他的主题,一般是直接添加到 style.css 文件中。


.btn-download{
color:#fff;
background:#169FE6;
border-top:0;border:2px solid #fff;
padding:10px 16px;
font-size:14px;
line-height:1.33;
border-radius:5px;
opacity:.8;
text-indent:0;
margin-top:5px;
margin-bottom:5px;
display:inline-block;
font-weight:300;
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;}

3. 使用方法

点击传统文本编辑器的下载按钮,将下载链接复制到中间即可:

[wzk_down]https://www.wenzika.com[/wzk_down]

4.演示

感觉很棒!可以赞赏支持我哟~

赞(0) 打赏

评论抢沙发