WordPress 版面「Lab Crocodile」

Theme: Lab Crocodile - Index

名稱:Lab Crocodile
作者:Wanico
網站:Lab Crocodile

這次的版面不僅在首頁使用以前曾經玩過的視差滾動外掛「skrollr」、CSS 方面由以往的「Reset.css」改用「Normalize.css」外,也導入了「Font Awesome」;另外最重要的是暫時揮別 Bootstrap,再度體驗程式碼全部自己手刻的新鮮感。

Theme: Lab Crocodile - Blog Theme: Lab Crocodile - Single

在開新視窗的連結旁標註 Font Awesome 圖示

上圖及這篇文章裡的部分連結旁都有一個「被方框圍住的箭頭」的圖示,該圖示通常是用在非同網域頁面的外部連結,只是這邊受到小彌桑的啟發、用在開新視窗的超連結上;原程式碼取自 Github 的 “Show icon after external link using Font Awesome“,然經調整後多次測試,發現若是圖片有做開新視窗的超連結、在畫面寬度調整時會碰到多出一行的問題,後來是以寫 jQuery :has() 的方式解決,以下是個人修改後的程式碼。

CSS:

a[target="_blank"]:after {
  content: "\f08e";
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  font-size: 75%;
  display: inline-block;
  text-decoration: none;
  padding-left: 3px;
}
a.no_link_icon:after {
  content: none !important;
  padding-left: 0;
}

jQuery:

$('a:has(img)').each(function() {
    if (this.href.indexOf('?') < 0) {
          $(this).addClass('no_link_icon');
    }
});

jQuery UI Tooltip 無法消失怎麼辦?

不同於上一個版面,這次更廣泛地使用 jQuery UI 的「Tooltip」,但是以最一般的方式導入 Tooltip 會產生一個問題,就是若連結區塊的位置 (position) 是固定的 (fixed),Tooltip 會抓不到位置而顯示在他處;這邊找到的解法是應用 Tooltip 追蹤滑鼠這個選項,即加入 track: true

然而接下來又碰到另外一個問題,就是應用 HighSlide JS 的圖片上出現的 Tooltip 在取消放大圖片後不會消失,這對 JS 初學者來說真是惡夢!因為東翻西找過後還是找不到答案,所以後來用了一個折衷的方式,就是 Tooltip 會在點擊滑鼠左鍵時消失、程式碼如下,如果有更好的解決請不吝告訴我。

jQuery:

$( document ).on('click', function () {
    $('div.ui-tooltip').hide();
});

同場加映:對 Infinite Scroll 應用方面的反思

這邊從 2014 年開始製作的 WordPress 佈景主題全部都有使用「Infinite Scroll」 無限捲動效果,雖然這是時下最流行的效果、幾乎各大社群網站都有使用,但在開發這個版面時才意識到一個狀況,就是讀者瀏覽有使用無限捲動效果的文章列表時,若是點進文章再按「上一頁」回來、並無法回到原本瀏覽的位置;換句話說,讀者必須重新拖曳捲軸才能找到原本在閱讀的文章。

因此,這次開發版面得到的啟發是 Infinite Scroll 較適用於「一個頁面可以顯示所有內容」的網頁;如 Facebook 或 Pinterest 等有運用無限捲動的網站,文章的內容幾乎可以在一個頁面內讀完、或是在同一頁跳出小視窗顯示。雖說這邊開發個人用版面一直都是任意而為,但仔細想想增進讀者使用經驗也是相當重要的。

結語

自上次製作版面又經過一年,這一年間發生不少事、新版面的構思也隨之經歷不少變化,最後終於在這邊將一切放下以後製作完成,也算是了一樁心願。雖說不斷調整網頁以適應不同的瀏覽器是件苦差事,特別是首頁既運用視差滾動又要符合自適應、調整起來真是折煞人,但能好好地規劃製作網站是件很快樂的事!真的要珍惜能做自己喜歡的事的時光。

其他參考文章及使用工具:
坐井觀天:[WP主題] 2015天緣湊合
免費資源網路社群:Google Fonts 推出「思源黑體」中文網頁字型,改善網頁文字顯示效果
MUUUUU.ORG:縦長のwebデザインギャラリー・サイトリンク集(日文)
Patternify:A CSS Pattern Generator(英文)

分類:網站網誌

  • Niuzi

    Hi 無意間逛到你的blog 覺得版型真的酷斃了!! 雖然一開始我有點迷失XDD
    膩害!

    • Hello,歡迎歡迎!老實說剛做完這版型自己看的時候也有點迷失,下次改進XDD 不過謝謝你的讚美!