使用教學

用對話編輯頁尾

頁尾位於每一頁的最下方,訪客常會在這裡找地址、營業時間、連結和社群帳號。在 WordPress 裡,你得開啟網站編輯器,找到頁尾範本區塊,再一個一個重新排列區塊。在 ShipPress 裡,你只要在對話中描述頁尾該有什麼,AI 就會幫你修改整個網站的頁尾。在這個教學中,我會更新 Pier 7 Coffee 的頁尾。

  1. 先看看目前的頁尾

    在 ShipPress 中開啟你的網站,並把預覽畫面一路捲到最下方。想一想你要改哪些地方。Pier 7 Coffee 的頁尾有店名、地址、營業時間,還有一長串共十一個連結的 Explore 清單,但沒有簡短的店家介紹、沒有社群連結,也沒有能快速回到頁面頂端的方式。

    修改前的 Pier 7 Coffee 頁尾:店名、地址與聯絡方式、吧台與烘豆的營業時間,以及一長串 Explore 清單。
    修改前:一長串連結,沒有社群連結。
  2. 用一則訊息描述新的頁尾

    點選 + New Worker 開啟新的對話,並在一則訊息中列出所有要修改的地方。要說明這是針對每一頁,並請它保留原有的顏色和字型,其他地方都不要動。我送出的訊息是:

    請更新每一頁的頁尾:在 PIER 7 COFFEE 標誌下方加上一行標語「Roasted on the harbor, poured at the bar.」,新增一個 Follow us 欄位,放上 Instagram 和 Facebook 的文字連結(連結先用 # 代替),把很長的 Explore 清單拆成兩個比較短的欄位,並在最下方版權文字那一行的右側加上「Back to top」連結。顏色和字型維持不變,其他地方都不要改。
    ShipPress 的對話框,裡面是要求加入標語、Follow us 欄位、兩個 Explore 欄位和 Back to top 連結的訊息。
    在一則訊息中列出所有頁尾修改。
  3. 交給 AI 去修改

    按下 Enter。AI 會先查看頁尾的結構,再進行編輯。因為頁尾是共用的,所以改一次就會更新每一頁。你可以在對話中看到每個步驟。我這次大約花了三分鐘。

    AI 作業時的對話畫面,有一個 Worked 步驟和一個 Running 步驟。
    AI 會先讀取頁尾,再進行編輯。
  4. 看看它做了什麼

    完成後,AI 會列出每一項修改:店名下方的標語、拆成兩欄(各有五到六個連結)的 Explore 清單、新增的 Follow us 欄位(連結目前先指向 #),以及 Back to top 連結。它也會說明頁尾現在是六欄,而不是原本的四欄。

    AI 的摘要,包含標語、Explore、Follow us 和 Back to top,還有像 Link Instagram and Facebook 這樣的建議。
    每一項修改的簡短清單。
  5. 在預覽中檢查

    把預覽畫面捲到頁尾。我要求的內容都有了,但以這個寬度來說,六欄太多了:店名斷成兩行,電子郵件地址也擠到了下一欄。一定要自己看過結果,再請它修正。

    新頁尾的第一版:六個窄窄的欄位,店名分成兩行,電子郵件碰到了下一欄。
    第一版:內容都有,但太擠了。
  6. 用簡短的後續訊息修正版面

    描述哪裡看起來不對,以及你希望變成什麼樣子。我送出的訊息是:

    現在頁尾的欄位太擠了:標誌斷成兩行,電子郵件也擠到下一欄。請把標誌和標語放在頁尾最上方自己的一列,其他欄位排成一列放在下方,欄位之間的間距也再寬一點。

    一兩分鐘後,店名和標語就獨自占了一列,地址、營業時間、連結和 Follow us 欄位也有了喘息的空間。

    關於欄位太擠的後續訊息,以及 AI 的回覆。
    說明哪裡不對,以及希望變成什麼樣子。
    後續訊息前後的對照:先是擁擠的六欄,之後是店名和標語在上方、下方欄位更寬鬆。
    上方是第一版,下方是後續修正後的樣子。
  7. 用 Phone 檢查

    點選預覽畫面右上角的 Phone,並捲到最下方。在小螢幕上,欄位會一個接一個往下堆疊,連結也變得比較大,Back to top 則在版權文字旁邊。

    Phone 預覽中的新頁尾:Explore 連結、含 Instagram 和 Facebook 的 Follow us,以及 Back to top。
    在手機上,欄位會往下堆疊。
  8. 加入你真正的社群連結

    Instagram 和 Facebook 的連結目前還是指向 #。在 Go live 之前,請把真正的網址傳給它,例如:「請把 Instagram 連結到 instagram.com/pier7coffee,Facebook 連結到 facebook.com/pier7coffee,並且在新分頁中開啟。」你也可以直接點選回覆下方的建議 Link Instagram and Facebook。

    電腦預覽中完成的頁尾:上方是店名和標語,下方是地址、營業時間、兩個 Explore 欄位和 Follow us。
    完成的頁尾,等你放上真正的連結。
  9. 隨時都能用 History 回到之前的狀態

    ShipPress 會在 AI 每一次回覆後儲存一個還原點。點選右上角的 History,就能看到新頁尾的一個還原點,以及版面修正的另一個還原點。點選任一個旁邊的 Restore,就能完全回到當時網站的樣子。

    ShipPress 的 History,其中有「Update the footer on every page」和「The footer columns are too tight now」的還原點。
    每一次修改都是一個還原點。
  10. 小技巧

    • 把實用的資訊放在頁尾:地址、營業時間、電話或電子郵件,還有你的社群帳號。
    • 連結清單要保持簡短。兩欄各五個連結,比一長串十一個連結更容易瀏覽。
    • 如果頁尾看起來太擠,可以要求減少欄位,或讓店名自己占一列。
    • 在 Go live 之前貼上真正的社群連結,這樣就不會有連結指向 #。
    • 在點選 Go live 之前,先用 Phone 檢查頁尾。