網站改版,換個風格,WordPress 主題轉換紀錄

用了兩年多的 Astra 佈景主題,自己都看膩了,想要換換風格,轉換心情。

目標是找一個和現在的佈局差不多樣子,左邊是主要文章內容,有邊是 Sidebar,然後就是好看順眼。

看來看去都很漂亮,但就是會有某個小地方無法接受,最後終於看到 WP Minimalist,沒什麼可以挑剔的明顯地方。

WP Minimalist 主題轉換

當然是先用本機開發環境測試,這一次使用 podman 取代 Docker 建立本機測試環境,使用 All-in-One WP Migration 外掛將正式網站備份到本機。

任何大改動之前,一點要先測試。

既然是測試環境,新主題直接給它啟用下去,不用怕。

果然有點怪怪的,開始調整。

主題選項

佈景主題就是這樣子,先習慣第一個主題摸熟之後,設定第二個主題自然駕輕就熟,經過兩年的 Astra 調校經驗,改成 WP Minimalist 非常簡單,用的是免費版本,也沒多少選項可設定。

#1 Logo & Site Icon

這個主題把 Logo 變很大, 調整寬度,讓 Logo 顯示小一點。

#2 Hide Tagline

架設網站的起點,隱藏。

#3 Enable lazy load images

喔,有這個功能,開啟來看看,優化網站速度。

#4 Social Icon Link

為了美觀,開啟左上角的社群圖示,真的就只是圖示放好看的 😂。

#5 Social Share

不錯耶,主題本身就有社群分享的功能,不用另外裝外掛 👍,但主要也是為了好看。

#6 Sidebar Layouts

習慣每個頁面都要有 Sidebar。

#7 Enable Sticky Sidebar

從此 Sidebar 不再空白。

就這樣,免費版本能客製的部分比較少,但已足夠,稍微加一點 CSS 還可以美化一下。

美化 header

h2 style sample

將原本在 Astra 中使用的複製過來:

.site-main h2 {
    margin: 2em 0;
    padding: 1.2em;
    color: #fff;
    background-color: #474747;
    text-shadow: #fff 0 0 1px;
    border-left: 10px solid #FFA92B;
}

.site-main h3 {
    margin: 2em 0;
    padding: 1em;
    color: white;
    background-color: #676767;
    text-shadow: rgba(0, 0, 0, .2) 2px 6px 5px, rgba(255, 255, 255, .4) 0 -4px 30px;
    border-left: 4px solid #FFC94F;
}

.site-main h4 {
    padding: 0.5em 1em 0.5em 1em;
    font-weight:bold;
    margin: 3em 0 1em;
    border-bottom: 4px solid #676767;
}

顯示文章最近更新日期

原本文章顯示的日期是發布日期,想顯示最近更新日期。

原本的文章結構中就已經放了最近修改日期,使用 CSS 顯示就可以。

time.updated::before {
    content: 'last modified '; //加上說明文字
}

.updated:not(.published) { 
    display: inline; //顯示最新更新日期
}

time.published {
    display: none; //隱藏發布日期
}

圖片加上陰影

稍微的陰影就好,有些人不喜歡陰影。

img {
    width:auto; //原本的顯示寬度為 100%,太寬了。
}

.site-main img{
    border:1px solid #ccc;
    box-shadow: 8px 8px 7px rgba(0, 0, 0, 0.7); // 87 最佳設定
}

🏁 大功告成 🏁

Astra vs WP Minimalist

Astra 對比 WP Minimalist 有個很大的優勢就是,程式客製化,利用 Custom Layout – Hooks ,可以在網頁中的任何地方安插功能程式。

參考 (How to Use Hooks in Custom Layout Module of Astra Pro? (wpastra.com)) 說明與 (Astra Theme Visual Hooks – Just another Astra Developer Docs site (wpastra.com)),可以利用這些 Hooks 來安插共用的網頁元件,廣告或是網頁追蹤碼,或是客製畫面,設計網頁佈局等等。只要熟悉這個系統,基本上就可以取代一般在網頁上安插,或新增功能程式碼的外掛。

Astra 的外觀比較中規中矩,就是部落格網站的樣子,有一些預設的佈局,專業版本可以調整的項目非常多,但要調整到自己滿意很花時間。

WP Minimalist 就是好看,免費版本僅有少數外觀選項可以調整,就很不錯看了,缺點就是也沒什麼讓你可以細部調整,除非取得專業版。

要好看,又不想和其他網站一模一樣,學一些 PHP 程式設計和 CSS 語法,對於佈景主題還是有一些幫助。

最後

學了一次改版經驗,為了下次可能的改版,這一次要注意:

  1. 不要客製的太深入,細節愈多,轉換愈不容易。
  2. 寫在主題中的 CSS 不會跟著轉換,應該使用外掛來寫 CSS。
  3. 不要直接在正式網站轉換,但直接來好像也沒那麼恐怖,(後果難以評估 😂)。
  4. 所有文章和頁面都應該檢查看看,想像和實際總是有差異 😆。

順便開啟 Google Adsense,了解到底有多難賺,測試會降低多少參與時間長度(Average engagement time)

下圖: 改版前後比對