logo circled

跟著部落駭客用OxyAcorn打造完美網站

下載Notion學習單

嗨!我是部落駭客Anson,開啟這個檔案的同時,恭喜你踏上了與部落駭客一起的架站之路,架站的方法有很多,而Anson經過多年的實戰經驗,發現WordPress加上Oxygen是最棒的解決方案,推出OxyAcorn套件,以全新的方式協助你打造你夢想中的網站!

前言:關於OxyAcorn你要知道的事情

OxyAcorn定位在「版型」,意思就是他只是一個「網頁框架」,目的是協助架站的人,解決架站的第一個問題,就是「架構」,所以風格上會比較陽春簡單,配色上也比較單一,目的是讓您可以更快速的客製化成自己想要的模樣。

思考:你的網站,需要什麼內容?扮演什麼角色?

沒有思考,盲目的開啟一個網站,只會讓網站變成荒廢,因為那樣做出來的網站沒有靈魂,在架網站之前,先檢視看看,自己是否以經思考過這些問題。

  • [ ] 網站的角色是什麼?網站的目標是什麼?

每一個網站都有自己的目標任務,有的是為了內容行銷寫部落格做SEO,有的只是呈現形象,有的只是為了聯絡,也有的只是把社群連結作一個彙整,當然也有的只是為了一個更好的形象,在架設網站前思考這個問題,抓住網站的「初衷」,才不會迷失自我!

  • [ ] 自己未來有多少時間管理這個網站?

很多人都擁有一個雄心壯志,在開啟網站的時候總認為,「我一定會好好保養這個網站」,但因為網站常常是「看不到的東西」,貼在桌上的便利貼都會被忽略了,更何況是網站,所以在架設網站前,應該思考,這個網站在「生活中扮演什麼樣的角色?」不用太過誇大的欺騙自己,根據自己的實際狀況,去考量未來你應該如何跟你的網站「相處」。

  • [ ] 網站名稱

你的網站如何被找到?你的品牌名稱?

  • [ ] 網站標語SLOGEN

用一句話描述你的網站,不要只是沒有意義的關鍵字堆疊,但是最好包含網站的主要關鍵字(主要網站服務內容項目),可以更容易被找到!

  • [ ] 網站的結構

你的網站首頁放什麼?要包含哪些頁面,這些頁面的意義跟內容是什麼?這些頁面該如何串連,「來到你網站的訪客,該如何在你的網站內穿梭?」

  • [ ] 網站首頁的內容

網站的首頁通常不會被搜尋到,但卻是你的網站訪客了解你最重要的頁面,有的首頁就像是百貨公司的一樓,把最有價值最想被客戶看到的內容放上去,也有的首頁就像是樓層簡介圖一樣,幫助訪客到達他們需要的地方。

  • [ ] 網站的其他內容

除了首頁,其他頁面包括頁首(最上方)與頁尾(最下方)該放什麼樣的內容!一個網站就像是一本書,你如何說你的故事,表現你自己,就透過你的網站陳述出來!

  • [ ] 網站素材

素材是網站品質與風格的核心,包括整體CIS設計、圖片、素材照片、商品照片等,都要先準備好,才能讓我們架設網站的路程順暢無比!

準備:開始WordPress網站,你需要這些東西

  • [ ] 網站主機(網站的家)

如果你想要自己購買與管理主機環境,推薦歐美主機Cloudways,基礎主機環境一年費用約NT$3,600,網路上可以找到許多聯盟行銷促銷碼,以及許多教學。 除了自己管理,橡實也有主機的服務,位置設在日本,是台灣網站主機的CP值最高的選擇。 **點我了解橡實主機方案**

  • [ ] 網域(網址 網站的住址)

網域必須向網域經銷商租賃,不同的廠商有不同的價格,以年計費,費用包含網域的隱私安全性,以及網域DNS解析的品質,這關乎到網站為來營運管理時的速度。 網域推薦查價購買/管理 Gandi (點我前往) 或是委託 橡實網域管理(一次兩年)

  • [ ] WordPress主程式

可以到WordPress官網下載 https://tw.wordpress.org/download/

  • [ ] OxyAcorn氫氧工具包

運用OxyAcorn架站 STEP 1:用Figma規劃框架

  • [ ] 下載OxyAcorn型錄
  • [ ] 決定Header頁首
  • [ ] 決定主視覺區塊
  • [ ] 網頁內容的配置
  • [ ] 決定頁尾
  • [ ] 記錄下版型的名稱

運用OxyAcorn架站 STEP 2:找到區塊購買檔案

  • [ ] 將工具包加入購物車
  • [ ] 透過搜尋將需要的版型區塊加入購物車
  • [ ] 結帳並下載檔案

運用OxyAcorn架站 STEP 3:組裝網站建立架構

安裝好WordPress網站環境與工具包之後…….

  • 如果是購買全站的設計套件(OxyAcorn Suits):
    • [ ] 建立Main主要佈景主題(Header & Footer)
    • [ ] 建立首頁/設定首頁
    • [ ] 編輯首頁/依照規劃貼上程式碼
    • [ ] 將文字內容替換成自己想要的文字內容(大標小標內文)
  • 如果是購買OxyAcorn全套組件(OxyAcorn):
    • [ ] 建立Main主要佈景主題(Header & Footer)
    • [ ] 建立首頁/設定首頁
    • [ ] 編輯首頁/依照規劃貼上程式碼
    • [ ] 將文字內容替換成自己想要的文字內容(大標小標內文)
  • 如果購買的是OxyAcorn區塊(OxyAcorn Parts):
    • [ ] 建立Main主要佈景主題(Header & Footer)
    • [ ] 建立首頁/設定首頁
    • [ ] 編輯首頁/依照規劃貼上程式碼
    • [ ] 將文字內容替換成自己想要的文字內容(大標小標內文)

運用OxyAcorn架站 STEP 4:修改成喜歡的樣子

  • [ ] 決定網站的整體設計系統

設計系統包含網站整體的顏色跟字體風格,決定了整個網站的風格跟樣式!

  • [ ] 修改CSS樣式

OxyAcorn只是提供設計的框架,在我們決定好設計系統之後ㄝ就是依照我們設定好的設計系統,透過氧氣的設定,不需要撰寫程式碼,修改CSS Class設定(綠色),把網站內的大多數的元件設定成自己喜歡的外觀樣式。

  • [ ] 修改獨立的樣式

修改好網站內的CSS Class(綠色)之後,就可以依照特殊的狀況,修改獨立的id樣式(藍色),讓網站外觀能夠更加個性,讓想要強調的元件能夠跳出來!

  • [ ] 確認RWD設計

一開始設計都是桌面版(大螢幕)的樣式,都修改完成以後,就可以從切換筆電到平板到手機螢幕,確認多螢幕RWD的響應式設計是否都正常,修改好以後,可以用手機進行確認版型!

如果想挑戰建立框架 踏上氧氣架站之路

以下是我列出來學習氧氣必須要經歷的事情,有些在YT可以找到教學,如果沒有找到,那就是還沒有出教學,我們將會陸續推出教學,在推出教學之前,歡迎自己摸索嘗試。

學氧氣架站之前

  • [ ] 建立單機學習環境
  • [ ] 初探Oxygen Template / 認識Template
  • [ ] 把自己的網站搬家到獨立網站(氧氣的備份與搬家)

理論基礎

  • [ ] 氧氣的背後(網站的根本)- HTML與CSS入門
  • [ ] 在建立網站之前 決定設計系統(CSS樣式架構)
  • [ ] 氧氣學習之路介紹
  • [ ] 頁面寬度的概念

氧氣應用

  • [ ] 認識氧氣在WordPress後台的介面
  • [ ] 認識氧氣的編輯介面
  • [ ] 了解如何切換文章或是頁面的版型
  • [ ] 在氧氣內建立基礎設計系統(CSS預設架構)
  • [ ] 基礎的三大容器Section Column Div
  • [ ] 會使用結構面板查看或是編輯網頁結構
  • [ ] 三大容器的排版設定方式(直排 橫排 margin padding )
  • [ ] 背景的設定
  • [ ] 文字元素的外觀設定(標題 文字 RichText)
  • [ ] 氧氣的CSS管理(id跟class分清楚了?)
  • [ ] 了解圖片的設定處理
  • [ ] Grid排版方式
  • [ ] Repeater元素
  • [ ] AcornBlog解構
  • [ ] 圖層概念(Zindex)
  • [ ] Absolute 位置排版
  • [ ] 百分比基礎的RWD設計
logo circled
Copyright By

橡實資訊有限公司

統編:90685854
E-mail: service@acornpro.dev
usercartcrossmenuchevron-down