ShipPress

使用教學

用聊天的方式更換整個網站的字型

字型對網站氛圍的影響不亞於色彩。原本搭配優雅襯線字型的設計，可能不適合現代感的商店；而太小的內文在手機上也很難閱讀。在 WordPress 裡，你得打開 Site Editor、找到 Styles、加入字型檔，再一個個手動設定每個元素。在 ShipPress 裡，你只要在聊天中說出字型名稱，AI 就會一次幫你改好整個網站。在這個教學中，我會把 Pier 7 Coffee 從經典的襯線字型換成粗體、現代的無襯線字型，並讓內文更容易閱讀。

  1. 先看看目前的字型

    在 ShipPress 中打開你的網站，把預覽畫面捲動到同時有標題和一般文字的區塊。在 Pier 7 Coffee 上，標題用的是細細的經典襯線字型，段落文字則偏小。先想好你要改什麼：標題、內文，或兩者都改，以及文字是否要放大。

    更換前的 Pier 7 Coffee 首頁：標題 PIER 7 COFFEE 和標題文字 Buy few lots. Know who grew them. 使用細襯線字型，下方是一小段文字
    更換前：標題是細襯線字型，內文偏小。

  2. 用一則訊息說出字型

    點一下左下角的聊天框，描述你想要的改變。請把以下內容寫在同一則訊息裡：

    • 標題字型，這裡是「Jost，粗體」。
    • 內文字型與大小，這裡是「Inter，稍微大一點、更容易閱讀」。
    • 字型的來源。WordPress 內建的 Twenty Twenty-Four 佈景主題已經在你的網站上附帶了 Jost 和 Inter，所以我請 AI 使用這些字型檔，而不是 Google Fonts。這樣你的網站就會從自己的主機載入字型。
    • 哪些維持不變：「顏色、照片和版面維持不變」。
    • 套用範圍：「每個頁面、選單和頁尾」。

    按下 Enter 送出。

    ShipPress 的聊天框，訊息內容為：更換整個網站的字型。標題：Jost，粗體。內文：Inter，稍微大一點、更容易閱讀。這兩款字型都包含在這個網站已安裝的 WordPress Twenty Twenty-Four 佈景主題中，所以請使用這些字型檔（不要使用 Google Fonts）。顏色、照片和版面維持不變，並確保每個頁面、選單和頁尾都使用新字型。
    一則訊息：標題字型、內文字型、大小，以及要保留的部分。

  3. 讓 AI 開始工作

    AI 會分幾個步驟修改網站的字型設定：先在佈景主題的字型設定中指定標題和內文這兩種字型，再更新那些自行設定字型的地方，例如網站標題、選單和頁尾。你可以在聊天中看到每個步驟。Pier 7 Coffee 這次大約花了兩分半鐘。

    聊天中的訊息，下方顯示 Worked · 6 steps，表示 AI 仍在處理中
    AI 工作時，步驟會顯示在聊天中。

  4. 看看改了什麼

    完成後，AI 會總結這次的變更：標題（包括網站標題和手機選單）現在是 Jost 粗體；內文、選單和頁尾連結使用 Inter；內文從 15px 變成 17px，較小的說明文字從 14px 變成 16px；顏色、照片和版面都沒有改變。下方有一些按鈕，提供可能的下一步，例如 Make body text even bigger。

    AI 的總結，包含 Fonts、Reading size 和 Unchanged 的說明，以及 See what changed、Make body text even bigger、Add a contact form 和 Undo this change 等按鈕
    總結中列出了新的字型與大小。

  5. 比較更換前後

    再看一次頁面上的同一個區塊。標題現在是粗體、現代的無襯線字型，疊在照片上也清楚易讀；段落文字變大了，行與行之間的間距也更寬。照片、顏色和版面都完全沒動，只有文字樣式改變了。

    同一個標題和段落的並排比較：更換前是細襯線字型搭配小字，更換後是粗體 Jost 搭配較大的 Inter 文字
    同樣的文字，新的字型：粗體 Jost 標題和較大的 Inter 內文。
    更換後的 ShipPress：左側是聊天總結，右側是 Pier 7 Coffee 首頁，PIER 7 COFFEE 和標題都使用粗體 Jost，標題與段落已被標示
    整個首頁現在都使用新字型。

  6. 檢查其他頁面，以及 Phone 版面

    字型的變更應該套用到每一個頁面，而不只是首頁。從預覽畫面左上角的頁面清單打開幾個其他頁面。在 Bar Menu 頁面上，頁面標題、各區塊標題、飲品名稱和價格都使用了新字型。

    接著點一下預覽畫面右上角的 Phone。較大的內文在小螢幕上最重要，所以請確認標題不會斷成太多行，而且文字讀起來很舒服。

    更換後的 Bar Menu 頁面：標題 BAR MENU、區塊 AT THE BAR，以及附價格的飲品，全部都使用新字型
    Bar Menu 頁面也使用了新字型。
    Phone 預覽中的 Bar Menu 頁面：BAR MENU 使用粗體 Jost，營業時間和飲品清單使用較大的 Inter 文字
    同一個頁面在 Phone 上的樣子。

  7. 在 Colors and fonts 裡手動細部調整

    AI 修改的是真正的 WordPress 樣式設定，所以你也可以自己調整。點一下預覽畫面上方工具列中的 Colors and fonts，就會在 WordPress Site Editor 中打開佈景主題的 Styles。點選 Typography：字型清單裡現在會出現 Heading (Jost) 和 Body (Inter)。

    在 Elements 底下點選 Headings，就能看到標題字型，以及它的 Line height、字距和 Letter case。在這裡改了什麼之後，點 Save，或是繼續在聊天中提出要求，例如「讓標題不要那麼粗一點」。

    Colors and fonts 在 WordPress Site Editor 中開啟：Styles、Typography，其中 Body (Inter)、Heading (Jost)、Japanese (Noto Serif JP) 和 Traditional Chinese (Noto Serif TC) 字型已被標示
    Typography 列出網站使用的字型。
    Site Editor 中的 Styles、Headings：Font 選單設為 Heading (Jost)，下方有 Appearance、Line height 1.15 和 Letter case
    Headings：字型、粗細、行高和間距。

  8. 不喜歡嗎？可以還原

    AI 的每一次變更都會儲存一個還原點。點一下上方列的 History：字型的變更就在那裡，並附有時間和大小。如果你比較喜歡原本的字型，請在它前一個步驟點 Restore；或是在變更完成後，直接點 AI 回覆下方的 Undo this change。

    從 History 打開的還原點：Change the fonts on the whole site，Nov 2, 08:39 PM，旁邊有 Restore 按鈕
    字型的變更是一個還原點。

  9. 小技巧

    • 兩種字型就夠了：一種用於標題，一種用於內文。
    • 最容易使用的字型，是 WordPress 預設佈景主題內建的字型，因為它們已經在你的網站上了。Twenty Twenty-Four 有 Jost、Inter、Instrument Sans 和 Cardo；Twenty Twenty-Five 有 Manrope、Literata、Fira Sans、Vollkorn 等等。更換之後，請保留安裝這個佈景主題。
    • 要求內文「稍微大一點」就好：16 到 18px 在手機上讀起來很舒適。
    • 說清楚哪些不能改變（顏色、照片、版面），這樣 AI 就只會動字型。
    • 在點 Go live 之前，先檢查幾個頁面和 Phone 版面。