WordPress 五天自學衝刺班
第二天:建立與修改範例網站

安裝Avada主題+匯入範例內容+修改「關於我們」

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

今日目標:安裝佈景主題、匯入範例網站資料、學習修改現有內容

  1. 怎麼安裝Avada的佈景主題?--------------------------- (11:35 實作教學)
  2. 怎麼把網站變得和展示網站一樣?--------------------- (9:33 實作教學)
  3. 怎麼把網站設定為維護製作中模式?------------------ (6:16 實作教學)
  4. 要從哪裡修改現有的範例內容呢? -------------------- (3:32 觀念+實作)
  5. 開始編輯「關於我們」、認識網站的分割區域 ----- (10:22 觀念+實作)
final_result

第二天的課程要開始囉!

今天課程結束,你就有一個基本的網站了喔!

怎麼安裝Avada的佈景主題?

11:35 中間有個步驟,我的錄影軟體秀逗...所以只好找個後製軟體處理了一下,結果就多了一個浮水印,請大家包涵... 應該不影響觀看。

安裝過程很簡單,主要只有四個步驟,可以參考影片喔!

  • 安裝主要主題檔案

    到外觀 > 佈景主題 > 上傳 > 選擇 Avada.zip (參考圖一)> 立即安裝

  • 安裝子主題檔案

    回到到外觀 > 佈景主題 > 上傳 > 選擇 Avada-Child-Theme.zip > 立即安裝 > 啟用 (參考圖一)

  • 產生獨特的註冊序號

    因為一次的購買只能用於一個網站:
    1. 請到 Avada > Registration。
    2. 點選 Generate a Personal Token 來取得一個註冊碼 (參考圖二、圖三)
    2. 再填回註冊碼欄位來完成Avada 產品註冊。

  • 安裝主題要求的必裝外掛

    Avada主題本身帶有很多方便的功能,以外掛方式加入網站中,這時候要先安裝他們,主題才能發揮作用。

    請到 Avada > Plugins 選取必裝外掛來安裝。

怎麼把網站變得和展示網站一樣?

9:33 -請照著步驟做就可以了喔!

Avada有提供一鍵安裝的功能,讓你快速匯入範例檔案!就不用從零開始做起!

1. 請到 Avada > Demos
2. 找到 Creative 這個展示網站
3. 點選 Import 來匯入範例資料
4. 在跳出的視窗,確認展示網站必裝的外掛都有安裝 (點選Install,會自動變成Active)
5. 匯入內容的地方 (Import Content) ,勾選 "All"
6. 點選 "IMPORT",就可以開始執行匯入囉!
7. DONE! 完成啦!可以到網站的前台去看看囉!已經變漂亮了!

怎麼把網站先設定為維護中,不要對外公開?暫時不要被搜尋到?

6:16 - 請照著步驟做就可以了喔!

網站目前匯入了很多範例網頁,這些網頁都是假的內容,對外公開不太好,尤其是被Google列入搜尋資料庫更不好,所以我們要做兩個步驟來暫時隱藏你的網站喔!

  • 安裝「網站維護中」的外掛功能

    請依照影片教學來安裝、啟用、設定這個外掛:Coming Soon Page & Maintenance Mode by SpeedProd。

  • 設定「阻擋 Google 來索引」

    請到 Settings > 閱讀,勾選「阻擋搜尋引擎索引這個網站」。

姬密傳授: 等網站做完的時候,請千萬要記得回來設定的地方,取消勾選這個「阻擋搜尋引擎索引這個網站」喔!

要從哪裡修改現有的內容?

3:32 - 先看看帶路姬怎麼做,自己可以開始挑些頁面,觀察一下是不是都有一個編輯的連結!

修改內容的方式有很多,今天先教大家從最簡單的方式開始:

  1. 請在登入WordPress 的狀態下,新開頁籤來打開網站的前台,這時候會看到有一排控制選項在最上方。
  2. 從網站主選單去選擇你想編輯的頁面。
  3. 在最上面的控制選項的靠左側,可以找到「編輯頁面」、「編輯文章」、「Edit Portfolio Post」等等,就可以點選開始編輯該頁的內容。

從編輯「About」開始...

10:22 - 先學一點基本觀念喔!下課後,大家可以開始試試看改每個主要頁面的標題改成中文。

這個影片的學習重點:

  1. 網站有分成四大區域,我們要先來學習修改「內容」的部分喔!
  2. 讓我們一起來編輯「About」的頁面,從這學習:
    • 從哪裡改頁面標題列?(請試著改成「關於我們」)
    • 從哪裡指定頁面的「永久網址」?
    • 從哪裡改發表或更新?
  3. 內容其實分成哪三個區塊:頁面標題、幻燈片秀、實際的內容。
    • 頁面標題和幻燈片秀是可有可無的!
    • 什麼是幻燈片秀?
    • Creative 這個展示網站,隱藏了頁面標題,每個頁面都用幻燈片秀來寫標題。

第二天的課程結束囉!

大家可以開始先練習把現有的頁面的標題改成中文喔!明天我們要來學習新增更多的內容!

第一天
%
準備環境
第二天
%
建立與修改展示網站
第三天
%
建立更多內容
第四天
%
客製化外觀
第五天
%
展望未來

你喜歡這樣的學習方式嗎?

這裡需要你的真實見證! 成功時,別忘了留言告訴我喔!- 網站帶路姬

"Lacinia neque platea ipsum amet est odio aenean id quisque."

— KELLY MURRY
ACME Inc.

"Aliquam congue lacinia turpis proin sit nulla mattis semper."

— JEREMY LARSON
ACME Inc.

"Fermentum habitasse tempor sit et rhoncus, a morbi ultrices!"

— ERIC HART
ACME Inc.
標籤

網站帶路姬 / Erin Lin

Hello~我是Erin Lin,美國網頁設計研究碩士,七年美國工作經驗,2012年成立「Erin Lin 網頁設計工作室」專門設計高質感的WordPress網站。2018年五月,開始「WordPress 網站帶路姬」,希望以輕鬆有趣的方式來分享 WordPress 架站教學與資源給不懂程式的新手與創業站長。

45 則留言

  1. 你覺得這份教學對你有幫助嗎?有幫助你釐清很多觀念嗎?帶著你很順利的做好第一個網站嗎?幫助你節省了很多時間嗎?有沒有很喜歡Siteground和Avada呢?請在這裡告訴我喔!我喜歡聽聽你們的學習故事喔!留言後,系統會過幾分鐘才顯示出來喔~

  2. 今天的課程非常實用,
    算是從0開始瞭解以下
    1.網站的架構
    2.各區的名稱和功能
    3.調整自己想要的版型

    WP跟AVADA功能對於自己來說,功能還是相當多,所以常常會忘記要調整某項元素哪裡調整,
    感謝老師詳細的影音+文字解說,有時候忘記影片講解特定功能的秒數,通常旁邊的文字也都會提醒。

    Thank you Erin!

    1. 哈囉 Charlie,不客氣喔!真的很開心這份教學對你有幫助,我是真的希望,透過這份教學,讓第一次製作WordPress網站的朋友們,可以少碰點釘子、少花冤枉的錢買不好用的主題、也不用問來問去找答案,第一個網站,其實先跟著我先求有,學會基礎,以後不論是繼續用Avada或者換其他主題,都會輕鬆很多的!祝你網站製作順利,有空常來社團跟大家交流聊天喔!

  3. Erin您好,我是WordPress的新手,我們學會想利用WordPress架設自己的網站,希望做出來可以類似這個 https://www.cie.org.tw/ 功能包含會員登錄管理,線上繳費等,想請教您一下,是否有推薦的主題模板跟外掛程式可以參考,冒昧請教,非常感謝您

    1. 你好哦,這些其實真的很不建議新手自己做耶,而且表了解更多細節,才能比較正確的推薦外掛之類的,否則也怕推薦錯誤,歡迎私訊給我喔!

      1. 那想跟您請問一下,如果採用Avada這個主題,最終(經過一段時間強化學習),是否可以達到這些效果(功能)?或是您有接案子可以協助做網站?

  4. erin老師~想請問一下,我安裝完creative的插件後,下方import content在安裝時出現了一個錯誤,IMPORT FAILED
    Demo import failed. Please check for PHP limits in red on the System Status page. Change those to the recommended value and try again.

    然後我去system status查看發現那個問題出在這兒1000 – Recommended Value: 1680.
    Max input vars limitation will truncate POST data such as menus. See:https://sevenspark.com/docs/ubermenu-3/faqs/menu-item-limit

    請問這個有辦法解決嗎?

  5. 真的太謝謝帶路姬了~~教學教的超仔細!做到一半發現有問題也會回答我們>< 真的佛心來著ㄚ!超級無私的老師
    等我之後變強了也要跟帶路姬看齊哈哈,教導需要的人=)

    1. 太好了!WordPress 本身是免費的,他就是全世界的志工朋友們無私一起持續開發出來的,我也是受惠者之一,所以幫助新手也是一種回饋的方式,很高興你以後也願意當老師幫助更多新手,讓更多人和我們一樣喜歡 WordPress,享受他的便利❤️

  6. 嗨 Erin

    完成第二天課程,接著繼續第三天!
    我這次改用平板聽課,電腦操作。可惜平板無法將影片放大,如果自行拉大畫面會失真。
    第二天內容多一些,不過還是簡單易懂。
    也開始認識Avada的操作介面,外國人編寫編輯內容的架構跟的很不一樣
    需要習慣他們的思維…哈哈慢慢學習

  7. hi Erin, 我按照步驟也把demo都裝好後,為何網站的外觀看起來還是Avada child的外觀呢?(我是選church這個主題) 可否幫我解惑感激QQ

      1. 謝謝老師,我是照著老師說的做,主機及avada 都是照著做的,後來重灌後就好了,謝謝老師,不好意思再請問老師一下,我現在要改成 classic shop 的主題,但是它的首頁有三個,我有刪掉二個,可是它變成有分類項目 home–home1,這樣要怎麼改呢?直接就是home呢?

          1. 感謝老師,再請教老師,如果我喜歡 wedding 這個主題的首頁放置 先幻燈片秀再選單,但我必須使用 modem shop 這個主題中的大部份功能,請問可以把 modem shop 的選單位置移到幻燈片秀 的下一行嗎?像wedding 這個主題一樣,感謝老師!

  8. 感謝老師,再請教老師,如果我喜歡 wedding 這個主題的首頁放置 先幻燈片秀再選單,但我必須使用 modem shop 這個主題中的大部份功能,請問可以把 modem shop 的選單位置移到幻燈片秀 的下一行嗎?像wedding 這個主題一樣,感謝老師!

  9. 嗨 Erin老師!!
    真的非常謝謝妳提供這樣的資源讓我們學習!
    首先我有想問的一個問題是
    因為Avada的頁面編輯器是Fusion Builder
    假如想用elementor也是可以的嗎?

    1. 可以的喔!只是通常比較不建議,因為相容性不會比Fusion Builder高,主題商也會必較不提供支援服務。

  10. Hi Erin, 我按你教的把主題按裝好了, 可是到第四步, 我在登入狀態到前台看, 最頂的黑Bar只有「我的網站」和「讀取程式」兩個選項呢, 沒有「edit」按鈕, 要怎麼辦呢?

  11. 嗨 Erin老師!!
    覺得你的課真的非常受用
    很謝謝你提供這麼好的資源
    我想請教
    因為我現在是用其他主機商,假如我現在購買Avada
    如果我後面像要把網站搬到其他主機商
    那我需要重新購買Avada嗎?

    1. 不用喔,只要還是同一個網站(網址),就不用再重新購買喔!
      就算要換網址都沒關係,總之,只能用在一個網站喔!(換網址後,就網址就會失效)

  12. 老師你好:
    請問一下,目前在測試練習階段(連網址都沒有),如果現在買了並使用avada,之後要再做一個正式網站時,Avada可以換到新的網站使用嗎?

  13. 您好:
    請問Avada主題註冊問題,若在原先安裝的網站移除Avada主題,是否可以在另一網站安裝該主題。謝謝您。

  14. Hi, I face two problems and have no idea to solve them.

    First problem:
    How to set the max_input_vars on SideGroud?
    I am trying to install the Avada Classic theme.
    But PHP Max Input Vars in System Status is always red.
    I tried some solutions from the internet, but all turn out server error.

    Second problem:
    In some case, I successfully installed the full Avada Classic theme.
    But when I check my demo website, some sub-items in the menu bar are missing.
    For example, the sub-item of Heders.
    Clearly, on the official website of Avada, they have Header Features, Header Transparent…

      1. Thank you very much.
        I did not notice that you have an article on this issue.
        I searched for the solution for quite a long time.
        I will try your solution later.

        One question:
        When you face a problem from WordPress, the Avada theme, or the SiteGround, how do you find its solution? any forum or website that we can look for? Google sometimes is not very effective. Thanks.

        1. For both Avada and SiteGround, contact their official support is the best way. And they both have online documentation (Support) Site.
          Other than those, I also visit their Facebook group sometimes to look for information. If you read Chinese, you can also join my Facebook Group. We have related discussion over there. https://www.facebook.com/groups/wpointer

  15. 請問在安裝avada時要產生註冊碼時按下Generate a Personal Token後並不會出現像教學的選擇畫面 反而帶到一個envatoaccount的畫面 需要登入envato api 請問這時候該怎麼辦呢 謝謝

  16. 產生獨特的註冊序號
    因為一次的購買只能用於一個網站:
    1. 請到 Avada > Registration。
    2. 點選 Generate a Personal Token 來取得一個註冊碼 (參考圖二、圖三)>>>我沒看見參考圖二和三
    我按下這裡連結 Generate A Personal Token
    跳到這個頁面 Sign in to Envato API
    Your Envato Account gives you access not just to Envato API, but also to the other Envato Market sites listed below. They’re stocked with everything from website templates to video files, graphics, plugins, audio files, photography and much more. So much to see, so little time!
    Sign in with your Envato Account details and we’ll take you back to Envato API.
    我要怎麼做才能拿到註冊序號呢?
    2. 再填回註冊碼欄位來完成Avada 產品註冊。

  17. 老師你好:
    非常謝謝你詳細的介紹,收穫良多。我已經到達匯入版型的階段。有趣得是匯入版型後,有許多框架內容顯現”純文字”模式。因為無法傳送圖片,我留下網址,不知老師是否有空幫我解惑。再次謝謝!

  18. 老師你好,今天照著教學購買了主題,但是在Wordpress卻已找不到可以上傳主題的地方了,好像必須要商務版才能上傳主題?那我購買的主題怎麼使用呢…

  19. 請問老師,是不是不管是勾選第二個網站建置中或是第三個網站維護中,都必須要去設定那邊勾選暫時不讓搜索引擎搜尋到呢?

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

Back to top button
★ 完全免費的影音+圖文教學+ ★

帶路姬陪你用五天的下班時間
做好第一個 WordPress 網站

想完整的學好基礎嗎?快來看看吧!😊
close-link
close-link
close-link
close-link
Close