学步园

为 WordPress 开发了一个 Short Code 插件, 灰常简单, 编辑内容时输入 [[content, tip]] 就可以在正文中显示漂亮的 tooltip 效果.

效果实现使用了一个 jQuery 插件: http://docs.jquery.com/Plugins/Tooltip

插件代码如下:

shortcode.php

<?php
/*
Plugin Name: Short Code
Plugin URI: http://blog.csdn.net/dofy/article/details/6832357
Description: Short code!! e.g. [[content,<strong>Here</strong> is the tips...]]
Version: 1.0
Author: Seven Yu
Author URI: http://www.douban.com/people/dofy/
*/

function add_js()
{
    wp_register_script('simpletip', plugins_url('/jquery.tooltip.min.js', __FILE__));
    wp_enqueue_script('simpletip');

    wp_register_script('shortcode', plugins_url('/shortcode.js', __FILE__));
    wp_enqueue_script('shortcode');
}

function add_css()
{
    wp_enqueue_style('shortcode', plugins_url('/jquery.tooltip.css', __FILE__));
}

/**
 * 替换内容
 * [[content,tips]]
 */
function shortcode($content)
{
    $reg = '#\[\[([^,]+)\,(.+)\]\]#';
    return preg_replace_callback($reg, 'replace_code', $content);
}

function replace_code($matches)
{
    return sprintf('<span class="shortcode" title="%2$s">%1$s</span>', $matches[1], htmlspecialchars($matches[2]));
}

add_action('wp_print_styles', 'add_css');
add_action('wp_print_scripts', 'add_js');
add_filter('the_content', 'shortcode');

?>

shortcode.js

/**
 * Short Code
 * Author: Seven Yu
 */
(function($) {
    $(function()
    {
        $('.shortcode').tooltip();
    });
})(jQuery);