一、前言
之前介绍了一篇文章《巧用图文模块为文章添加卡片式文章内链功能》,其目的是为了在文章中以“卡片”形式插入其他文章的链接。而该功能是建立在【图文模块】功能的基础上实现的,考虑到很多主题没有该功能,今天就分享一下后台编辑器集成图文模块的方法。
二、效果演示
该模块设计之初是作为商品展示用的,由图片、标题、简介、原价、现价、按钮六个部分组成。通过对模块的合理设置,也可以作为卡片式文章内链、广告投放等功能使用。下面分别是作为商品和卡片式文章内链时的功能演示:
功能实现
三、添加模块主体代码
首先:在【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; }
请根据自己的喜好调整样式。
七、模块使用
首先:在后台新建一篇文章,在编辑器中找到图文模块的图标
然后:点击该图标,出现如下设置框:
最后:进行合理的设置就好了。对于不想在前台显示的设置项,留空即可。