倉藍

希望WP愛好者能夠喜歡并嘗試一下‘

1.樣式表

在上面的樣式表中，假設放置的是四個250px*250px的圖片廣告，所以250+（4-1）*21=313px。

2.javascript代碼

 

3.示例的HTML代碼

使用的是索凌網(wǎng)絡前面介紹過的"假圖"生成網(wǎng)站fakeimg.pl生成的"假圖"。

這組代碼的一個顯著缺點是：不適合移動設備顯示。

1. if(is_admin())   


2. {   


3.     new Cool_Wp_List_Table();   


4. }   


5.   


6. /**  


7.  * Cool_Wp_List_Table class will create the page to load the table  


8.  */  


9. class Cool_Wp_List_Table   


10. {   


11.     /**  


12.      * Constructor will create the menu item  


13.      */  


14.     public function __construct()   


15.     {   


16.         add_action( 'admin_menu', array($this, 'add_menu_example_list_table_page' ));   


17.     }   


18.   


19.     /**  


20.      * Menu item will allow us to load the page to display the table  


21.      */  


22.     public function add_menu_example_list_table_page()   


23.     {   


24.         add_menu_page( 'Coowp示例表格', 'Coowp示例表格', 'manage_options', 'coolwp-list-table.php', array($this, 'list_table_page') );   


25.     }   


26.   


27.     /**  


28.      * Display the list table page  


29.      *  


30.      * @return Void  


31.      */  


32.     public function list_table_page()   


33.     {   


34.         $exampleListTable = new Example_List_Table();   


35.         $exampleListTable->prepare_items();   


36.         ?>   


37.             <div class="wrap">   


38.                 <div id="icon-users" class="icon32"></div>   


39.                 <h2>Coowp示例表格-頁面標題</h2>   


40.                 <?php $exampleListTable->display(); ?>   


41.             </div>   


42.         <?php   


43.     }   


44. }   


45.   


46. // WP_List_Table is not loaded automatically so we need to load it in our application   


47. if( ! class_exists( 'WP_List_Table' ) ) {   


48.     require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );   


49. }   


50.   


51. /**  


52.  * Create a new table class that will extend the WP_List_Table  


53.  */  


54. class Example_List_Table extends WP_List_Table   


55. {   


56.     /**  


57.      * Prepare the items for the table to process  


58.      *  


59.      * @return Void  


60.      */  


61.     public function prepare_items()   


62.     {   


63.         $columns = $this->get_columns();   


64.         $hidden = $this->get_hidden_columns();   


65.         $sortable = $this->get_sortable_columns();   


66.   


67.         $data = $this->table_data();   


68.         usort( $data, array( &$this, 'sort_data' ) );   


69.   


70.         $perPage = 2;   


71.         $currentPage = $this->get_pagenum();   


72.         $totalItems = count($data);   


73.   


74.         $this->set_pagination_args( array(   


75.             'total_items' => $totalItems,   


76.             'per_page'    => $perPage  


77.         ) );   


78.   


79.         $data = array_slice($data,(($currentPage-1)*$perPage),$perPage);   


80.   


81.         $this->_column_headers = array($columns, $hidden, $sortable);   


82.         $this->items = $data;   


83.     }   


84.   


85.     /**  


86.      * Override the parent columns method. Defines the columns to use in your listing table  


87.      *  


88.      * @return Array  


89.      */  


90.     public function get_columns()   


91.     {   


92.         $columns = array(   


93.             'id'          => __('ID'),   


94.             'title'       => __('Title'),   


95.             'description' => __('描述'),   


96.             //__('Description'),怎么被Wordpress翻譯為“圖像描述”了？   


97.             'date'        => __('Date'),   


98.             'price'    => __('價格'),//__('Price'),   


99.             'rating'      => __('Rating')   


100.         );   


101.   


102.         return $columns;   


103.     }   


104.   


105.     /**  


106.      * Define which columns are hidden  


107.      *  


108.      * @return Array  


109.      */  


110.     public function get_hidden_columns()   


111.     {   


112.         return array();   


113.     }   


114.   


115.     /**  


116.      * Define the sortable columns  


117.      *  


118.      * @return Array  


119.      */  


120.     public function get_sortable_columns()   


121.     {   


122.         return array('title' => array('title', false));   


123.     }   


124.   


125.     /**  


126.      * Get the table data  


127.      *  


128.      * @return Array  


129.      */  


130.     private function table_data()   


131.     {   


132.         $data = array();   


133.   


134.         $data[] = array(   


135.                     'id'          => 1,   


136.                     'title'       => '某IT設備租賃公司：楊先生',   


137.                     'description' => '上海，需求描述',   


138.                     'date'        => '2013.01.01',   


139.                     'price'       => '---',   


140.                     'rating'      => '7.3'   


141.                     );   


142.   


143.         $data[] = array(   


144.                     'id'          => 2,   


145.                     'title'       => '某婚攝團隊：李先生',   


146.                     'description' => '臺灣，臺北',   


147.                     'date'        => '2013.12.15',   


148.                     'price'       => '---',   


149.                     'rating'      => '7.2'   


150.                     );   


151.   


152.         $data[] = array(   


153.                     'id'          => 3,   


154.                     'title'       => '在校研究生：梁小姐',   


155.                     'description' => '墨爾本大學：藝術設計',   


156.                     'date'        => '2013.12.03',   


157.                     'price'       => '---',   


158.                     'rating'      => '7.0'   


159.                     );   


160.   


161.         $data[] = array(   


162.                     'id'          => 4,   


163.                     'title'       => '某私人航空公司',   


164.                     'description' => '僅前端交互：何小姐',   


165.                     'date'        => '2014.01.01',   


166.                      'price'      => '---',   


167.                     'rating'      => '7.0'   


168.                     );   


169.         return $data;   


170.     }   


171.   


172.     /**  


173.      * Define what data to show on each column of the table  


174.      *  


175.      * @param  Array $item        Data  


176.      * @param  String $column_name - Current column name  


177.      *  


178.      * @return Mixed  


179.      */  


180.     public function column_default( $item, $column_name )   


181.     {   


182.         switch( $column_name ) {   


183.             case 'id':   


184.             case 'title':   


185.             case 'description':   


186.             case 'date':   


187.             case 'price':   


188.             case 'rating':   


189.                 return $item[ $column_name ];   


190.   


191.             default:   


192.                 return print_r( $item, true ) ;   


193.         }   


194.     }   


195.   


196.     /**  


197.      * Allows you to sort the data by the variables set in the $_GET  


198.      *  


199.      * @return Mixed  


200.      */  


201.     private function sort_data( $a, $b )   


202.     {   


203.         // Set defaults   


204.         $orderby = 'title';   


205.         $order = 'asc';   


206.   


207.         // If orderby is set, use this as the sort column   


208.         if(!emptyempty($_GET['orderby']))   


209.         {   


210.             $orderby = $_GET['orderby'];   


211.         }   


212.   


213.         // If order is set use this as the order   


214.         if(!emptyempty($_GET['order']))   


215.         {   


216.             $order = $_GET['order'];   


217.         }   


218.   


219.         $result = strcmp( $a[$orderby], $b[$orderby] );   


220.   


221.         if($order === 'asc')   


222.         {   


223.             return $result;   


224.         }   


225.   


226.         return -$result;   


227.     }   


228. }  

ENJOY IT!

如果網(wǎng)頁包含大量圖片，那么，采用Lazyload來延遲圖片的載入以加速網(wǎng)頁整體在瀏覽器中的載入是個不錯的方法！

上面這句話并不是翻譯來的，只是我想一句話說完。

下面開始吧：

1.在頁面頭部加載jQuery和這個Lazyload插件，如果已經(jīng)加載過了jQuery，那就不用再次加載了：

    <script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.8.3.min.js" type="text/javascript"></script>   
    <script src="jquery.lazyload.js" type="text/javascript"></script>   

是的，我習慣在國內用又拍云的云加速。

對圖片的處理：

    <img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg"  width="730" heigh="300">   

上面示例中的grey.gif實際上相當于一個占位符，建議采用1*1px的灰色png或者gif，data-original后面的才是真正的圖片鏈接，class="lazy"是個可以定義的特定class。
Lazyload基本設置

    <script type="text/javascript" charset="utf-8">   
        $(function() {   
            $("img.lazy").lazyload();   
        });   
    </script>  

Lazyload基本設置的在線DEMO:Lazyload DEMO1
對不支持js瀏覽器的處理

    <img class="lazy" src="img/grey.gif" data-original="img/true_image.jpg"  width="730" heigh="300">   
    <noscript><img src="img/true_image.jpg" width="730" heigh="300"></noscript>  

用CSS隱藏占位符：

    .lazy {   
      display: none;   
    }  

對支持js的瀏覽器，應該在DOM準備階段就初始化插件：

    $("img.lazy").show().lazyload();  

當然了，這樣處理兼容性更好，不過現(xiàn)在的瀏覽器大多都是支持js的。
加載敏感度

默認的情況下，圖片將會在出現(xiàn)在屏幕上時顯示，如果想提載入圖片，可以使用 threshold 進行設置，下例的含義是：在圖片距離屏幕180px時提前載入：

    $("img.lazy").lazyload({ threshold :180});  

占位圖片

可以自定義一個簡單的淺色或灰色系的小圖片（越小越好，1*1px最佳，格式推薦采用gif）作為占位圖片來觸發(fā)加載動作。
事件觸發(fā)

可以是jQuery的任何事件（如click、mouseover），還可以使用自己定義的事件。

例如：處于等待狀態(tài), 直到瀏覽者滾動到窗口中圖片所在位置，在占位圖片被點擊之前不加載圖片, 可以這樣做:

    $("img").lazyload({   
        placeholder : "img/grey.gif",   
        event : "click"  
    });  

 特效的使用

當圖片完全加載的時候，默認使用show()方法來顯示圖片，所以，上面的那個基本設置示例中未寫出show(),但是可以照常運行。
 圖片淡入（FadeIn）效果

    $("img.lazy").lazyload({    
        effect : "fadeIn"  
    });  

Lazyload圖片淡入效果演示
將圖片放在特定容器中

先看示例：水平滾動演示頁面和垂直滾動的演示頁面

CSS部分示例

    #container {   
        height: 600px;   
        overflow: scroll;   
    }  

js部分示例

    $("img.lazy").lazyload({            
         container: $("#container")   
    });  

 圖片未按順序排列的情況

滾動頁面的時候，Lazyload會按照在HTML代碼中的順序先后可視范圍內的加載圖片，在第一張不在可視范圍內的圖片處停止執(zhí)行，但是在某些頁面布局中，這種聰明的假設可能是不成立的，那么可以用failurelimit來控制加載動作：

    $("img.lazy").lazyload({    
        failure_limit : 10   
    });  

上面的意思是：在找到10張不在可視范圍內的圖片時停止執(zhí)行。額，好吧，如果你的頁面布局猥瑣到10不足以滿足的時候，那就再大一些吧。
Lazyload定時延遲圖片載入

Lazyload的一個并不完備的功能，并不影響使用，但是實際用途并不大！用途描述：在頁面和可見圖片載入后一定時間內載入圖片。Lazyload定時延遲圖片載入示例

    $(function() {             
        $("img:below-the-fold").lazyload({   
            event : "sporty"  
        });   
    });   
    $(window).bind("load", function() {    
        var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);   
    });  

上例中采用的參數(shù)或者說定時是5秒。
 加載隱藏的圖片

你的頁面上可能隱藏了很多不可見的圖片用作特殊用途，Lazyload默認是忽略這些圖片的，如果不想忽略掉，可以這樣：

    $("img.lazy").lazyload({    
        skip_invisible : false   
    });  

 
 Lazyload下載與兼容性

最新的未壓縮版 source與壓縮版 minified。

你看到這篇文章時可能有更新的版本了，請點擊Lazyload了解更多！

兼容于：

OSX平臺： Safari 5.1, Safari 6, Chrome 20, Firefox 12

WIN平臺：Chrome 20, IE 8 and IE 9 on Windows

iPhone和 iPad上：Safari 5.1

本文介紹一組適用于在Wordpress側欄放置的圖片廣告輪播（js）代碼：可自動播放，同時響應訪客的點擊