AJAX加载Wordpress内容

Question

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. 我一直在遵循AJAX教程，尝试将我的wordpress帖子内容加载到我网站的首页上，而无需重新加载页面。

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. 我不确定为什么，但是当单击链接时，它仍导航到页面，而不是将内容加载到我指定的div中。 Anyway, it is all a bit too much for me and I would love some guidance! 无论如何，这对我来说太过分了，我希望获得一些指导！

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://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

My live website is - http://www.mathewhood.com 我的实时网站是-http://www.mathewhood.com

My current code is - 我当前的代码是-

nb For those of you not familiar with wordpress, it has a header.php, template.php and footer.php. 对于那些不熟悉wordpress的人，它具有header.php，template.php和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. 我还包括了single_portfolio页面，该页面通常会进入该页面。

ajax.js 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 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 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 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();?>

I didn't put in footer.php because it is isn't necessary for you to see it. 我没有放入footer.php，因为您没有必要看到它。

Please help me out if you can, I really have no idea where to go from here :( 如果可以的话请帮帮我，我真的不知道从这里去哪里：（

Answer 1

In your ajax.js the second line should be 在您的ajax.js中 ，第二行应该是

var href = $('.recentPost a').each(function(){ });

because the div with the class caption does not contain the href links you need. 因为带有类标题的div不包含所需的href链接。 Make this change and check if it works. 进行更改并检查是否有效。

And also the click function should be one the class recentPost not on caption !!! 并且click函数应该是类nextPost上的标题，而不是标题！

AJAX加载Wordpress内容

问题描述

1 个解决方案

解决方案1
1 已采纳 2011-08-20 03:24:15

AJAX加载Wordpress内容

问题描述

1 个解决方案

解决方案1 1 已采纳 2011-08-20 03:24:15

解决方案1
1 已采纳 2011-08-20 03:24:15