如何解决在WordPress中通过AJAX加载PAGE内容
因此,我正在尝试建立一个通过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('«',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' );
这是我的一个名为program的页面的源代码。 YouTube付款人可以进行功能检查,并且将被实时流取代,该流在浏览网站时需要继续付款
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Program « 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或怪异的请求会干扰这一点。帮助将得到reaaaallyyy
非常感谢!
最好的问候, 一个php和ajax noob:)
解决方法
显然,这与我正在运行的本地服务器有关。
当在线发布时,AJAX加载就是这样!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。