本篇文章介紹如何在 PHP 環境中結合 Firebase Firestore，實作一個前端按鈕匯出抽獎資料為 CSV 檔案的功能。此功能適合需要將 Firestore 資料批次匯出，並提供給非技術人員下載的場景。讀者需具備基本 PHP 與 JavaScript 知識，並了解 Firebase Firestore 的基本操作。

Firebase 初始化與匿名登入

在前端使用 Firebase SDK，首先透過 initializeApp 初始化 Firebase，並使用匿名登入 (signInAnonymously) 取得存取 Firestore 的權限。這樣做可以避免在伺服器端直接操作 Firebase，減少安全風險。

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
await signInAnonymously(auth);
const db = getFirestore(app);

分頁抓取 Firestore 資料

Firestore 資料量可能很大，因此使用分頁查詢避免一次讀取過多資料造成效能問題。透過 orderBy("__name__") 與 startAfter 搭配 limit，逐頁取得資料直到抓完為止。

async function fetchAllEntriesPaged(db, pageSize = 500) {
  const colRef = collection(db, ENTRY_COLLECTION_PATH);
  let all = [];
  let lastDoc = null;
  while (true) {
    let q = query(colRef, orderBy("__name__"), limit(pageSize));
    if (lastDoc) q = query(colRef, orderBy("__name__"), startAfter(lastDoc), limit(pageSize));
    const snap = await getDocs(q);
    if (snap.empty) break;
    snap.forEach(d => all.push({ id: d.id, ...d.data() }));
    lastDoc = snap.docs[snap.docs.length - 1];
    if (snap.size < pageSize) break;
  }
  return all;
}

CSV 格式處理與下載

匯出 CSV 需要將資料轉成符合格式的字串，並處理特殊字元（如逗號、雙引號、換行）。csvEscape 函式負責這部分。下載時利用 Blob 物件與 URL.createObjectURL 產生可下載的連結。

function csvEscape(val) {
  if (val === null || val === undefined) return "";
  const s = String(val);
  if (/[",\n\r]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
  return s;
}

function downloadCSV(lines, filename) {
  const csv = "\uFEFF" + lines.join("\r\n");
  const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  a.remove();
  URL.revokeObjectURL(url);
}

時間戳記格式轉換

Firestore 的時間欄位格式特殊，可能是 Timestamp 物件或其他形式，透過 tsToISO 函式統一轉成 ISO 8601 字串，方便 CSV 讀取與後續處理。

function tsToISO(v) {
  try {
    if (!v) return "";
    if (typeof v.toDate === "function") return v.toDate().toISOString();
    if (typeof v.seconds === "number") return new Date(v.seconds * 1000).toISOString();
    return String(v);
  } catch {
    return "";
  }
}

實作匯出流程

按下「下載 CSV」按鈕後，觸發 runExport 函式，依序完成初始化、登入、資料分頁抓取、CSV 組合、下載檔案與狀態更新。過程中會禁用按鈕避免重複點擊，並顯示目前狀態。

async function runExport() {
  $status.textContent = "";
  $btn.disabled = true;
  $btn.textContent = "匯出中...";
  try {
    const app = initializeApp(firebaseConfig);
    const auth = getAuth(app);
    await signInAnonymously(auth);
    const db = getFirestore(app);
    $status.textContent = "正在抓取資料...";
    const rows = await fetchAllEntriesPaged(db, 500);
    if (!rows.length) {
      $status.textContent = "沒有任何資料可匯出。";
      return;
    }
    const headers = ["docId", "name", "classroom", "teacher", "entryDate", "entryNumber", "isWinner", "drawTime", "drawnBy", "createdAt", "updatedAt"];
    const lines = [];
    lines.push(headers.map(csvEscape).join(","));
    for (const r of rows) {
      const line = [
        r.id ?? "",
        r.name ?? "",
        r.classroom ?? "",
        r.teacher ?? "",
        r.entryDate ?? "",
        r.entryNumber ?? "",
        (r.isWinner === true) ? "true" : "false",
        r.drawTime ?? "",
        r.drawnBy ?? "",
        tsToISO(r.createdAt),
        tsToISO(r.updatedAt),
      ].map(csvEscape).join(",");
      lines.push(line);
    }
    const filename = `christmas_raffle_entries_${getTodayDate()}.csv`;
    downloadCSV(lines, filename);
    $status.textContent = `匯出完成：共 ${rows.length} 筆`;
  } catch (e) {
    console.error(e);
    $status.textContent = `匯出失敗：${e.message}`;
  } finally {
    $btn.disabled = false;
    $btn.textContent = "⬇️ 下載 CSV";
  }
}

實際應用與延伸

此實作適合用於管理後台快速匯出 Firestore 資料，方便非技術人員下載報表。未來可擴充支援更多資料欄位，或改用後端匯出以保護 Firebase 金鑰安全。也可以加入進度條或分頁匯出功能，提升使用體驗。

常見問題與注意事項

• Firebase 配置需正確填寫並允許匿名登入。
• Firestore 權限規則需設定允許讀取資料。
• 大量資料匯出時，注意瀏覽器記憶體限制與執行時間。
• CSV 格式需妥善處理特殊字元避免格式錯亂。

完整程式碼

<?php
function at_christmas_export_menu_page()
{
    ?>
    <div class="wrap">

<h1>匯出抽獎資料 CSV</h1>

<p>
            <button id="at-export-btn" class="button button-primary">⬇️ 下載 CSV</button>
            <span id="at-export-status" style="margin-left:10px;"></span>
        </p>
    </div>

    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
        import { getAuth, signInAnonymously } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
        import {
            getFirestore,
            collection,
            query,
            getDocs,
            orderBy,
            limit,
            startAfter
        } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";

        const firebaseConfig = {
            apiKey: "YOUR_API_KEY",
            authDomain: "YOUR_AUTH_DOMAIN",
            projectId: "YOUR_PROJECT_ID",
            storageBucket: "YOUR_STORAGE_BUCKET",
            messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
            appId: "YOUR_APP_ID",
            measurementId: "YOUR_MEASUREMENT_ID"
        };

        const projectId = firebaseConfig.projectId || "YOUR_PROJECT_ID";
        const ENTRY_COLLECTION_PATH = `artifacts/${projectId}/public/data/christmas_raffle_entries`;

        const $btn = document.getElementById("at-export-btn");
        const $status = document.getElementById("at-export-status");

        function getTodayDate() {
            const now = new Date();
            const y = now.getFullYear();
            const m = String(now.getMonth() + 1).padStart(2, "0");
            const d = String(now.getDate()).padStart(2, "0");
            return `${y}-${m}-${d}`;
        }

        function csvEscape(val) {
            if (val === null || val === undefined) return "";
            const s = String(val);
            if (/[",\n\r]/.test(s)) return `"${s.replace(/"/g, '""')}"`;
            return s;
        }

        function tsToISO(v) {
            try {
                if (!v) return "";
                if (typeof v.toDate === "function") return v.toDate().toISOString();
                if (typeof v.seconds === "number") return new Date(v.seconds * 1000).toISOString();
                return String(v);
            } catch {
                return "";
            }
        }

        async function fetchAllEntriesPaged(db, pageSize = 500) {
            const colRef = collection(db, ENTRY_COLLECTION_PATH);

            let all = [];
            let lastDoc = null;

            while (true) {
                let q = query(colRef, orderBy("__name__"), limit(pageSize));
                if (lastDoc) q = query(colRef, orderBy("__name__"), startAfter(lastDoc), limit(pageSize));

                const snap = await getDocs(q);
                if (snap.empty) break;

                snap.forEach(d => all.push({ id: d.id, ...d.data() }));
                lastDoc = snap.docs[snap.docs.length - 1];

                if (snap.size < pageSize) break;
            }
            return all;
        }

        function downloadCSV(lines, filename) {
            const csv = "\uFEFF" + lines.join("\r\n"); // BOM for Excel
            const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
        }

        async function runExport() {
            $status.textContent = "";
            $btn.disabled = true;
            $btn.textContent = "匯出中...";

            try {
                const app = initializeApp(firebaseConfig);
                const auth = getAuth(app);
                await signInAnonymously(auth);

                const db = getFirestore(app);

                $status.textContent = "正在抓取資料...";
                const rows = await fetchAllEntriesPaged(db, 500);

                if (!rows.length) {
                    $status.textContent = "沒有任何資料可匯出。";
                    return;
                }

                const headers = [
                    "docId",
                    "name",
                    "classroom",
                    "teacher",
                    "entryDate",
                    "entryNumber",
                    "isWinner",
                    "drawTime",
                    "drawnBy",
                    "createdAt",
                    "updatedAt"
                ];

                const lines = [];
                lines.push(headers.map(csvEscape).join(","));

                for (const r of rows) {
                    const line = [
                        r.id ?? "",
                        r.name ?? "",
                        r.classroom ?? "",
                        r.teacher ?? "",
                        r.entryDate ?? "",
                        r.entryNumber ?? "",
                        (r.isWinner === true) ? "true" : "false",
                        r.drawTime ?? "",
                        r.drawnBy ?? "",
                        tsToISO(r.createdAt),
                        tsToISO(r.updatedAt),
                    ].map(csvEscape).join(",");
                    lines.push(line);
                }

                const filename = `christmas_raffle_entries_${getTodayDate()}.csv`;
                downloadCSV(lines, filename);

                $status.textContent = `匯出完成：共 ${rows.length} 筆`;
            } catch (e) {
                console.error(e);
                $status.textContent = `匯出失敗：${e.message}`;
            } finally {
                $btn.disabled = false;
                $btn.textContent = "⬇️ 下載 CSV";
            }
        }

        $btn.addEventListener("click", runExport);
    </script>
<?php
}
?>

在某些網頁應用中，開發者可能希望防止使用者透過滑鼠右鍵開啟選單，以避免內容被輕易複製或操作。這段程式碼提供了一個簡單且不影響其他滑鼠功能的解決方案，適合有基礎 JavaScript 知識且想快速實作右鍵禁用的工程師或自學者。

事件監聽與右鍵選單阻擋

核心概念是監聽瀏覽器的 contextmenu 事件，該事件會在使用者嘗試開啟右鍵選單時觸發。透過呼叫 event.preventDefault()，可以阻止預設行為，也就是禁止顯示右鍵選單。

重要程式碼片段

document.addEventListener("contextmenu", function (e) {
    e.preventDefault();
});

這段程式碼綁定全域的 contextmenu 事件監聽器，當事件發生時直接阻止預設動作。

為什麼用立即執行函式包裹？

使用立即執行函式 (IIFE) 可以避免全域變數污染，確保程式碼在嚴格模式下運行 ("use strict")，增加程式的穩定性與安全性。

實務應用與注意事項

• 此方法只禁止右鍵選單，不會影響左鍵點擊、文字選取或快捷鍵操作，對使用者體驗影響較小。
• 但此防護並非絕對安全，仍可被瀏覽器開發者工具或其他方式繞過，適合用於降低一般使用者誤操作。
• 若需更嚴格的內容保護，建議搭配其他前端或後端策略。

延伸優化方向

• 可針對特定元素綁定 contextmenu 事件，避免全域禁用造成使用不便。
• 結合提示訊息告知使用者右鍵功能已被禁用，提高使用者理解。

完整程式碼

(function () {
    "use strict";

    // 只鎖右鍵選單（不影響左鍵、選字、快捷鍵）
    document.addEventListener("contextmenu", function (e) {
        e.preventDefault();
    });
})();

在網頁中嵌入 YouTube 影片時，若希望影片能夠無限循環播放，通常需要在 iframe 的 URL 中加入特定參數。這段程式碼解決了直接設定 loop 參數無法生效的問題，適合需要動態調整或修正第三方影片嵌入參數的前端工程師與自學者。

問題背景與解決方案

YouTube 的 iframe 影片循環播放並非只靠 loop=1 參數即可生效，還必須同時指定 playlist 參數為影片 ID。這段程式碼會自動偵測所有帶有 youtube-loop 類別的 iframe，並補上正確的 loop 與 playlist 參數。

取得並解析 iframe 的 src

程式碼先取得所有符合條件的 iframe，並將 src 中可能被轉譯的 & 轉回 &，確保 URL 正確解析。

const rawSrc = iframe.getAttribute('src');
const src = rawSrc.replace(/&/g, '&');

取得影片 ID

透過字串切割方式，從 src 中擷取影片 ID，這是設定 playlist 參數的關鍵。

const videoId = src.split('/embed/')[1]?.split('?')[0];

設定 loop 與 playlist 參數

利用 URL 物件操作，設定 loop=1 與 playlist=影片ID，並避免重複設定造成無限迴圈。

const url = new URL(src);
url.searchParams.set('loop', '1');
url.searchParams.set('playlist', videoId);
const newSrc = url.toString();
if (newSrc !== src) iframe.setAttribute('src', newSrc);

實務應用與優化建議

• 此方法適合在頁面載入後或動態插入 iframe 後呼叫，確保所有影片都能正確設定循環播放。
• 透過多次延遲呼叫（setTimeout）處理 builder 或 lazy load 產生的 iframe。
• 若有大量 iframe，可考慮改用 MutationObserver 監控 DOM 變化，提高效能與即時性。

常見問題與坑點

• 直接在 iframe URL 加 loop=1 不加 playlist，影片不會循環。
• URL 中的 & 需先轉回 &，否則 URL 解析會錯誤。
• 避免重複設定 src，否則會造成 iframe 不斷重新載入。

完整程式碼

(function () {
  function fixYouTubeLoop() {
    document.querySelectorAll('iframe.youtube-loop').forEach((iframe) => {
      const rawSrc = iframe.getAttribute('src');
      if (!rawSrc) return;

      // 你的 src 可能含有 &，先轉回正常的 &
      const src = rawSrc.replace(/&/g, '&');

      if (!src.includes('youtube.com/embed/')) return;

      const videoId = src.split('/embed/')[1]?.split('?')[0];
      if (!videoId) return;

      const url = new URL(src);
      url.searchParams.set('loop', '1');
      url.searchParams.set('playlist', videoId);

      const newSrc = url.toString();

      // 避免無限重設
      if (newSrc !== src) iframe.setAttribute('src', newSrc);
    });
  }

  document.addEventListener('DOMContentLoaded', fixYouTubeLoop);

  // 若是 builder / lazy load 後面才插入 iframe，再補一次
  setTimeout(fixYouTubeLoop, 800);
  setTimeout(fixYouTubeLoop, 2000);
})();

在 WooCommerce 後台商品列表中，管理者常需要快速取得商品的「加入購物車」連結以便分享或推廣。這段程式碼實作了在商品列表中新增一欄「複製課程連結」按鈕，點擊後可彈出視窗讓使用者輸入優惠券代碼，並將優惠券參數附加到連結中，最後將完整連結複製到剪貼簿。這對於需要快速產生帶優惠券的購物車連結的電商管理者非常實用。

新增自訂欄位顯示複製按鈕

利用 manage_edit-product_columns 過濾器新增一欄「複製課程連結」，並透過 manage_product_posts_custom_column 動作在該欄位輸出一個帶有商品加入購物車 URL 的按鈕。URL 是以網站首頁 URL 加上 /cart/?add-to-cart=商品ID 組成。

add_filter('manage_edit-product_columns', 'add_copy_link_column');
function add_copy_link_column($columns) {
    $columns['copy_add_to_cart'] = __('複製課程連結', 'woocommerce');
    return $columns;
}

add_action('manage_product_posts_custom_column', 'show_copy_link_column_content', 10, 2);
function show_copy_link_column_content($column, $post_id) {
    if ($column === 'copy_add_to_cart') {
        $product_id = (int) $post_id;
        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;
        echo '<button type="button" class="button copy-cart-link" data-url="' . esc_attr($add_to_cart_url) . '" title="點擊複製連結">複製</button>';
    }
}

客製化 JavaScript 處理複製邏輯與優惠券輸入

在後台商品列表頁尾插入 JavaScript 和 CSS，當使用者點擊「複製」按鈕時：

1. 透過 window.prompt 詢問是否輸入優惠券代碼，可留空。
2. 根據輸入結果組合最終 URL，若有優惠券則加上 &wt_coupon=優惠券代碼。
3. 使用 Clipboard API 複製連結，若不支援則使用傳統 execCommand 備援。
4. 複製成功會顯示成功提示，失敗則顯示錯誤提示並提供手動複製。

function buildFinalUrl(baseUrl) {
    var coupon = window.prompt('是否要加入優惠券？\n(可留空，直接按確定即可)', '');
    if (coupon === null) return baseUrl;
    coupon = String(coupon || '').trim();
    if (!coupon) return baseUrl;
    var joiner = (baseUrl.indexOf('?') === -1) ? '?' : '&';
    return baseUrl + joiner + 'wt_coupon=' + encodeURIComponent(coupon);
}

$(document).on('click', '.copy-cart-link', function(e) {
    e.preventDefault();
    var button = $(this);
    var baseUrl = button.data('url');
    var originalHtml = button.html();
    if (button.hasClass('copying')) return;
    button.addClass('copying');
    var finalUrl = buildFinalUrl(baseUrl);
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(finalUrl).then(function() {
            showCopySuccess(button, originalHtml);
        }).catch(function() {
            fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
        });
    } else {
        fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
    }
});

快速動作連結整合

除了欄位按鈕外，也在商品標題下方的快速動作連結加入「複製購物車連結」，提升操作便利性。此連結同樣帶有商品加入購物車的 URL，並套用相同的 JavaScript 行為。

add_filter('post_row_actions', 'add_copy_link_quick_action', 10, 2);
function add_copy_link_quick_action($actions, $post) {
    if ($post->post_type === 'product') {
        $product_id = (int) $post->ID;
        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;
        $actions['copy_cart_link'] = '<a href="#" class="copy-cart-link" data-url="' . esc_attr($add_to_cart_url) . '" style="color:#0073aa;">📋 複製購物車連結</a>';
    }
    return $actions;
}

實務應用與優化建議

此功能適合需要快速產生帶優惠券的購物車連結的 WooCommerce 商店管理員，方便推廣或客服回覆。未來可優化：

• 將網站 URL 改為動態取得，避免硬編碼。
• 增加複製成功的視覺動畫提升 UX。
• 支援多種優惠券參數或其他自訂參數。
• 對於大量商品列表，可考慮優化前端效能。

完整程式碼

<?php
/**
 * WooCommerce 後台商品列表添加複製 add-to-cart 連結的功能 + 可選優惠券
 * 適用於 WPCode（PHP Snippet / Run Everywhere 或 Admin Only）
 *
 * 功能：
 * - 商品列表新增一欄「複製課程連結」
 * - 點按後彈出視窗詢問優惠券（可留空）
 * - 若有填，複製的 URL 會加上：&wt_coupon=COUPON
 * - 同時支援「快速動作」複製
 */

/** 你網站的網域（建議改成動態，不用寫死） */
function my_copy_cart_site_url() {
    return home_url();
}

// 在商品列表中添加自定義列
add_filter('manage_edit-product_columns', 'add_copy_link_column');
function add_copy_link_column($columns) {
    $columns['copy_add_to_cart'] = __('複製課程連結', 'woocommerce');
    return $columns;
}

// 顯示列內容
add_action('manage_product_posts_custom_column', 'show_copy_link_column_content', 10, 2);
function show_copy_link_column_content($column, $post_id) {
    if ($column === 'copy_add_to_cart') {
        $product_id = (int) $post_id;

        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;

        echo '<button type="button" class="button copy-cart-link" data-url="' . esc_attr($add_to_cart_url) . '" title="點擊複製連結">
                 複製
              </button>';
    }
}

// 添加 JavaScript 和 CSS
add_action('admin_footer', 'copy_link_admin_script');
function copy_link_admin_script() {
    $screen = get_current_screen();
    if (!$screen || $screen->id !== 'edit-product') {
        return;
    }
    ?>

<style>
        .copy-cart-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            font-size: 12px;
            line-height: 1.4;
            border-radius: 3px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .copy-cart-link:hover {
            background-color: #000000;
            color: white;
            transform: translateY(-1px);
        }
        .copy-cart-link .dashicons {
            font-size: 14px;
            width: 14px;
            height: 14px;
        }
        .column-copy_add_to_cart {
            width: 110px;
            text-align: center;
        }
        @media screen and (max-width: 782px) {
            .copy-cart-link {
                padding: 6px 10px;
                font-size: 13px;
            }
        }
    </style>

    <script type="text/javascript">
        jQuery(document).ready(function($) {

            // 組裝最終要複製的 URL（可選 wt_coupon）
            function buildFinalUrl(baseUrl) {
                // 1) 詢問優惠券（可留空）
                var coupon = window.prompt('是否要加入優惠券？\n(可留空，直接按確定即可)', '');

                // 使用者按取消 -> 仍照原本複製（你也可以改成 return null 代表不複製）
                if (coupon === null) {
                    return baseUrl;
                }

                coupon = String(coupon || '').trim();
                if (!coupon) {
                    return baseUrl;
                }

                // 2) 已有 ?add-to-cart=...，直接加 &wt_coupon=
                //    若未來 baseUrl 可能沒有 query，這裡也做保險處理
                var joiner = (baseUrl.indexOf('?') === -1) ? '?' : '&';
                return baseUrl + joiner + 'wt_coupon=' + encodeURIComponent(coupon);
            }

            $(document).on('click', '.copy-cart-link', function(e) {
                e.preventDefault();

                var button = $(this);
                var baseUrl = button.data('url');
                var originalHtml = button.html();

                if (button.hasClass('copying')) return;
                button.addClass('copying');

                var finalUrl = buildFinalUrl(baseUrl);

                // 若你希望「按取消就不複製」，把 buildFinalUrl 的取消行為改成 return null
                // 然後這裡加上：
                // if (!finalUrl) { button.removeClass('copying'); return; }

                if (navigator.clipboard && window.isSecureContext) {
                    navigator.clipboard.writeText(finalUrl).then(function() {
                        showCopySuccess(button, originalHtml);
                    }).catch(function(err) {
                        console.error('Copy failed: ', err);
                        fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
                    });
                } else {
                    fallbackCopyTextToClipboard(finalUrl, button, originalHtml);
                }
            });

            function fallbackCopyTextToClipboard(text, button, originalHtml) {
                var textArea = document.createElement("textarea");
                textArea.value = text;

                textArea.style.top = "0";
                textArea.style.left = "0";
                textArea.style.position = "fixed";
                textArea.style.opacity = "0";
                textArea.style.pointerEvents = "none";

                document.body.appendChild(textArea);
                textArea.focus();
                textArea.select();

                try {
                    var successful = document.execCommand('copy');
                    if (successful) {
                        showCopySuccess(button, originalHtml);
                    } else {
                        showCopyError(button, originalHtml, text);
                    }
                } catch (err) {
                    console.error('Copy failed: ', err);
                    showCopyError(button, originalHtml, text);
                }

                document.body.removeChild(textArea);
            }

            function showCopySuccess(button, originalHtml) {
                button.removeClass('copying').addClass('copied');
                button.html('<span class="dashicons dashicons-yes"></span> 已複製');

                setTimeout(function() {
                    button.removeClass('copied');
                    button.html(originalHtml);
                }, 2500);
            }

            function showCopyError(button, originalHtml, text) {
                button.removeClass('copying');

                var tooltip = $('<div class="copy-error-tooltip" style="position:absolute;background:#333;color:#fff;padding:8px 12px;border-radius:4px;font-size:12px;z-index:9999;max-width:320px;word-break:break-all;">複製失敗，請手動複製：<br>' + text + '</div>');
                $('body').append(tooltip);

                var buttonOffset = button.offset();
                tooltip.css({
                    top: buttonOffset.top - tooltip.outerHeight() - 5,
                    left: buttonOffset.left
                });

                setTimeout(function() { tooltip.remove(); }, 5000);

                tooltip.on('click', function() {
                    if (navigator.clipboard) navigator.clipboard.writeText(text);
                    $(this).remove();
                });
            }

        });
    </script>
    <?php
}

// 可選：添加快速動作連結（在商品名稱下方）
add_filter('post_row_actions', 'add_copy_link_quick_action', 10, 2);
function add_copy_link_quick_action($actions, $post) {
    if ($post->post_type === 'product') {
        $product_id = (int) $post->ID;

        $site_url = my_copy_cart_site_url();
        $add_to_cart_url = $site_url . '/cart/?add-to-cart=' . $product_id;

        $actions['copy_cart_link'] = '<a href="#" class="copy-cart-link" data-url="' . esc_attr($add_to_cart_url) . '" style="color:#0073aa;">📋 複製購物車連結</a>';
    }
    return $actions;
}

在多語系網站中，語言切換器常以下拉選單呈現。這段程式碼示範如何用純 JavaScript 實作語言切換下拉選單的開關與關閉行為，適合需要自訂互動邏輯且不依賴外部函式庫的前端工程師或自學者。

元素選取與初始檢查

首先透過 document.querySelector 取得包裹整個語言切換器的容器 .lang-wrapper，若找不到則直接結束，避免後續執行錯誤。接著從 wrapper 中取得觸發按鈕 .lang-btn 和下拉選單 nav[role="navigation"]，同樣檢查是否存在。

const wrapper = document.querySelector('.lang-wrapper');
if (!wrapper) return;

const btn = wrapper.querySelector('.lang-btn');
const nav = wrapper.querySelector('nav[role="navigation"]');
if (!btn || !nav) return;

這樣的防呆設計確保程式碼安全執行。

點擊按鈕切換下拉選單

為按鈕綁定點擊事件，點擊時阻止事件冒泡，避免觸發 document 的點擊事件導致下拉選單立即關閉。接著透過 classList.toggle 切換下拉選單的 is-open 樣式類別，達成開關效果。

btn.addEventListener('click', function (e) {
  e.stopPropagation();
  nav.classList.toggle('is-open');
});

點擊外部區域關閉下拉選單

監聽整個文件的點擊事件，判斷點擊目標是否在 wrapper 範圍內，若不在則移除 is-open，關閉下拉選單。這是常見的 UX 行為，避免下拉選單在使用者點擊其他區域時仍保持開啟。

document.addEventListener('click', function (e) {
  if (!wrapper.contains(e.target)) {
    nav.classList.remove('is-open');
  }
});

按下 ESC 鍵關閉下拉選單

為提升無障礙與使用便利性，監聽鍵盤事件，當使用者按下 ESC 鍵時，也會關閉下拉選單。

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape') {
    nav.classList.remove('is-open');
  }
});

實務應用與優化方向

此實作不依賴任何框架，適用於輕量網站。若要擴充，可加入鍵盤導覽支援（如方向鍵選擇）、ARIA 屬性強化無障礙，或改用事件代理提升效能。此外，CSS 動畫搭配 is-open 類別能帶來更好的使用體驗。

完整程式碼

document.addEventListener('DOMContentLoaded', function () {
  const wrapper = document.querySelector('.lang-wrapper');
  if (!wrapper) return;

  const btn = wrapper.querySelector('.lang-btn');
  const nav = wrapper.querySelector('nav[role="navigation"]');
  if (!btn || !nav) return;

  btn.addEventListener('click', function (e) {
    e.stopPropagation();
    nav.classList.toggle('is-open');
  });

  document.addEventListener('click', function (e) {
    if (!wrapper.contains(e.target)) {
      nav.classList.remove('is-open');
    }
  });

  document.addEventListener('keydown', function (e) {
    if (e.key === 'Escape') {
      nav.classList.remove('is-open');
    }
  });
});

在多頁面網站中，常見需求是讓側邊欄或導覽列中的連結能自動標示當前所在頁面，提升使用者導覽體驗。這段程式碼示範如何透過 JavaScript 取得當前網頁路徑，並比對側邊欄所有連結的 href，對應到正確連結時自動加上「active」CSS 類別。適合需要動態控制導覽狀態的前端工程師或自學者。

取得並標準化當前頁面路徑

首先，我們透過 window.location.pathname 取得目前頁面的路徑，並轉成小寫以避免大小寫不一致問題。接著使用正則表達式移除路徑尾端多餘的斜線，確保 /a/b/ 與 /a/b 被視為相同路徑。若路徑為空字串，則設定為根目錄 /。

let currentPath = window.location.pathname.toLowerCase();
currentPath = currentPath.replace(/\/+$|\/$/, "");
if (currentPath === "") currentPath = "/";

選取側邊欄連結並逐一比對

使用 document.querySelectorAll 選取所有帶有 .anchor-links .link 的連結元素。對每個連結，我們先取得 href 屬性，並使用 URL 物件將相對路徑轉成絕對路徑，確保比對時不會因為相對路徑造成錯誤。

const links = document.querySelectorAll(".anchor-links .link");
links.forEach(link => {
  const href = link.getAttribute("href");
  if (!href) return;
  const url = new URL(href, window.location.origin);
  let hrefPath = url.pathname.toLowerCase();
  hrefPath = hrefPath.replace(/\/+$/, "");
  if (hrefPath === "") hrefPath = "/";

  if (hrefPath === currentPath) {
    link.classList.add("active");
  }
});

為何要使用 URL 物件？

使用 new URL(href, window.location.origin) 可以將相對路徑（例如 ../page）轉換成完整的絕對路徑，避免直接比對相對路徑時因基底路徑不同而失準。這是實務中常見的路徑比對技巧。

實際應用場景

• 多層次導覽列或側邊欄，需自動標示當前頁面。
• 靜態網站或沒有後端模板渲染的情況下，前端動態控制導覽狀態。

延伸優化方向

• 可加入支援查詢字串（query string）或 hash 的比對。
• 支援部分路徑匹配，例如 /blog 下所有頁面都標示為 active。
• 將功能封裝成函式，方便重複使用。

常見問題與注意事項

• 確保側邊欄連結的 href 屬性正確，避免空值或錯誤路徑。
• 不同瀏覽器對 URL 物件支援度良好，但在非常舊版本可能需 polyfill。
• 若網站有使用前端路由（如 SPA），此方法需配合路由狀態更新。

完整程式碼

document.addEventListener("DOMContentLoaded", function () {
    // 目前頁面的 path，例如 /investor-relations/corporate-governance/
    let currentPath = window.location.pathname.toLowerCase();
    // 移除結尾多餘的斜線（/a/b/ -> /a/b）
    currentPath = currentPath.replace(/\/+$/, "");
    if (currentPath === "") currentPath = "/";

    const links = document.querySelectorAll(".anchor-links .link");

    links.forEach(link => {
        const href = link.getAttribute("href");
        if (!href) return;

        // 轉成絕對網址再拿 pathname，避免相對路徑問題
        const url = new URL(href, window.location.origin);
        let hrefPath = url.pathname.toLowerCase();
        hrefPath = hrefPath.replace(/\/+$/, "");
        if (hrefPath === "") hrefPath = "/";

        // ✅ 完整匹配才加 active
        if (hrefPath === currentPath) {
            link.classList.add("active");
        }
    });
});

在許多網頁應用中，常見的 UI 元件之一是 Tab 切換功能，讓使用者能在同一區塊內切換不同內容面板。這段程式碼示範如何用純 JavaScript 實作按鈕控制多個 Tab 面板的顯示與隱藏，適合有基礎 DOM 操作經驗，想了解如何手動管理元素狀態的前端工程師或自學者。

按鈕與面板元素的選取

首先，程式碼透過 document.querySelectorAll 分別取得所有具有 .action-btn 與 .tab-panel 類別的元素。這兩組元素分別代表切換按鈕與對應的內容面板。若任一組元素不存在，則直接結束執行，避免後續錯誤。

const buttons = document.querySelectorAll('.action-btn');
const panels  = document.querySelectorAll('.tab-panel');
if (!buttons.length || !panels.length) return;

activateButton 函式設計

activateButton 是核心函式，負責切換按鈕的「活躍」狀態與對應面板的顯示。它透過按鈕的 data-target 屬性取得目標面板的類別名稱，並依序執行：

1. 移除所有按鈕的 is-active 樣式，確保只有一個按鈕處於活躍狀態。
2. 為當前按鈕加上 is-active 樣式。
3. 隱藏所有面板（移除 is-active 樣式）。
4. 顯示對應目標面板（可支援多個面板同時顯示），加上 is-active 樣式。

這種設計讓按鈕與面板的關聯透過 CSS 類別靈活控制，方便樣式調整與擴充。

function activateButton(btn) {
  const target = btn.dataset.target;
  if (!target) return;

  buttons.forEach(b => b.classList.remove('is-active'));
  btn.classList.add('is-active');

  panels.forEach(p => p.classList.remove('is-active'));

  const targetPanels = document.querySelectorAll('.' + target);
  targetPanels.forEach(p => p.classList.add('is-active'));
}

綁定事件與初始化

接著，為每個按鈕綁定點擊事件，點擊時呼叫 activateButton，並阻止預設行為（例如連結跳轉）。

最後，為了讓頁面載入時即有預設顯示的面板，程式碼自動觸發第一個按鈕的點擊事件，確保初始化狀態與使用者互動完全一致，避免手動設定狀態可能導致的不同步問題。

buttons.forEach(btn => {
  btn.addEventListener('click', e => {
    e.preventDefault();
    activateButton(btn);
  });
});

buttons[0].click();

實務應用與延伸

這種純前端的 Tab 切換實作適合用於靜態頁面或不依賴框架的專案。若需要支援動態面板內容或更複雜的狀態管理，可考慮結合前端框架或狀態管理工具。

此外，為提升無障礙性，可在按鈕加入 ARIA 屬性，並確保鍵盤操作友好。

常見問題與注意事項

• 確保每個按鈕的 data-target 對應的面板類別名稱正確，否則無法正確顯示。
• 若有多個面板共用同一類別，會同時顯示，這是設計上的彈性，但需注意樣式與結構。
• 自動觸發點擊事件的做法雖方便，但若未考慮瀏覽器支援或其他腳本，可能會有兼容性問題。

完整程式碼

document.addEventListener('DOMContentLoaded', function () {
  const buttons = document.querySelectorAll('.action-btn');
  const panels  = document.querySelectorAll('.tab-panel');

  if (!buttons.length || !panels.length) return;

  function activateButton(btn) {
    const target = btn.dataset.target;
    if (!target) return;

    buttons.forEach(function (b) {
      b.classList.remove('is-active');
    });

    btn.classList.add('is-active');

    panels.forEach(function (p) {
      p.classList.remove('is-active');
    });

    const targetPanels = document.querySelectorAll('.' + target);
    targetPanels.forEach(function (p) {
      p.classList.add('is-active');
    });
  }

  buttons.forEach(function (btn) {
    btn.addEventListener('click', function (e) {
      e.preventDefault();
      activateButton(btn);
    });
  });

  buttons[0].click();
});

在許多資料表格中，我們常需要根據某個條件（例如年份）來篩選顯示特定的列。這段程式碼示範如何利用純 JavaScript 操作 DOM，根據下拉選單的選擇動態控制表格中帶有特定屬性（data-block）的列顯示與隱藏。適合需要簡潔且無依賴外部函式庫的前端工程師或自學者參考。

取得目標元素與資料列

首先，我們透過 document.getElementById 取得下拉選單元素，並使用 document.querySelectorAll 選取所有帶有 data-block 屬性的表格列（tr）。這些列代表不同年份的資料區塊。

const select = document.getElementById('select-download');
const blocks = Array.from(document.querySelectorAll('table tr[data-block]'));

儲存原始顯示狀態

為了避免直接覆寫 display 屬性導致無法還原，我們先讀取每個列的原始顯示狀態，並存入自訂的 data-orig-display 屬性中。這樣在切換篩選條件時，可以回復到原本的顯示方式。

blocks.forEach(el => {
  if (!el.dataset.origDisplay) {
    const d = window.getComputedStyle(el).display;
    el.dataset.origDisplay = (d && d !== 'none') ? d : 'block';
  }
});

篩選函式設計

applyFilter 函式會根據下拉選單的值，決定每個資料列是否顯示。若選擇 “all”，則全部顯示；否則只顯示 data-block 屬性值符合的列，其他則隱藏。

function applyFilter() {
  const val = select.value; // 例如 'all' 或 '2025'
  blocks.forEach(el => {
    const year = el.getAttribute('data-block');
    if (val === 'all' || year === val) {
      el.style.display = el.dataset.origDisplay;
    } else {
      el.style.display = 'none';
    }
  });
}

綁定事件與初始化

程式碼在 DOMContentLoaded 時執行，確保元素已存在。初次執行一次篩選，並監聽下拉選單的 change 事件，動態更新顯示狀態。

applyFilter();
select.addEventListener('change', applyFilter);

實務應用與延伸

這種用法適合靜態或小型資料表格的前端篩選，無需後端或複雜框架支援。若資料量大，可考慮分頁或虛擬滾動優化效能。未來也能擴充多條件篩選，或搭配 CSS 動畫增強使用者體驗。

常見問題與注意事項

• 確保 data-block 屬性值與下拉選單選項一致。
• 若原始顯示狀態非 block，此程式碼會自動保存並還原，避免顯示異常。
• 若表格結構改變，需確認選取器仍正確。

完整程式碼

document.addEventListener('DOMContentLoaded', function () {
  const select = document.getElementById('select-download');
  if (!select) return;

  // 只控制 Greenshift 的區塊，且有 data-block（年份）
  const blocks = Array.from(
    document.querySelectorAll('table tr[data-block]')
  );

  // 記住原本的 display（以防原本不是 block）
  blocks.forEach(el => {
    if (!el.dataset.origDisplay) {
      const d = window.getComputedStyle(el).display;
      el.dataset.origDisplay = (d && d !== 'none') ? d : 'block';
    }
  });

  function applyFilter() {
    const val = select.value; // 'all' 或 '2025'...
    blocks.forEach(el => {
      const year = el.getAttribute('data-block');
      if (val === 'all' || year === val) {
        el.style.display = el.dataset.origDisplay;
      } else {
        el.style.display = 'none';
      }
    });
  }

  // 初次執行一次（依目前選中的值）
  applyFilter();

  // 監聽選單變更
  select.addEventListener('change', applyFilter);
});

在網頁中，我們常會使用目錄區塊（toc-block）來幫助使用者快速瀏覽內容，但有時候目錄內容（gs-toc）可能因為資料不完整或條件不符而不存在，這時候空白的目錄區塊反而會影響頁面美觀與使用體驗。本文示範如何用簡單的 JavaScript 程式碼，在頁面載入完成後自動檢查並隱藏沒有目錄內容的 toc-block，適合前端工程師或自學者優化動態內容顯示。

為什麼要隱藏空的 toc-block

空的目錄區塊會佔據頁面空間，造成視覺上的空洞，甚至誤導使用者以為頁面資料不完整。透過程式自動判斷並隱藏，可以提升頁面整潔度與使用者體驗，尤其在內容經常變動或由後端動態產生時更為重要。

主要程式碼說明

以下是核心程式碼片段：

document.addEventListener("DOMContentLoaded", function() {
  const tocBlocks = document.querySelectorAll(".toc-block");

  tocBlocks.forEach(block => {
    const hasToc = block.querySelector(".gs-toc");
    if (!hasToc) {
      block.style.display = "none";
    }
  });
});

• 使用 DOMContentLoaded 事件確保 DOM 元素已經載入完畢，避免查詢不到元素。
• 利用 document.querySelectorAll 選取所有 .toc-block 元素，方便批次處理。
• 針對每個 toc-block，使用 querySelector 檢查是否含有 .gs-toc 子元素。
• 若找不到 .gs-toc，代表此目錄區塊沒有內容，將其 display 設為 none，達到隱藏效果。

實務應用與優化方向

• 此方法適用於靜態或動態產生的目錄區塊，確保頁面不會顯示空白區塊。
• 若目錄內容是透過 AJAX 載入，需將檢查邏輯放在資料載入完成後執行。
• 可搭配 CSS 動畫效果，讓隱藏過程更為平滑。
• 若頁面中 toc-block 數量龐大，考慮使用更有效率的 DOM 操作或節流機制。

常見問題與注意事項

• 確認 .gs-toc 是目錄內容的正確 class 名稱，避免誤判。
• 若頁面中有多層目錄結構，需調整選擇器以符合需求。
• 使用 display: none 會完全移除元素佔用空間，若想保留佔位可改用其他 CSS 屬性。

完整程式碼

document.addEventListener("DOMContentLoaded", function() {
  // 取得所有 toc-block
  const tocBlocks = document.querySelectorAll(".toc-block");

  tocBlocks.forEach(block => {
    // 檢查這個 toc-block 底下是否有 gs-toc
    const hasToc = block.querySelector(".gs-toc");

    // 如果沒有找到，則隱藏整個區塊
    if (!hasToc) {
      block.style.display = "none";
    }
  });
});

在 WordPress 網站中，分類清單常用於側邊欄或導覽列，當分類層級較多時，使用者體驗會因為清單過長而降低。這段程式碼的目標是為多層分類清單加入手風琴（Accordion）功能，使得使用者可以展開或收合子分類，提升導覽的清晰度與操作便利性。本文適合有基礎 JavaScript 與 DOM 操作經驗的前端工程師或自學者，想了解如何結合無障礙設計（ARIA）與動態 DOM 操作來優化分類清單。

目標與使用情境

這段程式碼主要解決以下問題：

• 多層分類清單展開收合控制
• 一次只允許展開一個分類（手風琴嚴格模式）
• 兼顧無障礙操作，使用 ARIA 屬性提示狀態
• 保持原有連結功能不受影響

適用於 WordPress 產生的分類清單（如 .wp-block-categories 或 .wp-block-categories-list），並且希望加強使用者操作體驗與無障礙支援。

主要流程解析

1. 選取目標清單容器

const roots = Array.from(document.querySelectorAll('.wp-block-categories, .wp-block-categories-list'));
if (!roots.length) return;

這裡先找出所有符合條件的分類清單容器，若無則直接結束，避免不必要的後續操作。

2. 設定手風琴模式

const singleOpen = true;

設定是否一次只允許展開一個分類項目，true 表示嚴格手風琴模式。

3. 標記並處理有子分類的項目

const parents = Array.from(root.querySelectorAll('li.cat-item > ul.children'))
  .map(ul => ul.parentElement)
  .filter(li => li && li.matches('.cat-item'));

找出所有有子清單的分類項目（li.cat-item 中包含 ul.children），這些項目需要被加上展開收合功能。

4. 加入切換按鈕與 ARIA 屬性

const toggleBtn = document.createElement('button');
toggleBtn.className = 'cat-toggle';
toggleBtn.type = 'button';
toggleBtn.setAttribute('aria-expanded', 'false');
toggleBtn.setAttribute('aria-controls', subId);
toggleBtn.setAttribute('title', '展開/收合');

為每個有子分類的 li 加入一個按鈕，用於切換展開狀態，同時透過 aria-expanded 與 aria-controls 屬性提升無障礙體驗。

5. 切換展開收合狀態的邏輯

function toggle(open) {
  const willOpen = (typeof open === 'boolean') ? open : !li.classList.contains('is-open');
  if (willOpen) {
    if (singleOpen) {
      const siblings = Array.from(li.parentElement.children)
        .filter(el => el !== li && el.classList && el.classList.contains('is-open'));
      siblings.forEach(sib => {
        sib.classList.remove('is-open');
        const btn = sib.querySelector(':scope > .cat-toggle');
        if (btn) btn.setAttribute('aria-expanded', 'false');
      });
    }
    li.classList.add('is-open');
    toggleBtn.setAttribute('aria-expanded', 'true');
  } else {
    li.classList.remove('is-open');
    toggleBtn.setAttribute('aria-expanded', 'false');
  }
}

此函式負責切換展開狀態，若啟用嚴格手風琴模式，會同時關閉同層其他已展開的分類。狀態透過 is-open 類別與按鈕的 aria-expanded 屬性同步更新。

6. 綁定事件與點擊行為控制

• 按鈕點擊時切換展開狀態
• 點擊非連結與非按鈕的 li 項目空白處也能切換展開，避免影響原本連結導頁

toggleBtn.addEventListener('click', function(e) {
  e.preventDefault();
  e.stopPropagation();
  toggle();
});

li.addEventListener('click', function(e) {
  const isLink = e.target.closest('a');
  const isBtn  = e.target.closest('.cat-toggle');
  if (!isLink && !isBtn) {
    e.preventDefault();
    toggle();
  }
});

7. 預設展開目前分類項目

若分類項目本身或其子分類包含 current-cat 或 current-cat-parent 類別，則預設展開，方便使用者辨識目前所在分類。

if (li.classList.contains('current-cat') ||
    li.classList.contains('current-cat-parent') ||
    sub.querySelector('.current-cat, .current-cat-parent')) {
  toggle(true);
}

實務應用與優化方向

• 可依需求調整 singleOpen 為 false，允許多個分類同時展開
• 按鈕樣式與動畫可加入 CSS 過渡效果，提升使用者體驗
• 可擴充鍵盤操作支援，增強無障礙友善度
• 若分類清單動態更新，需額外處理事件重新綁定

常見問題與注意事項

• 插入按鈕位置需謹慎，避免破壞原本的連結結構
• 使用 aria-controls 需確保對應的子清單有唯一 ID
• 點擊事件阻止預設行為，避免影響連結跳轉，需確認邏輯正確

完整程式碼

document.addEventListener('DOMContentLoaded', function() {
  // 你貼的清單容器 class
  const roots = Array.from(document.querySelectorAll('.wp-block-categories, .wp-block-categories-list'));
  if (!roots.length) return;

  // 設定：是否一次只開一個（true = 手風琴嚴格模式）
  const singleOpen = true;

  roots.forEach(function(root) {
    // 標記啟用
    root.classList.add('cat-accordion');

    // 找到有 children 的 cat-item
    const parents = Array.from(root.querySelectorAll('li.cat-item > ul.children'))
      .map(ul => ul.parentElement)
      .filter(li => li && li.matches('.cat-item'));

    // 為每個需要的 li 補上 class 與切換按鈕/ARIA
    parents.forEach(function(li, idx) {
      li.classList.add('has-children');

      const sub = li.querySelector(':scope > ul.children');
      // 建唯一 id，便於 aria-controls 連結
      const subId = sub.id || ('cat-sub-' + Math.random().toString(36).slice(2));
      sub.id = subId;

      // 建立切換按鈕（放在 
<a> 後面，不影響原有點擊導覽）
      const toggleBtn = document.createElement('button');
      toggleBtn.className = 'cat-toggle';
      toggleBtn.type = 'button';
      toggleBtn.setAttribute('aria-expanded', 'false');
      toggleBtn.setAttribute('aria-controls', subId);
      toggleBtn.setAttribute('title', '展開/收合');

      // 插到 a 後（若沒有 a，則插到 li 內最前）
      const anchor = li.querySelector(':scope > a');
      if (anchor && anchor.nextSibling) {
        anchor.parentNode.insertBefore(toggleBtn, anchor.nextSibling);
      } else if (anchor) {
        anchor.parentNode.appendChild(toggleBtn);
      } else {
        li.insertBefore(toggleBtn, li.firstChild);
      }

      // 切換邏輯
      function toggle(open) {
        const willOpen = (typeof open === 'boolean') ? open : !li.classList.contains('is-open');
        if (willOpen) {
          if (singleOpen) {
            // 關閉同層其他
            const siblings = Array.from(li.parentElement.children)
              .filter(el => el !== li && el.classList && el.classList.contains('is-open'));
            siblings.forEach(sib => {
              sib.classList.remove('is-open');
              const btn = sib.querySelector(':scope > .cat-toggle');
              if (btn) btn.setAttribute('aria-expanded', 'false');
            });
          }
          li.classList.add('is-open');
          toggleBtn.setAttribute('aria-expanded', 'true');
        } else {
          li.classList.remove('is-open');
          toggleBtn.setAttribute('aria-expanded', 'false');
        }
      }

      // 綁定按鈕點擊
      toggleBtn.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        toggle();
      });

      // 如果想讓點 li 標題也能展開（但避免影響連結導頁）：
      // 只在點擊「li 空白處」才切換；點到 a 時仍正常導頁
      li.addEventListener('click', function(e) {
        const isLink = e.target.closest('a');
        const isBtn  = e.target.closest('.cat-toggle');
        if (!isLink && !isBtn) {
          e.preventDefault();
          toggle();
        }
      });

      // 進階：如果此項或其子層有 "current-cat" / "current-cat-parent" 類別，預設展開
      if (li.classList.contains('current-cat') ||
          li.classList.contains('current-cat-parent') ||
          sub.querySelector('.current-cat, .current-cat-parent')) {
        toggle(true);
      }
    });
  });
});

這段程式碼解決了圖片縮圖點擊切換主圖與自動輪播的需求，適合需要在產品展示或相簿頁面實作圖片瀏覽功能的前端工程師與自學者。透過純 JavaScript 控制圖片切換與輪播，避免依賴第三方套件，方便客製化與維護。

主要功能說明

取得縮圖與主圖元素

程式碼一開始透過 document.querySelectorAll 抓取所有縮圖元素 .gs-thumb，以及主圖容器 .gs-main-image，確保兩者存在後才繼續執行。這樣避免因為元素不存在導致錯誤。

const thumbs = Array.from(document.querySelectorAll('.gs-thumb'));
const mainPicture = document.querySelector('.gs-main-image');
if (!thumbs.length || !mainPicture) return;

初始化目前索引

先尋找哪個縮圖有 .active 樣式，代表當前顯示的圖片索引，若無則預設為 0。這樣設計方便在 HTML 中預先設定初始狀態。

let currentIndex = thumbs.findIndex(t => t.classList.contains('active'));
if (currentIndex === -1) currentIndex = 0;

切換主圖與縮圖的 active 樣式

showThumb 函式負責切換主圖與縮圖的狀態。它會從指定索引的縮圖抓取圖片路徑與 WebP 格式的 srcset，更新主圖的 <img> 與 <source> 標籤。

為了增加過場動畫效果，對主圖 <img> 加上 switching class，150 毫秒後移除，讓 CSS 可以控制淡入淡出等動畫。

最後將所有縮圖的 .active 移除，並將目前的縮圖加上 .active，同步視覺狀態。

function showThumb(index) {
  const picture = thumbs[index];
  if (!picture) return;

  const thumbImg = picture.querySelector('img');
  if (!thumbImg) return;

  const newSrc = thumbImg.getAttribute('src');
  const newWebp = picture.querySelector('source')?.getAttribute('srcset') || '';

  if (mainSource && newWebp) {
    mainSource.setAttribute('srcset', newWebp);
  }

  if (mainImg && newSrc) {
    mainImg.classList.add('switching');
    mainImg.setAttribute('src', newSrc);
    setTimeout(() => {
      mainImg.classList.remove('switching');
    }, 150);
  }

  thumbs.forEach(el => el.classList.remove('active'));
  picture.classList.add('active');

  currentIndex = index;
}

自動輪播機制

startAutoplay 使用 setInterval 每 3 秒自動切換到下一張縮圖，並呼叫 showThumb 更新主圖。索引會循環回到第一張，確保輪播無限循環。

resetAutoplay 則在使用者點擊縮圖時清除舊的計時器並重新啟動，避免自動輪播與手動操作衝突。

function startAutoplay() {
  autoplayTimer = setInterval(() => {
    const nextIndex = (currentIndex + 1) % thumbs.length;
    showThumb(nextIndex);
  }, 3000);
}

function resetAutoplay() {
  if (autoplayTimer) clearInterval(autoplayTimer);
  startAutoplay();
}

點擊縮圖切換邏輯

監聽整個文件的點擊事件，判斷點擊目標是否在 .gs-thumb 元素內，若是則取得該縮圖索引，呼叫 showThumb 切換主圖，並重置自動輪播計時。

這樣的事件代理方式有效減少監聽器數量，也方便動態新增縮圖時仍能正常運作。

document.addEventListener('click', function (e) {
  const picture = e.target.closest('.gs-thumb');
  if (!picture) return;

  const index = thumbs.indexOf(picture);
  if (index === -1) return;

  showThumb(index);
  resetAutoplay();
});

實務應用與優化方向

• 可結合 CSS 進行更豐富的過場動畫，如淡入淡出、縮放等。
• 若圖片數量龐大，考慮加入懶加載以提升效能。
• 自動輪播時間可改為參數化，讓使用者自訂。
• 可增加鍵盤左右鍵切換支援，提升無障礙。
• 若需支援觸控裝置，加入滑動手勢切換功能。

完整程式碼

document.addEventListener('DOMContentLoaded', function () {
  const thumbs = Array.from(document.querySelectorAll('.gs-thumb'));
  const mainPicture = document.querySelector('.gs-main-image');
  if (!thumbs.length || !mainPicture) return;

  const mainImg = mainPicture.querySelector('img');
  const mainSource = mainPicture.querySelector('source');

  let currentIndex = thumbs.findIndex(t => t.classList.contains('active'));
  if (currentIndex === -1) currentIndex = 0;

  let autoplayTimer = null;

  function showThumb(index) {
    const picture = thumbs[index];
    if (!picture) return;

    const thumbImg = picture.querySelector('img');
    if (!thumbImg) return;

    const newSrc = thumbImg.getAttribute('src');
    const newWebp = picture.querySelector('source')?.getAttribute('srcset') || '';

    if (mainSource && newWebp) {
      mainSource.setAttribute('srcset', newWebp);
    }

    if (mainImg && newSrc) {
      mainImg.classList.add('switching');
      mainImg.setAttribute('src', newSrc);
      setTimeout(() => {
        mainImg.classList.remove('switching');
      }, 150);
    }

    thumbs.forEach(el => el.classList.remove('active'));
    picture.classList.add('active');

    currentIndex = index;
  }

  function startAutoplay() {
    autoplayTimer = setInterval(() => {
      const nextIndex = (currentIndex + 1) % thumbs.length;
      showThumb(nextIndex);
    }, 3000);
  }

  function resetAutoplay() {
    if (autoplayTimer) clearInterval(autoplayTimer);
    startAutoplay();
  }

  document.addEventListener('click', function (e) {
    const picture = e.target.closest('.gs-thumb');
    if (!picture) return;

    const index = thumbs.indexOf(picture);
    if (index === -1) return;

    showThumb(index);
    resetAutoplay();
  });

  showThumb(currentIndex);
  startAutoplay();
});

在撰寫技術文章時，常會使用程式碼區塊展示範例程式碼。為了提升讀者體驗，讓他們能快速複製程式碼，本文示範如何在 WordPress 單篇文章頁面中，為所有 pre , code 程式碼區塊動態加入一個右上角的「Copy」按鈕。此功能適用於 Gutenberg、Markdown、Prism.js 或 Highlight.js 等常見的程式碼高亮方案。

此做法適合熟悉 WordPress 主題或外掛開發的工程師，想要自訂前端行為並強化內容互動性。

為什麼要這樣設計？

透過 WordPress 的 wp_footer action，我們能在頁面底部注入必要的 CSS 與 JavaScript，確保只在前台且單篇文章頁面執行，避免管理後台或非文章頁面產生不必要的負擔。

此外，使用 JavaScript 動態包裝 pre 元素並加入按鈕，能兼容多種程式碼呈現方式，且避免重複包裝，確保效能與穩定性。

核心程式碼解析

1. 僅在單篇文章頁面執行

if ( ! is_singular( 'post' ) || is_admin() ) {
    return;
}

這段檢查確保腳本只在前台的單篇文章頁面執行，避免影響其他頁面或後台。

2. CSS 樣式定義

.code-copy-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    padding: 4px 10px;
    font-size: 12px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    cursor: pointer;
    opacity: 0.75;
    transition: background 0.2s ease, opacity 0.2s ease;
}
.code-copy-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    opacity: 1;
}
.code-copy-btn:disabled {
    cursor: default;
    opacity: 0.6;
}

這些樣式將按鈕定位在程式碼區塊右上角，並提供滑鼠懸停與禁用狀態的視覺反饋。

3. 動態包裝與按鈕建立

document.querySelectorAll('pre > code').forEach(function (codeBlock) {
    const pre = codeBlock.parentNode;
    if (pre.parentNode.classList.contains('code-block-wrapper')) return;

    const wrapper = document.createElement('div');
    wrapper.className = 'code-block-wrapper';
    pre.parentNode.insertBefore(wrapper, pre);
    wrapper.appendChild(pre);

    const btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'code-copy-btn';
    btn.textContent = 'Copy';

    btn.addEventListener('click', function () {
        const text = codeBlock.innerText;
        navigator.clipboard.writeText(text).then(function () {
            btn.textContent = 'Copied!';
            btn.disabled = true;
            setTimeout(function () {
                btn.textContent = 'Copy';
                btn.disabled = false;
            }, 1500);
        });
    });

    wrapper.appendChild(btn);
});

這段程式碼會搜尋所有 pre code 結構，為每個程式碼區塊包裹一個容器，並在右上角加入按鈕。按鈕點擊時會將程式碼文字複製到剪貼簿，並短暫顯示 “Copied!” 提示。

實務應用與優化建議

• 可依需求調整按鈕文字或樣式，讓 UI 更符合網站風格。
• 若網站使用 AJAX 載入文章內容，需確保此腳本在新內容載入後重新執行。
• 為提升相容性，可加入對 navigator.clipboard 支援性的檢查，並提供替代方案。
• 若程式碼區塊非常長，複製整段可能影響使用者體驗，可考慮限制複製範圍或加入分段複製功能。

常見問題與注意事項

• 本方案依賴現代瀏覽器的 Clipboard API，舊版瀏覽器可能無法正常複製。
• 若網站有其他 JavaScript 操作程式碼區塊，請注意避免衝突。
• 按鈕的絕對定位需確保父容器有相對定位，否則位置會錯亂。

完整程式碼

<?php
/**
 * 單篇 post 頁面：全站 
<pre><code> 右上角加入 Copy 按鈕
 * 適用 Gutenberg / Markdown / Prism / Highlight.js
 */

add_action( 'wp_footer', function () {

    // ✅ 只在前台「單篇文章（post）」執行
    if ( ! is_singular( 'post' ) || is_admin() ) {
        return;
    }
    ?>

<style>
        .code-block-wrapper {
            position: relative;
        }

        .code-copy-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            z-index: 10;
            padding: 4px 10px;
            font-size: 12px;
            line-height: 1.4;
            border-radius: 6px;
            border: none;
            background: rgba(0, 0, 0, 0.65);
            color: #fff;
            cursor: pointer;
            transition: background 0.2s ease, opacity 0.2s ease;
            opacity: 0.75;
        }

        .code-copy-btn:hover {
            background: rgba(0, 0, 0, 0.85);
            opacity: 1;
        }

        .code-copy-btn:disabled {
            cursor: default;
            opacity: 0.6;
        }

        .code-block-wrapper pre {
            margin: 0;
        }
    </style>

    <script>
    document.addEventListener('DOMContentLoaded', function () {

        document.querySelectorAll('pre > code').forEach(function (codeBlock) {

            const pre = codeBlock.parentNode;

            // 已處理過就跳過（避免 AJAX / 重複包）
            if (pre.parentNode.classList.contains('code-block-wrapper')) {
                return;
            }

            // 建立包裝容器
            const wrapper = document.createElement('div');
            wrapper.className = 'code-block-wrapper';

            pre.parentNode.insertBefore(wrapper, pre);
            wrapper.appendChild(pre);

            // 建立 Copy 按鈕
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'code-copy-btn';
            btn.textContent = 'Copy';

            btn.addEventListener('click', function () {
                const text = codeBlock.innerText;

                navigator.clipboard.writeText(text).then(function () {
                    btn.textContent = 'Copied!';
                    btn.disabled = true;

                    setTimeout(function () {
                        btn.textContent = 'Copy';
                        btn.disabled = false;
                    }, 1500);
                });
            });

            wrapper.appendChild(btn);
        });

    });
    </script>
    <?php
});