HTML / CSS / JavaScript 基礎

在深入 WordPress 開發之前，必須先掌握網頁前端的三大支柱：HTML 負責結構、CSS 負責樣式、JavaScript 負責互動。本章會用 WordPress 主題開發會遇到的角度，快速建立前端基礎，讓你能讀懂模板、調整版面，並加入簡單互動。

2.1 HTML 基礎

HTML (HyperText Markup Language) 是建構網頁的標記語言，使用 <tag>...</tag> 的語法定義文件結構。

HTML 的核心任務：描述內容結構

HTML 不應該先被當成「排版工具」，而應該被視為「內容結構」。例如一篇文章應該有標題、段落、清單、圖片與連結；網站頁面則可能有頁首、導覽、主要內容、側欄與頁尾。這些都應該用適合的標籤表達。

常用標籤包含：

• <h1> 到 <h6>：標題層級，一頁通常只有一個主要 <h1>。
• <p>：段落文字。
• <a>：超連結，可連到站內或站外資源。
• <img>：圖片，應搭配有意義的 alt 文字。
• <ul>、<ol>、<li>：無序與有序清單。
• <div> 與 <span>：沒有語意的容器，適合在沒有更明確標籤時使用。

語意化標籤與 WordPress 模板

HTML5 提供許多語意化標籤，例如 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer>。這些標籤能讓瀏覽器、搜尋引擎與輔助工具更容易理解頁面結構。

<article class="post-card">
  <header>
    <h2><a href="/hello-world/">我的第一篇文章</a></h2>
    <p>發布於 2026/05/10</p>
  </header>
  <p>這裡是文章摘要，通常會顯示在文章列表頁。</p>
</article>

在 WordPress 主題中，文章列表、單篇文章與頁面模板都會輸出類似結構。你越熟悉語意化 HTML，越能寫出清楚、可維護、也更友善於 SEO 的主題。

HTML 實作檢查清單

• 頁面主要標題是否使用 <h1>？
• 標題層級是否依序排列，而不是只為了字體大小亂跳？
• 圖片是否有 alt？裝飾圖片可使用空的 alt=""。
• 按鈕動作用 <button>，頁面跳轉用 <a>。
• 清單資料是否使用 <ul> 或 <ol>，而不是一堆換行文字？

2.2 CSS 基礎

CSS (Cascading Style Sheets) 用於設定 HTML 元素的樣式：顏色、字型、版面、間距等。

選擇器與階層

CSS 透過選擇器找到 HTML 元素，再套用樣式。常見選擇器包含元素選擇器、class 選擇器、id 選擇器與狀態選擇器。

body {
  font-family: "Noto Sans TC", sans-serif;
}

.post-card {
  border: 1px solid #e2e8f0;
  padding: 24px;
}

.post-card a:hover {
  color: #2563eb;
}

在實務專案中，建議多使用 class 選擇器，少用過度複雜的巢狀選擇器，這樣樣式比較容易覆寫與維護。

盒模型：每個元素都是盒子

CSS 版面的核心是盒模型。每個元素都可以想成一個盒子，由內容、內距、邊框與外距組成：

• content：元素實際內容。
• padding：內容與邊框之間的距離。
• border：盒子的邊線。
• margin：元素與其他元素之間的距離。

常見設定是讓全站使用 box-sizing: border-box;，讓元素寬度比較直覺：

*,
*::before,
*::after {
  box-sizing: border-box;
}

Flexbox、Grid 與響應式設計

Flexbox 適合處理一維排列，例如導覽列、按鈕群組、卡片內部對齊；Grid 適合處理二維版面，例如課程卡片列表、作品集與儀表板。

.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

響應式設計的目標不是「手機版另外做一個網站」，而是同一份 HTML 在不同螢幕寬度下有合適的排列方式。Media Query 可用來調整手機版樣式：

@media (max-width: 720px) {
  .modules-grid {
    grid-template-columns: 1fr;
  }
}

2.3 JavaScript 基礎

JavaScript 是瀏覽器中執行的腳本語言，用於實作互動效果。

變數、函式與條件判斷

JavaScript 讓頁面可以根據使用者操作改變狀態。現代 JavaScript 常用 const 宣告不會重新指定的值，用 let 宣告可能改變的值。

const courseName = "WP2026";
let completedLessons = 0;

function markComplete() {
  completedLessons = completedLessons + 1;
  return completedLessons;
}

if (completedLessons === 0) {
  console.log("尚未開始學習");
}

DOM 操作與事件監聽

DOM (Document Object Model) 是瀏覽器把 HTML 轉成可被程式操作的物件結構。透過 DOM，你可以選取元素、修改文字、切換 class 或監聽事件。

<button id="toggle-summary">顯示摘要</button>
<p id="summary" hidden>這是一段課程摘要。</p>

<script>
  const button = document.querySelector("#toggle-summary");
  const summary = document.querySelector("#summary");

  button.addEventListener("click", function () {
    summary.hidden = !summary.hidden;
    button.textContent = summary.hidden ? "顯示摘要" : "隱藏摘要";
  });
</script>

WordPress 佈景主題常用 JavaScript 控制手機選單、深色模式、展開收合、表單驗證與載入更多文章等互動。

本章整合練習

請建立一個「課程卡片」區塊，包含下列需求：

1. 用 HTML 建立卡片結構，包含章節編號、標題、摘要、學習重點清單與按鈕。
2. 用 CSS 設定卡片寬度、邊框、間距、hover 效果與手機版排列。
3. 用 JavaScript 讓按鈕可以展開或隱藏學習重點。

完成後，試著思考：如果這張卡片要變成 WordPress 文章列表的一部分，哪些內容會由資料庫提供？哪些樣式仍然由 CSS 控制？哪些互動需要 JavaScript？