• Work Team


    奕捷創意(股)公司 EJ-Idea Inc.

    奕捷創意(股)公司 EJ-Idea Inc. 專精 iPhone, iPad , Android 行動平板應用程式開發,亦與多家出版社及 e-Learning 廠商與廣告公司合作,開發出許多手機與平板應用,互動式電子童書,平面電子型錄等等。2011 年開始結合 WordPress 平台創作出更多精采作品!
    了解更多……

  • 版權宣告


    網摘、引用、連結,不轉載

    Creative Commons License
    姓名標示您必須保留原作姓名標示
    非商業性您不得為商業使用本著作
    禁止改作您不得改變或改作本著作

  • 最新評論

  • WordPress 主題製作學習筆記:幫你的主題加上「自...
    WordPress 主題製作學習筆記

    主題製作學習筆記

     

    三月底的時候,我曾經寫過一篇 WordPress 主題製作的學前準備文章,隨著本站剛上線啟用的 SO Personal 主題,現在就跟大家分享解釋我是怎麼將主題分頁的功能整合進主題裏的。

    要說明的一點就是,我一開始是在對岸朋友知更鳥的博客裏看到這項教學,後來還陸續在其它對岸朋友們的博客裏看到,但我自己有關注的台灣部落客朋友們,似乎還沒人寫過(還是有人寫過呢?),所以我就在此分享這個技巧了。

    首先,請各位拿出你們主題的函數檔案 functions.php,將以下代碼加入檔案中。如果你們的主題沒有這個檔案,代表主題不支援後台新增模組功能(Widget),請新增函數檔案讓主題更靈活喔!

     

    <?php
    // 實現自帶分頁功能
        function kriesi_pagination($query_string){
        global $posts_per_page, $paged;
        $my_query = new WP_Query($query_string ."&posts_per_page=-1");
        $total_posts = $my_query->post_count;
        if(empty($paged))$paged = 1;
        $prev = $paged - 1;
        $next = $paged + 1;
        $range = 10; // 編輯這裡的數字,這是前台分頁顯示的頁數
        $showitems = ($range * 2)+1;
     
        $pages = ceil($total_posts/$posts_per_page);
        if(1 != $pages){
        echo "
    <div class='pagination'>";
        echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
        echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一頁</a>":"";
     
        for ($i=1; $i <= $pages; $i++){
        if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
        echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
        }
        }
     
        echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一頁</a>" :"";
        echo ($paged < $pages-1 &&  $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最後</a>":"";
        echo "</div>
     
    \n";
        }
        }
    ?>

     

    請注意,上面代碼裏我有加註釋,你可以編輯該行代碼裏的數字,來決定你要在前台顯示多少分頁。$showitems = ($range * 2)+1; 代表的是頁數顯示的方法,也就是,你如果將顯示頁數設為2,要繼續往下翻看,就是 2+1=3;不知道我這樣解釋大家聽得懂嗎?

    那麼,我們該如何在前台調用這個分頁功能呢?請打開你們主題的 index.php 檔案,將原本的代碼

     

    <div class="navigation">
    <div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
    <div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
    </div>

     

    替換成以下代碼:

     

    	<?php kriesi_pagination($query_string); ?>

     

    有沒有發現新代碼與加入 functions.php 的代碼之間的關聯性呢?沒錯,就是 class 值,我們也要利用這個 class 來設定 CSS 樣式以達到前台美觀效果喔!

    現在再請各位打開你們的樣式表 style.css 編輯,這裡僅提供我的樣式給大家做個參考,你們可以針對自己主題的整體樣式去做設置。以下是我的樣式代碼:

     

    /*  自帶文章分頁導航  */
    .pagination{
    		float: none;
    		line-height:23px;
    		text-align: center;
    }
    .pagination span, .pagination a{
    		font-family: inherit;
    		font-style: inherit;
    		font-weight: inherit;
    		font-size:12px;
    		margin: 2px 6px 2px 0;
    		background:#fff;
    		border:1px solid #e5e5e5;
    		border-radius: 5px;
    		-moz-border-radius: 5px;
    		-webkit-border-radius: 5px;
    		color:#2F8CAB;
    		padding:2px 5px 2px 5px;
    		text-decoration:none;
    		float:center;
    }
    .pagination a:hover{
    		background: #8391A7;
    		border:1px solid #fff;
    		color:#fff;
    }
    .pagination .current{
    		background: #21BEDE;
    		border:1px solid #fff;
    		color:#fff;
    		font-family: inherit;
    		font-style: inherit;
    		font-weight: inherit;
    		font-size:12px;
    		padding:2px 5px 2px 5px;
    }

     

    大家應該有發現我在樣式裏運用了 CSS3 的圓角效果 border-radius,那個 -moz-border-radius 代表的是 Firefox 火狐瀏覽器的圓角效果,-webkit-border-radius 則代表在 Safari 和 Chrome 瀏覽器的效果,當然,萬惡的 IE 還是不支援這項效果,請大家鄙視它吧!

     

    OK, 以上就是這次的學習筆記,如果大家有什麼問題,歡迎在本文留言 :lol:

    話說我還真的不知道怎麼寫教學文哩!每次筆觸都好生硬 :oops:

     

     

    文by覺非/WordPress 主題製作學習筆記系列文章.之二

    <========簽名檔分隔線開始=========>

     飛翔於文字國裏的蝴蝶,我是愛寫文的女子,不要看我的人,請你看看我的文,那裡面全是我的心.和我想對你說的話……

     StartOver.回。到。原。點 http://blogs.carrielis.com

    <========簽名檔分隔線結束=========>

    【歷史上的今天】
    相關文章外掛 for WordPress, Blogger...
    本文目前有 16 則回應
    1. 可以請問一下,覺非大的文章分類那一行是甚麼功能?翻了教學文還是看不出所以然來!

    2. 我想你打錯了。
      你在function.php已經echo了,在輸出頁便不需要再打上。
      不然便會變成這樣了。

    3. 最近也還在做新版,很多地方還沒有頭緒~~

    1 Trackbacks/Pingbacks