Question

我在我的网站上尝试实施的功能存在一个小问题。我希望当我点击我主页上的博文中的摘录时，文章内容（single.php）会在模态窗口中打开。

我使用jQuery和Ajax来做到这一点并且它工作得非常好，除了Ajax提取了single.php文件的全部内容（即带有脚本，样式，文档类型，页脚等的标题）。我想获得包含文章标题和内容的div（#PostContainer）。

你可能会告诉我只删除我的single.php文件的页眉和页脚，但这是不可能的，因为保持我的文件完整无法从博客文章的地址访问是很重要的（www .mydomainname.com /博客-POST1）。

事实证明我对WordPress一点都不熟悉：/这是我第一次构建主题。我与你分享的代码就像WordPress上的一个魅力一样运行，但是恢复了我所有的single.php文件（标题+内容在我的div #postContainer + footer中）。我想只恢复我的div #postContainer的内容。

我被卡住了：/

有人会帮我吗？

非常感谢您的时间！

以下是我的代码：

HTML：

<a class="hs-inner-click modal" data-content="<?php the_permalink(); ?>"           rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">

CSS：

.modal-window {
  position: fixed;
  left: 50%;
  top: 50px;
  width: 720px;
  background-color: #fff;
  transform: translate(-50%, 0);
  z-index: 11;
}
.modal-shade {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 10;
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
}

JQUERY＆amp; JS文件中的AJAX：

(function($) {

    $.fn.modal = function (opt) {

        var settings, createModal, closeModal, body;

        settings = $.extend({
            'modal': 'jquery-modal',
            'close': 'jquery-modal-close',
            'closeText':'',
            'shade': 'jquery-modal-shade'
        }, opt);

        body = $('body');

        closeModal = function(modal, shade) {
            modal.remove();
            shade.remove();
        };

        createModal = function(data) {
            var shade, close, modal;

            shade =$('<div />', {
                class: settings.shade
            }).on('click', function() {
                closeModal(modal, shade);
            });

            close =$('<a />', {
                text: settings.closeText,
                class: settings.close,
                href: '#'
            }).on('click', function(e) {
                closeModal(modal, shade);
                e.preventDefault();
            });

            modal =$('<div />', {
                html: data,
                class: settings.modal
            }).append(close);

            body.prepend(shade, modal);
        };

        this.on('click', function(e) {
            var self =$(this);

            $.ajax({
                url:self.data('content'),
                type: 'get',
                cache: false,
            }).done(function(data) {
                createModal(data);
            }).error(function() {
                createModal('There is a mistake');
            });
        e.preventDefault();
        });

    };

})(jQuery);

Answer 1

我建议使用WordPress REST API V2代替请求，而无需选择div或加载single.php而不需要标题＆amp;页脚。

这将允许您通过调用类似于此的端点来加载帖子内容：/wp-json/wp/v2/posts/<id>

Full API reference here

或者我不确定它是否会起作用，但jquery代码可能会帮助你（执行模态的onload）：$("#jquery-modal").load("www.mydomainname.com/blog-post1 #postContainer");

另外：在ajax上成功将内容添加到虚拟div上并使用它来查找您需要的页面部分并将其返回。这就是jquery load（）在检查源时实际工作的方式。

jQuery( "<div>" ).append( jQuery.parseHTML(data) ).find("#postContainer");

无法在Wordpress中使用AJAX检索HTML文件的特定部分（single.php）

1 个答案: