使用設置API創建WP主題設置頁面-＆＃＆按-PHP中文網

首頁

CMS教程

＆＃＆按

使用設置API創建WP主題設置頁面

Lisa Kudrow

Feb 17, 2025 pm 12:25 PM

使用設置API創建WP主題設置頁面

鑰匙要點

>
>使用設置API創建的設置可以使用get_option（）函數在前端檢索，因為設置API使用選項API在內部存儲值。這使得易於訪問和利用主題中的自定義設置。

我們將在主題設置頁面中包括什麼？

> 主題設置頁面中的

選項取決於主題支持的功能和自定義。也就是說，每個主題設置頁面中都有一些常見的內容。一些常見的選擇是：社交網址，靜態或響應式佈局和標頭徽標，僅舉幾例。在本教程中，我將向您展示如何在我們的主題設置頁面中包含這四個選項。

創建一個主題設置頁菜單項

首先，我們必須在管理面板上創建一個菜單項，該菜單項將訪問我們的主題設置頁面。

>我們可以使用WordPress菜單API創建菜單項。這是創建菜單項的代碼。

>在這裡，主題面板是代表我們菜單項的唯一ID。 them_settings_page是顯示菜單API創建的頁面內容的回調。我們將接下來對此功能進行編碼。

這是外觀。

<span>function theme_settings_page(){}
</span>
<span>function add_theme_menu_item()
</span><span>{
</span>	<span>add_menu_page("Theme Panel", "Theme Panel", "manage_options", "theme-panel", "theme_settings_page", null, 99);
</span><span>}
</span>
<span>add_action("admin_menu", "add_theme_menu_item");</span>

設置api

的概述

>設置API用於填充菜單項API創建的頁面。設置頁面分為各節和字段。使用設置API創建WP主題設置頁面

為了本教程，我們將創建一個部分，並將所有字段都放在該部分中。

這是theme_settings_page函數的代碼以創建一個部分並添加提交按鈕。

<span>function theme_settings_page(){}
</span>
<span>function add_theme_menu_item()
</span><span>{
</span>	<span>add_menu_page("Theme Panel", "Theme Panel", "manage_options", "theme-panel", "theme_settings_page", null, 99);
</span><span>}
</span>
<span>add_action("admin_menu", "add_theme_menu_item");</span>

>在這裡，我們使用ID部分使用settings_field註冊一個部分。主題選項是屬於部分的所有字段的組ID。最後，submit_button（）函數迴盪了我們主題設置頁面的提交按鈕。

這是應該看起來的樣子。

添加社交資料URL

現在，讓我們在設置頁面中添加字段以存儲我們的Facebook和Twitter個人資料URL。幾乎每個WordPress主題都有社交個人資料選項，因此這是一個方便，實用的例子。

這是使用設置API添加輸入文本字段的代碼。

初始化管理面板後，我們將註冊各節和字段顯示回調。在這裡，我們使用了三個重要功能：

function theme_settings_page()
{
    ?>
	    <span><span><span><div> class<span>="wrap"</span>>
	    <span><span><span><h1 id="gt">></h1></span>Theme Panel<span><span></span>></span>
</span>	    <span><span><span><form> method<span>="post"</span> action<span>="options.php"</span>></form></span>
</span>	        <span><span><?php </span></span><span>	            <span>settings_fields("section");
</span></span><span>	            <span>do_settings_sections("theme-options");      
</span></span><span>	            <span>submit_button(); 
</span></span><span>	        <span>?></span>          
</span>	    <span><span><span></span>></span>
</span>		<span><span><span></span></span></span></span></span></span>
</div></span>></span>
</span>	<span><span><?php </span></span><span><span>}</span></span></span>

add_settings_section用於顯示部分標題和描述。

add_settings_field用於顯示字段的HTML代碼。
register_setting被調用以自動保存字段值。
這是我們的設置頁面現在的樣子。

>我們現在已經看到瞭如何使用我們的設置頁面添加輸入文本字段。讓我們來看看如何通過在靜態或響應式佈局之間進行選擇來添加複選框。

添加選項以在佈局之間進行選擇

>讓我們看看如何擴展display_theme_panel_fields函數以顯示一個複選框以在佈局之間進行選擇。

這是實現此目的的代碼。

>我們使用add_settings_field添加了一個新的設置字段，並像往常一樣使用register_settings進行了註冊。要注意的一件事，如果我們想確定用戶是否已選中了複選框，我們正在使用checked（）函數。

function display_twitter_element()
{
	?>
    	<span><span><span><input> type<span>="text"</span> name<span>="twitter_url"</span> id<span>="twitter_url"</span> value<span>="<span><?php echo get_option('twitter_url'); ?></span>"</span> /></span>
</span>    <span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function display_facebook_element()
</span></span><span><span>{
</span></span><span>	<span>?></span>
</span>    	<span><span><span><input> type<span>="text"</span> name<span>="facebook_url"</span> id<span>="facebook_url"</span> value<span>="<span><?php echo get_option('facebook_url'); ?></span>"</span> /></span>
</span>    <span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function display_theme_panel_fields()
</span></span><span><span>{
</span></span><span>	<span>add_settings_section("section", "All Settings", null, "theme-options");
</span></span><span>	
</span><span>	<span>add_settings_field("twitter_url", "Twitter Profile Url", "display_twitter_element", "theme-options", "section");
</span></span><span>    <span>add_settings_field("facebook_url", "Facebook Profile Url", "display_facebook_element", "theme-options", "section");
</span></span><span>
</span><span>    <span>register_setting("section", "twitter_url");
</span></span><span>    <span>register_setting("section", "facebook_url");
</span></span><span><span>}
</span></span><span>
</span><span><span>add_action("admin_init", "display_theme_panel_fields");</span></span></span></span></span></span>

checked（）函數將一個值與另一個值進行比較，如果它們是相等的，則它會迴盪一個檢查屬性，否則什麼都不是。

這是我們的設置頁面現在的外觀。

上傳徽標

這是在我們的設置頁面上上傳徽標的代碼。

>在這裡，我們使用wp_handle_upload來存儲圖像文件並檢索其URL並將其作為選項存儲。

這是我們的設置頁面現在的外觀，它很好地塑造了！

function display_twitter_element()
{
	?>
    	<span><span><span><input> type<span>="text"</span> name<span>="twitter_url"</span> id<span>="twitter_url"</span> value<span>="<span><?php echo get_option('twitter_url'); ?></span>"</span> /></span>
</span>    <span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function display_facebook_element()
</span></span><span><span>{
</span></span><span>	<span>?></span>
</span>    	<span><span><span><input> type<span>="text"</span> name<span>="facebook_url"</span> id<span>="facebook_url"</span> value<span>="<span><?php echo get_option('facebook_url'); ?></span>"</span> /></span>
</span>    <span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function display_layout_element()
</span></span><span><span>{
</span></span><span>	<span>?></span>
</span>		<span><span><span><input> type<span>="checkbox"</span> name<span>="theme_layout"</span> value<span>="1"</span> <span><span><?php checked(1, get_option('theme_layout'), true); ?></span></span> /></span> 
</span>	<span><span><?php </span></span><span><span>}
</span></span><span>
</span><span><span>function display_theme_panel_fields()
</span></span><span><span>{
</span></span><span>	<span>add_settings_section("section", "All Settings", null, "theme-options");
</span></span><span>	
</span><span>	<span>add_settings_field("twitter_url", "Twitter Profile Url", "display_twitter_element", "theme-options", "section");
</span></span><span>    <span>add_settings_field("facebook_url", "Facebook Profile Url", "display_facebook_element", "theme-options", "section");
</span></span><span>    <span>add_settings_field("theme_layout", "Do you want the layout to be responsive?", "display_layout_element", "theme-options", "section");
</span></span><span>
</span><span>    <span>register_setting("section", "twitter_url");
</span></span><span>    <span>register_setting("section", "facebook_url");
</span></span><span>    <span>register_setting("section", "theme_layout");
</span></span><span><span>}
</span></span><span>
</span><span><span>add_action("admin_init", "display_theme_panel_fields");</span></span></span></span></span></span></span></span>

>檢索設置

>主題需要檢索前端的設置值。設置API使用選項API在內部存儲值。因此，您可以使用get_option（）函數檢索值。

非常簡單，這是代碼。

<span>function theme_settings_page(){}
</span>
<span>function add_theme_menu_item()
</span><span>{
</span>	<span>add_menu_page("Theme Panel", "Theme Panel", "manage_options", "theme-panel", "theme_settings_page", null, 99);
</span><span>}
</span>
<span>add_action("admin_menu", "add_theme_menu_item");</span>

結論

在本文中，我們看到瞭如何使用設置API輕鬆創建主題設置頁面。我們創建了一個文本，文件和復選框輸入字段，以各種數據格式獲取輸入。繼續嘗試擴展頁面並自己添加更多表單控件。

>關於創建WordPress主題設置頁面的常見問題（FAQ）

> WordPress設置API是什麼，為什麼重要？這很重要，因為它提供了一種標準化且安全的處理數據的方式。它還可以確保您的主題或插件與WordPress生態系統兼容，從而使用戶更容易從WordPress管理區域管理設置。

>如何在WordPress主題設置頁面中添加新部分？ 🎜>

>要在WordPress主題設置頁面中添加新部分，您需要使用add_settings_section（）函數。此功能採用三個參數：本節的ID，部分標題和輸出部分內容的回調函數。 ID應該是唯一的，以避免與其他部分發生衝突。

>如何在WordPress中註冊設置？

在WordPress中註冊設置，您可以使用register_setting（）函數。此功能採用三個參數：選項組，選項名稱和定義設置的參數數組。選項組應匹配settings_fields（）函數中使用的組，並且該選項名稱是要保存在數據庫中的選項的名稱。

>如何為設置創建一個表單字段？ >

>要為您的設置創建一個表單字段，您可以使用add_settings_field（）函數。此功能採用多個參數，包括字段的ID，字段標題，輸出表單字段的回調函數，應顯示字段的頁面，應添加字段的部分以及一系列參數對於字段。

如何驗證和消毒我的設置？

以驗證和消毒您的設置，您可以在register_setting（）函數中使用sanitize_callback參數。該參數應該是一個回調函數，該函數獲取輸入數據，驗證並對其進行消毒，然後返回消毒數據。這樣可以確保僅保存在數據庫中。 >

>如何在“設置”頁面上顯示我的設置？

在“設置”頁面上顯示您的設置，您可以使用setters_fields（）和do_settings_sections（）函數使用settings_fields（）和do_settings_sections（）函數。 settings_fields（）函數輸出設置頁面的nonce，操作和選項頁面字段，而do_settings_sections（）函數輸出添加到頁面上的部分和字段。？

為了將設置保存在WordPress中，您需要在設置頁面上提交表單。提交表單後，WordPress會使用register_setting（）函數自動保存設置。您還可以使用update_option（）函數手動保存設置。

>如何在wordpress中檢索我的設置？

在WordPress中檢索您的設置，您可以使用get_option（）功能。此功能將選項的名稱作為參數，並返回選項的值。如果該選項不存在，它將返回一個默認值，您可以將其指定為第二個參數。

>如何在WordPress中刪除我的設置？ >我如何對設置頁面的問題進行故障排除？