其实是个非常简单的功能,而我也早就应该做了,不过由于各种各样的怠惰,居然拖到现在了。_(:з」∠)_

这个是国内很多CMS主题内置的功能,不过一些国外的主题就不太会有些小功能了,很多时候文章需要提供下载,而直接使用超链接添加在文章中其他人很容易会看漏掉,所以使用一个这样的css下载面板就能完美解决这个问题了。为了方便使用,在后台编辑器上添加一个按钮,点开后弹出选项框:

代码如下,可以直接添加到function.php或者保存成插件加载。

<?php
/*
Plugin Name:Yeraph-download-link
Plugin URI: http://blog.yeraph.com
Description: [wtf]
Author: Yerpah
Version: 1.0
Author URI: http://blog.yeraph.com/
*/

//创建按钮
function my_add_mce_button() {
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
        add_filter( 'mce_buttons_3', 'my_register_mce_button' );//在编辑器工具栏第3行加载按钮
    }
}
add_action('admin_head', 'my_add_mce_button');
function my_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_mce_button'] = plugin_dir_url(__FILE__) . '/js/dl-tinymce.js';
    return $plugin_array;
}
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'my_mce_button' );
    return $buttons;
}

//引入外部CSS
function plugincss() {       
    wp_register_style( 'plugin', plugins_url( 'css/dl-style.css' , __FILE__ ) );  
    if ( !is_admin() ) {           
        wp_enqueue_style( 'plugin' );  
    }  
}  
add_action( 'init', 'plugincss' );

//短代码[wtf_dlbox]
function my_wtf_dlbox($atts, $content = null){
    extract(shortcode_atts(array("file" => "","size" => "","info" => "","time" => "","magnet" => "",), $atts));
    $out = '<div class="btnDown"><ul><li>文件名称:' . $file . '【大小:' . $size . '】</li><li>上传时间:' . $time . '</li><li>文件说明:' . $info . '</li><li>磁力链接:' . $magent . '</li><li>下载地址:' . $content . '</li></ul></div>';
    return $out;
}
add_shortcode('wtf_dlbox', 'my_wtf_dlbox');

?>

注意,如果是作为主题函数加载,引入js时候应该使用get_template_directory_uri() .'tinymce.js'

注意,上面的部分还需要dl-style.css文件才能完美显示。

<style>
.btnDown {
margin-bottom: 14px;
border: 1px solid #666;
border-radius: 2px;
}
.btnDown:hover {
border: 1px solid #66ccff;
}
.btnDown:after {
 content: "_";
 display: block;
 clear: both;
 visibility: hidden;
}
.btnDown ul {
margin-bottom: 0px
}
.btnDown li {
color: #3e3e3e;
display: block;
height: 34px;
line-height: 34px;
}
</style>

tinymce.js的代码,将短代码输入到编辑器中:

(function() {
	tinymce.PluginManager.add('my_mce_button', function(editor, url) {  /*注意my_mce_button也就是插件的命名必须与function.php中的插件数组对应*/
		editor.addButton('my_mce_button', {
			text: '下载面板',
			icon: false,
			onclick: function() {
				function getNowFormatDate() {
					var date = new Date();
					var seperator1 = "-";
					var seperator2 = ":";
					var year = date.getFullYear();
					var month = date.getMonth() + 1;
					var strDate = date.getDate();
					if (month >= 1 && month <= 9) {
						month = "0" + month;
					}
					if (strDate >= 0 && strDate <= 9) {
						strDate = "0" + strDate;
					}
					var currentdate = year + "年" + month + "月" + strDate + "日";
					return currentdate;
				}
				editor.windowManager.open({
					title: '下载面板',
					body: [{
						type: 'textbox',
						name: 'fileName',
						label: '文件名称',
						value: '*.rar'
					}, {
						type: 'textbox',
						name: 'fileSize',
						label: '文件大小',
						value: ''
					}, {
						type: 'textbox',
						name: 'fileinfoName',
						label: '文件描述',
						value: '提取码 xxxx 解压密码 y18',
						multiline: true,
						minWidth: 300,
						minHeight: 60
					}, {
						type: 'textbox',
						name: 'magnetName',
						label: '磁力链接',
						value: 'magnet:?xt=urn:btih:'
					}, {
						type: 'textbox',
						name: 'downName',
						label: '载点名称',
						value: '百度网盘',
					}, {
						type: 'textbox',
						name: 'downLink',
						label: '下载地址',
						value: '',
					}, ],
					onsubmit: function(e) {
						editor.insertContent("[wtf_dlbox file='" + e.data.fileName + "' size='" + e.data.fileSize + "' info='" + e.data.fileinfoName + "' time='" + getNowFormatDate() + "' magnet='" + e.data.magnetName + "']<a helf='" + e.data.downName + "' target='_blank' rel='nofolow>" + e.data.downLink + "</a>[/wtf_dlbox]");

					}
				});
			}
		});
	});
})();

其实使用js是可以直接将html代码输入TinyMCE4.0编辑器中的,但是由于编辑器会对一些代码格式化导致格式失效,所以使用了短代码的方式。

下载面板的样式可以定制自己喜欢的样式,右侧插入图片的部分也可以修改为其他内容,如果我上面的书写没有问题的话,输出的样式就是这样的: