在 wordpress 中使用 simplemodal [英] Using simplemodal with wordpress

问题描述

我正在尝试使用 simplemodal 在 wordpress 帖子中使用带有文本的模式弹出窗口.我玩过各种插件，但它们有特定用途(例如联系表单，或者我看到的另一个显示您可以自定义的单个笔记的插件).

I am trying to use simplemodal to have modal popups with text in wordpress posts. I've played around with various plugins but they have specific uses (such as the contact form, or another one I saw that displays a single note you can customize).

我试过遵循本教程:http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html 但对于没有高级 jquery 或 wordpress 知识的人来说，说明不是很清楚，它只是不为我工作.例如，作者没有解释你把函数放在哪里.

I've tried following this tutorial: http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but the instructions are not very clear for people without advanced jquery or wordpress knowledge and it simply isn't working for me. The author does not explain where you put the function, for instance.

对于那些在 wordpress 中获得 simplemodal 工作的人，没有开发插件，你能帮忙吗?谢谢.

For anyone who's gotten simplemodal working in wordpress, without developing a plugin, can you please assist? Thank you.

推荐答案

本教程是解决方案的良好开端，但并未完全提供所有细节.我也会做出一些改变.这是我会做的事情:

The tutorial is a good start on a solution, but does not quite provide all of the details. There are also some changes that I would make. Here is what I would do to get it working:

• 创建 Ajax 处理程序模板和页面
• 确保您要用于打开模态的链接包含 postpopup 类，并在 rel 属性中包含帖子 ID.
• 在你的主题目录中创建一个 js/ 文件夹
• 下载SimpleModal 1.4.1并将文件放在js/文件夹
• 创建自定义 JavaScript 文件 (site.js) 并将其放入 js/ 文件夹
• 在site.js中加入以下代码:

• Create the Ajax Handler template and page
• Make sure the link you want to use to open the modal includes the postpopup class and has the post ID in the rel attribute.
• Create a js/ folder in your theme directory
• Download SimpleModal 1.4.1 and place the file in the js/ folder
• Create a custom JavaScript file (site.js) and place it in the js/ folder
• Put the following code in site.js:

.

jQuery(function ($) {
    $('a.postpopup').click(function(){
        id = this.rel;
        $.get('http://yourdomain.com/ajax-handler/?id='+id, function (resp) {
            var data = $('<div id="ajax-popup"></div>').append(resp);
            // remove modal options if not needed
            data.modal({
                overlayCss:{backgroundColor:'#000'}, 
                containerCss:{backgroundColor:'#fff', border:'1px solid #ccc'}
            });
        });
        return false;
    });
});

• 将以下代码添加到主题的 functions.php 文件中:

.

function my_print_scripts() {
    if (!is_admin()) {
        $url = get_bloginfo('template_url');
        wp_enqueue_script('jquery-simplemodal', $url . '/js/jquery.simplemodal.1.4.1.min.js', array('jquery'), '1.4.1', true);
        wp_enqueue_script('my_js', $url . '/js/site.js', null, '1.0', true);
    }
}
add_action('wp_print_scripts', 'my_print_scripts');

<小时>

这应该让它为你工作.确保您的主题页脚中有 wp_footer() 函数.我重新设计了模态窗口的调用方式，以便内容自动居中.

---

That should get it working for you. Make sure you have the wp_footer() function in your theme's footer. I re-worked the way the modal window was being called so that the auto-centering of the content works.

这篇关于在 wordpress 中使用 simplemodal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！