找我們做網站
↑
Wordpress · WordPress 佈景主題

Uncode 佈景主題教學:WordPress 付費主題特色與匯入 Demo 網站

WordPress 佈景主題發布 2018.04.09更新 2026.10.02閱讀約 8 分鐘
Uncode 佈景主題教學:WordPress 付費主題特色與匯入 Demo 網站

重點整理
Uncode 是 ThemeForest 上的 WordPress 付費佈景主題,強調不寫程式碼就能做出視差滾動、淡入淡出、大圖輪播等效果,並提供大量範例網站。本文介紹主題特色,以及在後台安裝主題、匯入 Demo 網站的流程。

Uncode |WordPress主題教學,相信會到鵠學苑來找尋教學文章的朋友,對於網頁設計以及網站架設有一定意義上的需求,也一定會因為看了許多某某大型網站或者商業競爭對手的形象官網,對於其網站內的佈局、排版、功能、網頁效果等等都會有想要仿效的想法,但如果透過寫入程式碼的方式,又必須花費大量的的時間去研究程式語言及網站架構或者要浪費很多精力在網路上爬文及付錢上課等,這樣會導致網站的外觀效果無法達到一定的水平,本身該專注的事務或本務工作也延宕進度,實在很讓人陷入兩難。因此,選定好的佈景主題,就會讓使用WordPress架站的過程事半功倍,基礎的主題選用教學在之前的教學文 WordPress主題選用 有詳細的解釋,而在這一篇教學文中將直接推薦給各位一個不錯的付費主題Uncode(不需程式碼),顧名思義,這個主題的作者目的就是要讓使用Uncode架站的站長都能夠實現不需要任何程式語言,就能夠架設具有引人注的特色網站理想。因此在這個付費主題中有許多強化網站元素視覺效果的功能,比如說區塊間視差滾動、網頁載入元素時淡入淡出效果、大圖輪播時反轉或翻頁的特效等等,打造美觀而又具有驚奇感的網站,將不再是難事。
(小提醒:鵠學苑的所有教學均是以 Apple Mac OS X系統 做步驟示範!)

介紹Uncode佈景主題特色

第一步:點擊 envatomar  進入首頁,如下圖中左方灰底下拉選單選擇 Theme & Templates,在右側搜尋框中輸入Uncode做搜尋,會在結果頁面的中的第一位找到進入Uncode介紹頁面的連結。

Uncode
Uncode
Uncode
Uncode

第二步:在介紹頁面中點擊Uncode圖片或者點選Live Preview的按鈕,可以到達Uncode網站版型範例的展示頁面。

Uncode
Uncode

第三步:如下圖所示,Uncode的範例網站有者相當多樣性的演示,相較於其它付費主題在Uncode的分類中有多一個 CREATIVE 的樣式,這個分類中就是具有獨特創意性以及較強視覺性設計的網站版型 ,推薦各位可以優先到這個類別中觀看參考。
Uncode

Uncode
Uncode

第四步:Uncode佈景主題的主要特色,這裏簡單的說明:

1.擁有大量的的可設定選項,使用分層系統控制網站佈局,介面易於上手操作

2.優化圖片RWD設計,能自適應使用者瀏覽設備的螢幕大小。

3.Uncode Creative Theme 自定義網站內頁面元素功能,讓排版更為簡潔清楚。

4.快速轉移以建構的網頁元素至另一個頁面,靈活運用你的創造力。

5.強化媒體庫的使用,快速儲存所上傳的各種格式類型的媒體檔案。

Uncode
第五步:超過70個以上的頁面元素表達形式,包含磚形、砌體、混搭比例格體、滑動輪播、分頁輪播、重疊顯示視覺化效果。

Uncode
第六步:對於各種不同社交媒體網站、儲存空間、網頁語法都有完整的支援項目以及高度的相容性。

Uncode
Uncode

第七步:對於知名WordPress外掛的支持度相當完整,在主題選項中可以設定一鍵快速安裝及啟用,並可達到最佳的運作效能。

Uncode
Uncode

第八步:網頁內容以區塊的方式做編輯,以比例方式做版面分割,每一個區塊欄位可設定不同的元素效果,提高整體網站修改及編輯的精準度。

Uncode
第九步:網頁內元素樣式隨螢幕大小不一的設備而做響應式的調整,大幅度減少因解析度變化而造成的網站內容顯示錯誤。

Uncode
Uncode

了解Uncode在WordPress後台中簡易設定流程及匯入Demo網站

第一步:在安裝完Uncode佈景主題後,可以在 WordPress 後台側邊工具欄中找到如下圖中的畫面,這裡會要求輸入 envatomar 中帳戶名稱、API-Key、購買代碼等,如果不知道要在哪裡查詢,可以點選欄位文字後的 More info 以連結到說明頁,如果看不懂英文,也有圖片的步驟解說。如何安裝佈景主題,可以參考之前的教學文章:WordPress 教學介紹五(外觀)。在註冊已獲得主題線上支援及自動更新以前,必須先將主題中所附贈的必要安裝外掛先全部安裝完畢並啟用,點選圖中方框圈選處藍色字樣連結,就可以開始設定安裝外掛。

Uncode
Uncode

第二步:進入到安裝外掛的介面,這裡列出所有必須安裝的外掛,點擊全部選擇,在左上角批次管理的下拉選單中選擇 Install,接者點擊套用的按鈕。

Uncode
第三步:全部的外掛都會開始安裝,成功或失敗均會顯示在如下圖中的畫面上。

Uncode
第四步:與第二步驟同樣的做法,啟用(Activate)所有外掛。之前的教學有提過存在網站內的外掛越少對於網站整體的效能越好,但在這個步驟我們姑且先全部安裝,在匯入範例網站並確定要套用的版型之後,再將用不到的外掛做停用或刪除是較為穩妥的做法。關於停用或刪除外掛的相關基礎知識,可以參考這一篇:WordPress 教學介紹六(外掛)Uncode

第五步:在外掛安裝並啟用完成後,可以看到如下圖中 Register your theme 的按鈕已經由灰色變為綠色,此時在欄位中填入在envatomar 帳戶中查詢到的代碼資料,點選Register your theme 即可完成主題自動更新的啟用。

Uncode
Uncode

第六步:如下圖所示,可以選擇只匯入單一網站元素區塊。

Uncode
Uncode

第七步:在同一頁面可以找到 Import Demo 的頁籤,點擊第一個匯入網站版型的選項後,會跳出圖一中的小提示窗,詢問是否覆蓋所有網站中的資料,在這裡建議先使用 WordPress reset 之類的外掛將網站還原到初始安裝的狀態,在匯入範例網站以免在網站的前端出現顯示錯誤。點選 Confirm 後就會開始匯入版型,等待匯入完成。

Uncode
Uncode
Uncode

第八步:匯入完成後,就可以在網站的前端看到所有範例網站的版型,可以自行點選查看喜愛的 Demo 或開始編輯內容。

Uncode
Uncode

第九步:在主題選項中可以自行匯入想要的字型,或者可以在主題內建的資料庫中找尋想要的字型,這樣的功能是其它的付費佈景主題較不具備的,算是一個特點。另外在圖片下方附上Uncode主題介紹的影片,各位同學可以自行點選觀看參考。

Uncode
Uncode

選用付費多用途主題前要考慮什麼?

Uncode 這類多用途主題功能很多,選用前可以先評估:

  • 綁定的頁面編輯器:版面多半用主題附帶的編輯器做成,日後換主題時內容很難原封搬走。
  • 效能:效果越多,載入的 CSS、JS 也越多,上線前用 PageSpeed Insights 量測手機版速度。
  • 更新與授權:主題與內附外掛要靠購買碼取得更新,網站交接時記得一起移轉帳號。
  • 需求是否真的用得到:只做簡單形象網站的話,輕量主題通常更好維護。

常見問題

Uncode 是免費主題嗎?

不是,Uncode 是在 ThemeForest 販售的付費 WordPress 佈景主題,購買後才能下載主題檔並取得更新與技術支援。售價與支援期限會調整,購買前請以 ThemeForest 商品頁標示為準。

Uncode 要怎麼匯入 Demo 網站?

安裝並啟用 Uncode 後,依後台提示安裝主題需要的外掛,再到主題選單中的匯入功能選擇範例網站匯入。建議在全新網站上匯入,因為範例內容會加入頁面、選單與設定,在已有內容的網站上操作容易混在一起。

一份 Uncode 授權可以用在幾個網站?

依 ThemeForest 的一般授權(Regular License)規則,一份授權用於一個最終網站。要架設多個網站就需要分別購買授權;同一網站的測試站通常可以使用,細節以 Envato 授權條款為準。

結語

Uncode這個付費主題在安裝完匯入範例網站時,可以自行選擇想要匯入的種類,比如只匯入網站佈局、網站設定、小工具等,端看各位同學要如何去靈活運用。Uncode其實還有許多視覺上的設計效果,像是區塊背景影片重複播放、指定網頁元素入場動畫的效果及方向、倒數計時器的製作、區塊全寬音訊播放器等等,這些效果對於初次架設網站的人來說,必須要上網找尋很多的專業知識,包含 HTML、CSS、JAVA 這些語法的運用,而且還未必能真正的成功做出所想要的結果。而透過Uncode主題內建的支援,只要點擊選項、拖拉排版,就能輕鬆的完成令人羨慕的特殊網站效果,可以說是許多架站新手的一大福音!

鵠學苑・鵠崙設計鵠崙設計 2014 年成立,專注 WordPress 網站開發,400 多個網站在我們自己的主機上運作。鵠學苑的文章由團隊實際操作後整理,工具與外掛的功能以撰文當時為準。
鵠崙設計

不想自己摸索,
就交給我們做。

外掛設定、主機效能、改版搬家,這裡寫的每一件事,都是我們每天在客戶網站上做的工作。留下需求,1 個工作天內回覆。