1. 秋硕笔记Home
  2. wordpress建站
  3. wordpress美化

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

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

Leave a Reply

登录后才能评论