如何在WordPress仪表板中创建自定义管理页面

文章作者:杰里·洛(Jerry Low)
  • 推荐文章
  • 更新: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。“外观设置”,
“类型” =>“标题”),

接下来,我们必须指出充满选项的数组是“打开的”,或者可以通过用户输入进行修改。 这是通过使用另一个简单数组完成的,该数组出现在页面标题定义的正下方。 看起来像这样:

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

现在,我们可以自由地开始定义主题外观选项,每个选项都将被创建为一个新数组。 在此示例中,我们将定义放置在主题页脚中的文本。 默认情况下,示例主题包含指向主题开发者网站的链接以及teem版本信息。 大量的WordPress用户不希望这样做,他们希望将自己的信息放在页脚中,因此,启用此自定义控件可以节省他们手动编辑“ footer.php”文件的时间。 这是完成的过程。

阵列(
“名称” =>“自定义主题页脚文本”,
“ desc” =>“这是显示在此主题下每一页末尾的文本。”,
“ id” => $ shortcode。” _ custom_footer”,
“类型” =>“文本”,
“ std” =>“实验主题v1.0。 由John Doe开发。 这里有更多主题。”,

上面的数组允许用户确定主题的标准页脚文本,但需要解释数组标签以更好地描述此过程如何工作以及数组的每个部分定义的内容。

姓名:这是指实际文本框本身的名称,并且在用户进入主题的管理选项页面时不会显示给用户。

说明:这是自定义设置附带的简短说明,并向用户显示。

ID:这使用短代码和表单名称的自定义标识,以便显示文本框和设置样式。

发布类型:这定义表单元素是文本行,文本框,下拉菜单,单选按钮还是复选框。

性病:这确定了所选元素的默认值。 对于文本框,这将确定输入到其中的默认文本。 对于复选框,单选按钮和下拉框,这将确定默认选择哪个选项。

步骤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']); }}
标头(“位置:themes.php?page = functions.php&saved = true”);
死;
} else if('reset'== $ _REQUEST ['action']){
foreach($ settings as $ value){
delete_option($ value ['id']); }
标头(“位置:themes.php?page = functions.php&reset = true”);
死;
}
}
add_menu_page($ longname。“外观设置”,“ .. $ longname。”外观设置”,“ edit_themes”,基本名称(__FILE __),“ experimental_theme_save_values”);

这段代码有两件事。 首先,它允许通过管理选项面板保存主题的设置。 其次,它在WordPress仪表板的侧边栏中放置一个独立的按钮,允许用户单击它并直接转到主题选项面板。 就像实际页面本身一样,它被标记为“外观设置”。 一致性是消除混乱和将用户定向到页面的关键,而无需特别告诉他们进入选项面板以自定义主题外观的方式。

步骤4:添加错误消息并关闭PHP文件

填写主题选项面板的所有元素的最后一步是定义用户可能遇到的错误消息,然后确保表单元素可以在选项页面中以默认的WordPress样式显示。 通过将此代码粘贴到PHP函数文件中来添加错误消息:

function experimental_theme_save_values(){
全球$ longname,$ shortcode,$ settings;
如果($ _REQUEST ['saved'])回显'
“。$主题名称。” 外观自定义设置已成功保存。
“;
if($ _REQUEST ['reset'])回显'
“。$主题名称。” 外观自定义设置已成功重置。
“;

在这两行代码下,可以使用?>结尾标记关闭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 =“中间”> <强> <?php echo $ value ['name']; ? > </ strong> </ td>
<td width =” 80%”> <输入样式=” 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']; ? > </小> </ td>
</ tr> <tr> <td colspan =“ 2”> </ td>
</ tr>

<?php break;}? >

<输入类型=“提交”值=” <?php _e('保存主题设置')? >” />

此代码粘贴在PHP函数文件的结束标记下方,并且可以针对主题选项面板可能包括的每种类型的表单进行自定义。 可以将“大小写”变量从“文本”更改为文本框,复选框,选择和标题。 如果主题正在使用这些表单,则仅需要包括,定义和设置样式。 否则,没有必要包含它们,然后将其保留在主题的功能文件中将提高效率和简洁的代码。

步骤9:启用实际主题上的自定义选项

确保在主题的公共模板上可以看到任何更改时,有两个步骤可以执行。 第一种是将变量放入主题的页脚,该页脚将显示我们在本教程前面的步骤中启用的用户定义的版权和版本控制文本。 这是通过在页脚版权区域中放置以下代码来完成的:

<?php echo $ apdt_custom_footer; ? >

此文本将调用先前定义的页脚文本的自定义数组,并根据“ Echo”语句在页脚中打印该文本。 该标记可以包含在用户认为合适的任何XHTML标记中,但是如果未在网站标题中添加一段代码,该标记将不会显示。

在标题中,必须指示主题查找在WordPress仪表板中设置的用户定义选项,并且必须知道自定义“ functions.php”文件中定义的变量,以便可以打印其内容到网站上。 这是通过将以下PHP变量放在网站的标题(通常是“ header.php”文件)中来完成的:

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

这里的所有都是它的。 现在,自定义functions.php文件中定义的每个选项都可以通过包含自定义PHP变量来反映在页面外观中,其中指定的自定义和内容应该生效。

步骤10:测试新设置和选项页面

在对WordPress的“ functions.php”文件中的bug,错误和意外错误进行彻底测试之前,WordPress的开发工作不会完全完成。 也就是说,是时候进行测试了! 登录WordPress仪表板,如果当前未选择您正在处理的主题,请确保导航至侧栏中的“外观”类别并激活相关主题。

从那里,检查一些事情:

  1. 确保主题的设置链接作为其自己的实体在“设置”侧栏类别标题下方的侧栏中显示。
  2. 确保可以在自定义选项控制面板中访问指定的页脚文本自定义选项; 修改页脚的默认内容并保存首选项。 确保它保存没有错误。
  3. 访问您的实际公共网站,并确保显示在控制板中对页脚内容所做的更改。
  4. 如果一切正常,请松一口气,享受您的第一个WordPress主题选项控制面板页面。

关于Jerry Low

WebHostingSecretRevealed.net(WHSR)的创始人 - 100,000用户信任和使用的托管评论。 超过15在网络托管,联盟营销和SEO方面的多年经验。 ProBlogger.net,Business.com,SocialMediaToday.com等的贡献者。