WordPress大前端DUX主題純代碼實現自定義下載按鈕

WordPress自定義下載按鈕肯定有相關插件，但利用純代碼實現自定義下載按鈕相對插件而言似乎更好些。
複制下面的代碼一般添加到functions.php文件中，DUX主題添加到functions-theme.php文件末尾即可。
文件路徑：/wp-content/themes/dux/

//添加下載按鈕
function appthemes_add_quicktags() {
?><script type="text/javascript">
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"><i class="fa fa-download"></i> 本地下載</button></a></span></div>' );
</script><?php }
add_action('admin_print_footer_scripts', 'appthemes_add_quicktags' );

添加完代碼後，在傳統編輯器的文本編輯框會顯示一個“下載按鈕”，點擊二次“下載按鈕”，將“文件下載”四個字修改爲您的下載鏈接即可。

添加CSS樣式：如果使用DUX主題，將下面的代碼添加到main.css文件中。如果使用其它的主題，一般是直接添加到style.css文件中。
文件路徑：/wp-content/themes/dux/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;}

注意：該功能只能在傳統編輯器的文本編輯中使用。如果使用的是古騰堡編輯器，就不用添加這個功能了。