無需插件：手動將 FancyBox 融入WordPress 主題

在WordPress世界裡，增強網站互動性和視覺效果的需求從未停歇。FancyBox，作為一個流行的輕量級JavaScript圖庫，提供了一種優雅的方式來展示圖片、視頻和更多內容。雖然WordPress插件可以簡化FancyBox的整合過程，但手動整合FancyBox不僅能提供更細緻的控制，也避免了插件更新可能帶來的兼容性問題。本文將指導您如何在不使用插件的情況下，手動將FancyBox融入您的WordPress主題中。

步驟1: 加載FancyBox資源

首先，您需要在WordPress主題的functions.php文件中加入FancyBox的CSS和JavaScript文件。這樣，不論訪問者瀏覽網站的哪個頁面，FancyBox的功能都能被順利加載。

function custom_add_fancybox() {
    wp_enqueue_style('fancybox-css', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css');
    wp_enqueue_script('jquery');
    wp_enqueue_script('fancybox-js', 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js', array('jquery'), null, true);
    wp_add_inline_script('fancybox-js', 'jQuery(document).ready(function($) {$(".fancybox").fancybox();});');
}
add_action('wp_enqueue_scripts', 'custom_add_fancybox');

步驟2: 使用FancyBox

有了FancyBox的資源文件加載到您的網站上後，接下來就是創建觸發FancyBox的HTML元素。這可以通過添加一個簡單的連結實現，當點擊該連結時，FancyBox會彈出並展示您指定的內容。

<a class="fancybox button" href="#content_id">顯示內容</a>
<div style="display: none;">
    <div id="content_id">
        <p>這裡是您想通過FancyBox展示的內容。</p>
    </div>
</div>

手動整合FancyBox到WordPress主題中，不僅可以提升您網站的專業度和用戶體驗，還能讓您獲得對FancyBox行為的完全控制，避免未來可能出現的兼容性問題。透過上述步驟，您將能夠無需依賴插件，自由地在WordPress網站中使用FancyBox。