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;}
注意:該功能只能在傳統編輯器的文本編輯中使用。如果使用的是古騰堡編輯器,就不用添加這個功能了。