# 《WordPress 設計入門》視頻教程完整版｜文派中英字幕 *Published:* 2026-04-16 *Author:* 殼殼蟲 設計師學 WordPress，這套教程就是你的最佳起點。 專為視覺創作者打造的 WordPress 設計入門教程。無需編寫代碼，也不用接觸 PHP[1](#eng-php)，藉助 WordPress 現代化的 Site Editor[2](#eng-site-editor) 和 block theme[3](#eng-block-theme)，就能做出專業級的網站設計。 設計師為什麼要學 WordPress？ ------------------- 傳統設計工具產出的是”靜態圖”，而 WordPress 做出的是”可用的網站”。客户需要的，恰恰是後者。 站點編輯器讓設計師真正實現”所見即所得”的網站設計，調整佈局、更換字體、設置顏色、定製頁眉頁腳，全部在可視化界面中完成。掌握這套工具，你能承接更多建站項目，報價也能更上一層樓。 這套教程能學到什麼？ ---------- **站點編輯器全攻略**：從界面認識到高階操作，徹底掌握 WordPress 最核心的設計工具。 **區塊主題設計**：理解全局樣式、模板部件、區塊模式的設計邏輯，學會自由定製任意主題。 **視覺設計實戰**：涵蓋頁面佈局、排版設計、響應式適配、動效控制，設計師關心的核心技能一網打盡。 **插件輔助設計**：輪播滑塊、動態效果、表單美化等能力也覆蓋在課程裏。 課時列表 ---- 全套 24 節課，已全部上傳嗶哩嗶哩。 序號中文課時英文原名觀看1面向設計師的 WordPress 展示WordPress showcase for designers[觀看](https://www.bilibili.com/video/BV1sSQnBcEkk/)2用樣式手冊指導設計Using the Style Book[4](#eng-style-book) as a design guide[觀看](https://www.bilibili.com/video/BV1xSQnBcEMX/)3理解區塊主題術語與層級Overview of WordPress block theme[3](#eng-block-theme) terms and hierarchy[觀看](https://www.bilibili.com/video/BV14mQnBYEMp/)4用區塊優先思維做設計Designing with a block first mindset[觀看](https://www.bilibili.com/video/BV1xmQnBaE6t/)5找到適合設計需求的區塊主題Finding a block theme for your design needs[觀看](https://www.bilibili.com/video/BV1xmQnBaEXi/)6選擇與安裝插件Choosing and installing a plugin[觀看](https://www.bilibili.com/video/BV1xmQnBaE2R/)7認識 WordPress 儀表盤Getting started with the WordPress Dashboard[5](#eng-dashboard)[觀看](https://www.bilibili.com/video/BV1pLQnBsELR/)8搞懂文章與頁面的區別Understanding the difference between WordPress posts and pages[觀看](https://www.bilibili.com/video/BV1kLQnBWExC/)9為什麼用站點編輯器做設計原型Why design in the Site Editor[2](#eng-site-editor) and use it for prototyping？[觀看](https://www.bilibili.com/video/BV1kLQnBWEw6/)10創建包容性網站的無障礙指南Web accessibility[6](#eng-accessibility) guidelines to create inclusive websites[觀看](https://www.bilibili.com/video/BV1rLQnBWEou/)11測試內容的無障礙性Testing your content for accessibility[觀看](https://www.bilibili.com/video/BV1AVQnBdEjt/)12初識站點編輯器Intro to the Site Editor[觀看](https://www.bilibili.com/video/BV1kVQnBREVV/)13區分首頁顯示設置與不同模板Differentiating between homepage display settings and various templates[觀看](https://www.bilibili.com/video/BV1kVQnBREyF/)14使用頁面模板Using page templates[觀看](https://www.bilibili.com/video/BV16EQnBHEKx/)15使用模板部件Using template parts[觀看](https://www.bilibili.com/video/BV16EQnBHErq/)16自定義顏色、字體、排版與佈局Customizing theme settings： Colors, fonts, typography and layout[觀看](https://www.bilibili.com/video/BV16EQnBHEhm/)17使用 Group 區塊做設計Designing with the Group block[7](#eng-group-block)[觀看](https://www.bilibili.com/video/BV1FEQnBpEfi/)18使用 Row 與 Stack 區塊做設計Designing with Row[8](#eng-row-block) and Stack[9](#eng-stack-block) blocks[觀看](https://www.bilibili.com/video/BV1cjQnB9ESZ/)19使用 Columns 區塊做設計Designing with the Columns block[10](#eng-columns-block)[觀看](https://www.bilibili.com/video/BV1rjQnBXECF/)20尺寸設置：內邊距、外邊距與區塊間距Dimensions： Padding, margin and block spacing[觀看](https://www.bilibili.com/video/BV1cjQnB9ECn/)21使用圖庫區塊Utilize the Gallery block[11](#eng-gallery-block)[觀看](https://www.bilibili.com/video/BV1cjQnB9EkA/)22使用媒體與文本區塊Using the WordPress Media and Text block[12](#eng-media-text-block)[觀看](https://www.bilibili.com/video/BV1suQnBbERF/)23深入瞭解封面區塊Uncovering the Cover block[13](#eng-cover-block)[觀看](https://www.bilibili.com/video/BV11uQnBtEE3/)24用插件創建輪播滑塊Using a plugin to create a carousel slider[14](#eng-carousel-slider)[觀看](https://www.bilibili.com/video/BV11uQnBtEM5/)本教程由文派開源團隊製作發佈，遵循知識共享協議。在 B 站關注「文派開源」獲取更多 WordPress 學習資源。 ### 名詞解釋 1. PHP：WordPress 主要使用的服務器端腳本語言。 [↩︎](#eng-php-link) 2. Site Editor：WordPress 的全站可視化編輯工具，可編輯模板、樣式與站點結構。 [↩︎](#eng-site-editor-link) 3. block theme：基於區塊系統構建的主題，可直接在編輯器中定製模板和樣式。 [↩︎](#eng-block-theme-link) 4. Style Book：集中預覽主題區塊樣式的設計參考界面。 [↩︎](#eng-style-book-link) 5. WordPress Dashboard：WordPress 後台管理主界面，用於管理內容、外觀、插件和設置。 [↩︎](#eng-dashboard-link) 6. accessibility：讓更多用户，包括殘障用户，也能順暢使用網站的設計與開發實踐。 [↩︎](#eng-accessibility-link) 7. Group block：用於組織多個區塊並統一設置佈局、間距和樣式的容器區塊。 [↩︎](#eng-group-block-link) 8. Row：讓多個區塊按水平方向排列的佈局方式。 [↩︎](#eng-row-block-link) 9. Stack：讓多個區塊按垂直方向堆疊排列的佈局方式。 [↩︎](#eng-stack-block-link) 10. Columns block：用於創建多列版式佈局的區塊。 [↩︎](#eng-columns-block-link) 11. Gallery block：用於批量展示多張圖片並管理網格排版的區塊。 [↩︎](#eng-gallery-block-link) 12. Media and Text block：把媒體內容與文字説明組合展示的區塊。 [↩︎](#eng-media-text-block-link) 13. Cover block：可在圖片或視頻上疊加文字與內容的視覺區塊。 [↩︎](#eng-cover-block-link) 14. carousel slider：以輪播方式切換多張圖片或內容卡片的界面組件。 [↩︎](#eng-carousel-slider-link)