倉藍

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

1.樣式表

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

2.javascript代碼

 

3.示例的HTML代碼

使用的是索凌網絡前面介紹過的"假圖"生成網站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!

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

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

下面開始吧：

1.在頁面頭部加載jQuery和這個Lazyload插件，如果已經加載過了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();  

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

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

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

占位圖片

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

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

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

    $("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代碼中的順序先后可視范圍內的加載圖片，在第一張不在可視范圍內的圖片處停止執行，但是在某些頁面布局中，這種聰明的假設可能是不成立的，那么可以用failurelimit來控制加載動作：

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

上面的意思是：在找到10張不在可視范圍內的圖片時停止執行。額，好吧，如果你的頁面布局猥瑣到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);   
    });  

上例中采用的參數或者說定時是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）代碼：可自動播放，同時響應訪客的點擊