如何添加快捷代码来显示/隐藏新闻稿?

时间:2011-06-04 作者:Chris

是否可以创建一个TinyMCE按钮和WordPress的短代码,将新闻稿放在其中,以便在默认情况下隐藏新闻稿,但在按下按钮时,它们会展开以显示内容?然后单击后再次压缩/隐藏?

示例:http://www.engadget.com/2011/02/11/tron-legacy-blu-ray-gets-a-release-date-supports-disneys-seco/

显然,不必只是新闻稿。它可以用来隐藏任何东西,比如有剧透的冗长文章等等。

1 个回复
SO网友:Milo

我根据Scribu\'s writeup on script loading, 可能对您有用或提供一个起点。

The plugin file:

<?php
/* 
Plugin Name: MO_expander_shortcode
*/  

class MO_expander_shortcode {
    static $add_script;

    function init() {
        add_shortcode(\'moexpander\', array(__CLASS__, \'handle_shortcode\'));
        add_action(\'wp_footer\', array(__CLASS__, \'add_script\'));
    }

    function handle_shortcode($atts, $content = null) {
        self::$add_script = true;
        // this is the part that formats the markup with your content.
        // change it however you like, just be sure to update the js and css files to reflect changes.
        return \'<div><a href="#" class="moexpander">expand</a></div><div class="moexpander">\' . $content . \'</div>\';
    }

    function add_script() {
        if ( ! self::$add_script )
            return;

        wp_register_script(\'mo-expander-script\', plugins_url(\'mo-expander-script.js\', __FILE__), array(\'jquery\'), \'1.0\', true);
        wp_print_scripts(\'mo-expander-script\');

        wp_register_style(\'mo-expander-style\', plugins_url(\'mo-expander-style.css\', __FILE__));
        wp_print_styles(\'mo-expander-style\');
    }
}
MO_expander_shortcode::init();

the mo-expander-script.js file:

jQuery(document).ready(function(){
    jQuery(\'div.moexpander\').hide();
    jQuery(\'a.moexpander\').click(function(){
        jQuery(this).parent().next(\'div.moexpander\').slideToggle();
        return false;
    });                 
});

the mo-expander-style.css file:

.moexpander{
/* style as you wish! */
}
Use:将它们全部放在插件目录的一个文件夹中,然后通过插件页面激活它。然后在编辑器中,按如下方式隐藏任何内容:

[moexpander]Some text here which will be hidden in a div with a link to toggle it open/closed[/moexpander]
您可以根据需要在帖子上添加任意多的实例。我以后会考虑添加TinyMCE按钮,我以前没有这样做过。

结束

相关推荐

如何在TinyMCE中插入链接图像

WordPress附带的TinyMCE编辑器中没有用于从链接插入图像的按钮。我知道您可以使用上载/插入部分来完成此操作。但我们可以说,我不想让用户上传图像,但希望他们能够通过链接插入图像。如果删除上载功能,上载/插入部分将完全消失在WordPress上已经有这样做的方法了吗?