悬停弹出插件最好用于 Wordpress

Question

我想我会创建一个编码网站，可以轻松编写博客，并且读起来就像纸上的普通文本（即，没有绒毛；那在模板中，我会注意的）。

在文本中，我想将单个单词标记为简单的“预览链接”，如下所示： - 代码 sn-ps (pre 或类似) - 图片 - 带有 html 和 php 的 div 或框架 - 可能是音频和视频剪辑，以小型嵌入式播放器的形式。

行为应该是悬停时，灰色框类型框会在文本上显示内容。更好的是，在点击时，它会切换扩展/收缩带有链接的行下方的部分，与文本容器一样宽，可以说是显示弹出窗口。

我可以在 php 中做到这一点，但我想节省一些代码时间，并且还可以轻松插入上述类型的项目。

那么你能推荐一些像这样的东西（插件）吗，比如 Wordpress 或 Movable Type？我还接受指向具有“div 可见性：隐藏”样式折叠和折叠技术的很好示例的网站的链接。

易于插入此类项目是关键。最好只是 Ctrl+V 并标记它的类型。

Answer 1

我建议创建一个短代码以用于后期创作（即[toggle heading="Preview Link"]Hidden Content[/toggle]。此内容将包含在一个跨度中，其中包含您确定何时出现在您的网站上的类。然后只需包含一个小 jQuery 即可获取该课程并揭示click或mouseover或其他任何内容上的隐藏内容。

functions.php 的示例简码函数

function toggle_content( $atts, $content = null ) {
    extract(shortcode_atts(array(
        'heading'      => '',
    ), $atts));

    $out .= '<span class="toggle"><a href="#">' .$heading. '</a></span>';
    $out .= '<div class="toggle_content" style="display: none;">';
    $out .= '<div class="toggleinside">';
    $out .= do_shortcode($content);
    $out .= '</div>';
    $out .= '</div>';

   return $out;
}
add_shortcode('toggle', 'toggle_content');
?>

jQuery 可能看起来像这样（例如 click）：

function sys_toggle() {
    jQuery(".toggle_content").hide(); 

    jQuery(".toggle").toggle(function(){
        jQuery(this).addClass("active");
        }, function () {
        jQuery(this).removeClass("active");
    });

    jQuery(".toggle").click(function(){
        jQuery(this).next(".toggle_content").slideToggle();
    });
}

jQuery(function(){
    sys_toggle();
});