AJAX负荷字preSS内容 [英] AJAX load Wordpress Content
问题描述
我一直在关注一个AJAX的教程，试图加载我的话，preSS帖子内容到我的网站的网页而无需重新加载页面。
I have been following an AJAX tutorial to try and load my wordpress post content onto the homepage of my website without having the page reload.
我不知道为什么，但是当链接被点击的时候，仍然导航到的页面，而不是加载内容到我指定的分区。无论如何，这都是一个有点吃不消了我，我也喜欢一些指导！
I am not sure why, but when the links are clicked it is still navigating to the page rather than loading the content into the div I specified. Anyway, it is all a bit too much for me and I would love some guidance!
本教程链接我一直在下面 - <一个href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/" rel="nofollow">http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
The tutorial link I have been following is - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
我的直播网站 - http://www.mathewhood.com
My live website is - http://www.mathewhood.com
我目前的code为 -
My current code is -
n.b。对于那些你不熟悉的单词preSS，它具有的header.php，template.php文件和footer.php。每个模板文件调用页眉和页脚，以避免code重复。我虽然它们连接所有。我也包括了single_portfolio页面，这就是网页通常会去。
n.b. For those of you not familiar with wordpress, it has a header.php, template.php and footer.php. Each template file calls the header and the footer as to avoid duplication of code. I will link them all though. I have also included the single_portfolio page, which is where the page would normally go to.
ajax.js
$(document).ready(function() {
// Check for hash value in URL
var hash = window.location.hash.substr(1);
var href = $('.caption a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});
$('#.caption a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#theContainer').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#theContainer').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() {
$('#theContainer').fadeOut('normal');
}
return false;
});
});
的header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php bloginfo( 'name' ); ?> | <?php wp_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link href='http://fonts.googleapis.com/css?family=Actor' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/ajax.js"></script>
<script>
$(document).ready(function() {
//move the image in pixel
var move = 8;
//zoom percentage, 1.2 =120%
var zoom = 1;
//On mouse over those thumbnail
$('.recentPost').hover(function() {
//Set the width and height according to the zoom percentage
width = $('.recentPost').width() * zoom;
height = $('.recentPost').height() * zoom;
//Move and zoom the image
$(this).find('img').stop(false,true).animate({'width':width, 'height':height<?php /*?>, 'top':move, 'left':move<?php */?>}, {duration:200});
//Display the caption
$(this).find('div.caption').stop(false,true).fadeIn(200);
},
function() {
//Reset the image
$(this).find('img').stop(false,true).animate({'width':$('.recentPost').width(), 'height':$('.recentPost').height()<?php /*?>, 'top':'8', 'left':'8'<?php */?>}, {duration:100});
//Hide the caption
$(this).find('div.caption').stop(false,true).fadeOut(200);
});
});
</script>
<script>
$('.thumbs').click(function(e){
e.preventDefault();
var contents = $(this).closest('.recentPost').find('.caption').html();
var $container = $('#theContainer').html(contents);
$container.show().animate({height:200}, {duration: 1000, easing: 'jswing'}).animate({height:150}, {duration: 1000, easing: 'easeInOutCirc'});
$container.click(function(){
$container.animate({height:200}, {duration: 1000, easing: 'easeInExpo'})
$container.fadeOut('slow');
$container.html('');
});
});
</script>
<?php wp_head();?>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="headerWrap">
<a href="http://www.mathewhood.com"><div id="logo"></div></a>
<div id="nav"></div>
</div>
page_home.php
<?php get_header();?>
<div id="contentWrap">
<div id="theContainer"></div>
<div id="newBanner"></div>
<?php query_posts('category_name=portfolio&showposts=12'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="recentPost">
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail('204, 144', array('class' => 'thumbs')); ?>
</a>
<a href="<?php the_permalink();?>">
<div class="caption">
<div class="captionTitle"><?php the_title(); ?></div>
<p><?php the_content();?></p>
</div>
</a>
</div>
<?php endwhile; ?>
<div class="cleared"></div>
</div>
<?php get_footer();?>
single_portfolio.php
<?php
/*
Template Name: Single Portfolio
*/
?>
<?php get_header();?>
<div id="contentWrap">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div id="content">
<h1><?php the_title(); ?></h1>
<?php the_content(); ?>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php get_footer();?>
我没有把在footer.php，因为它是没有必要的，你看看吧。
I didn't put in footer.php because it is isn't necessary for you to see it.
请帮我，如果可以，我真的不知道在哪里，从这里去：（
Please help me out if you can, I really have no idea where to go from here :(
推荐答案
在您的 ajax.js 第二行应该是
VAR HREF = $（'recentPost一个。'）每个（函数（）{}）;
由于与类标题的DIV不包含您所需要的HREF链接。 使这一变化，并检查是否正常工作。
because the div with the class caption does not contain the href links you need. Make this change and check if it works.
和也的点击功能应该是该类recentPost没有字幕！
And also the click function should be one the class recentPost not on caption !!!
这篇关于AJAX负荷字preSS内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
