如何在WordPress儀表板中創建自定義管理頁面

文章撰寫者:
  • 精選文章
  • 更新:Jun 30,2013

幾年前,當WordPress推出其標準主題Kubrick時,它還採用了令人興奮的新功能。 該功能是自定義主題管理面板,通過在主題特定的“functions.php”文件中定義功能和首選項來啟用。 在隨後的幾年裡,主題選項頁面被許多主題設計師遺憾地用掉了,但它實際上是讓用戶控制他們網站外觀而不強迫他們安裝新主題的好方法。 可以使用此自定義管理面板更改主題背景圖像,列數甚至字體顏色等內容。

通過使用一系列定義自定義值的PHP數組填充主題的函數文件來更改管理面板本身。 然後,這些值將包含在模板中,並在管理面板中定義,允許用戶直觀地定義其外觀首選項。 一旦主題設計者了解PHP如何工作以及如何利用該段代碼在其模板文件中進行自定義表示,整個過程實際上相對簡單。

幾步過程都是從設置一些站點範圍的變量開始,並定義在這個新的管理頁面中應該自定義的內容。

步驟1:創建和編輯主題特定的Functions.php頁面

如果你已經開發了自己的主題,那麼你很可能已經將一個functions.php文件與現有的模板文件配對。 這是一個相對高級的選項,大多數設計師只是完全跳過它。 在這種情況下,必須打開您選擇的FTP客戶端並將其指向主題文件所在的以下服務器URL:

/的public_html /可濕性粉劑內容/主題/你的主題文件夾/

進入此文件夾後,仔細檢查以確保沒有“functions.php”文件,然後使用文本編輯程序創建一個名為“functions.php”的新文件。然後可以保存該文件並通過以下文件上傳到服務器FTP。 它可以直接在服務器上編輯,無需文本編輯程序。

在“functions.php”文件中定義有效主題選項面板的第一步是在文檔頂部定義兩個變量。 這些變量將用於使用儀表板顯示主題的名稱,以及識別該管理頁面中的表單和選擇元素。 觀察下面的代碼,將其放在“functions.php”文檔的頂部,並根據您網站的需要進行自定義。

$ longname =“管理面板開發主題”;
$ shortcode =“apdt”;

這些變量用於不同的目的。 $ longname變量將用於在實際管理選項面板中打印主題名稱。 因此,建議開發人員將主題的確切名稱分配給此變量,以消除主題用戶之間的混淆。 $ shortcode變量應該都是小寫字母,沒有任何標點符號,因為這將用於識別代碼本身中的表單元素。 在這個例子中,根據主題的全名使用了一個簡單的首字母縮略詞; 這可以根據用戶的口味進行定制。

步驟2:使用PHP數組定義可自定義的首選項

首先,告訴主題管理面板的名稱是很重要的。 這將打印在所有潛在設置之上,有助於促進新手用戶的目的明確。 這是通過將以下數組添加到“functions.php”文件中的$ settings標記來完成的:

$ settings = array(
array(“name”=> $ longname。“外觀設置”,
“type”=>“title”),

接下來,我們必須指出多個選項的數組是“開放的”,或者能夠被用戶輸入修改。 這是使用另一個出現在頁面標題定義正下方的簡單數組來完成的。 它看起來像這樣:

array(“type”=>“open”),

現在我們可以自由地開始定義主題外觀選項,其中每個選項都被創建為一個新數組。 在這個例子中,我們將定義放置在主題頁腳中的文本。 默認情況下,示例主題包含指向主題開發人員網站的鏈接以及teem版本控制信息。 大多數喜歡將自己的信息放在頁腳中的WordPress用戶不希望如此,因此啟用此自定義控件可以省去他們手動編輯“footer.php”文件。 這是它的完成方式。

陣列(
“name”=>“自定義主題頁腳文字”,
“desc”=>“這是顯示在此主題中包含的每個頁面末尾的文本。”,
“id”=> $ shortcode。“_ custom_footer”,
“type”=>“text”,
“std”=>“實驗主題v1.0。 由John Doe開發。 這裡有更多主題。“),

上面的數組允許用戶確定主題的標準頁腳文本,但需要解釋數組標籤以更好地描述此過程如何工作以及數組的每個部分定義的內容。

名稱:這是指實際文本框本身的名稱,並且在用戶進入主題的管理選項頁面時不會顯示給用戶。

說明:這是自定義設置附帶的簡短說明,並向用戶顯示。

ID:這使用短代碼和表單名稱的自定義標識,以便顯示文本框和設置樣式。

類型:這定義表單元素是文本行,文本框,下拉菜單,單選按鈕還是複選框。

STD:這確定了所選元素的默認值。 對於文本框,這將確定輸入到其中的默認文本。 對於復選框,單選按鈕和下拉框,這將確定默認選擇哪個選項。

步驟3:告訴WordPress啟用對新選項頁面的訪問

即使使用主題的主文件夾中的“functions.php”文件給出了選項頁面,但尚未被WordPress識別或包含在WordPress儀表板中的許多其他設置頁面中。 這是因為必須在功能頁面中標識主題的選項頁面並告知其去向(作為獨立的側邊欄元素或在“設置”分組中)。 這是使用一個相對簡單的函數完成的,該函數被添加到潛在自定義數組下面的“functions.php”文件中:

function experimental_theme_save_values(){
全球$ longname,$ shortcode,$ settings;
if($ _GET ['page'] == basename(__ FILE__)){
if('save'== $ _REQUEST ['action']){
foreach($ settings as $ value){
update_option($ value ['id'],$ _REQUEST [$ value ['id']]); }
foreach($ settings as $ value){
if(isset($ _REQUEST [$ value ['id']])){update_option($ value ['id'],$ _REQUEST [$ value ['id']]); } else {delete_option($ value ['id']); }}
header(“Location:themes.php?page = functions.php&saved = true”);
死;
} else if('reset'== $ _REQUEST ['action']){
foreach($ settings as $ value){
delete_option($ value ['id']); }
header(“Location:themes.php?page = functions.php&reset = true”);
死;
}
}
add_menu_page($ longname。“Appearance Settings”,“”。$ longname。“Appearance Settings”,“edit_themes”,basename(__ FILE__),“experimental_theme_save_values”);

這段代碼做了兩件事。 首先,它允許通過管理選項面板保存主題的設置。 其次,它在WordPress儀表板的側邊欄中放置一個獨立按鈕,允許用戶單擊它並直接轉到主題選項面板。 它被標記為“外觀設置”,就像實際頁面本身一樣。 一致性是消除混淆並將用戶引導到頁面的關鍵,而無需特別告訴他們進入選項面板以自定義主題的外觀。

步驟4:添加錯誤消息並關閉PHP文件

填寫主題選項面板的所有元素的最後一步是定義用戶可能遇到的錯誤消息,然後確保表單元素可以在選項頁面中以默認的WordPress樣式顯示。 通過將此代碼粘貼到PHP函數文件中來添加錯誤消息:

function experimental_theme_save_values(){
全球$ longname,$ shortcode,$ settings;
if($ _REQUEST ['saved'])echo'
'。$ THEMENAME。“ 外觀自定義已成功保存。
';
if($ _REQUEST ['reset'])echo'
'。$ THEMENAME。“ 外觀自定義已成功重置。
';

在這兩行代碼下面,可以使用?>結束標記關閉functions.php文件的PHP部分。 在此之下,將使用標準WordPress儀表板樣式表來放置XHTML代碼以對元素進行樣式設置。

步驟5:為選項頁面提供一些樣式

目前,WordPress儀表板用戶可以看到新的錯誤頁面,但他們無法使用它。 這是因為表單元素和样式表尚未放入functions.php文件中,以便在管理界面中使用。 這一切都將要改變,因為我們包括新面板使用的樣式表和默認表單元素:

<div class =“wrap”>
<h2> <?php echo $ longname; ? >設置</ h2>

<form method =“post”action =“options.php”>

<?php break; 案例'文字':? >

<tr>
<td width =“20%”rowspan =“2”valign =“middle”> <strong> <?php echo $ value ['name']; ? > </ strong> </ td>
<td width =“80%”> <input style =“width:100%;”name =“<?php echo $ value ['id']; ? >“id =”<?php echo $ value ['id']; ? >“type =”<?php echo $ value ['type']; ? >“value =”<?php if(get_settings($ value ['id'])!=“”){echo get_settings($ value ['id']); } else {echo $ value ['std']; }? >“/> </ td>
</ tr>

<tr>
<td> <small> <?php echo $ value ['desc']; ? > </ small> </ td>
</ tr> <tr> <td colspan =“2”> </ td>
</ tr>

<?php break;}? >

<input type =“submit”value =“<?php _e('保存主題設置')? >“/>

此代碼粘貼在PHP函數文件的結束標記下面,並且可以為主題選項面板可能包含的每種類型的表單進行自定義。 “case”變量可以從“text”更改為文本框,複選框,選擇和標題等內容。 如果主題使用這些表單,則只需要包含,定義和設置樣式。 否則,它們的包含是不必要的,然後離開主題的函數文件將提高效率和清潔代碼。

步驟9:啟用實際主題上的自定義選項

確保在主題的公共模板上可以看到任何更改時,有兩個步驟可以執行。 第一種是將變量放入主題的頁腳,該頁腳將顯示我們在本教程前面的步驟中啟用的用戶定義的版權和版本控製文本。 這是通過在頁腳版權區域中放置以下代碼來完成的:

<?php echo $ apdt_custom_footer; ? >

此文本調用前面定義的頁腳文本的自定義數組,並根據“Echo”語句在頁腳中打印該文本。 此標記可以包含在用戶認為合適的任何XHTML標記中,但如果沒有將一段代碼添加到網站的標題中,它就不會顯示。

在標題中,必須指示主題查找在WordPress儀表板中設置的用戶定義選項,並且它必須知道在自定義“functions.php”文件中定義的變量,以便它可以打印其內容到網站上。 這是通過將以下PHP變量放在網站的標題中來完成的(通常是“header.php”文件):

<?php global $ settings;
foreach($ settings as $ value){
if(get_settings($ value ['id'])=== FALSE){$$ value ['id'] = $ value ['std']; } else {$$ value ['id'] = get_settings($ value ['id']); }
}
? >

這裡的所有都是它的。 現在,自定義functions.php文件中定義的每個選項都可以通過包含自定義PHP變量來反映在頁面外觀中,其中指定的自定義和內容應該生效。

步驟10:測試新設置和選項頁面

在對“functions.php”文件中放置的PHP代碼中的錯誤,錯誤和意外錯誤進行全面測試之前,沒有WordPress開發工作完全完成。 那就是說,是時候進行測試了! 登錄WordPress儀表板,如果當前未選擇您正在處理的主題,請確保導航到側欄中的“外觀”類別並激活相關主題。

從那裡,檢查一些事情:

  1. 確保主題的設置鏈接在“設置”側邊欄類別標題下方的側欄中顯示為其自己的實體。
  2. 確保可以在自定義選項控制面板中訪問指定的頁腳文本自定義選項; 修改頁腳的默認內容並保存首選項。 確保它保存沒有錯誤。
  3. 訪問您的實際公共網站,並確保顯示在控制板中對頁腳內容所做的更改。
  4. 如果一切正常,請鬆一口氣,享受您的第一個WordPress主題選項控制面板頁面。

關於Jerry Low

WebHostingSecretRevealed.net(WHSR)的創始人 - 100,000用戶信任和使用的託管評論。 超過15在網絡託管,聯盟營銷和SEO方面的多年經驗。 ProBlogger.net,Business.com,SocialMediaToday.com等的貢獻者。