在 WordPress 中通过 AJAX 加载页面内容

Question

所以我正在尝试建立一个通过 AJAX 加载页面的网站，但如果它不起作用，就转到正常的页面地址。我在互联网上尝试了不同的教程，但无法正常工作。我真的被困在了这里。

这是我使用的教程：AJAX load Wordpress Content

这是我的代码：

scripts.js

$(document).ready(function() {

// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('#menu-itmotr-menu li a').each(function(){
    var href = $(this).attr('href');
    if(hash==href.substr(0,href.length-5)){
        var toLoad = hash+'.html #content';
        $('#content').load(toLoad)
    } 
});

$('#menu-itmotr-menu li a').click(function(){

var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
    $('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
    $('#content').show('normal',hideLoader());
}
function hideLoader() {
    $('#load').fadeOut('normal');
}
return false;

});});

page.php

<?php get_header(); ?>
<div id="container">
            <div class="row live-section">
            <div class="col-7" style="border-right: 1px solid black; height:100%;">
            
                <iframe width="100%" height="475" src="https://www.youtube.com/embed/UMNgPEw8GnE?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="col-5">
                <div id="content">
                <?php
                    // TO SHOW THE PAGE CONTENTS
                    while ( have_posts() ) : the_post(); ?>
                    <div class="page-content">
                        <?php the_content(); ?>
                    </div>

                    <?php
                    endwhile; //resetting the page loop
                    wp_reset_query(); //resetting the page query
                    ?>
                
                </div>
            </div>    
        </div>
</div>
<?php get_footer(); ?>

header.php

<html <?php language_attributes(); ?>>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title><?php wp_title('&laquo;', true, 'right'); ?> <?php bloginfo('name'); ?></title>
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <?php wp-head ?>
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>">
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/script.js' ?>">
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/css/itmotr.css' ?>">
        <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/css/bootstrap.min.css' ?>">
    </head>
    <body>
            <nav>
            <div class="row itmotr-header">
                <div class="col-7">
    <?php if ( has_custom_logo() ) : ?>
        <div class="site-logo"><?php the_custom_logo(); ?></div>
    <?php endif; ?>

                </div>
                <div class="col-5">
                    <?php
                    wp_nav_menu( array( 
                    'theme_location' => 'itmotr-header', 
                    'container_class' => 'itmotr-header-meunu' ) ); 
                    ?>
                </div>
            </div>     
            </nav>

我在某处读到我需要将这两行添加到我的主题的 function.php 中：

// creating Ajax call for WordPress
add_action( 'wp_ajax_nopriv_get_latest', 'get_latest' );
add_action( 'wp_ajax_get_latest', 'get_latest' );

这是我的一个名为程序的页面的源代码。 YouTube payer 是为了功能检查，将被直播取代，需要在浏览网站时继续付费

<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Program &laquo;  itmotr radio</title>
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="viewport" content="width=device-width">
        <link rel="pingback" href="http://itmotr-beta.local/xmlrpc.php" />
        <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
        <link rel="stylesheet" type="text/css" href="http://itmotr-beta.local/wp-content/themes/ITMOTR-THEME/style.css">
        <link rel="stylesheet" type="text/css" href="http://itmotr-beta.local/wp-content/themes/ITMOTR-THEME/script.js">
        <link rel="stylesheet" type="text/css" href="http://itmotr-beta.local/wp-content/themes/ITMOTR-THEME/css/itmotr.css">
        <link rel="stylesheet" type="text/css" href="http://itmotr-beta.local/wp-content/themes/ITMOTR-THEME/css/bootstrap.min.css">
    </head>
    <body>
            <nav>
            <div class="row itmotr-header">
                <div class="col-7">
            <div class="site-logo"><a href="http://itmotr-beta.local/" class="custom-logo-link" rel="home"><img width="500" height="125" src="http://itmotr-beta.local/wp-content/uploads/2020/09/itmotr-logo.png" class="custom-logo" alt="itmotr radio" srcset="http://itmotr-beta.local/wp-content/uploads/2020/09/itmotr-logo.png 500w, http://itmotr-beta.local/wp-content/uploads/2020/09/itmotr-logo-300x75.png 300w" sizes="(max-width: 500px) 100vw, 500px" /></a></div>
    
                </div>
                <div class="col-5">
                    <div class="itmotr-header-meunu"><ul id="menu-itmotr-menu" class="menu"><li id="menu-item-58" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-58"><a href="http://itmotr-beta.local/">Chat</a></li>
<li id="menu-item-52" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-50 current_page_item menu-item-52"><a href="http://itmotr-beta.local/program/" aria-current="page">Program</a></li>
<li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="http://itmotr-beta.local/archive/">Archive</a></li>
<li id="menu-item-53" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-53"><a href="http://itmotr-beta.local/about/">About</a></li>
</ul></div>                </div>
            </div>     
            </nav><div id="container">
            <div class="row live-section">
            <div class="col-7" style="border-right: 1px solid black; height:100%;">
            
                <iframe width="100%" height="475" src="https://www.youtube.com/embed/UMNgPEw8GnE?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="col-5">
                <div id="content">
                                    <div class="page-content">
                        
<figure class="wp-block-image size-large is-resized"><img loading="lazy" src="http://itmotr-beta.local/wp-content/uploads/2020/09/118772221_1195993277430854_6461524319873454907_o-1024x576.png" alt="" class="wp-image-26" width="1024" height="576" srcset="http://itmotr-beta.local/wp-content/uploads/2020/09/118772221_1195993277430854_6461524319873454907_o-1024x576.png 1024w, http://itmotr-beta.local/wp-content/uploads/2020/09/118772221_1195993277430854_6461524319873454907_o-300x169.png 300w, http://itmotr-beta.local/wp-content/uploads/2020/09/118772221_1195993277430854_6461524319873454907_o-768x432.png 768w, http://itmotr-beta.local/wp-content/uploads/2020/09/118772221_1195993277430854_6461524319873454907_o-1536x864.png 1536w, http://itmotr-beta.local/wp-content/uploads/2020/09/118772221_1195993277430854_6461524319873454907_o.png 2048w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>
                    </div>

                                    
                </div>
            </div>    
        </div>
</div>
</body>
</html>

我错过了什么？从头开始构建 WordPress 主题，不要有任何其他 AJAX 或可能干扰此的奇怪请求。非常感谢您的帮助 <3

非常感谢！

此致，一个 php 和 ajax 菜鸟 :)

Answer 1

看来和我运行的本地服务器有关。
在线发布时，AJAX加载是这样的！

在 WordPress 中通过 AJAX 加载页面内容

Load PAGE content via AJAX in WordPress

ajax

wordpress

load