~/blog/wordpress-functions-php-guide.md
WordPress 開發與技巧 · 2025 / 12 / 01

functions.php 不是只能複製貼上!解鎖 WordPress 主題的『大腦中樞』

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
functions.php 不是只能複製貼上!解鎖 WordPress 主題的『大腦中樞』
目錄 table-of-contents.md

functions.php 在多數教學裡只扮演一種角色:「把這段程式碼貼進去就好」。但它真正的身分,是 WordPress 主題的大腦中樞——主題載入時最早執行的邏輯入口,掛載 Hooks、註冊功能、改寫行為全都從這裡發生。搞懂它的運作方式,你對整個 WordPress 的掌控力會完全不同。

很多剛接觸 WordPress 的朋友,甚至是一些有經驗的開發者,都把 functions.php 當成一個「程式碼片段儲藏室」,從網路上複製貼上各種酷炫功能,卻不求甚解。這就像你有一台法拉利,卻只會用它來買菜,實在太可惜了。今天,就讓我這個有點囉嗦的工程師,帶你深入探索這個佈景主題的「大腦中樞」,讓你真正駕馭它,把你的 WordPress 網站變成一台性能猛獸。

functions.php 到底是什麼?一個佈景主題的心臟與大腦

簡單來說,functions.php 是你 WordPress 佈景主題中的一個 PHP 檔案。它的特殊之處在於,WordPress 在載入網站的每一個頁面時,都會自動執行這個檔案裡的程式碼。這賦予了它極大的權力,你可以在這裡:

  • 修改 WordPress 核心功能(例如文章摘要的長度)。
  • 加入新的功能(例如註冊一個「作品集」文章類型)。
  • 載入你網站需要的 CSS 樣式表和 JavaScript 檔案。
  • 與外部服務進行 API 串接。

你可以把它想像成汽車的 ECU(引擎控制單元),它控制著引擎的噴油、點火時機,決定了整台車的性能表現。同樣地,functions.php 裡的程式碼品質,也直接決定了你網站的效能、穩定性和安全性。寫得好,網站健步如飛;寫不好,輕則功能異常,重則… 恭喜你,你將會看到傳說中的「WordPress 死亡白畫面」(White Screen of Death),整個網站直接罷工。

動手前的金科玉律:子佈景主題!子佈景主題!子佈景主題!

在我給你任何程式碼之前,我必須先囉嗦一下,這真的很重要所以要說三遍:請務必使用「子佈景主題」(Child Theme)!

為什麼?想像一下,你買了一本精裝版的筆記本(父佈景主題),然後在上面寫滿了你的筆記(你在 functions.php 裡加的程式碼)。結果出版社推出新版,修正了一些錯誤,你一更新,出版社就直接給你一本「全新」的筆記本,你之前寫的筆記全都不見了!這就是直接修改父佈景主題 functions.php 的下場。

子佈景主題就像是你在這本筆記本上貼的便利貼。它繼承了父佈景主題的所有功能與樣式,但你可以安全地在子佈景主題自己的 functions.php 裡進行修改和擴充。當父佈景主題更新時,你的「便利貼」完全不受影響。這才是專業、可維護的開發方式。如果你還不清楚怎麼做,強力建議你先去看看我們關於子佈景主題的教學

常用技巧實戰:從入門到進階的 functions.php 魔法

好了,囉嗦完畢,我們來點實際的。以下是一些我認為每個 WordPress 開發者都應該知道的 functions.php 常用技巧與範例。把這些程式碼加到你的「子佈景主題」的 functions.php 檔案裡試試看吧!

1. 載入你的 CSS 與 JavaScript 檔案(正確的姿勢)

很多新手會直接在 header.php 裡用 <link><script> 標籤來載入檔案,這是非常不建議的做法。正確的方式是使用 WordPress 提供的「排隊」機制 (Enqueue),這樣可以更好地管理檔案依賴關係,避免重複載入。

<?php add_action( 'wp_enqueue_scripts', 'roamer_enqueue_assets' ); function roamer_enqueue_assets() { // 載入主要的 CSS 樣式表 wp_enqueue_style( 'roamer-main-style', get_stylesheet_uri() // 這會自動抓取子佈景主題的 style.css ); // 載入自訂的 JavaScript 檔案 wp_enqueue_script( 'roamer-main-script', get_stylesheet_directory_uri() . '/assets/js/main.js', array('jquery'), // 告訴 WordPress 這個 JS 檔需要先載入 jQuery '1.0.0', // 版本號 true // true 代表放在頁尾載入,提升頁面載入速度 ); } ?>

2. 移除 WordPress 的『小尾巴』:隱藏版本號

基於安全考量,我們通常不希望在網站原始碼中暴露目前使用的 WordPress 版本。這可以防止有心人士利用特定版本的漏洞進行攻擊。一行程式碼就能搞定。

<?php // 移除 WordPress 版本號 remove_action('wp_head', 'wp_generator'); ?>

3. 讓摘要(Excerpt)更聽話:自訂文章摘要長度

WordPress 預設的文章摘要長度是 55 個字,有時候在版面設計上會覺得太長或太短。我們可以透過 excerpt_length 這個 Filter Hook 輕鬆修改它。

<?php add_filter( 'excerpt_length', 'roamer_custom_excerpt_length', 999 ); function roamer_custom_excerpt_length( $length ) { return 30; // 將摘要長度改為 30 個字 } ?>

4. 解放網站內容結構:註冊自訂文章類型 (CPT)

這大概是 functions.php 最強大的應用之一了。WordPress 不再只能有「文章」和「頁面」,你可以創建任何你需要的內容類型,例如「公司作品」、「產品」、「團隊成員」等等,讓後台管理更有條理。這也是我們在客製化後台文章中常常提到的核心觀念。

<?php add_action( 'init', 'roamer_register_portfolio_cpt' ); function roamer_register_portfolio_cpt() { $labels = array( 'name' => '作品集', 'singular_name' => '作品', 'menu_name' => '作品集', 'add_new_item' => '新增作品', 'all_items' => '所有作品', ); $args = array( 'label' => '作品集', 'labels' => $labels, 'supports' => array( 'title', 'editor', 'excerpt', 'thumbnail', 'custom-fields' ), 'public' => true, 'show_in_menu' => true, 'menu_position' => 5, // 在後台選單的位置 'menu_icon' => 'dashicons-portfolio', // 後台選單的圖示 'has_archive' => true, 'rewrite' => array( 'slug' => 'portfolio' ), // 永久連結的 slug ); register_post_type( 'portfolio', $args ); } ?>

想讓你的客戶或使用者登入時,看到的不是 WordPress 的 Logo 而是你公司的 Logo 嗎?這可以大大提升網站的專業形象。

<?php add_action( 'login_enqueue_scripts', 'roamer_custom_login_logo' ); function roamer_custom_login_logo() { ?> <style type="text/css"> #login h1 a, .login h1 a { background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/assets/images/your-logo.png); height: 65px; width: 320px; background-size: 320px 65px; background-repeat: no-repeat; padding-bottom: 30px; } </style> <?php } add_filter( 'login_headerurl', 'roamer_custom_login_logo_url' ); function roamer_custom_login_logo_url() { return home_url(); // 讓 Logo 點擊後連回首頁 } add_filter( 'login_headertext', 'roamer_custom_login_logo_url_title' ); function roamer_custom_login_logo_url_title() { return get_bloginfo('name'); // 讓 Logo 的 title 顯示網站名稱 } ?>

請記得將 /assets/images/your-logo.png 換成你自己的 Logo 圖片路徑。

工程師的囉嗦時間:撰寫高品質 functions.php 的生存法則

看到這裡,你是不是已經迫不及待想把各種功能都塞進去了?先等等,身為一個資深工程師,我得再提醒你幾件事,這能讓你未來的開發之路少走很多冤枉路:

  • 遠離後台編輯器:WordPress 後台的「佈景主題檔案編輯器」是個陷阱!只要你存檔時有任何一個語法錯誤(例如少了一個分號),你的網站就會立刻白畫面,而且你再也進不了後台去修正它。請務必使用 FTP、SFTP 或其他更專業的部署方式來修改檔案。
  • 保持整潔:當你的 functions.php 越來越長,它會變得難以維護。對於大型專案,我們會把相關的功能分門別類,放到不同的檔案中,再用 require_once 的方式把它們引入 functions.php
  • 寫下註解:相信我,三個月後的你會感謝現在的自己。為你的程式碼寫下清晰的註解,說明這段程式碼的用途,方便日後維護或交接。
  • 定期備份:在你對 functions.php 做任何重大修改前,請務必、務必、務必備份你的網站!

functions.php 是 WordPress 賦予開發者的一把雙面刃,它既強大又危險。但只要你遵循最佳實踐,搭配子佈景主題使用,它就能成為你打造獨一無二網站的最強武器。它讓 WordPress 不再只是一個部落格系統,而是一個可以高度客製化的開發框架。

如果你對於更進階的 WordPress 客製化、或是希望將網站與 CRM、自動化工具串接有任何想法,卻不知道從何下手,浪花科技的團隊擁有豐富的實戰經驗。我們不只是寫程式碼,更是你的技術夥伴。歡迎聯繫我們,讓我們聊聊如何讓你的網站發揮真正的潛力!

相關閱讀

// FAQ

常見問題

functions.php 是什麼?它有什麼作用?
functions.php 是 WordPress 佈景主題中的一個 PHP 檔案,WordPress 在載入網站的每個頁面時都會自動執行其中的程式碼。你可以用它修改核心功能(例如文章摘要長度)、新增功能(例如註冊自訂文章類型)、載入 CSS 與 JavaScript,以及與外部服務進行 API 串接。它的程式碼品質直接影響網站的效能、穩定性與安全性。
修改 functions.php 為什麼要用子佈景主題?
因為直接修改父佈景主題的 functions.php,只要父主題一更新,你寫的程式碼就會被覆蓋而全部消失。子佈景主題會繼承父主題的所有功能與樣式,你可以安全地在子主題自己的 functions.php 進行修改與擴充,父主題更新時不受影響。這是專業且可維護的做法。
如何隱藏 WordPress 版本號以提升安全性?
在 functions.php 加入 remove_action('wp_head', 'wp_generator'); 即可移除網站原始碼中暴露的 WordPress 版本號。隱藏版本號可避免有心人士針對特定版本的已知漏洞發動攻擊。
如何修改 WordPress 文章摘要的長度?
WordPress 預設的文章摘要長度為 55 個字,可透過 excerpt_length 這個 Filter Hook 修改。用 add_filter('excerpt_length', '你的函式', 999) 掛上一個回傳目標字數的函式(例如 return 30;),即可將摘要改為 30 個字。
在 WordPress 載入 CSS 與 JavaScript 的正確方式是什麼?
正確方式是使用 WordPress 的排隊機制(Enqueue),在 wp_enqueue_scripts 這個 action 上以 wp_enqueue_style 與 wp_enqueue_script 載入檔案,而不是直接在 header.php 用 link 或 script 標籤插入。排隊機制能正確管理檔案依賴關係、避免重複載入,並可將 JavaScript 設定為在頁尾載入以提升頁面速度。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

把 AI 自動化、企業系統設計與 WordPress / Laravel 開發的真實案例和可直接照做的技巧,整理成電子報寄給你。只寄精選內容、不灌垃圾信,一鍵就能退訂。

$
// final.exec()

準備好讓你的網站開始為你工作了嗎?