內容目錄
歡迎回到鵠學苑 — WordPress網頁設計超詳細攻略 – Uncode ｜WordPress主題教學，相信會到鵠學苑來找尋教學文章的朋友，對於網頁設計以及網站架設有一定意義上的需求，也一定會因為看了許多某某大型網站或者商業競爭對手的形象官網，對於其網站內的佈局、排版、功能、網頁效果等等都會有想要仿效的想法，但如果透過寫入程式碼的方式，又必須花費大量的的時間去研究程式語言及網站架構或者要浪費很多精力在網路上爬文及付錢上課等，這樣會導致網站的外觀效果無法達到一定的水平，本身該專注的事務或本務工作也延宕進度，實在很讓人陷入兩難。因此，選定好的佈景主題，就會讓使用WordPress架站的過程事半功倍，基礎的主題選用教學在之前的教學文 WordPress主題選用 有詳細的解釋，而在這一篇教學文中將直接推薦給各位一個不錯的付費主題Uncode(不需程式碼)，顧名思義，這個主題的作者目的就是要讓使用Uncode架站的站長都能夠實現不需要任何程式語言，就能夠架設具有引人注的特色網站理想。因此在這個付費主題中有許多強化網站元素視覺效果的功能，比如說區塊間視差滾動、網頁載入元素時淡入淡出效果、大圖輪播時反轉或翻頁的特效等等，打造美觀而又具有驚奇感的網站，將不再是難事。那麼接下來跟著鵠學苑的腳步，開始認識這個令人期待的主題吧！
(小提醒：鵠學苑的所有教學均是以 Apple Mac OS X系統 做步驟示範！)
Uncode佈景主題下載
https://themeforest.net/item/uncode-creative-multiuse-wordpress-theme/13373220?s_rank=1
第一步：點擊 envatomar 進入首頁，如下圖中左方灰底下拉選單選擇 Theme & Templates，在右側搜尋框中輸入Uncode做搜尋，會在結果頁面的中的第一位找到進入Uncode介紹頁面的連結。
第二步：在介紹頁面中點擊Uncode圖片或者點選Live Preview的按鈕，可以到達Uncode網站版型範例的展示頁面。
第三步：如下圖所示，Uncode的範例網站有者相當多樣性的演示，相較於其它付費主題在Uncode的分類中有多一個 CREATIVE 的樣式，這個分類中就是具有獨特創意性以及較強視覺性設計的網站版型 ，推薦各位可以優先到這個類別中觀看參考。
第四步：Uncode佈景主題的主要特色，這裏簡單的說明：
1.擁有大量的的可設定選項，使用分層系統控制網站佈局，介面易於上手操作
2.優化圖片RWD設計，能自適應使用者瀏覽設備的螢幕大小。
3.Uncode Creative Theme 自定義網站內頁面元素功能，讓排版更為簡潔清楚。
4.快速轉移以建構的網頁元素至另一個頁面，靈活運用你的創造力。
5.強化媒體庫的使用，快速儲存所上傳的各種格式類型的媒體檔案。
第五步：超過70個以上的頁面元素表達形式，包含磚形、砌體、混搭比例格體、滑動輪播、分頁輪播、重疊顯示視覺化效果。
第六步：對於各種不同社交媒體網站、儲存空間、網頁語法都有完整的支援項目以及高度的相容性。
第七步：對於知名WordPress外掛的支持度相當完整，在主題選項中可以設定一鍵快速安裝及啟用，並可達到最佳的運作效能。
第八步：網頁內容以區塊的方式做編輯，以比例方式做版面分割，每一個區塊欄位可設定不同的元素效果，提高整體網站修改及編輯的精準度。
第九步：網頁內元素樣式隨螢幕大小不一的設備而做響應式的調整，大幅度減少因解析度變化而造成的網站內容顯示錯誤。
第一步：在安裝完Uncode佈景主題後，可以在 WordPress 後台側邊工具欄中找到如下圖中的畫面，這裡會要求輸入 envatomar 中帳戶名稱、API-Key、購買代碼等，如果不知道要在哪裡查詢，可以點選欄位文字後的 More info 以連結到說明頁，如果看不懂英文，也有圖片的步驟解說。如何安裝佈景主題，可以參考之前的教學文章：WordPress 教學介紹五（外觀）。在註冊已獲得主題線上支援及自動更新以前，必須先將主題中所附贈的必要安裝外掛先全部安裝完畢並啟用，點選圖中方框圈選處藍色字樣連結，就可以開始設定安裝外掛。
第二步：進入到安裝外掛的介面，這裡列出所有必須安裝的外掛，點擊全部選擇，在左上角批次管理的下拉選單中選擇 Install，接者點擊套用的按鈕。
第三步：全部的外掛都會開始安裝，成功或失敗均會顯示在如下圖中的畫面上。
第四步：與第二步驟同樣的做法，啟用( Activate )所有外掛。之前的教學有提過存在網站內的外掛越少對於網站整體的效能越好，但在這個步驟我們姑且先全部安裝，在匯入範例網站並確定要套用的版型之後，再將用不到的外掛做停用或刪除是較為穩妥的做法。關於停用或刪除外掛的相關基礎知識，可以參考這一篇：WordPress 教學介紹六（外掛）
第五步：在外掛安裝並啟用完成後，可以看到如下圖中 Register your theme 的按鈕已經由灰色變為綠色，此時在欄位中填入在envatomar 帳戶中查詢到的代碼資料，點選Register your theme 即可完成主題自動更新的啟用。
第六步：如下圖所示，可以選擇只匯入單一網站元素區塊。
第七步：在同一頁面可以找到 Import Demo 的頁籤，點擊第一個匯入網站版型的選項後，會跳出圖一中的小提示窗，詢問是否覆蓋所有網站中的資料，在這裡建議先使用 WordPress reset 之類的外掛將網站還原到初始安裝的狀態，在匯入範例網站以免在網站的前端出現顯示錯誤。點選 Confirm 後就會開始匯入版型，等待匯入完成。
第八步：匯入完成後，就可以在網站的前端看到所有範例網站的版型，可以自行點選查看喜愛的 Demo 或開始編輯內容。
第九步：在主題選項中可以自行匯入想要的字型，或者可以在主題內建的資料庫中找尋想要的字型，這樣的功能是其它的付費佈景主題較不具備的，算是一個特點。另外在圖片下方附上Uncode主題介紹的影片，各位同學可以自行點選觀看參考。
Uncode這個付費主題在安裝完匯入範例網站時，可以自行選擇想要匯入的種類，比如只匯入網站佈局、網站設定、小工具等，端看各位同學要如何去靈活運用。Uncode其實還有許多視覺上的設計效果，像是區塊背景影片重複播放、指定網頁元素入場動畫的效果及方向、倒數計時器的製作、區塊全寬音訊播放器等等，這些效果對於初次架設網站的人來說，必須要上網找尋很多的專業知識，包含 HTML、CSS、JAVA 這些語法的運用，而且還未必能真正的成功做出所想要的結果。而透過Uncode主題內建的支援，只要點擊選項、拖拉排版，就能輕鬆的完成令人羨慕的特殊網站效果，可以說是許多架站新手的一大福音！今天的教學到這裡告一段落了，不要忘記持續關注鵠學苑，我們每週都會有實用外掛分享，WordPress 客製化教學等文章。想學習超詳細的 WordPress 攻略嗎？？來 鵠學院 就對了！我們下次的教學見～
一頁式網站介紹 – 單頁式活動網站製作要點與應用說明
Site Kit for WordPress – Goolge 官方服務整合外掛正式上線
Google 優先索引行動版內容 將於一年內對所有網站實施