AJAX加載Wordpress內容

我一直在關注一個AJAX教程，試圖加載我的WordPress的帖子內容到我的網站的主頁上，而無需重新加載頁面。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，因爲它是沒有必要給你看它。

請幫我，如果可以，我真的不知道在哪裏何去何從:(

來源

2011-08-20 Mathew Hood

在你ajax.js第二行應該是

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

因爲帶有類標題的div不包含您需要的href鏈接進行此更改並檢查它是否有效

還有點擊功能shou ld是一個班最近的郵件不是標題！

來源

2011-08-20 03:24:15

現在測試:)感謝發佈！編輯：我只是做到了，它的工作原理.. Thankyou這麼多人:)！ –

我唯一的其他問題是...你能幫我壓縮URL，所以這不是http://mathewhood.com/#http://mathewhood.com/sitefiles/2011/08/hello- w –

對不起，我不擅長文字新聞，但我知道肯定你可以手動更改網站的網址在文字按下。希望這個鏈接是一個開始。谷歌它或要求另一個關於單詞的新聞http://codex.wordpress.org/Changing_The_Site_URL –

AJAX加載Wordpress內容

回答

相關問題