真正的男子汉不是争凶斗狠 而应该是用胸膛去包容 用肩膀去支撑

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

技术文档 4951浏览 0评论

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

其实这个东西,主要是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实现动态加载文章内容

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)