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

Question

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

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

您可能会告诉我只删除 single.php 文件的页眉和页脚，但这是不可能的，因为保持我的文件完整以便能够从博客文章的地址（www .mydomainname.com/blog-post1)。

原来我对 WordPress 一点也不熟悉：/ 这是我第一次构建主题。我与您分享的代码在 WordPress 上运行起来就像一个魅力，但恢复了我所有的 single.php 文件（我的 div #postContainer + 页脚中的页眉 + 内容）。我只想恢复我的 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;
}

JS 文件中的 JQUERY 和 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

1. 我建议对请求使用WordPress REST API V2，而无需选择div 或加载没有页眉和页脚的single.php。

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

Full API reference here.

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

附加：在 ajax 成功时，将内容附加到虚拟 div 上，并使用它仅查找您需要的页面部分并将其返回。 如果您检查源代码，这就是 jquery load() 实际工作的方式。

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