月亮上的妖精

标签： wordpress

  • jQuery 页面载入进度条

    页面 Loading 条基本人人都会用。它的原理很简单：在页头放置一个文字或者图片的 loading 状态，然后页尾载入一段 JS 隐藏掉，即根据浏览器的载入顺序来实现的简易 Loading 状态条。

    20090208154308347

     上图展示了传统 WordPress 模板在浏览器中的载入顺序，

    Loading 条的出现和消失分布于头尾。 

    20090208154308890

     如果我们在页面的不同位置放置多个 JS ，每个 JS 用于逐步增加 Loading 条的宽度，那么这个 Loading 条无疑会更具实用价值。它在一定程度上缓解了访客等待载入的枯燥感，同时还能客观反映页面载入的进度。若再配以 jQuery 内建的动画效果，其完全可以与浏览器自带的状态条媲美。演示效果见本站 要得到演示上的进度条效果，首先，引入 jQuery 框架(一定要放在页头 <head> 标签内)。然后在 <body> 标签起始位置放置：

    <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js”></script>

    CSS 可以这么写：

    loading {
width:100px;
height:20px;
background:#A0DB0E;
padding:5px;
position:fixed;
left:0;
top:0;
}
#loading div {
width:1px;
height:20px;
background:#F1FF4D;
}
    为了让 loading 显示不要过于突兀，可以先隐藏 然后在网页加载时 开始显示：
        <!-- loading 加载信息开始-->
<script type="text/javascript"> $("#k_loading").show(100);</script>
    <!-- loading -->

    准备工作到这里就做好了。 接着，请随意发挥，依照你对图二的理解，在模板各个部分的适当位置放置：

    <script type=”text/javascript”>$(“#k_loading div”).animate({width:”16px“}).text(“16%”)</script>

    其中红色数值应该随载入顺序逐步增加，直到 footer.php。另外别忘了在 footer.php 最末尾放上：

    <!– loading  Ajax结束 逐渐隐藏 –>

        <script type=”text/javascript”>$(“#k_loading div”).animate({width:”100px”}).text(“100%”)</script>

        <script type=”text/javascript”>setTimeout(function(){$(“#k_loading”).hide(500)},1000)</script> //

    用于载入完毕后隐藏进度条。

    效果见本站

  • 抛弃WP-PageNavi，为WP自制分页导航功能

    WP-PageNavi是WP的一个优秀的分页导航插件，相信70-80%的P友，一定在用这个插件。

    翠花，上图，这个插件的显示效果，是十分的漂亮的。

    不过，作为骨灰级的WP狂热者，相信一定不愿意在自己WP站上，被一堆的插件插来插去的。你一定是以最精简作为你的终身目标的，或许你不是，但我是！

    废话少说，今天，在这里分享一个将分页导航功能直接写入WP主题的方法，希望对各位骨灰级朋友有用。

    第一步，找到所用模板中的function.php文件。打开后。将下边代码用力的插进去！注意！要插在<?php………………?>中省略号处，别插错地方了！

    
function wp_pagenavi($before = '', $after = '') {
global $wpdb, $wp_query;
if (!is_single()) {
  $request = $wp_query->request;
  $posts_per_page = intval(get_query_var('posts_per_page'));
  $paged = intval(get_query_var('paged'));
  $pagenavi_options = get_option('pagenavi_options');
  $numposts = $wp_query->found_posts;
  $max_page = $wp_query->max_num_pages;

  if(empty($paged) || $paged == 0) {
   $paged = 1;
  }
  $pages_to_show = intval($pagenavi_options['num_pages']);
  $pages_to_show_minus_1 = $pages_to_show-1;
  $half_page_start = floor($pages_to_show_minus_1/2);
  $half_page_end = ceil($pages_to_show_minus_1/2);
  $start_page = $paged - $half_page_start;
  if($start_page <= 0) {
   $start_page = 1;
  }
  $end_page = $paged + $half_page_end;
  if(($end_page - $start_page) != $pages_to_show_minus_1) {
   $end_page = $start_page + $pages_to_show_minus_1;
  }
  if($end_page > $max_page) {
   $start_page = $max_page - $pages_to_show_minus_1;
   $end_page = $max_page;
  }
  if($start_page <= 0) {
   $start_page = 1;
  }
  if($max_page > 1 || intval($pagenavi_options['always_show']) == 1) {
   $pages_text = str_replace("%CURRENT_PAGE%", $paged, $pagenavi_options['pages_text']);
   $pages_text = str_replace("%TOTAL_PAGES%", $max_page, $pages_text);
   echo $before.'<div >'."n";
   switch(intval($pagenavi_options['style'])) {
    case 1:
     if(!empty($pages_text)) {
      echo '<span >'.$pages_text.'</span>';
     }     
     if ($start_page >= 2 && $pages_to_show < $max_page) {
      if(!empty($pagenavi_options['dotleft_text'])) {
       echo '<span >'.$pagenavi_options['dotleft_text'].'</span>';
      }
     }
     previous_posts_link($pagenavi_options['prev_text']);
     for($i = $start_page; $i  <= $end_page; $i++) {      
      if($i == $paged) {
       $current_page_text = str_replace("%PAGE_NUMBER%", $i, $pagenavi_options['current_text']);
       echo '<span >'.$current_page_text.'</span>';
      } else {
       $page_text = str_replace("%PAGE_NUMBER%", $i, $pagenavi_options['page_text']);
       echo '<a href="'.clean_url(get_pagenum_link($i)).'" title="'.$page_text.'">'.$page_text.'</a>';
      }
     }
     next_posts_link($pagenavi_options['next_text'], $max_page);
     if ($end_page < $max_page) {
      if(!empty($pagenavi_options['dotright_text'])) {
       echo '<span >'.$pagenavi_options['dotright_text'].'</span>';
      }
      $last_page_text = str_replace("%TOTAL_PAGES%", $max_page, $pagenavi_options['last_text']);
      echo '<a href="'.clean_url(get_pagenum_link($max_page)).'" title="'.$last_page_text.'">'.$last_page_text.'</a>';
     }
     break;
    case 2;
     echo '<form action="'.htmlspecialchars($_SERVER['PHP_SELF']).'" method="get">'."n";
     echo '<select size="1" = this.options[this.selectedIndex].value;">'."n";
     for($i = 1; $i  <= $max_page; $i++) {
      $page_num = $i;
      if($page_num == 1) {
       $page_num = 0;
      }
      if($i == $paged) {
       $current_page_text = str_replace("%PAGE_NUMBER%", $i, $pagenavi_options['current_text']);
       echo '<option value="'.clean_url(get_pagenum_link($page_num)).'" selected="selected" >'.$current_page_text."</option>n";
      } else {
       $page_text = str_replace("%PAGE_NUMBER%", $i, $pagenavi_options['page_text']);
       echo '<option value="'.clean_url(get_pagenum_link($page_num)).'">'.$page_text."</option>n";
      }
     }
     echo "</select>n";
     echo "</form>n";
     break;
   }
   echo '</div>'.$after."n";
  }
}
}

    第二步：找到你想加入分页导航的页面，如首页、分类页等。再用力的插入如下代码：

            

     

    第三步：找到你的CSS文件，再次用力的插入如下代码：

    /* Page Navigation
---------------------------------------------*/
.navigation {
padding-top:15px;
padding-bottom:2px;/*visivility-IE*/
border:1px solid #fff;
}
.alignleft {
float:left;
}
.alignright {
float:right;
}
.aligncenter, div.aligncenter {
display: block;
margin:0 auto;
}
.wp-pagenavi {
text-transform:uppercase;
}
.wp-pagenavi a {
text-decoration:none;
border:1px solid #b3b3b3;
color:#212236;
margin:2px;
padding:2px 6px;
}
.wp-pagenavi a:hover {
color:#fff;
background-color:#9c0;
}
.wp-pagenavi span {
border:1px solid #b3b3b3;
margin:2px;
padding:2px 6px;
}
.wp-pagenavi span.pages {
color:#777;
margin-left:0;
color:#000;
word-spacing:0.2em;
}
.wp-pagenavi span.current {
color:#212236;
background-color:#e8edef;
}

    至此，WP分页导航大法修炼成功。注意：功夫一定要做足，一定要插三次，一次都不能少！

    转自：毒龙的世界