Question

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

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

例如：

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创建了一个名为“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的角度来处理这个问题。

Answer 1

首先，我会在没有javascript加载的情况下使网站完全正常运行。这将使您的导航和网站布局在您获得想象之前得到适当的处理，并且还将为爬虫和JS破解时提供后备。

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

然后我使用jQuery来获取导航链接点击事件，修改请求URI以放入GET var，然后使用.load（）发出请求。

这样做的另一个好处是当你打开缓存时（是的，你想用缓存来运行你的站点，它的wordpress，它远远不是“轻量级”）你的Ajax请求的页面也将被缓存，加载时间更短，更少资源使用情况。

我认为，既然你已经完成了它，你就知道如何处理jQuery动作绑定，请求和响应解析。

jQuery .load（）函数和WordPress

1 个答案: