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

1、将以下代码放进主题目录中的functions.php中: //添加下载按钮 functionappthemes_add_quicktags(){ ?>// 2、css样式代码: .btn-download{color:#fff;background:#169FE6;border-top:0;border:2pxsolid#fff;padding:10px16px;font-size:18…

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

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

2、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;}

3、按钮演示:

 

另外一种按钮样式:

<div id="download"><a style="border-radius: 5px; color: #fff; background-color: #32a5e7; border: 2px solid #32a5e7; text-indent: 0; padding: 8px 25px 9px;" href="http://www.cuikaiyun.com"> 按钮样式 </a></div>按钮样式

 

本博客 [ 秋硕笔记 ] 内带有 原创 标签文章,均为秋硕独立创作。

撰文不易,转载请注明文章来源并保留原文链接:本文转载自 秋硕笔记。

本文链接:https://www.cuikaiyun.cn/wordpress-pure-code-add-article-download-button.html

主题按钮样式添加

原创文章,作者:秋硕笔记,如若转载,请注明出处:https://www.davidwu.net/archives/1378

发表评论

电子邮件地址不会被公开。 必填项已用*标注