对WP实现动态加载文章内容

原文已经删除，通过百度快照看到的，摘抄之，如下：

其实这个东西，主要是js来实现的.那么我们需要提供一个js文档.内容如下：

(function(){

jQuery(document).ready(function(){
jQuery('div.post').each(function() {
  var id = jQuery(this).attr('id');
  if(/^post\-[0-9]+$/.test(id)) {
   var toggle = jQuery('<a href="javascript:void(0);"></a>');
   toggle.toggle(function() {
    if(jQuery('#' + id + ' .content').text() == '') {
     var postId = id.slice(5);
     jQuery.ajax({
      type:         'GET'
      ,url:         '?action=load_post&id=' + postId
      ,cache:       false
      ,dataType:    'html'
      ,contentType: 'application/json; charset=utf-8'
      ,beforeSend: function(data){loadPostContent(id, '<p>Loading...</p>');}
      ,success:     function(data){loadPostContent(id, data);}
      ,error:       function(data){loadPostContent(id, '<p>Oops, failed to load data.</p>');}
     });
    }
    jQuery('#' + id + ' .content').slideDown();
    jQuery(this).removeClass('collapse').addClass('expand');
   },
   function() {
    jQuery('#' + id + ' .content').slideUp();
    jQuery(this).removeClass('expand').addClass('collapse');
   }).prependTo(jQuery('#' + id + ' h1'));
  }
});
jQuery('div.post a.toggle').each(function(index) {
  if(index < 2) {
   jQuery(this).click();
  }
});
});

function loadPostContent(id, data) {
jQuery('#' + id + ' .content').html(data);
}

})();

还需要一个图标文件,请到这里下载:点击下载

将第一个JS文件(将上面的JS内容另存为POST.JS)放到主题目录的JS目录中,将第二个图片(icons.gif)放到主题目录的IMG目录中.
好了，现在开始改造了.这里针对INOVE主题,其他的自己研究下.
第一步,修改INOVE主题中的index.php文件:
有两条需要修改:
找到:<?php get_header(); ?>
在其前面加上代码:

<?php
// 此段由WANWAN添加本页共两段
$action=$_GET['action'];
$ariticle_id=$_GET['id'];
if($action==”load_post”)
{
query_posts(“p=$ariticle_id”);
the_post();
the_excerpt();
?>
<p><a href=”<?php the_permalink() ?>#more-<? echo $ariticle_id ?>” class=”more-link”>Read more…</a>
<div class=”fixed”></div>
<?php }
else{
?>

好了,再到本页最尾部,加入<?php } ?>
结束刚才的ＩＦ语句．．INDEX.PHP搞定.这是最关键一步拉.

第二步,修改INOVE主题中的FOOTER.php文件:

找到<?php wp_footer(); ?>，在其后加入:

好了，第二步完成．

第三步,修改INOVE主题中的style.css文件:

找到#notice a
在其后加入

.post h1 {
display:block;
margin-top:10px;
border-bottom:1px solid #CCC;
padding:0 5px 3px;
font-size:16px;
font-family:Verdana,”BitStream vera Sans”;
}
.post h1 a.toggle,
.post h1 a.expand,
.post h1 a.collapse {
background:url(img/icons.gif) 0 -336px no-repeat;
height:16px;
width:16px;
display:block;
text-indent:-999em;
float:right;
}
.post h1 a.expand {
background-position:0 -320px;
}
.post h1 a.title {
text-decoration:none;
color:#4C4C4C;
}
.post h1 a.title:hover {
color:#2970A6;
}
.post h1 .act a {
font-weight:normal;
}