WordPress 版面「Xiang Hua Pu」

Theme: Xiang Hua Pu - Index

名稱:Xiang Hua Pu
作者:Wanico
網站:Lab Crocodile

2014.02.16 Infinite Scroll 更新 js 碼以及增加 css。

這次不似前兩個版面「Crochimera」和「Whatever Lab」一般,變回比較像一般部落格的排版布局。由於使用相當強大的前端框架,減少了寫 CSS 的時間,因此製作的速度相對較快;花最多時間的反而是在瀑布流和無限捲動的部分,老話一句「自學者又自找麻煩了。」總之下面大略提一下這次的製作重點。

Bootstrap 前端框架

猜測不少專職網業開發的人對 Bootstrap 應該不陌生,這邊以前完全沒聽過這強大的玩意兒;它不僅 CSS 從重設到各標籤樣式一次到位,連自適應 (responsive) 都寫好了,因此如何順利導入 WordPress 版面就是關鍵。最初找到一個已經寫好的版面「WP-Bootstrap」,不過應該有人跟這邊一樣不擅長改他人寫好的版面;總之東看西看最後用的是在 Github 找到的「WordPress Bootstrap 3 Starter Theme」,直接取自己需要的部分。選單整合則是使用「wp-bootstrap-navwalker」。順帶一提,這邊 Bootstrap 用的是 3.0 版,對英語有障礙的可以參考有中文化的 2.0 版「Bootstrap V2中文教學」、唯一要注意的是兩個版本之間有不少差異。

jQuery Masonry 瀑布流布局

瀑布流布局的大宗網站非 Pinterest 莫屬,而這個效果的最有名插件應該歸 jQuery Masonry。老實說這是最難寫的,因為這邊在這個部分遇到最多困難、也花最多時間,主要原因是和 Bootstrap 衝突,導致文章區塊寬度若以 CSS 或 columnWidth 定義無法符合自適應需求。原本想跳槽使用 Salvattore,結果還是失敗。最後是在一個討論串中找到解法。簡單來說,成功導入 Masonry 後,將各文章區塊的 class 寬度定義為 col-lg-4 col-md-6 col-sm-6 col-xs-12,即可成功與 Bootstrap 整合達到自適應設計效果。

Infinite Scroll 無限捲動

無限捲動相信也是不陌生的功能,開發團隊也有製作 WordPress 專用的外掛、但不是給 Masonry 用的。這中間為了使用 Jetpack for WordPress 中直接提供的此功能、折騰了好久,後來還是放棄而選擇自行導入。總之,重點是--Masonry 整合無限捲動要使用 appended 的方法,普遍教學文的導入方式無法達到效果,請參考 Masonry 網站的說明。以下是這邊整合 jQuery Masonry 和 Infinite Scroll 的 js 碼:


$(document).ready(function () {
//jQuery Masonry
    var $container = $('.masonry');

    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '.post-box',
            columnWidth: '.post-box',
            transitionDuration: 0,
        });
    });
 //Infinite Scroll
     $container.infinitescroll({
      navSelector  : '.pagination',    // selector for the paged navigation
      nextSelector : '.pagination a:first',  // selector for the NEXT link (to page 2)
      itemSelector : '.post-box',     // selector for all items you'll retrieve
      loading: {
        finishedMsg: 'No more pages to load.',
        img: 'Loading 的圖片網址'
        }
      },
      // trigger Masonry as a callback
      function( newElements ) {
        // hide new items while they are loading
        var $newElems = $( newElements ).css({ opacity: 0 });
        // ensure that images load before adding to masonry layout
        $newElems.imagesLoaded(function(){
          // show elems now they're ready
          $newElems.animate({ opacity: 1 });
          $container.masonry( 'appended', $newElems, true );
        });
      });
//end
});

“Loading” 訊息區塊的 css:

/* Infinite Scroll loader */
#infscr-loading { 
  text-align: center;
  z-index: 100;
  position: fixed;
  left: 45%;
  bottom: 40px;
  width: 200px;
  padding: 10px;
  background: #e41e26; 
  opacity: 0.8;
  color: #FFF;
  -webkit-border-radius: 10px;
     -moz-border-radius: 10px;
          border-radius: 10px;
}

結語

原本想做出和 WordPress 官方佈景主題「Twenty Fourteen」一模一樣的焦點文章 (Featured Post),但是沒有完全成功,所以就不多說廢話了、希望隨著時間推移會有更多的相關教學。總之,這次做版面數度有想要放棄的狀況,這時候轉移注意力做別的事情再回來、或是隔一天再繼續,往往可以有不錯的效果,最重要的還是不要輕易放棄、轉個彎或許可以找到出口!

其他參考文章:
My Social Media Blog:JetPack on localhost without connection!
A Developer’s Guide:The WordPress Theme Customizer

分類:網站網誌