《WordPress 設計入門》視頻教程完整版｜文派中英字幕

設計師學 WordPress，這套教程就是你的最佳起點。

專為視覺創作者打造的 WordPress 設計入門教程。無需編寫代碼，也不用接觸 PHP¹，藉助 WordPress 現代化的 Site Editor² 和 block theme³，就能做出專業級的網站設計。

設計師為什麼要學 WordPress？

傳統設計工具產出的是”靜態圖”，而 WordPress 做出的是”可用的網站”。客户需要的，恰恰是後者。

站點編輯器讓設計師真正實現”所見即所得”的網站設計，調整佈局、更換字體、設置顏色、定製頁眉頁腳，全部在可視化界面中完成。掌握這套工具，你能承接更多建站項目，報價也能更上一層樓。

這套教程能學到什麼？

站點編輯器全攻略：從界面認識到高階操作，徹底掌握 WordPress 最核心的設計工具。

區塊主題設計：理解全局樣式、模板部件、區塊模式的設計邏輯，學會自由定製任意主題。

視覺設計實戰：涵蓋頁面佈局、排版設計、響應式適配、動效控制，設計師關心的核心技能一網打盡。

插件輔助設計：輪播滑塊、動態效果、表單美化等能力也覆蓋在課程裏。

課時列表

全套 24 節課，已全部上傳嗶哩嗶哩。

序號	中文課時	英文原名	觀看
1	面向設計師的 WordPress 展示	WordPress showcase for designers	觀看
2	用樣式手冊指導設計	Using the Style Book4 as a design guide	觀看
3	理解區塊主題術語與層級	Overview of WordPress block theme3 terms and hierarchy	觀看
4	用區塊優先思維做設計	Designing with a block first mindset	觀看
5	找到適合設計需求的區塊主題	Finding a block theme for your design needs	觀看
6	選擇與安裝插件	Choosing and installing a plugin	觀看
7	認識 WordPress 儀表盤	Getting started with the WordPress Dashboard5	觀看
8	搞懂文章與頁面的區別	Understanding the difference between WordPress posts and pages	觀看
9	為什麼用站點編輯器做設計原型	Why design in the Site Editor2 and use it for prototyping？	觀看
10	創建包容性網站的無障礙指南	Web accessibility6 guidelines to create inclusive websites	觀看
11	測試內容的無障礙性	Testing your content for accessibility	觀看
12	初識站點編輯器	Intro to the Site Editor	觀看
13	區分首頁顯示設置與不同模板	Differentiating between homepage display settings and various templates	觀看
14	使用頁面模板	Using page templates	觀看
15	使用模板部件	Using template parts	觀看
16	自定義顏色、字體、排版與佈局	Customizing theme settings： Colors, fonts, typography and layout	觀看
17	使用 Group 區塊做設計	Designing with the Group block7	觀看
18	使用 Row 與 Stack 區塊做設計	Designing with Row8 and Stack9 blocks	觀看
19	使用 Columns 區塊做設計	Designing with the Columns block10	觀看
20	尺寸設置：內邊距、外邊距與區塊間距	Dimensions： Padding, margin and block spacing	觀看
21	使用圖庫區塊	Utilize the Gallery block11	觀看
22	使用媒體與文本區塊	Using the WordPress Media and Text block12	觀看
23	深入瞭解封面區塊	Uncovering the Cover block13	觀看
24	用插件創建輪播滑塊	Using a plugin to create a carousel slider14	觀看

本教程由文派開源團隊製作發佈，遵循知識共享協議。在 B 站關注「文派開源」獲取更多 WordPress 學習資源。

名詞解釋

1. PHP：WordPress 主要使用的服務器端腳本語言。 ↩︎
2. Site Editor：WordPress 的全站可視化編輯工具，可編輯模板、樣式與站點結構。 ↩︎
3. block theme：基於區塊系統構建的主題，可直接在編輯器中定製模板和樣式。 ↩︎
4. Style Book：集中預覽主題區塊樣式的設計參考界面。 ↩︎
5. WordPress Dashboard：WordPress 後台管理主界面，用於管理內容、外觀、插件和設置。 ↩︎
6. accessibility：讓更多用户，包括殘障用户，也能順暢使用網站的設計與開發實踐。 ↩︎
7. Group block：用於組織多個區塊並統一設置佈局、間距和樣式的容器區塊。 ↩︎
8. Row：讓多個區塊按水平方向排列的佈局方式。 ↩︎
9. Stack：讓多個區塊按垂直方向堆疊排列的佈局方式。 ↩︎
10. Columns block：用於創建多列版式佈局的區塊。 ↩︎
11. Gallery block：用於批量展示多張圖片並管理網格排版的區塊。 ↩︎
12. Media and Text block：把媒體內容與文字説明組合展示的區塊。 ↩︎
13. Cover block：可在圖片或視頻上疊加文字與內容的視覺區塊。 ↩︎
14. carousel slider：以輪播方式切換多張圖片或內容卡片的界面組件。 ↩︎