原文已经删除,通过百度快照看到的,摘抄之,如下:
其实这个东西,主要是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 } ?>
结束刚才的IF语句..INDEX.PHP搞定.这是最关键一步拉.
第二步,修改INOVE主题中的FOOTER.php文件:
找到<?php wp_footer(); ?>,在其后加入:
- <?php
if (is_home() || is_tag() ||??is_search() ||??is_month() || is_category() || is_year() ) { ?>
<script type=”text/javascript”>var PRE_LOAD = 2;</script><script type=”text/javascript” src=”/wp-content/themes/inove/js/post.js”></script>
<?php }
?>
好了,第二步完成.
第三步,修改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;
}
这步可能有小量问题,不过自己慢慢修改css拉..这不是技术问题了哈.
第四步,继续修改INOVE主题中的index.php文件<div class=”content”>,找到第二个<div class=”content”>
看到这个没:
<div class=”content”>
<?php the_content(__(‘Read more…’, ‘inove’)); ?>
<div class=”fixed”></div>
</div>
把之换成:<div class=”content”></div>
好了,任务完成.去测试你的首页吧.ENJOY IT!
转载请注明:自由的风 » 对WP实现动态加载文章内容