WordPress 區塊樣式：設計一致性網站

什麼是 WordPress 區塊樣式？

WordPress 區塊編輯器 (Gutenberg) 引入了區塊樣式的功能，這是一種強大的方式，可以讓你為你的網站添加視覺變化，同時保持設計的一致性。區塊樣式允許你為特定的區塊（例如按鈕、段落、圖像等）定義不同的外觀，而無需編寫大量的自訂 CSS。這對於希望在他們的網站上提供更豐富的視覺體驗，但又不想從頭開始建構整個佈景主題的用戶來說，尤其有用。

想像一下，你想要在你的網站上使用兩種不同風格的按鈕：一種是主要的藍色按鈕，用於重要的號召性用語，另一種是次要的灰色按鈕，用於較不重要的操作。 使用區塊樣式，你可以輕鬆地為每個按鈕定義這些不同的外觀，並在區塊編輯器中輕鬆選擇它們。這樣可以確保你所有的按鈕都具有一致的外觀，並且符合你的品牌形象。

使用區塊樣式的好處

使用區塊樣式有很多好處，包括：

• 設計一致性：區塊樣式可以幫助你確保整個網站的設計保持一致，從而提升使用者體驗和品牌形象。
• 易於使用：區塊樣式很容易創建和應用，即使你沒有編碼經驗也可以使用。
• 客製化：你可以使用區塊樣式來創建各種不同的視覺效果，以滿足你的特定需求。
• 性能優化：區塊樣式比使用大量的自訂 CSS 更加高效，可以提高網站的性能。
• 提高工作效率：區塊樣式允許你在不同頁面和文章中重複使用一致的設計元素，從而節省時間。

如何創建和使用區塊樣式

創建和使用區塊樣式通常需要編輯你的佈景主題的 functions.php 檔案或使用插件。以下是一個基本的範例，說明如何為段落區塊添加一個簡單的區塊樣式：

首先，打開你的佈景主題的 functions.php 檔案。 注意：在編輯佈景主題檔案之前，強烈建議你備份你的網站。

然後，添加以下程式碼：

<?php
function my_theme_register_block_styles() {
  register_block_style(
    'core/paragraph',
    array(
      'name'  => 'highlighted',
      'label' => __( 'Highlighted Paragraph', 'my-theme' ),
    )
  );
}
add_action( 'init', 'my_theme_register_block_styles' );
?>

這段程式碼會為段落區塊 (core/paragraph) 註冊一個新的樣式，名為 “Highlighted Paragraph”。現在，你需要為這個樣式添加 CSS。 你可以在你的佈景主題的 style.css 檔案或透過自訂程式碼加入 CSS：

.wp-block-paragraph.is-style-highlighted {
  background-color: #FFFFE0; /* 淺黃色 */
  padding: 10px;
  border: 1px solid #ddd;
}

現在，當你在 WordPress 編輯器中編輯一個段落區塊時，你應該會在區塊設定側邊欄中看到 “Highlighted Paragraph” 這個樣式選項。 選擇它，你的段落區塊就會應用你定義的 CSS 樣式。

更進階的應用：

• 不同的區塊：你可以為任何區塊註冊樣式，例如按鈕、圖像、標題等等。只需將 'core/paragraph' 替換為你要定位的區塊名稱即可。
• 多個樣式：你可以為同一個區塊註冊多個樣式，提供更多的視覺選項。
• 使用插件：有一些插件可以讓你更輕鬆地管理區塊樣式，例如 “Stylish Blocks” 或 “Block Style Variations”。

區塊樣式的最佳實踐

為了充分利用區塊樣式，請遵循以下最佳實踐：

• 仔細規劃：在開始創建區塊樣式之前，先規劃好你的網站設計，並確定哪些區塊需要不同的樣式。
• 保持一致性：確保你的區塊樣式與你的品牌形象和整體設計風格保持一致。
• 簡潔明瞭：避免創建過多或過於複雜的區塊樣式，以免讓使用者感到困惑。
• 測試和調整：在發布你的網站之前，務必測試所有的區塊樣式，並根據需要進行調整。
• 可訪問性：確保你的區塊樣式設計符合可訪問性指南，以便所有使用者都能輕鬆訪問你的網站。 考慮到顏色對比度、文字大小和螢幕閱讀器相容性。

範例：建立一個帶有陰影效果的圖片區塊樣式

讓我們看一個更具體的例子。我們將創建一個名為 “Shadowed Image” 的圖片區塊樣式，它會為圖片添加一個微妙的陰影效果。 首先，將以下程式碼添加到你的 functions.php 檔案：

<?php
function my_theme_register_block_styles_image() {
  register_block_style(
    'core/image',
    array(
      'name'  => 'shadowed-image',
      'label' => __( 'Shadowed Image', 'my-theme' ),
    )
  );
}
add_action( 'init', 'my_theme_register_block_styles_image' );
?>

然後，將以下 CSS 添加到你的 style.css 檔案：

.wp-block-image.is-style-shadowed-image img {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

.wp-block-image.is-style-shadowed-image img:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}

現在，當你在 WordPress 編輯器中插入一個圖片區塊時，你應該會在區塊設定側邊欄中看到 “Shadowed Image” 這個樣式選項。 選擇它，你的圖片區塊就會應用陰影效果。

常見問題 (FAQ)

區塊樣式和自訂 CSS 之間有什麼區別？

區塊樣式是一種在區塊編輯器中提供預定義視覺變化的方式，而自訂 CSS 則允許你添加任何你想要的 CSS 規則。 區塊樣式更適合用於創建重複使用的視覺元素，而自訂 CSS 更適合用於單次性的修改。區塊樣式也更容易管理，因為它們是與區塊本身相關聯的，而不是分散在不同的 CSS 檔案中。

我可以使用區塊樣式來修改所有區塊嗎？

是的，你可以為任何區塊註冊樣式，包括核心區塊和來自插件的區塊。 只要你知道區塊的名稱（例如 core/paragraph, core/image），你就可以為它註冊樣式。

區塊樣式會影響網站的性能嗎？

如果使用得當，區塊樣式可以提高網站的性能。 因為它們允許你避免使用大量的自訂 CSS，這可能會增加網站的檔案大小和載入時間。 然而，過多的區塊樣式仍然可能會影響性能，所以請謹慎使用。