ShipPress

使用教學

用對話新增頁面並加進選單

你的網站遲早會需要一個原本沒有的頁面：活動、外燴、價目表、常見問題。在 WordPress 裡，這代表要建立頁面、設計版面，再打開選單設定加入連結。在 ShipPress 裡，你只要在對話中說一次就好。這篇教學會為 Pier 7 Coffee 新增一個 Private Events 頁面，把它放進頂端選單，再修正一個看起來不太對的地方。

  1. 先看看你的選單

    在 ShipPress 開啟你的網站，看看預覽畫面頂端的選單。Pier 7 Coffee 目前有 Lots、Bar、Roastery、People、Journal 和 Visit。先決定新頁面的名稱、選單連結要寫什麼，以及要放在哪個位置。簡短的選單標籤會比完整的頁面標題更容易閱讀。

    變更前的 Pier 7 Coffee 頂端選單：Lots、Bar、Roastery、People、Journal、Visit、EN
    變更前的頂端選單：六個連結。

  2. 用一則訊息描述頁面

    點一下左下角的對話框，用你向懂架站的朋友說明的方式寫下需求。請把這些內容放在同一則訊息裡：

    • 頁面名稱，這裡是「Private Events」。
    • 內容要寫什麼：適合誰、什麼時間、多少人。
    • 外觀要怎麼呈現：「風格和我們其他頁面一樣」，以及要用哪張照片。
    • 大家如何聯絡你。我寫的是「到吧台詢問或打電話給我們（不要表單）」，這樣 AI 就不會自己加上聯絡表單。
    • 選單設定：標籤和位置，這裡是「Events」，放在 Roastery 和 People 之間。

    按下 Enter 送出。

    ShipPress 對話框中的訊息：Add a new page called Private Events. Say we host small private events after hours: birthdays, team mornings and coffee tastings for up to 20 people, Monday to Thursday from 6 pm. Use the same style as our other pages, with one photo that's already on the site. To book, people can ask us at the bar or call us (no form). Then add it to the top menu as Events, between Roastery and People.
    一則訊息：頁面、內容、外觀，以及在選單中的位置。

  3. 讓 AI 來建立

    AI 會先說明它接下來要做什麼（這裡是：用和 Cupping & Classes 相同的版面，搭配吧台照片建立頁面，再加上選單連結），然後開始動工。你可以展開 Worked · N steps 列來查看每個步驟。如果這時你想到別的需求，直接繼續輸入就好：這一則做完後，你的下一則訊息就會立刻送出。

    Pier 7 Coffee 這個案例大約花了一分半鐘。AI 還沒寫完回覆，新的選單連結就已經出現在預覽畫面中了。

    AI 工作時的對話：Building the Events page now, in the same layout as Cupping & Classes with the bar photo, and then I'll add the menu link. 下方有一條狀態列寫著 The AI is working on it, 0:48，旁邊有 Stop 按鈕。
    工作時你能看到每個步驟，也可以繼續輸入。

  4. 看看它做了什麼

    完成後，AI 會總結這次的變更：頁面已上線、「Events」出現在頂端選單的 Roastery 和 People 之間、頁面使用了吧台照片，而預約說明使用的是 Visit 頁面上的電話號碼。摘要下方有幾個建議的下一步按鈕，例如 See what changed 或 Mention events on the Visit page。如果正好是你想要的就點一下，或者直接輸入你自己的訊息。

    AI 的摘要：The Private Events page is live, and Events now sits in the top menu between Roastery and People，附有 Look、Content 和 Booking 的說明，以及 See what changed、Add a second photo、Mention events on the Visit page、Go live 等按鈕
    摘要會告訴你改了什麼，下方則有建議的下一步。

  5. 打開新頁面看看

    點一下預覽選單中的 Events。它的運作方式和真正的網站一樣：新頁面會打開。像訪客一樣讀一遍：文字對嗎？看起來和網站其他部分一致嗎？

    這次文字是對的，但外觀不太對：照片上方多了一個「Private Events」標題，而且照片和文字被放在狹窄的欄位裡，其他頁面則是以滿版照片開頭。

    Private Events 頁面的第一個版本：有獨立的 Private Events 標題，下方是一張狹窄的照片，上面寫著 PRIVATE EVENTS，寬度沒有占滿整個頁面
    第一版：內容正確，但多了一個標題，照片也太窄。

  6. 用白話修正不合的地方

    說出你看到的問題，並指出一個已經很好看的頁面當作參考。我寫的是：「The Private Events page doesn't match the others yet: there's an extra title above the photo, and the photo and text sit in a narrow column. Make it look like the People page: no extra title, a full-width photo at the top, and the text below at the same width.」

    不到一分鐘，頁面頂端就和 People 一樣是滿版照片，頁面名稱和簡介文字都放在照片上。

    對話中的後續訊息與 AI 的回覆：The Private Events page now uses the same full-width layout as People
    指出一個已經很好看的頁面，AI 就有明確的目標可以參考。
    修正後的 Private Events 頁面：吧台的滿版照片，上面有 PRIVATE EVENTS 和簡介文字，頂端選單中的 Events 呈現醒目標示
    修正後：滿版照片，沒有多餘的標題。

  7. 檢查整個頁面，也用 Phone 看看

    往下捲動頁面。Pier 7 Coffee 的活動頁回答了三個問題（有哪些活動、什麼時候可以預約、如何預約），最後是預約說明和規劃行程的連結。

    接著點一下預覽右上角的 Phone，再打開 MENU。Events 也在裡面，位置相同。大多數訪客會在手機上看到你的新頁面，所以花這十秒鐘檢查很值得。（更多內容請見在 Computer、Laptop、Tablet 和 Phone 上檢查你的網站。）

    Private Events 頁面的下半部：What kind of events do we host? When can you book? How do you book? 以及 To book, ask at the bar or call (207) 555-0147
    頁面其餘部分：三個簡短的解答和預約方式。
    兩個並排的手機尺寸預覽：左邊是有照片和問題的 Private Events 頁面，右邊是展開的手機選單，列出 Lots、Bar、Roastery、Events、People、Journal、Visit
    在 Phone 上：頁面，以及選單中的 Events。

  8. 之後要找得到，也要能回復

    這個新頁面就是一般的 WordPress 頁面。你可以在預覽左上角的頁面選單中找到它，隨時跳過去；也可以在 Dashboard 的 Pages 底下看到它。

    AI 的每一次變更也都會儲存一個還原點。點一下頂端列的 History，你會看到兩個步驟：新增頁面和版面修正。如果不喜歡結果，就點選更早那個還原點旁邊的 Restore。

    預覽中你網站的 Pages 清單，Private Events 呈現醒目標示，位於 Privacy Policy 和 Sample Page 之間
    新頁面就在你的頁面清單中。
    從 History 開啟的還原點：The Private Events page doesn't match the others，以及 Add a new page called Private Events，每個都有 Restore 按鈕
    每個步驟都是 History 中的一個還原點。

  9. 小提醒

    • 說明選單連結要放在哪裡（「在 Roastery 和 People 之間」、「放在最後面」）。如果沒說，AI 會自己挑一個位置。
    • 選單標籤要簡短，頁面標題則可以長一點，像是「Events」和「Private Events」。
    • 如果你不要聯絡表單，請直接說。如果想要，請說明誰該收到這些訊息。
    • 當某處看起來不對勁，就指出一個看起來正確的頁面（「讓它看起來像 People 頁面」）。這比描述版面更清楚。
    • 如果頁面不該出現在選單中，例如感謝頁，只要說「不要加到選單」就好。
    • 更多關於用對話編輯的內容：用對話編輯你的網站。想要復原變更：用還原點復原任何 AI 變更。