目录

终于在这节课要开始为主题制作一个管理后台了。

可能中间你一直奇怪,为什么我没有讲为主题制作一个管理后台,毕竟一个高度自定义化的主题,是一定会需要很多设置项的,如果不将其做在后台的管理菜单中,就需要通过修改代码来实现自定义,显然这并不符合我们的主题的定位,通过修改代码实现自定义的形式仅适合开发者们。

如今,我们要尝试使用 Options Framework 来在我们的主题内集成主题设置。

接入 Options Framework 的优势

接入 Options Framework 可以让我们以更简单的形式来实现主题的选项,让我们把更多的精力放在主题的本身,而不是研究如何过滤用户输入的数据,这些内容 Options Framework 都会在后台帮我们做好,只需要设计具体的设置项目即可。

在 GitChat 主题中接入 Options Framework

首先,我们需要下载 Options Framework,开发者将其开源在 Github,可以在这里直接下载到最新的代码。

下载地址请单击这里

下载后,将这个压缩包解压,可以看到里面有很多文件,不过大部分都是用不到的,只需要将 imagesincoptions.php 三个文件移动到主题根目录中去。

然后,打开主题的 functions.php 文件,在其中加入如下代码:

<span class="hljs-keyword">if</span> (!function_exists(<span class="hljs-string">'optionsframework_init'</span>)){
    define(<span class="hljs-string">'OPTIONS_FRAMEWORK_DIRECTORY'</span>, get_template_directory_uri().<span class="hljs-string">'/inc/'</span>);
    <span class="hljs-keyword">require_once</span> dirname(<span class="hljs-keyword">__FILE__</span>).<span class="hljs-string">'/inc/options-framework.php'</span>;
}

加入后代码如下:

保存文件,回到 WordPress 后台,可以在「外观」中找到一个「Theme Options」,点击即可进入设置页面。

进入设置页面后,会看到非常多的设置项,这个都是 Options Framework 为我们提供的 Demo,等下会将这些内容处理一下,只保留我们自己需要的内容。

当看到这里,说明 Options Framework 接入成功了。

添加设置项

我们的设置项被放在主题根目录下的 options.php 文件中,我们可以打开这个文件,查看具体的内容。

首先,会看到一个函数:

这个函数定义了数据库中我们的参数存放的字段名,可以把它改成我们自己需要的,比如 gitchat_theme_options

在下方,可以找到我们的设置项目:

项目大体上可以两种,分别是选项卡和其他设置项,选项卡的 type 是 heading ,设置项则支持多种类型:

  • text
  • textarea
  • checkbox
  • select
  • radio
  • upload(图片上传工具)
  • images(使用图片替代 radio 选择)
  • background(背景设置)
  • multicheck
  • color(Jquery 实现的颜色选择器)
  • typography(排版选择器)
  • editor

可以根据需要选择不同的选项,具体的设置范例,可以在 options.php 中看到。在对设置项精简以后,可以看出代码是这个样子的。这里面最需要关注的是 idtype ,id 会用于后续获取对应的设置项,如果 id 不唯一,就没办法获取到准确的值。而 type 不对,在后台设置时,可能体验不同。namedescription 则分别是设置项的名称和描述,可以帮助我们更好的输入对应的设置项。std 是默认填写的内容,placeholder 是在未输入内容情况下,文本框会显示的内容。

于此同时,后台设置项变成了:

可以看出,这里的设置项和我们设置数据的顺序有关,可以根据我们的需要,来设置不同的顺序。

接下来,将站长的信息作为选项,用于侧边栏的输出。

options.php 中的代码改为如下代码:

    $options[] = <span class="hljs-keyword">array</span>( 
        <span class="hljs-string">'name'</span> => __( <span class="hljs-string">'作者名称'</span>, <span class="hljs-string">'theme-textdomain'</span> ),
        <span class="hljs-string">'desc'</span> => __( <span class="hljs-string">'作者的昵称或网名,用于侧边栏显示'</span>, <span class="hljs-string">'theme-textdomain'</span> ),
        <span class="hljs-string">'id'</span> => <span class="hljs-string">'user_name'</span>,
        <span class="hljs-string">'placeholder'</span> => <span class="hljs-string">'会显示在侧边栏'</span>,
        <span class="hljs-string">'std'</span> => <span class="hljs-string">''</span>,
        <span class="hljs-string">'class'</span> => <span class="hljs-string">'mini'</span>,
        <span class="hljs-string">'type'</span> => <span class="hljs-string">'text'</span>
    );
    $options[] = <span class="hljs-keyword">array</span>( 
        <span class="hljs-string">'name'</span> => __( <span class="hljs-string">'作者的邮箱地址'</span>, <span class="hljs-string">'theme-textdomain'</span> ),
        <span class="hljs-string">'desc'</span> => __( <span class="hljs-string">'作者的邮箱地址,用于侧边栏显示'</span>, <span class="hljs-string">'theme-textdomain'</span> ),
        <span class="hljs-string">'id'</span> => <span class="hljs-string">'user_mail'</span>,
        <span class="hljs-string">'std'</span> => <span class="hljs-string">''</span>,
        <span class="hljs-string">'class'</span> => <span class="hljs-string">''</span>,
        <span class="hljs-string">'placeholder'</span> => <span class="hljs-string">'会显示在侧边栏'</span>,
        <span class="hljs-string">'type'</span> => <span class="hljs-string">'text'</span>
    );
    $options[] = <span class="hljs-keyword">array</span>( 
        <span class="hljs-string">'name'</span> => __( <span class="hljs-string">'作者的网站地址'</span>, <span class="hljs-string">'theme-textdomain'</span> ),
        <span class="hljs-string">'desc'</span> => __( <span class="hljs-string">'作者的网站地址,用于侧边栏显示'</span>, <span class="hljs-string">'theme-textdomain'</span> ),
        <span class="hljs-string">'id'</span> => <span class="hljs-string">'user_url'</span>,
        <span class="hljs-string">'std'</span> => <span class="hljs-string">''</span>,
        <span class="hljs-string">'class'</span> => <span class="hljs-string">''</span>,
        <span class="hljs-string">'placeholder'</span> => <span class="hljs-string">'会显示在侧边栏'</span>,
        <span class="hljs-string">'type'</span> => <span class="hljs-string">'text'</span>
    );

然后在后台展示的效果如图。

我们可以填写一下内容,测试一下能否正常保存设置项目。

可以看到,我们的设置项被正确保存了。

在主题中调用函数获取设置项

现在的设置项已经设置好了,接下来在主题中调用它。

打开 sidebar.php 文件,找到 <?php the_author_meta( 'description' ); ?>,删去这段代码,然后使用我们的设置项来输出内容。

默认情况下,我们获取设置项的函数是of_get_option,使用如下代码,可以获取到我们的设置项的值:

<span class="hljs-meta"><?php</span> <span class="hljs-keyword">echo</span> of_get_option(<span class="hljs-string">"设置id"</span>);<span class="hljs-meta">?></span>

接下来,修改我们的 About 的输出,将其改为:

<span class="hljs-meta"><?php</span> <span class="hljs-keyword">echo</span> of_get_option(<span class="hljs-string">"user-name"</span>).<span class="hljs-string">","</span>.of_get_option(<span class="hljs-string">"user-email"</span>).<span class="hljs-string">","</span>.of_get_option(<span class="hljs-string">"user-url"</span>);<span class="hljs-meta">?></span>

保存文件,回到网站的首页,刷新即可看到我们输出的内容。

修改获取参数的函数

可能你会觉得默认的函数太长了,需要变得短一点,可以修改 inc/options-framework.php 文件,搜索 of_get_option,找到这段代码,将这里的两个 of_get_option 改为你自己的函数名:

修改完成后,记得到主题中你调用的位置去修改对应的函数名。

如何修改菜单中的 Theme Options

想要修改菜单中的 Theme Options ,可以打开 inc/includes/class-options-framework-admin.php 文件,搜索 Theme Options ,然后就可以找到这些代码,修改其中的 page_titlemenu_title 为你自己需要的内容。

修改完成后,回到后台,可以看到菜单项中的文字和页面顶部的标题都修改过来了。

其他优秀的面板

除了 Options Framework,还有很多其他比较优秀的面板,我们也可以选择这些面板来使用。

OptionTree

OptionTree 是由 ThemeForest 赞助的主题设置模板,界面美观简洁大方,也是一个非常不错的选项框架。

插件地址详见这里

演示主题详见这里

Unyson Framework

插件地址详见这里

演示主题详见这里

Redux Framework

插件地址详见这里

Titan Framework

插件地址详见这里

插件的选项框架非常的多,可以根据自己的需要,选择一款美观好用的主题插件。各个插件的使用大体上相同,区别仅仅是引入的文件不同罢了。

可以选择一个你喜欢的选项框架,然后一直用下去。

总结

至此,我们学习了如何接入 Options Framework,你也可以根据自己的审美喜好,添加不同的主题设置框架,来加速你的主题开发。

阅读原文


本文收藏来自互联网,用于学习研究,著作权归原作者所有,如有侵权请联系删除

markdown @tsingchan

部分引用格式为收藏注解,比如本句就是注解,非作者原文。