当前位置:首页 > 未分类 > 怎样在WordPress主题中添加设置页面图文示例讲解

怎样在WordPress主题中添加设置页面图文示例讲解

世界上超过20%的网站的都是使用Wordpress搭建的,学习和使用Wordpress开发建设网站的人越来越多,今天就讲解一下如何在WordPress主题中添加设置页面。我们以一个例子来说明。

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

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

1、创建所需的文件

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

建立设置选项页

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?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_pag

怎样在wordpress主题中添加设置页面 添加设置按钮链接

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

3、添加选项和字段

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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默认的按钮样式。现在的效果为:
怎样在wordpress主题中添加设置页面 - 添加设置提交按钮

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

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

示例代码如下所示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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()函数的最上面。

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

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

1
2
3
4
5
6
7
8
9
10
11
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.css、pink.css,style.css 为默认的灰色。

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

1
2
<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 增加广告位图片

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

1
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 是否显示搜索框

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

1
2
3
4
5
6
7
<?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 } ?>

总结

WordPress添加设置选项是制作主题的基础,同时也可以动态设置一些值来动态改变Wordpress网站的显示,Wordpress非常强大,所以要学制作主题的朋友,一定要学会给Wordpress主题添加设置页面。

  • << 怎样实现 .NET MVC @helper方法
  • 百度关键字排名变动-提高百度关键字排名 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/how-to-add-option-page-in-wordpress/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。