如何在wordpress主题中添加设置页面

option-page

将自己设计的题发布或是销售是一件很棒的事情,但并不是每一个主题使用者都有很熟练的HTML/CSS技巧。但是如果在主题中整合一个设置选项页面,就可以使那些完全不懂代码的用户能够很容易地根据他们的喜好来修改主题。下面我将告诉大家如何从零开始做一个最简单的主题选项页(上图为最终效果)。

我们的最终目的是什么?

在开始之前,要先了解我们的最终目的是什么?我们主题可以自行定制哪些内容?这些是需要你在设计主题前就应该考虑好的。

每个主题都可以有很多的可编辑元素,本例中我将通过实现下面这三个方面的定制来说明如何给主题增加设置选项页,你应该要有自己更好的想法。

  • 改变主题配色方案;
  • 增加两个广告位内容;
  • 自定是否显示搜索框;

1、创建所需的文件

在进行主题定制前,应该首先创建一个可供自定义的“设置选项页面”。创建设置选项页的代码需要放置在主题目录下的functions.php文件中。如果我们的主题名为“OptionPage”,那么functions.php文件的路径为:\wp-content\themes\OptionPage\functions.phph。 我们不需要让wordpress手动加载它,在执行时wordpress会自动加载。

2、建立设置选项页

首先第一步需要在后台建立一个空白页面供我们使用。我们通过add_aaction来实现这一步。Actions可以在wordpress执行时的特定时间被响应,例如,当在控制面板创建菜单时,admin_menu就会被响应执行。因此,可以利用这些来实现我们所需的功能。这是我们创建选项页的最基本的功能。

<?php
// 设置选项页
function themeoptions_admin_menu()
{
// 在控制面板的侧边栏添加设置选项页链接
add_theme_page("主题设置", "主题选项", 'edit_themes', basename(__FILE__), 'themeoptions_page');
}
function themeoptions_page()
{
// 设置选项页面的主要功能
}
add_action('admin_menu', 'themeoptions_admin_menu');
?>

themeoptions_admin_menu() 是在控制面板的侧边栏中添加一个链接,指向我们创建的选项页:themeoptions_page

add_theme_page() 的参数为:

  • 页面标题:主题设置
  • 菜单标题:主题选项(p.s.为了区分显示,页面与菜单标题我做了不同我命名)
  • 作用功能:edit_themes
  • Handle(句柄):当前文件;
  • 执行的函数:themeoptions_page

option-page-blank

现在后台控制面板侧边栏的处就多了一个“主题设置”的菜单,但是现在还是空白的,我们后面要实现的定制内容就在这个空白页面上创建。

3、添加选项和字段

现在我们就可以在刚创建的空白页面上添加我们的选项和字段。这个页面你可以根据自己的需要进行样式风格化,但在本教程中我们将使用wordpress默认的类,这样可以节省我们的时间并且看起来更加原生。

页面内容的代码需包含在 themeoptions_page() 函数内。首先,我们先添加一个 class="wrap"div 容器;然后,在头部添加一个默认图标作为作为页面标题;最后是设计表单。

function themeoptions_page()
{
// here's the main function that will generate our options page
?>
<div class="wrap">
    <div id="icon-themes" class="icon32"><br /></div>
    <h2>主题设置</h2>
    <form method="POST" action="">
    <input type="hidden" name="update_themeoptions" value="true" />
    <p><input type="submit" class="button-primary" name="bcn_admin_options" value="更新数据"/></p>
    </form>
</div>
<?php
}

在表单中,首先我们需要添加一个隐藏的值,通过它来检查更新是否已经提交。然后添加一个提交按钮,这里我也使用wordpress默认的按钮样式。现在的效果为:

option-page-form

现在我们已经创建了设置选项页的基本结构,下面我们开始根据之前制定的内容进行完善:

  • 首先,我们要允许主题使用者可以更改颜色方案。对于这一点,我们需要一个下拉列表提供可用的配色方案。
  • 其次,增加两个广告位的内容,我们需要增加两个文本框来输入图片的URL及广告链接URL。
  • 最后,用户可选择是否显示搜索框。这一点,我们通过添加复选框来实现。

代码如下:

function themeoptions_page()
{
// 这是产生主题选项页面的主要功能
?>
<div class="wrap">
    <div id="icon-themes" class="icon32"><br /></div>
    <h2>主题设置</h2>
    <form method="POST" action="">
        <input type="hidden" name="update_themeoptions" value="true" />
        <h4>主题配色方案</h4>
        <select name ="colour">
            <?php $colour = get_option('mytheme_colour'); ?>
            <option value="gray" <?php if ($colour=='gray') { echo 'selected'; } ?> >灰色</option>
            <option value="blue" <?php if ($colour=='blue') { echo 'selected'; } ?>>浅蓝</option>
            <option value="pink" <?php if ($colour=='pink') { echo 'selected'; } ?>>粉红</option>
        </select>
        <h4>图片广告位(1)</h4>
        <p><input type="text" name="ad1image" id="ad1image" size="32" value="<?php echo get_option('mytheme_ad1image'); ?>"/> 广告图片</p>
        <p><input type="text" name="ad1url" id="ad1url" size="32" value="<?php echo get_option('mytheme_ad1url'); ?>"/> 广告链接</p>
        <h4>图片广告位(2)</h4>
        <p><input type="text" name="ad2image" id="ad2image" size="32" value="<?php echo get_option('mytheme_ad2image'); ?>"/> 广告图片</p>
        <p><input type="text" name="ad2url" id="ad2url" size="32" value="<?php echo get_option('mytheme_ad2url'); ?>"/> 广告链接</p>
        <h4><input type="checkbox" name="display_search" id="display_search" <?php echo get_option('mytheme_display_search'); ?> /> 显示搜索框</h4>
        <p><input type="submit" class="button-primary" name="bcn_admin_options" value="更新数据"/></p>
    </form>
</div>
<?php
}

到这里选项页面的内容就已经基本构建完毕了。

4、数据库更新

到目前为止,我们已经创建了一个主题选项页面,下一步要做的就是如何将数据透过POST提交的wordpress数据库。要做到这一点,需要创建一个新的功能函数themeoptions_update(),这个函数将会被themeoptions_page()调用,所以将下面的代码添加到themeoptions_page()函数的最上面。

if ( $_POST['update_themeoptions'] == 'true' ) { themeoptions_update(); }

下一步是增加一个更新函数。

function themeoptions_update()
{
    // 数据更新验证
    update_option('mytheme_colour', $_POST['colour']);
    update_option('mytheme_ad1image', $_POST['ad1image']);
    update_option('mytheme_ad1url', $_POST['ad1url']);
    update_option('mytheme_ad2image', $_POST['ad2image']);
    update_option('mytheme_ad2url', $_POST['ad2url']);
    if ($_POST['display_search']=='on') { $display = 'checked'; } else { $display = ''; }
    update_option('mytheme_display_search', $display);
}

5、调用选项定制主题

5.1 更改配色方案

我们主题的默认样式文件为 style.css,如果使用其他的配色方案,我们需要建立相应的样式文件,例如本例中的 blue.csspink.cssstyle.css 为默认的灰色。

为了切换配色方案样式表,需要在主题 header 中加入以下代码:

<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/default.css" type="text/css">
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/<?php echo get_option('mytheme_colour'); ?>.css" type="text/css">

5.2 增加广告位图片

在你想要放置广告的地方添加以下代码:

<a href="<?php echo get_option('mytheme_ad1url'); ?>"><img src="<?php echo get_option('mytheme_ad1image'); ?>" height="125" width="125" /></a>
<a href="<?php echo get_option('mytheme_ad2url'); ?>"><img src="<?php echo get_option('mytheme_ad2image'); ?>" height="125" width="125" /></a>

5.3 是否显示搜索框

在需要放置搜索框的地方添加以下代码,当用户选择显示搜索框时会显示,否则则不显示:

<?php if ( get_option('mytheme_display_search') == 'checked') { ?>
    <h3>搜索框</h3>
    <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
        <input type="text" class="field" name="s" id="s" placeholder="<?php esc_attr_e( 'Search', '85Ryan' ); ?>" />
        <input type="submit" class="submit" name="submit" id="searchsubmit" value="搜索" />
    </form>
<?php } ?>

6、总结

  1. 本文翻译自NET TUTS+文章《How to Integrate an Options Page into your WordPress Theme》,版权归原文作者所有。

  2. 为了更容易地学习添加主题选项页的过程,我省略了原文中部分内容,有兴趣的话可以参考原文。

  3. 翻译水平有限,如有错误,请提出修正,谢谢!

EOF

文章标签:

如何在wordpress主题中添加设置页面》有29条评论

  1. 你好,我想问一下,我全部添加了你给的代码,可是按下更新数据页面刷新一下然后就跟没保存一下是怎么回事呢?

    1. 不好意思。最近比较忙,没有及时回复。

      这个问题应该是在第4步更新函数中的几个参数的中文字符单引号引起的。你自己检查下代码中是不是有中文字符的单引号,如果有改成英文字符的单引号,应该可以解决。

      另,文章中我已经修改了。

  2. 真心没弄明白,第一段代码我去掉 放到functions.php里面,可以看到主题选项了,点出来是空白的,没有错.从第3步开始我就什么都不懂了.还有博主是不是把functions.php写错成functions.phph了.

  3. 博主文章好强大,学习到了!说一下,表单的代码,貌似单引号是双字节的,代码不认。

    1. 谢谢提醒!

      主要是因为换了一个高亮插件引起的,我已经修复了!

  4. Real great information can be found on weblog . “The American temptation is to believe that foreign policy is a subdivision of psychiatry.” by Robert Francis Kennedy.

  5. 一个偶然的机会来到了你的博客,很难得看到有一个共同兴趣爱好的人。我也喜欢做博客,近期也开了一个wordpress博客,地址是wwww.ai0790.com。欢迎你也经常来踩我的空间哦。

  6. 关于主题设置选项,我现在用的是options-framework,设置很方便,并且只会占用option表的一行,避免选项冲突。

  7. 我来回访了,博主的文章好专业,顺便问下高手,我原来在我的博客设置了不准留言,现在更改为可以留言,为什么有些文章还是显示访客留言已关闭了

    1. 回复@度哥网 : 呵呵!谢谢支持!我也是现学出卖的。
      后台评论设置里有一个“文章发布xx天后自动关闭评论功能”。看看你不是不勾选了?

发表评论

8B93