将 simplemodal 与 wordpress 结合使用

发布于 2024-10-17 07:47:38 字数 498 浏览 2 评论 0原文

我正在尝试使用 simplemodal 在 WordPress 帖子中使用带有文本的模式弹出窗口。我尝试过各种插件，但它们有特定的用途（例如联系表单，或我看到的另一个显示您可以自定义的单个注释的插件）。

我尝试按照本教程进行操作： http:// /wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html 但对于没有高级 jquery 或 wordpress 知识的人来说，说明不是很清楚，而且它根本不起作用为我。例如，作者没有解释将该函数放在哪里。

对于任何在 WordPress 中使用 simplemodal 工作而无需开发插件的人，您能提供帮助吗？谢谢。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝颜夕 2024-10-24 07:47:38

本教程是解决方案的良好开端，但并未提供所有详细信息。我还会做出一些改变。下面是我要让它工作的方法：

创建 Ajax 处理程序模板和页面
确保要用于打开模式的链接包含 postpopup 类，并且在 中具有帖子 ID >rel 属性。
在主题目录中创建一个 js/ 文件夹
下载 SimpleModal 1.4.1 并将文件放入 js/ 文件夹中
创建自定义 JavaScript 文件 (site.js ）并将其放在 js/ 文件夹中
将以下代码放入 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() 函数。我重新设计了模态窗口的调用方式，以便内容自动居中。

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:

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;
    });
});

Add the following code to your theme's functions.php file:

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');

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.

回复收藏 0 原文

~没有更多了~