如何在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:这使用短代码和表单名称的自定义标识,以便显示文本框和设置样式。

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

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

步骤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等的贡献者。