新的 WordPress 網頁標題設定方法

就在剛剛，WordPress 推送了 4.4 正式版，可以在後臺進行升級。對於主題開發者來說，需要注意的是：官方已經不再推薦使用 wp_title() 函式來新增網頁標題，而是將網頁標題變成了一個主題功能。

以前

以前，帶有網頁標題的 header.php 檔案應該是類似這樣的，在一對 <title> 標籤中呼叫 wp_title() 函式。

<!DOCTYPE html>

<html>

<head>

<?phpwp_head();?>

</head>

wp_title() 函式會根據條件標籤函式判斷當前的頁面，生成並輸出對應的網頁標題。

但是，這種方法在 WordPress 4.4 之後已經不推薦繼續使用。

新的標題設定方法

隨著 wp_title() 的廢棄，與之而來的是新方法。你可以在主題的 functions.php 檔案中，新增下邊的程式碼來新增網頁標題。

/**

*新的 WordPress 網頁標題設定方法

*https://www.weixiaoduo.com/new-document-title/

functionBing_add_theme_support_title(){

add_theme_support('title-tag');

}

add_action('after_setup_theme','Bing_add_theme_support_title');

程式碼中，使用 add_theme_support() 函式新增了「title-tag」功能，也就是新增的網頁標題標籤功能。

加入這些程式碼之後，相當於告訴 WordPress 在 wp_head() 函式處輸出一對 <title> 標籤，並且包括當前頁面的標題。

在這之後，只需保持你的 header.php 中帶有 wp_head() 函式即可，不需要再新增 <title> 標籤以及 wp_title() 函式。

<!DOCTYPE html>

<html>

<head>

<?phpwp_head();?>

</head>

向下相容

雖然 WordPress 到 4.4 版本才正式放棄 wp_title() 函式，但是新的標題新增方法早在 4.1 就已經新增到了核心程式碼中。也就是說，新的方法在 4.1 及其以上版本可以執行，但如果要相容更老的版本，需要同時在 functions.php 中新增下邊的程式碼。

/**

*相容 WordPress 4.1 以下版本

*新的 WordPress 網頁標題設定方法

*https://www.weixiaoduo.com/new-document-title/

functionBing_compat_render_title_tag(){

if(!function_exists('_wp_render_title_tag'))echo'<title>'.wp_title('|',false,'right').'</title>';

}

add_action('wp_head','Bing_compat_render_title_tag',1);

標題過濾器

隨著新的方法，同時新增了一些新的過濾器鉤子，可以讓你控制網頁標題的內容。

pre_get_document_title：可以讓你完全控制標題內容，如果該過濾器不返回空，則會將返回值直接當做標題。
document_title_separator：新的標題分隔符是「-」，你可以用這個過濾器來修改，比如改成之前的「|」。
document_title_parts：自定義標題的各個組成部分，它們分別是：標題、頁碼、網站描述和網站名稱。

pre_get_document_title

改過濾器可以完全自定義標題的內容，比如把所有頁面的標題都改成「薇曉朵」。

/**

*把所有頁面的標題都改成「薇曉朵」

*新的 WordPress 網頁標題設定方法

*https://www.weixiaoduo.com/new-document-title/

functionBing_pre_get_document_title(){

return'薇曉朵';//自定義標題內容

}

add_filter('pre_get_document_title','Bing_pre_get_document_title');

這樣，每個網頁的標題都會變成「薇曉朵」。

或者，透過自定義欄位的方式來讓每篇文章自定義不同的標題。

/**

*每篇文章自定義不同的標題

*新的 WordPress 網頁標題設定方法

*https://www.weixiaoduo.com/new-document-title/

functionBing_custom_post_document_title($pre){

if(is_singular()&&$custom=get_post_meta(get_the_ID(),'custom_document_title',true))$pre=$custom;

return$pre;

}

add_filter('pre_get_document_title','Bing_custom_post_document_title');

新增這段程式碼之後，在任何文章中都可以透過「custom_document_title」自定義欄位來設定網頁標題，如果文章沒新增自定義欄位就會返回空，使用預設標題。

document_title_separator

用於修改標題每個專案之間的分隔符，比如修改成「|」。

/**

*標題分隔符修改成「|」

*新的 WordPress 網頁標題設定方法

*https://www.weixiaoduo.com/new-document-title/

functionBing_title_separator_to_line(){

return'|';//自定義標題分隔符

}

add_filter('document_title_separator','Bing_title_separator_to_line');

之前，大多數人使用的標題分隔符都是「|」，但現在預設變成了「-」，會導致網站繼續所有頁面的標題發生變化，所以可以先改回來。

document_title_parts

這個過濾器會傳給我們標題的各個部分，是一個陣列，可以修改陣列來自定義最終生成的標題。

例如，首頁標題預設是「網站名稱 - 網站描述」的形式，如果你不想要網站描述，可以刪除陣列中的 tagline 。

/**

*首頁標題不顯示網站描述

*新的 WordPress 網頁標題設定方法

*https://www.weixiaoduo.com/new-document-title/

functionBing_remove_tagline($title){

if(is_home()&&isset($title['tagline']))unset($title['tagline']);

return$title;

}

add_filter('document_title_parts','Bing_remove_tagline');

新的 WordPress 網頁標題設定方法