jQuery的.load()函数和WordPress

我目前正在将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 About创建了一个自定义页面模板, 称为” about-us.php”, 该模板链接到名为” aboutus”(永久链接)的WP Admin仪表板页面, 因此我的href值为” url /关于我们/”

基于此, 如何在WordPress中使用jQuery .load模仿HTML编码时达到相同的结果？

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

我只是不确定如何引用href文件, 因此我的about-us.php文件是使用jQuery的.load()加载的。

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

#1

首先, 我将在不加载JavaScript的情况下使网站完全正常运行。在你开始幻想之前, 这将使你的导航和网站布局正确, 并且还为爬网程序和JS中断提供后备。

接下来, 制作模板的子集, 或修改现有模板, 以对URL中的GET var做出反应, 以排除模板的主要内容区域以外的所有内容。对于Ajax负载, 你不需要标题, 脚和侧边栏之类的东西。

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

这样做的一个好处是, 当你打开缓存时(是的, 你想使用缓存来运行站点, 它的wordpress以及远离”轻量级”的站点), 你的Ajax请求页面也将被缓存, 以缩短加载时间并减少资源使用量。

我假设既然你已经做过, 那么你知道如何处理jQuery动作绑定, 请求和响应解析。