[WP主題] 2017迂迴曲折

使用期間:2017.08.08-2018.08.20

覺著舊一個theme差不多看得膩了,差不多是時候該來換一個新的,便挖了一些時間出來做做版面。

在開始製作之前,對新版面已有一些想法。例如:我這次要用Typekit思源宋體、要玩玩flexbox的排版,低版本IE什麼的就不管他了,才沒空去顧他←……對於新版面的外觀,其實也都有些構思,也因此本以為這個新版面該當手到擒來,花不了多少時間的。然而按照構想排出了layout,卻是彆扭的很;中間一波三折,一度打消原本的計畫,想排個和預想不同的版型試試是否順眼些。結果當然是失敗的。最後還是使用了預想的版型,並且作了較大幅度的調整,總算才讓自己吃得下去,至於下次麼,就看哪天又會看膩了目前的版面吧(欸)

使用CSS及JS

使用素材

Flexbox和其他CSS3樣式

前幾月(如此後知後覺)偶然知道了Flexbox這個CSS3的新樣式,當時驚為天人。由於對舊版瀏覽器的支援度不高,一直沒什麼機會實作(要為IE8、9多寫一種樣式?那乾脆寫一種通用的就好←);到了這次改版,總是自己耍廚的地方,不必考慮太多舊版瀏覽器的問題──實際上目前這個版面在舊版IE是破的,就是懶得去修──,那就不如來玩玩吧。

參考文章

按著教學摸Flexbox都還算是順利,只是使用了Flexbox後便不能使用position的元素了,在製作sidebar時有些迷惘;後來是參考這邊的解法:

除了Flexbox,這次也試著使用了一些以前沒用過的新樣式──比如vh和vw等等,和從前的寫法比起真的是方便好多──;試作幾乎很少有機會碰到的CSS animate在某個頁面1

Adobe Typekit

在此之前,除了贊助「金萱,新時代中文字型,培育新鮮台灣文字風景」時拿到justfont一年VIP後,有使用一陣子他們家的雲端字型外,就只有用過google font的服務。思源宋體問世以後,等著google font哪天會上思源宋體,卻總是等不著。就在這時,機緣巧合下,竟發現Typekit就有思源宋體&&他們現在還有免費2的雲端字型的服務(仍是後知後覺)!

使用Typekit的字型,除了在名稱上和部分較早的教學略有不同外,基本上都還是差不多的。登入Typekit後,新增一個「Kit」,輸入Kit的名稱和網域等等資訊並把JS嵌入網站,再將想要使用的字型加入該Kit中,就可以透過CSS的font-family來設定字型了。

塗鴉整理

從蠻久以前就想把原本按著年份分著好幾篇的塗鴉全數放在一頁裡,透過標籤過濾想要顯示的分類。這次下定決心,爬了爬各類JS插件,相中了Isotope,卻不知道後面又是波折頓挫,繞了一大圈,差點卡在九彎十八拐裡翻不了身。

Isotope X Magnific Popup的新滋味

導入Isotope後,最先碰到的問題是他和Highslide的相容性。這裡在這次的改版之前,都是使用Highslide JS作為圖片瀏覽的工具,然而將Isotope和Highslide結合,配合Highslide可使用鍵盤左右鍵切換圖片的Gallery(image groups),過濾分類卻碰到以下問題:

點了縮圖放大圖片後,切換Gallery中的前後圖片還是會顯示被Isotope隱藏的區塊(display:none)中的圖。試著透過JS判斷區塊是否隱藏,移除或增加onclick來避免或重設Highslide的動作:

實際測試,移掉onclick後切換圖片是不會顯示被隱藏的大圖了,但中間若有被隱藏元素時,無法跳到下一張正常顯示圖片,也無法給個別的onclick的值(比如captionId)。再三考慮,決定放棄Highslide,改用Magnific Popup來瀏覽圖片;雖然無法像Highslide一樣,在顯示裝置過小的情況下顯示原始尺寸的圖片,不過高度不會受到裝置的限制,瀏覽起來還不算太不方便,也是沒辦法中的辦法了。

過濾分類中,如果兩個分類裡的物件數量差距太多,Isotope跑起來其實都不是那麼好看;總數量太多,還有點小卡;所以現在的塗鴉不是照當初預定的全放在一頁,而是分了好幾篇──也是考量到圖片的流量限制──當然這是後日談。

WP頁面中的PHP code使用

塗鴉的整理,一開始只想到用array去抓,後來靈機一動,整理成CSV或許更好;稍作確認,PHP讀CSV沒有問題,就決定用CSV來記錄。

這裡要特別筆記一下,使用Excel存出來的CSV是ANSI,要改成UTF-8需要另外轉碼,而且儲存格式如果是CSV,下一次開必須要用匯入才能得到分了欄位的表格;因為實在很麻煩,所以我後來直接使用Google試算表紀錄,然後下載CSV下來的方式。

WP的post或page裡使用PHP code是可行的,有現成的插件可以用,或是可以類似這邊的方式:

這邊兩種方法都試了試,跑簡單的code沒什麼問題;中間經過幾次蠢蠢的error_log瞬間把空間塞滿玩爆測試機的失誤,總算有讀到想讀的檔案,然而要讀入一二百行的資料,卻是頗頗的卡。結果還是選擇先輸出了html後再貼進post的原始的方法,短期內應該不會再動這塊了。←

  1. 走路的範例是來自這裡:Walk cycle CSS3 animation – CodePen
  2. 目前Typekit的免費雲端字型服務有每月25,000次的瀏覽次數限制、只能加入一個網域且只能使用兩種字型。