一、前言
之前介绍了一篇文章《巧用图文模块为文章添加卡片式文章内链功能》，其目的是为了在文章中以“卡片”形式插入其他文章的链接。而该功能是建立在【图文模块】功能的基础上实现的，考虑到很多主题没有该功能，今天就分享一下后台编辑器集成图文模块的方法。
二、效果演示
该模块设计之初是作为商品展示用的，由图片、标题、简介、原价、现价、按钮六个部分组成。通过对模块的合理设置，也可以作为卡片式文章内链、广告投放等功能使用。下面分别是作为商品和卡片式文章内链时的功能演示：
功能实现
三、添加模块主体代码
首先：在【inc】目录下新建一个名为【addlist】的文件夹
[mark_b]
也可在其他位置新建该文件夹，但要注意下面代码中涉及该文件夹的路径调用关系。
[/mark_b]
然后：在该文件夹中新建一个名为【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 = '';
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;
}
请根据自己的喜好调整样式。
七、模块使用
首先：在后台新建一篇文章，在编辑器中找到图文模块的图标
然后：点击该图标，出现如下设置框：
最后：进行合理的设置就好了。对于不想在前台显示的设置项，留空即可。
继续阅读
如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！
