倉藍
          
				
          日記本
          
			          		
		
          
	
          

          

          
	
          
		
          
			
				
 
BlogJava ::
首頁 ::
聯系 ::
聚合
 ::
管理

			
			
			
				

	
          
		
          
			
			
			
				 
				23 
				Posts ::
				0 Stories
				::
				1 Comments
				::
				0 Trackbacks
			
		
          
	
          

			          		
		
          
	
          

          


          

          
	
          
	
					

          
	2013年9月27日		  
	#

          


		
          
			
			
			
          
				     摘要: 適合Linux系統使用的命令，本文以亞馬遜的Amazon Linux 為用例，希望對朋友們有點幫助！切換至root用戶    sudo su  安裝screen    yum install screen       yum update  安裝Apache，MySQL...  閱讀全文
			
          
			
			
          
				posted @ 2014-01-10 10:45 cangshi 閱讀(1761) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				
          希望WP愛好者能夠喜歡并嘗試一下‘
          1.樣式表
           
            
          1. /*SidebarTabsAd*/  
          2. #cwpad_box{width:100%;text-align:center}   
          3. #cwpad_box ul, #cwpad_box dd, #cwpad_box tt{   
          4.     margin:0px;   
          5.     padding:0px;   
          6.     float:left;   
          7.     list-style: none;   
          8. }   
          9. #cwpad_box{   
          10.     width:313px;/*250px+(n-1)*21px*/  
          11.     height:250px;   
          12.     border-left: 1px solid #740a20;   
          13. }   
          14. #cwpad_box dd{   
          15.     width:21px;   
          16.     height:250px;   
          17.     overflow:hidden;   
          18.     position:relative;   
          19. }   
          20. #cwpad_box dd.hove{   
          21.     width:250px;   
          22.     text-align:rightright;   
          23. }   
          24. #cwpad_box dd tt{   
          25.     width:20px;   
          26.     height:250px;   
          27.     top:0px;   
          28.     left:0px;   
          29.     color:#fff;   
          30.     cursor:pointer;   
          31.     text-align:center;   
          32.     padding:20px 0 0 0;   
          33.     background:#b9000d;   
          34.     position:absolute;   
          35.     border-right:1px solid #740a20;   
          36. }   
          37. #cwpad_box dd tt.hove{   
          38.     background:#620317;   
          39. }  
           
           
          在上面的樣式表中，假設放置的是四個250px*250px的圖片廣告，所以250+（4-1）*21=313px。
           
          2.javascript代碼
           
            
          1. <script type="text/javascript">   
          2. function myAddEvent(obj, sEvent, fn){   
          3.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);   
          4. }   
          5. function Class(oParent, sClass){   
          6.     var aElem = oParent.getElementsByTagName('*');   
          7.     var aClass = [];   
          8.     var i = 0;   
          9.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);   
          10.     return aClass;   
          11. };   
          12. function css(obj, attr, value){   
          13.     if(arguments.length == 2){   
          14.         var style = obj.style,   
          15.             currentStyle = obj.currentStyle;   
          16.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];   
          17.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];    
          18.     }else if(arguments.length == 3){   
          19.         switch(attr){   
          20.             case "width":   
          21.             case "height":   
          22.             case "paddingTop":   
          23.             case "paddingRight":   
          24.             case "paddingBottom":   
          25.             case "paddingLeft":   
          26.             case "top":   
          27.             case "right":   
          28.             case "bottom":   
          29.             case "left":   
          30.             case "marginTop":   
          31.             case "marginRigth":   
          32.             case "marginBottom":   
          33.             case "marginLeft":   
          34.                 obj.style[attr] = value + "px";   
          35.                 break;   
          36.             case "opacity":   
          37.                 obj.style.filter = "alpha(opacity=" + value + ")";   
          38.                 obj.style.opacity = value / 100;   
          39.                 break;   
          40.             default:   
          41.                 obj.style[attr] = value   
          42.         }   
          43.     }   
          44. };   
          45. function extend(destination, source){   
          46.     for (var propName in source) destination[propName] = source[propName];   
          47.     return destination   
          48. };   
          49. function doMove(obj, json, fnEnd){   
          50.     clearInterval(obj.timer);   
          51.     obj.iSpeed = 0;   
          52.     fnEnd = extend({   
          53.         type: "buffer",   
          54.         callback: function() {}   
          55.     }, fnEnd);   
          56.     obj.timer = setInterval(function(){   
          57.         var iCur = 0,   
          58.             iStop = true;   
          59.         for(var propName in json){   
          60.             iCur = parseFloat(css(obj, propName));   
          61.             propName == 'opacity' && (iCur = Math.round(iCur * 100));   
          62.             switch(fnEnd.type){   
          63.                 case 'buffer':   
          64.                     obj.iSpeed = (json[propName] - iCur) / 5;   
          65.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);   
          66.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          67.                     break;   
          68.                 case 'elasticity':   
          69.                     obj.iSpeed += (json[propName] - iCur) / 5;   
          70.                     obj.iSpeed *= 0.75;   
          71.                     Math.abs(json[propName] - iCur) <= 1 &&  Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          72.                     break;   
          73.                 case 'accelerate':   
          74.                     obj.iSpeed = obj.iSpeed + 5;   
          75.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          76.                 break;   
          77.             }   
          78.         }   
          79.         if(iStop){   
          80.             clearInterval(obj.timer);   
          81.             obj.timer = null;   
          82.             obj.iSpeed = 0;   
          83.             fnEnd.callback();   
          84.         }   
          85.     },30);   
          86. };   
          87.   
          88. window.onload = function(){   
          89.     var oBox = document.getElementById('cwpad_box')   
          90.     var aSpan = document.getElementsByTagName('tt');   
          91.     var aLi = document.getElementsByTagName('dd');   
          92.     var playtime = null;   
          93.     var iNow = 0;   
          94.     for(i=0;i<aSpan.length;i++){   
          95.         aSpan[i].index = i;   
          96.         aSpan[i].onclick = function(){   
          97.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});   
          98.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';   
          99.             this.className = 'hove';   
          100.             doMove(this.parentNode, {width:250});   
          101.             iNow = this.index;   
          102.         };   
          103.     }   
          104.     playtime = setInterval(tab,3500);   
          105.     oBox.onmouseover = function(){   
          106.         clearInterval(playtime);   
          107.     }   
          108.     oBox.onmouseout = function(){   
          109.         playtime = setInterval(tab,3500);   
          110.     }   
          111.     function tab(){   
          112.         iNow == aLi.length-1 ? iNow = 0 : iNow++;   
          113.         aSpan[iNow].onclick();   
          114.     }   
          115. };   
          116.  </script>    
           
           
           
            
             
           
          3.示例的HTML代碼
           
            
          1. <div id="cwpad_box">  
          2.     <ul>  
          3.         <dd  class="hove">  
          4.         <tt class="hove">網站設計及培訓</tt>  
          5.         <a ></a>  
          6.         </dd>  
          7.     </ul>  
          8. </div>  
           
           
          使用的是索凌網絡前面介紹過的"假圖"生成網站fakeimg.pl生成的"假圖"。
           
          這組代碼的一個顯著缺點是：不適合移動設備顯示。
          
			
          
			
			
          
				posted @ 2014-01-08 11:20 cangshi 閱讀(263) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				
          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!
          
			
          
			
			
          
				posted @ 2014-01-06 11:03 cangshi 閱讀(272) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				
          如果網頁包含大量圖片，那么，采用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
          
			
          
			
			
          
				posted @ 2014-01-02 11:16 cangshi 閱讀(7702) | 評論 (1) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				
          本文介紹一組適用于在Wordpress側欄放置的圖片廣告輪播（js）代碼：可自動播放，同時響應訪客的點擊
          1.樣式表
           
            
          1. /*SidebarTabsAd*/  
          2. #cwpad_box{width:100%;text-align:center}   
          3. #cwpad_box ul, #cwpad_box dd, #cwpad_box tt{   
          4.     margin:0px;   
          5.     padding:0px;   
          6.     float:left;   
          7.     list-style: none;   
          8. }   
          9. #cwpad_box{   
          10.     width:313px;/*250px+(n-1)*21px*/  
          11.     height:250px;   
          12.     border-left: 1px solid #740a20;   
          13. }   
          14. #cwpad_box dd{   
          15.     width:21px;   
          16.     height:250px;   
          17.     overflow:hidden;   
          18.     position:relative;   
          19. }   
          20. #cwpad_box dd.hove{   
          21.     width:250px;   
          22.     text-align:rightright;   
          23. }   
          24. #cwpad_box dd tt{   
          25.     width:20px;   
          26.     height:250px;   
          27.     top:0px;   
          28.     left:0px;   
          29.     color:#fff;   
          30.     cursor:pointer;   
          31.     text-align:center;   
          32.     padding:20px 0 0 0;   
          33.     background:#b9000d;   
          34.     position:absolute;   
          35.     border-right:1px solid #740a20;   
          36. }   
          37. #cwpad_box dd tt.hove{   
          38.     background:#620317;   
          39. }  
           
           
          在上面的樣式表中，假設放置的是四個250px*250px的圖片廣告，所以250+（4-1）*21=313px。
           
          2.javascript代碼
           
            
          1. <script type="text/javascript">   
          2. function myAddEvent(obj, sEvent, fn){   
          3.     return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);   
          4. }   
          5. function Class(oParent, sClass){   
          6.     var aElem = oParent.getElementsByTagName('*');   
          7.     var aClass = [];   
          8.     var i = 0;   
          9.     for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);   
          10.     return aClass;   
          11. };   
          12. function css(obj, attr, value){   
          13.     if(arguments.length == 2){   
          14.         var style = obj.style,   
          15.             currentStyle = obj.currentStyle;   
          16.         if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];   
          17.         for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];    
          18.     }else if(arguments.length == 3){   
          19.         switch(attr){   
          20.             case "width":   
          21.             case "height":   
          22.             case "paddingTop":   
          23.             case "paddingRight":   
          24.             case "paddingBottom":   
          25.             case "paddingLeft":   
          26.             case "top":   
          27.             case "right":   
          28.             case "bottom":   
          29.             case "left":   
          30.             case "marginTop":   
          31.             case "marginRigth":   
          32.             case "marginBottom":   
          33.             case "marginLeft":   
          34.                 obj.style[attr] = value + "px";   
          35.                 break;   
          36.             case "opacity":   
          37.                 obj.style.filter = "alpha(opacity=" + value + ")";   
          38.                 obj.style.opacity = value / 100;   
          39.                 break;   
          40.             default:   
          41.                 obj.style[attr] = value   
          42.         }   
          43.     }   
          44. };   
          45. function extend(destination, source){   
          46.     for (var propName in source) destination[propName] = source[propName];   
          47.     return destination   
          48. };   
          49. function doMove(obj, json, fnEnd){   
          50.     clearInterval(obj.timer);   
          51.     obj.iSpeed = 0;   
          52.     fnEnd = extend({   
          53.         type: "buffer",   
          54.         callback: function() {}   
          55.     }, fnEnd);   
          56.     obj.timer = setInterval(function(){   
          57.         var iCur = 0,   
          58.             iStop = true;   
          59.         for(var propName in json){   
          60.             iCur = parseFloat(css(obj, propName));   
          61.             propName == 'opacity' && (iCur = Math.round(iCur * 100));   
          62.             switch(fnEnd.type){   
          63.                 case 'buffer':   
          64.                     obj.iSpeed = (json[propName] - iCur) / 5;   
          65.                     obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);   
          66.                     json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          67.                     break;   
          68.                 case 'elasticity':   
          69.                     obj.iSpeed += (json[propName] - iCur) / 5;   
          70.                     obj.iSpeed *= 0.75;   
          71.                     Math.abs(json[propName] - iCur) <= 1 &&  Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          72.                     break;   
          73.                 case 'accelerate':   
          74.                     obj.iSpeed = obj.iSpeed + 5;   
          75.                     iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));   
          76.                 break;   
          77.             }   
          78.         }   
          79.         if(iStop){   
          80.             clearInterval(obj.timer);   
          81.             obj.timer = null;   
          82.             obj.iSpeed = 0;   
          83.             fnEnd.callback();   
          84.         }   
          85.     },30);   
          86. };   
          87.   
          88. window.onload = function(){   
          89.     var oBox = document.getElementById('cwpad_box')   
          90.     var aSpan = document.getElementsByTagName('tt');   
          91.     var aLi = document.getElementsByTagName('dd');   
          92.     var playtime = null;   
          93.     var iNow = 0;   
          94.     for(i=0;i<aSpan.length;i++){   
          95.         aSpan[i].index = i;   
          96.         aSpan[i].onclick = function(){   
          97.             for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});   
          98.             for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';   
          99.             this.className = 'hove';   
          100.             doMove(this.parentNode, {width:250});   
          101.             iNow = this.index;   
          102.         };   
          103.     }   
          104.     playtime = setInterval(tab,3500);   
          105.     oBox.onmouseover = function(){   
          106.         clearInterval(playtime);   
          107.     }   
          108.     oBox.onmouseout = function(){   
          109.         playtime = setInterval(tab,3500);   
          110.     }   
          111.     function tab(){   
          112.         iNow == aLi.length-1 ? iNow = 0 : iNow++;   
          113.         aSpan[iNow].onclick();   
          114.     }   
          115. };   
          116.  </script>    
           
           
           
            
             
           
          3.示例的HTML代碼
           
            
          1. <div id="cwpad_box">  
          2.     <ul>  
          3.         <dd  class="hove">  
          4.         <tt class="hove">網站設計及培訓</tt>  
          5.         <a ></a>  
          6.         </dd>  
          7.     </ul>  
          8. </div>  
           
           
          使用的是索凌網絡前面介紹過的"假圖"生成網站fakeimg.pl生成的"假圖"。
           
          這組代碼的一個顯著缺點是：不適合移動設備顯示。
          
			
          
			
			
          
				posted @ 2013-12-31 11:30 cangshi 閱讀(293) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				
          本文詳細介紹了如何查詢Wordpress某一篇文章作者的文章以及其權限，附帶介紹了Wordpress的用戶權限系統，指出了網上到處復制的某些文章存在的問題。
          一、查詢Wordpress某篇文章作者的全部文章或部分最新文章
          1.獲取當前文章作者的ID
          1. get_post($id)->post_author  
          這才是獲取Wordpress當前文章作者ID的正確方式，網上到處亂傳的那篇名叫“WordPress 通過文章ID獲取文章標題、內容等信息”的文章里的說法是錯誤的，雖然是錯誤的，但是卻被廣泛的Ctrl+C然后Ctrl+V，以訛傳訛，不可思議啊。
          另外get_post($id)->可以獲取與文章有關的許多信息，轉述如下：
          1. post_author：(整數）文章作者的編號    
          2. post_data：(字符）文章發表的日期和時間（YYYY-MM-DD HH-MM-SS)    
          3. post_data_gmt：（字符）文章發表的格林尼治標準時間（GMT） （YYYY-MM-DD HH-MM-SS)    
          4. post_content：（字符）文章內容    
          5. post_title：（字符）文章標題    
          6. post_category：（整數）文章類別的編號。注意：該值在WordPress 2.1之后的版本總為0。定義文章的類別時可使用 get_the_category()函數。    
          7. post_excerpt：（字符）文章摘要    
          8. post_status：(字符）文章狀態（publish|pending|draft|private|static|object|attachment|inherit|future）    
          9. comment_status：（字符）評論狀態（open|closed|registered_only）    
          10. ping_status：（字符）pingback/trackback狀態（open|closed）    
          11. post_password：(字符）文章密碼    
          12. post_name：(字符）文章的URL嵌套    
          13. to_ping：(字符）要引用的URL鏈接    
          14. pinged：（字符）引用過的鏈接    
          15. post_modified：(字符）文章最后修改時間（YYYY-MM-DD HH-MM-SS)    
          16. post_modified_gmt：(字符）文章最后修改GMT時間（YYYY-MM-DD HH-MM-SS)    
          17. post_parent：(整數）父級文章編號（供附件等）    
          18. guid：（字符）文章的一個鏈接。注意：不能將GUID作為永久鏈接（雖然在2.5之前的版本中它的確被當作永久鏈接），也不能將它作為文章的可用鏈接。GUID是一種獨有的標識符，只是目前恰巧成為文章的一個鏈接。    
          19. post_type：（字符）（日志 | 頁面 | 附件）    
          20. post_mime_type：(字符）Mime類型（供附件等）    
          21. comment_count：（整數）評論總數  
           
          2.Wordpress查詢文章作者的全部文章/部分文章的主要函數及輸出
          1. <?php   
          2. global $wpdb;   
          3. //$current_user->ID的話，查詢的就是當前登錄的用戶，所以是不對的;   
          4. $author_id = get_post($id)->post_author;   
          5. $sql =  "SELECT * FROM $wpdb->posts WHERE post_status IN ('publish','static') AND post_author = '$author_id' AND post_type ='post'LIMIT 5" ; //查詢作者文章數量   
          6. $posts= $wpdb->get_results($sql);   
          7.     foreach ($posts as $post) {   
          8.   
          9. echo'<li><a href="';the_permalink();echo '" rel="twipsy" title="';the_title();echo '">'. mb_strimwidth(get_the_title(), 0, 20,"...").'</a></li>';   
          10. }   
          11. ?>  
          只在無序列表ul里輸出一個列表，格式是截斷的標題加上鏈接，查詢了僅僅5篇，多了的話，沒什么用，這里僅僅是測試。
          二、Wordpress用戶角色與權限
          WordPress用戶角色或者Wordpress用戶權限說是從Wordpress2.0開始，逐漸的完善起來的，默認分以下幾種的：
          1. Super Admin超級管理員-針對Wordpress多站點環境，一般人很少接觸，所以很少有人提及；   
          2. Administrator管理員 -擁有特定的某一個站點的所有管理權限；   
          3. Editor編輯 -發表文章、編輯文章、并能編輯其他人的文章等等；   
          4. Author作者-能夠發布和編輯自己的文章；   
          5. Contributor貢獻者或者叫投稿者 -能夠撰寫和編輯自己的文章、但不能發布；   
          6. Subscriber訂閱者 -能夠查看評論/添加評論/查看文章，等等。  
           
          當新用戶在你的Wordpress站點上注冊了的時候（假設已經開啟注冊），他的默認角色可以在Wordpress后臺-->設置-->常規頁面設置。
          下面的用戶角色以及對應的權限能力等級對照表翻譯自Wordpress官方網站，所在頁面：
          http://codex.wordpress.org/Roles_and_Capabilities#Capabilities
           
             
          角色超級管理員管理員（單個站點）編輯作者貢獻者（投稿者）訂閱者
          manage_network是




          manage_sites是




          manage_network_users是




          manage_network_plugins是




          manage_network_themes是




          manage_network_options是




          unfiltered_html是




          角色超級管理員管理員（單個站點）編輯作者貢獻者（投稿者）訂閱者
          activate_plugins是是



          create_users是僅單個站點



          delete_plugins是是



          delete_themes是僅單個站點



          delete_users是是



          edit_files是是



          edit_plugins是僅單個站點



          edit_theme_options是是



          edit_themes是僅單個站點



          edit_users是僅單個站點



          export是是



          import是是



          角色超級管理員管理員（單個站點）編輯作者貢獻者（投稿者）訂閱者
          install_plugins是僅單個站點



          install_themes是僅單個站點



          list_users是是



          manage_options是是



          promote_users是是



          remove_users是是



          switch_themes是是



          update_core是僅單個站點



          update_plugins是僅單個站點



          update_themes是僅單個站點



          edit_dashboard是是



          角色超級管理員管理員（單個站點）編輯作者貢獻者（投稿者）訂閱者
          moderate_comments是是是


          manage_categories是是是


          manage_links是是是


          edit_others_posts是是是


          edit_pages是是是


          edit_others_pages是是是


          edit_published_pages是是是


          publish_pages是是是


          delete_pages是是是


          delete_others_pages是是是


          delete_published_pages是是是


          delete_others_posts是是是


          delete_private_posts是是是


          edit_private_posts是是是


          閱讀_private_posts是是是


          delete_private_pages是是是


          edit_private_pages是是是


          閱讀_private_pages是是是


          角色超級管理員管理員（單個站點）編輯作者貢獻者（投稿者）訂閱者
          edit_published_posts是是是是

          upload_files是是是是

          create_product是是是是

          publish_posts是是是是

          delete_published_posts是是是是

          edit_posts是是是是是
          delete_posts是是是是是
          閱讀是是是是是是
          角色超級管理員管理員（單個站點）編輯作者貢獻者（投稿者）訂閱者
           
          1.查詢Wordpress文章作者的角色
          在本文的開頭，我們已經知道如何獲取Wordpress某一篇文章的作者ID了，現在就來獲取其角色：
          1. $user_id=get_post($id)->post_author;   
          2. if(user_can($user_id,'install_plugins')){echo'管理員';}   
          3. elseif(user_can($user_id,'edit_others_posts')){echo'管理編輯';}elseif(user_can($user_id,'publish_posts')){echo'作者';}elseif(user_can($user_id,'delete_posts')){echo'貢獻者';}elseif(user_can($user_id,'read')){echo'訂閱者';}   
          管理員和編輯都能publish_posts，但是這里的判斷有先后順序，所以不用擔心這個問題，這個判斷是不錯的！
          WordPress某篇文章的作者是否有某權限的推薦函數：
          1. if ( author_can( $post, $capability ) ) {      
          2. // 如果文章 $post 的作者擁有 $capability 時執行的動作      
          3. }    
          這個相對簡單一些，可以直接去判斷，所以我再某個項目中最終使用了這個函數。參數中的$post可以是文章自身，也可以是文章ID，使用起來很方便！
          1. if(author_can($post->ID,'install_plugins'))   
          2. {echo'<span class="label label-warning role">管理員</span>';}elseif(author_can($post->ID,'edit_others_posts')){echo'管理編輯';}elseif(author_can($post->ID,'publish_posts')){echo'作者';}elseif(author_can($post->ID,'delete_posts')){echo'投稿者';}elseif(author_can($post->ID,'read')){echo'訂閱者';}  
          2.Wordpress當前登錄者的權限/權限等級
          這個函數是經常被使用的，使用的是權限等級，Wordpress官方已經聲明：從Wordpress3.0，已經廢棄了對這個權限等級制度的支持，所以，網上到處亂飛的復制文章，謹慎對待吧！
          1. <?php if(current_user_can('level_10')){ echo '管理員';}elseif(current_user_can('level_7')){ echo '管理編輯';}elseif(current_user_can('level_4')){ echo '作者';}elseif(current_user_can('level_4')){ echo '貢獻者';}elseif(current_user_can('level_0')){ echo '訂閱者';}   
          2.     ?>  
           
          
			
          
			
			
          
				posted @ 2013-12-05 10:49 cangshi 閱讀(2433) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				平時思想工作考慮問題倒是蠻周全的，我現在最大的難處就是經濟條件太差了，想做點什么事情總是縮手縮腳的，就好像是被束縛一樣。不過我感覺像現在這樣其實也蠻好和合適的。最無奈的事情是我接了別人的爛攤子導致我沒有為老大做出什么特殊的貢獻吧，既然現在要從頭開始了，那么一定要好好的規劃好一切，先把開頭做好一點，后面才會有下文要不然可以的話我的路線就到頭了。真正算起來的黃金時間確實就是那么一點點，如果說再不好好利用，那真的是對不起這個行業的理解力了。有時候可以就是這樣，百分之二十的時間確實可以產生百分之八十的效率這就看你會不會時間管理工作。把一些細節發揮到極致每天就可以非常的輕松的。我只不過是還沒有達到那個境界或者說沒有機會好好展示自己價值的平臺吧，有時候真的覺得英雄會不會是沒有用武之地了呢。不用擔心多一點耐心多點積累，事情總是會出現轉機的，繼續保持穩定的正常的工作面能力圖文混排就行了。老白最后肯定是會看好你的，因為現在心急已經沒有立足之地了。
			
          
			
			
          
				posted @ 2013-11-20 11:32 cangshi 閱讀(184) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				一轉眼，國慶一放假又有幾天的融合期間，所以一下子半個月很快就過去了我竟然一篇目信息都沒有發表，這著實是有點讓人難以置信的現象特別是想要討好老白的情況匯報下。這種現象是不能容忍的。本來對策我是想過要多對一模式又不能太多，關鍵詞太多，又分配不公，操作不好又被放到人為操作的可能性了，我目前的善哉只能是權宜之計，好讓我爭取一點點時間，希望這一個月里能夠有點睛之筆吧無論如何我都已經是我的大局了。一個鏈接也能夠發接力賽作用，老大對我有點不相信能力只是感嘆能夠證明我的時間監察部實在是太短了，跟一年兩年才更新換代的老白，三個月算什么呢？根本就是九牛一毛吧很不經意的一點信息說不定就事論事。沒有什么是絕對真理和公平競爭的，當前情況下做不起的事情實在是太多了，不管生效與否，先做了再說嘛畢竟這是最自然的方式了驗收后再做流行度其實倒是還可以的，沒有利用一下就被否定了，結果是很不甘心情愿。
			
          
			
			
          
				posted @ 2013-10-18 17:07 cangshi 閱讀(173) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	
		
          
			
			
			
          
				其實之前早就存在這樣一個問題，只是沒有時間去考慮是否會影響到整個網站結構的內部優化。忙里偷閑之中我無意找到了解決方案在網上找到的，程序是PHP的，在這里轉載分享一下，也希望在以后能夠利用方便一點。
          首先設置.htaccess文件，將動態調用的參數轉換為靜態的HTML的URL地址，例如將在post目錄下的文件，轉發到根目錄的wp- post.php文件中，加入的語句類似：RewriteRule ^post/([a-z0-9\-]+\.html)$  wp-post.php?$1$2
           
          然后修改wp-post.php文件，在文件的開頭加入以下PHP代碼：
           
          以下為引用的內容：
           
          ob_start();
           
          $qstring = isset($_SERVER["QUERY_STRING"]) ? $_SERVER["QUERY_STRING"] : "";
           
          define("HTML_FILE", $_SERVER['DOCUMENT_ROOT']."/post/".$qstring);
           
          if (file_exists(HTML_FILE))
           
          {
           
          $lcft = filemtime(HTML_FILE);
           
          if (($lcft + 3600) > time()) //判斷上次生成HTML文件是否超過1小時，若沒有才直接輸出文件內容
           
          {
           
          echo(file_get_contents(HTML_FILE));
           
          exit(0);
           
          }
           
          }
           
          之后是現有的PHP的代碼，然后在當前代碼的最后面加上如下的PHP代碼：
           
          以下為引用的內容：
           
          define("HTMLMETA","");
           
          $buffer = ob_get_flush();
           
          $fp = fopen(HTML_FILE, "w");
           
          if ($fp)
           
          {
           
          fwrite($fp, $buffer.HTMLMETA);
           
          fclose($fp);
           
          }
           
          好了，然后查看你的靜態HTML頁面，如果頁面尾部出現了注釋行，說明已經成功的創建了靜態HTML文件。
           
          這個方法的一個應用就是我先前寫的那個“WordPress年度博客統計插件”，這個統計插件由于查詢十多次數據庫，很多人訪問的時候會有很大性能問題，使用我介紹的這種動態生成HTML技術后，一天就查詢一次，生成一次統計排行，完美解決了查詢數據庫的性能問題。
          
			
          
			
			
          
				posted @ 2013-09-27 11:14 cangshi 閱讀(175) | 評論 (0) | 編輯 收藏
			
          
		
          
		
          
	

				

          

          




    
          
        
	




主站蜘蛛池模板：
阿坝|
新乐市|
凤台县|
交城县|
博乐市|
永修县|
龙山县|
石嘴山市|
禄劝|
景谷|
麻江县|
江油市|
宽甸|
淮滨县|
金溪县|
行唐县|
六枝特区|
固原市|
郧西县|
龙游县|
屯留县|
武汉市|
武清区|
崇阳县|
祁连县|
闸北区|
灵山县|
和顺县|
康平县|
调兵山市|
桂东县|
佛坪县|
横山县|
平利县|
曲靖市|
红安县|
宜阳县|
闸北区|
庆城县|
鹤山市|
绥化市|