DUX主题为亮点功能添加快捷按钮

DUX主题4.1版本发布曾经有一段时间了，该版本增加了一个文章和页面内容亮点的功用，关于该功用的前端显现大致如下：

1. DUX主题亮点1蝈蝈要安静 | 一个不学无术的伪程序员
2. DUX主题亮点2蝈蝈要安静 | 一个不学无术的伪程序员

其实该功用主要是经过 CSS 款式的调整来完成的，完成方式固然简单但是前端显现效果的确不错，官方给出的调用方式也极端简单，经过下面两行代码调用：

<ol class="liangdian">
    <li><strong>标题标题标题</strong>描绘描绘描绘描绘描绘描绘描绘描绘描绘描绘描绘</li>
    <li><strong>标题标题标题</strong>描绘描绘描绘描绘描绘描绘描绘描绘描绘描绘描绘</li>
    复制上一行会增加新的
</ol>

其实就是一个有序列表，并且列表的款式为 class="liangdian" 但是关于平常我个人编辑文章的习气来看懒得去敲这两行代码于是决议为其在后台增加一个快捷按钮，于是也就有了这篇文章，编辑器添加按钮的方式我之前也说过，当然你也能够参照下面几篇文章理解一下：

• 运用QuicktagsAPI为WP文本编辑器添加快捷按钮
• 纯代码完成WordPress文章页展开收缩功用
• 网站新增彩色警示文本框

代码完成十分简单，你只需求将以下代码添加到主题的 functions.php 文件中去即可：

// 亮点功用快捷按钮
function qgg_liangdian($atts, $content=null){ 
    return '<ol class="liangdian">'.$content.'</ol>'; 
}
function appthemes_add_qgg_liangdian() {
?>
    <script type="text/javascript">
        if ( typeof QTags != 'undefined' ) {
            QTags.addButton( 'qgg_liangdian', '亮点展现框', '[qgg_liangdian]<li><strong>亮点标题</strong>亮点描绘内容</li>', '[/qgg_liangdian]' );
        } 
    </script>
<?php 
} 
add_action('admin_print_footer_scripts', 'appthemes_add_qgg_liangdian' ); 
add_shortcode('qgg_liangdian','qgg_liangdian');

其实就是添加一个 QuickTag ，添加完代码后会在后台文本编辑形式下找到一个“亮点展现框”的按钮，双击按钮即可添加一个亮点显现区域，点击按钮后会呈现如下代码：

【qgg_liangdian]<li><strong>亮点标题</strong>亮点描绘内容</li>[/qgg_liangdian]

由于不同文章亮点不同，无法固定亮点项目数量，目前代码只能添加一个亮点展现框，不过你能够逐一增加 li 标签来增加多个，如下所示：

【qgg_liangdian]<li><strong>亮点标题</strong>亮点描绘内容</li><li><strong>亮点标题</strong>亮点描绘内容</li>[/qgg_liangdian]

如此，添加完成。

感谢您的来访，获取更多精彩文章请收藏本站。