使用AJAX将页面加载到div中

时间:2016-05-20 作者:Jose

说到Wordpress,我真的是个傻瓜,现在我正在研究一个基本上都是静态的主题,如果你想编辑一些东西,你必须编辑。php文件,而不是在管理员上执行它。这是一个登录页,您可以在其中单击菜单按钮,并显示一个包含内容的模式,为此,我遵循this tutorial 这不完全是面向Wordpress的。我正在通过ajax加载静态页面,我真的很想将其更改为可编辑的Wordpress页面,但我不知道怎么做。我没有发布代码,因为一切都与教程中的一样,我没有使用函数。php或任何东西。How would you call the content of a page to load as if it was a static page just like in that tutorial?

EDIT
ajax调用

$(function() {
    $(\'.w-container .w-nav-menu a\').click(function() {
        var $linkClicked = $(this).attr(\'href\');
        var $pageRoot = $linkClicked.replace(\'#\', \'\');
        if (!$(this).hasClass("active")) {
            $(".w-container .w-nav-menu a").removeClass("active");
            $(this).addClass("active");
            $.ajax({
                type: "POST",
                url: "./wp-content/themes/THEMENAME/load.php",
                data: \'page=\'+$pageRoot,
                dataType: "html",
                beforeSend: function(){
                        $(\'#canvasloader-container.wrapper\').show();
                    },
                complete: function(){
                        $(\'#canvasloader-container.wrapper\').hide();
                    },                
                success: function(msg){
                    if((msg))
                    {
                        $(\'.content\').html(msg);
                        $(\'.content\').hide().fadeIn();
                    }
                }
            });
        }
    event.preventDefault();
});

var hash = window.location.hash;
hash = hash.replace(/^#/, \'\');
switch (hash) {
    case \'products\' :
        $("#" + hash + "-link").trigger("click");
        break;      
    case \'about\' :
        $("#" + hash + "-link").trigger("click");
        break;
    case \'storelocator\' :
        $("#" + hash + "-link").trigger("click");
        break;
    case \'media\' :
        $("#" + hash + "-link").trigger("click");
        break;
    case \'faq\' :
        $("#" + hash + "-link").trigger("click");
        break;
    case \'contact\' :
        $("#" + hash + "-link").trigger("click");
        break;
    }
});

load.php

<?php
if($_POST[\'page\']);
$page = $_POST[\'page\'];
if(file_exists(\'pages/\'.$page.\'.php\'))
echo file_get_contents(\'pages/\'.$page.\'.php\');
else echo \'Unavailable\';
?>
我只找到了一些贴子之类的教程,这不是我想要的。

1 个回复
SO网友:Andy Macaulay-Brook

我的理念是,如果你使用像WP这样的系统,那么你就会接受它,用WP的方式做事。WP有很多钩子可以让您覆盖功能,灵活的主题结构让您几乎可以完全控制输出。

因此,我建议使用WP主题和WP内置菜单。您的菜单项将链接到普通WP页面。该网站将为那些没有JS的人工作。

使用jQuery将单击事件放到菜单链接上,菜单链接使用jQuery AJAX调用请求的页面。这些调用可以将返回的HTML剥离回特定元素(main 如果主题使用它,它就是一个好的)。

我还没有想过你会如何处理你的哈希。