jQuery 的 .load() 函数和 WordPress

Question

我目前正在将我的 HTML 网站迁移到 WordPress 主题。

我当前的 HTML 网站充分利用了 jQuery 的 .load() 函数，我可以根据用户选择的侧面菜单选项使用 .load() 更改页面内容（通过 DIV）。

例如：

HTML 代码：

<div id="sidebar">
        <ul id="themenu" class="sf-menu sf-vertical">
            <li><a href="index.html" class="topm currentMenu nosub">Home</a></li>
            <li><a href="about-us.html" class="topm nosub">About Us</a></li>
       </ul>
</div>

jQuery 代码：

$("#themenu li a, #subcat li a").click(function(){
        var toLoadCF = $(this).attr("href")+" #contentfooter";

        $('#contentfooter').fadeIn("slow",loadContent); 

        function loadContent() {
            $("#contentfooter").load(toLoadCF);
        }
        return false;
    });

因此，使用此作为 HTML 情况，用户单击“关于我们”菜单选项，这基本上会依次加载基于 href 标记的“about-us.html”文件关于我们。

现在在 WordPress 世界中，我为“关于我们”创建了一个名为“about-us.php”的自定义页面模板，该模板链接到名为“aboutus”（永久链接）的 WP 管理仪表板页面，因此我的 a href 值为“url/ aboutus/"

基于此，我如何在 WordPress 中实现相同的结果以使用 jQuery .load 模拟我的 HTML 编码？

请注意，我已在 header.php、index.php 和 sidebar.php 文件中添加了所有必要的信息。

我只是不确定如何引用 a href 文件，以便使用 jQuery 的 .load() 加载我的 about-us.php 文件。

我不太确定如何从 WordPress 的角度来解决这个问题。

Answer 1

首先，我会在不加载 JavaScript 的情况下使网站功能齐全。这将使您的导航和网站布局在您开始喜欢之前保持正确，并且还将为爬虫和 JS 崩溃时提供后备。

接下来，创建模板的子集，或修改现有模板，以对 URL 中的 GET var 做出反应，以排除除模板的主要内容区域之外的所有内容。对于 Ajax 负载，您不需要像页眉、页脚和侧边栏之类的东西。

然后，我将使用 jQuery 获取导航链接单击事件，修改请求 URI 以放入 GET var，然后使用 .load() 发出请求。

这样做的一个附带好处是，当您打开缓存时（是的，您希望使用缓存来运行您的网站，它的 wordpress，它远非“轻”），您的 Ajax 请求的页面也将被缓存，以实现更短的加载时间和更少的资源使用。

我假设您之前已经完成过此操作，因此您知道如何处理 jQuery 操作绑定、请求和响应解析。