wordpress编辑器添加图文模块

A+

所属分类：建博笔记

一、前言

之前介绍了一篇文章《巧用图文模块为文章添加卡片式文章内链功能》，其目的是为了在文章中以“卡片”形式插入其他文章的链接。而该功能是建立在【图文模块】功能的基础上实现的，考虑到很多主题没有该功能，今天就分享一下后台编辑器集成图文模块的方法。

二、效果演示

该模块设计之初是作为商品展示用的，由图片、标题、简介、原价、现价、按钮六个部分组成。通过对模块的合理设置，也可以作为卡片式文章内链、广告投放等功能使用。下面分别是作为商品和卡片式文章内链时的功能演示：

iPhone XS

作为商品时的功能演示。

9999

~~6999~~

前往购买

Tara – lovey dovey 完整版

作为卡片式文章内链时的功能演示。

前往聆听

功能实现

三、添加模块主体代码

首先：在【inc】目录下新建一个名为【addlist】的文件夹

也可在其他位置新建该文件夹，但要注意下面代码中涉及该文件夹的路径调用关系。

然后：在该文件夹中新建一个名为【add-list.php】的文件，并添加代码展开

<!DOCTYPE HTML>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>图文模块</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel='stylesheet' href='list-box.css' type='text/css' media='all' />
</head>	
<body>
<form onsubmit="InsertValue();return false;" id="form-table">

<div id="wplist_tips"></div>

<table class="form-table">
	<tr>
		 <th style="width: 20%;"><label for="post_title">输入标题</label></th>
		<td><input type="text" name="post_title" id="post_title" value="" size="30" tabindex="30" style="width: 80%;" /></td>
	</tr>
	<tr>
		<th style="width: 20%;"><label for="wp_list_link">链接地址</label></th>
		<td><div id="get_alimama" style="max-width:510px;overflow:hidden;"></div><input type="text" name="wp[mm_link]" id="wp_list_link" value="" size="30" tabindex="30" style="width: 80%;" placeholder="链接地址" /></td>
	</tr>
	<tr>
		<th style="width: 20%;"><label for="imageURL">图片链接</label></th>
		<td><input type="text" name="wp[image]" id="imageURL" value="" size="30" tabindex="30" style="width: 80%;" /></td>
	</tr>
	<tr>
		<th style="width: 20%;"><label for="btn">按钮名称</label></th>
		<td><input type="text" name="wp[btn]" id="btn" value="" size="30" tabindex="30" style="width: 80%;" /></td>
	</tr>
	<tr>
		<th style="width: 20%;"><label for="wp_price">相关信息</label></th>
		<td>
			<input type="text" name="wp[price]" id="wp_price" value="" size="30" tabindex="30" style="width: 25%;" placeholder="比如现价格" />
			<label for="wp_old_price">可选信息: </label><input type="text" name="wp[old_price]" id="wp_old_price" value="" size="30" tabindex="30" style="width: 25%;" placeholder="比如原价格" />
		</td>
	</tr>
	<tr>
		<th style="width: 20%;"><label for="post_content">简介说明</label></th>
		<td><textarea id="wp_content" rows="5" name="wp_content" style="width: 80%;"></textarea></td>
	</tr>
</table>
	
<div class="submitbox">
	<div id="wp-link-cancel">
		<a class="submitdelete" href="javascript:window.parent.tinyMCE.activeEditor.windowManager.close();">取消</a>
	</div>
	<div id="wp-link-update">
		<input type="submit" value="添加" class="button button-primary" id="wp-link-submit" name="wp-link-submit">
	</div>
</div>

</form>

<script type="text/javascript">
function getId(e) {
	return document.getElementById(e)
}
function InsertValue() { 
	var title = getId("post_title").value;
	var btn = getId("btn").value;
	var content = getId("wp_content").value;
	var wp_list_link = getId("wp_list_link").value;
	var imageURL = getId("imageURL").value;
	var wp_price = getId("wp_price").value;
	var wp_old_price = getId("wp_old_price").value;
	html = '
' + title + '
' + content + '
' + wp_price + '
' + wp_old_price + '
' + btn + '
';
	window.parent.tinyMCE.activeEditor.execCommand('mceInsertContent', 0, html);
	window.parent.tinyMCE.activeEditor.windowManager.close()
}
</script>
</body>
</html>

代码说明：该代码是图文模块在后台的设置界面，相关设置项通过该界面设置。

接着：在【addlist】文件夹中新建一个名为【list-btn.js】的文件，并添加代码

(function($) {
	tinymce.create('tinymce.plugins.list_code_plugin', {
		init: function(editor, url) {
			editor.addButton('list_code_plugin', {
				title: "添加一个图文模块", // 提示文字
				icon: 'tableleftheader',
				cmd: 'wp_command' // 点击时执行的方法
			});

			editor.addCommand('wp_command', function() {
				editor.windowManager.open(
					{
						title: "添加一个图文模块", // 对话框的标题
						file: url + '/add-list.php', // 对话框内容的HTML文件
						width: 500, // 对话框宽度
						height: 400, // 对话框高度
						inline: 1 // 使用弹出对话框
					}
				);
			});
		}
	});
	tinymce.PluginManager.add('list_code_plugin', tinymce.plugins.list_code_plugin);
})(jQuery);

代码说明：这是图文模块的JS执行代码。

最后：在【addlist】文件夹中新建一个名为【list-box.css】的文件，并添加代码展开

html,body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
	margin: 0;
	padding: 0
}

body,button,input,select,textarea {
	font: 12px 'Microsoft Yahei','微软雅黑','宋体',Tahoma,Helvetica,Arial,sans-serif
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%
}

address,cite,dfn,em,var,i {
	font-style: normal
}

ul,ol,dl,li {
	list-style: none
}

fieldset,img {
	border: 0
}

button,input,select,textarea {
	font-size: 100%
}

table {
	border-collapse: collapse;
	border-spacing: 0
}

a {
	color: #5e5e5e;
	text-decoration: none
}

a:hover {
	color: #ff6699;
	text-decoration: underline
}

:focus {
	outline: 0 none
}

.fl {
	float: left;
	display: inline
}

.fr {
	float: right;
	display: inline
}

.clear {
	clear: both
}

.clear:after,.clear:before {
	content: "";
	display: table
}

.clear:after {
	clear: both;
	overflow: hidden
}

.clear {
	zoom: 1;
	clear: both
}

#form-table {
	max-width: 550px;
	margin: 0 auto
}

.form-table {
	border-collapse: collapse;
	margin-top: .5em;
	width: 95%;
	clear: both;
	margin-left: 1rem;
}

.form-table,.form-table td,.form-table th,.form-table td p {
	font-size: 14px
}

.form-table td {
	margin-bottom: 9px;
	padding: 6px 10px;
	line-height: 1.3;
	vertical-align: middle
}

.form-table th {
	vertical-align: top;
	text-align: left;
	padding: 10px 10px 10px 0;
	width: 200px;
	line-height: 1.3;
	font-weight: 600
}

.form-table input,.form-table textarea,.form-table select {
	margin: 1px;
	padding: 3px 5px
}

.form-table td p {
	margin: 4px 0 0
}

.form-table img {
	max-width: 200px;
	max-height: 200px;
	padding: 5px;
	margin-top: 5px;
	margin-bottom: 10px;
	border: 1px solid #ececec;
	display: table;
	background-color: #f9f9f9
}

.submitbox {
	padding: 8px 16px;
	background: #fcfcfc;
	border-top: 1px solid #dfdfdf;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0
}

.submitbox .submitdelete {
	text-decoration: none;
	padding: 1px 2px;
	color: #a00
}

.submitbox .submitdelete:hover {
	color: red
}

#wp-link-cancel {
	line-height: 25px;
	float: left
}

#wp-link-update {
	line-height: 23px;
	float: right
}

#wp-link-submit {
	float: right;
	margin-bottom: 0
}

.button-primary {
	display: inline-block;
	text-decoration: none;
	font-size: 13px;
	line-height: 26px;
	height: 28px;
	margin: 0;
	padding: 0 10px 1px;
	cursor: pointer;
	border-width: 1px;
	border-style: solid;
	-webkit-appearance: none;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	white-space: nowrap;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #00a0d2;
	border-color: #0073aa;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
	box-shadow: inset 0 1px 0 rgba(120,200,230,.5),0 1px 0 rgba(0,0,0,.15);
	color: #fff
}

.button-primary.focus,.button-primary.hover,.button-primary:focus,.button-primary:hover {
	background: #0091cd;
	border-color: #0073aa;
	-webkit-box-shadow: inset 0 1px 0 rgba(120,200,230,.6);
	box-shadow: inset 0 1px 0 rgba(120,200,230,.6);
	color: #fff
}

代码说明：该代码是图文模块在后台的界面样式（非前台显示样式）。

四、添加模块短代码

现在我们已经添加了【add-list.php】、【list-btn.js】和【list-box.css】三个文件，下面我们需要把前两个文件插入到编辑器中，先看代码：

// 图文模块
function lists_code_plugin() {
	if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) {
		return;
	}
	if (get_user_option('rich_editing') == 'true') {
		add_filter('mce_external_plugins', 'list_mce_external_plugins_filter');
		add_filter('mce_buttons', 'list_mce_buttons_filter');
	}
}

function list_mce_external_plugins_filter($plugin_array) {
	$plugin_array['list_code_plugin'] = get_template_directory_uri() . '/inc/addlist/list-btn.js';
	return $plugin_array;
}

function list_mce_buttons_filter($buttons) {
	array_push($buttons, 'list_code_plugin');
	return $buttons;
}

add_shortcode('wplist', 'wplist_shortcode');
function wplist_shortcode($atts, $content = '') {
	$atts['content'] = $content;
	$out = '<div class="wplist-item">';
	$out.= '<div class="wplist-item-img"><a href="' . $atts['link'] . '" target="_blank" isconvert="1" rel="nofollow" ><img itemprop="image" src="' . $atts['img'] . '" alt="' . $atts['title'] . '" /></a></div>';
	$out.= '<div class="wplist-title">' . $atts['title'] . '</div>';
	$out.= '<p class="wplist-des">' . $atts['content'] . '</p>';
	if (!empty($atts['price'])) {
		$out.= '<div class="wplist-oth"><div class="wplist-res wplist-price">' . $atts['price'] . '</div>';
		if (!empty($atts['oprice'])) {
			$out.= '<div class="wplist-res wplist-old-price"><del>' . $atts['oprice'] . '</del></div>';
		}
		$out.= '</div>';
	}
	if (!empty($atts['btn'])) {
		$out.= '<div class="wplist-btn"><a href="' . $atts['link'] . '" target="_blank" isconvert="1" rel="nofollow" >' . $atts['btn'] . '</a></div><div class="clear"></div>';
	}
	$out.= '<div class="clear"></div></div>';
	return $out;
}

代码主要由四个函数组成，下面分别针对这四个函数做个介绍：

function lists_code_plugin()：主要用来把第2个和第3个函数插入到TinyMCE编辑器和编辑器按钮中。
function list_mce_external_plugins_filter()：调用list-btn.js文件（注意路径）并添加到编辑器中。
function list_mce_buttons_filter()：将模块注入到编辑器按钮中。
function wplist_shortcode()：添加模块短代码。

五、添加按钮显示/隐藏效果

打开【/js/script.js】文件，在适当位置添加代码

    $(".wplist-item").mouseover(function() {
        $(this).children(".wplist-btn").show()
    });
    $(".wplist-item").mouseout(function() {
        $(this).children(".wplist-btn").hide()
    });

代码说明：默认情况下，模块中的按钮为隐藏状态，当鼠标移动到模块中的任意位置时显示该按钮。

六、添加模块前台样式

打开【style.css】文件，在适当位置添加代码展开

/** 文章商品 **/
.wplist-item {
    margin: 0 0 -1px 0;
    padding: 10px 10px 15px 10px;
    transition-duration: .5s;
    border: 1px dashed #ddd;
}

/*.wplist-item a {
    color: #999!important;
}*/

.wplist-item:hover {
    background-color: #f8f8f8;

}
.wplist-item a:hover {
    color: #999;
}

.wplist-title {
    font-size: 16px;
    font-size: 1.6rem;
    color: #000;
    font-weight: bold;
    line-height: 190%;
}

.wplist-item-img {
    position: relative;
    float: left;
    max-width: 200px;
    height: auto;
    clear: both;
    margin: 8px 20px 0 0;
    overflow: hidden;
    transition-duration: .5s;
}

@media screen and (max-width:480px) {
    .wplist-item-img {
        float: inherit;
        max-width: 100%;
        margin: 0 auto 10px;
    }
}

.wplist-item img {
    float: left;
    width: 100%;
    height: auto;
    max-width: 100%;
}

.wplist-res {
    padding: 2px 10px;
    border: 1px solid #ddd;
}

.wplist-price {
    float: left;
    font-size: 15px;
    font-size: 1.5rem;
    color: #f40;
    font-weight: bold;
    margin: 0 10px 0 0;
}

.wplist-old-price {
    float: left;
    font-size: 15px;
    font-size: 1.5rem;
    color: #999;
}

.wplist-btn {
    background: #3690cf;
    float: right;
    color: #fff;
    line-height: 30px;
    margin: 0 5px 5px 0;
    padding: 0 10px;
    border-radius: 2px;
    border: 1px solid #3690cf;
    display: none;
}

.wplist-btn:hover {
    background: #f00;
    color: #fff;
    border: 1px solid #f00;
}

.wplist-btn a, .wplist-btn a:hover {
    color: #fff;
}

请根据自己的喜好调整样式。