AJAX加载Wordpress内容-Java 学习之路

我一直在关注一个AJAX教程，尝试将我的wordpress帖子内容加载到我网站的主页上，而不需要重新加载页面 .

我不知道为什么，但是当点击链接时，它仍然导航到页面而不是将内容加载到我指定的div中 . 无论如何，这对我来说有点太多了，我会喜欢一些指导！

我一直关注的教程链接是 - http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

我目前的代码是 -

注：对于那些不熟悉wordpress的人，它有一个header.php，template.php和footer.php . 每个模板文件都调用页眉和页脚，以避免重复代码 . 我会将它们全部链接起来 . 我还包括了single_portfolio页面，这是页面通常会去的地方 .

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，因为你没有必要看到它 .

如果可以，请帮帮我，我真的不知道从哪里开始:(

1 回答

1

在你的 ajax.js 中，第二行应该是

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

因为带有类 Headers 的div不包含您需要的href链接 . 进行此更改并检查其是否有效 .

而且click函数应该是最近的一个类，而不是 Headers ！

回复于 2024-05-07T12:18:28+08:00

AJAX加载Wordpress内容

1 回答

相关问题