王尘宇王尘宇

研究百度干SEO做推广变成一个被互联网搞的人

wordpress主题背景设置框架Options Framework

关于许多刚开始写wordpress主题的新手来讲,想给主题加上一些设置选项,轻易运用者天真挑选和定制,这时候背景框架就成了一个绕不过的话题,平常要领无外乎两种,一种是本身着手,饱食暖衣,一种采纳框架,不反复制作轮子。既然是新手,前者门坎就相对高些,在这里引荐运用框架,费事省力,性能上也能获得保证。

在这里,作者引荐Options Framework,Options Framework是一款轻量级的主题背景设置框架,与其他同类框架比拟,该框架最大的特点是:

1.轻量级
2.基于wordpress原生api完成,供应了比较周全的经常使用选项
3.界面与wordpress一致,固然也能够本身定制
4.功能强大,运用简朴

Options Framework实际上是一款主题,别着急,先往下看,作者在主题前台列举了框架设置的挪用要领,从官方下载后以主题的情势装置启用,就能够看到结果了,这时候会在背景→表面菜单下面多出来一个“Theme Options”的菜单(假如须要在左边主菜单中显现该选项,可经由过程add_menu_page()完成),翻开后即可看到一切的设置选项,以下图:

假如须要在本身的主题中运用该框架,复制Options Framework主题下的inc、images文件夹和options.php,放到你的主题根目录下面,在你的主题主函数functions.php中到场以下代码即可(该代码位于Options Framework主题的functions.php中):

  1. if (!function_exists('optionsframework_init')){

  2.     define('OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri().'/inc/');

  3.     require_once dirname(__FILE__).'/inc/options-framework.php';

  4. }

如今就能够运用了,快看看背景→表面菜单下面是否是多出来一个“Theme Options”菜单呢,点击进去看看吧。

假如你须要在设置面板中到场javascript代码,在上面代码背面到场以下代码:

  1. add_action('optionsframework_custom_scripts', 'optionsframework_custom_scripts');

  2. function optionsframework_custom_scripts(){ ?>

  3.     <script type="text/javascript">

  4.         your javascript code...

  5.     </script>

  6. <?php

  7. }

假如你须要在设置面板背面到场自定义内容,须要在以上代码中到场以下代码:(第三页将申明如安在设置面板背面到场一个自定义面板)

  1. add_action('optionsframework_after','options_after', 100);

  2. function options_after() { ?>

  3.     your html code...

  4. <?php

  5. }

下载OptionsFramework中文版.zip

如今我们的准备工作就做好了,接下来就是怎样运用Options Framework

翻开options.php,一切的设置选项设置都在optionsframework_options函数中,我们修正或许增加响应的选项即可:

1.入门,Options Framework(下简称框架)的设置选项以以下情势涌现:

  1. $options[] = array(

  2.         "name"    =>'',  //选填,选项称号

  3.         "desc"    =>'',  //选填,选项申明

  4.         "id"      =>'',  //必填,对应表单元素ID,该项作为唯一标识,不可与其他选项反复!

  5.         "std"     =>'',  //可选,元素默认值

  6.         "class"   =>'',  //可选,该范例元素class

  7.         "type"    =>'',  //可选,表单元素范例

  8.         "settings"=>''   //可选,仅当挪用编辑器时运用

  9.     );

如:

  1. $options[] = array(

  2.         "name"=>'网站通告:',

  3.         "desc"=>'输入您的网站通告,不要凌驾50个字符。',

  4.         "id"=>'site_notices',

  5.         "std"=>'输入您的网站通告',

  6.         "class"=>'mini',

  7.         "type"=>"text"

  8.     );

2.增加选项卡,在须要到场的处所到场以下代码:

  1. $options[] = array(

  2.         'name' => '新选项卡',

  3.         'type' => 'heading'

  4.     );

再在以上代码背面到场须要增加的选项保留预览。

3.挪用,经由过程以上两步,背景设置部份基础完成,那末主题怎样挪用这些设置值呢?框架自带的主题中明白申清楚明了每一种范例的挪用要领,可参考主题中的挪用要领,简朴来讲经由过程of_get_option($id,$default)即可挪用保留的值,个中$id为必选值,即为须要挪用元素的id值,$default为可选值,示意当所挪用的元素值不存在时显现的值,如:

  1. &lt?php echo of_get_option('site_notices', '暂无通告信息!'); ?>

注重,of_get_option()只是返回了一个值,须要用echo输出才能在主题中显现,某些情况下,也大概须要运用以下代码:

  1. &lt?php

  2. if(of_get_option("example_checkbox")){

  3.     echo "checkbox is checked";

  4. }else{

  5.     echo "checkbox is not checked";

  6. } ?>

经由过程以上两段代码,应该能较深入的明白为何要用echo输出。更细致的内容申明请转至文章底部,下载作者Options Framework中文版,检察更细致的挪用体式格局。

4.修正输出体式格局,假如想修正以上函数名,找到inc/options-framework.php中478和480两行,将“of_get_option”替换为须要的函数称号即可。如替换为get_opt,则能够经由过程get_opt($id,$default)挪用。

下面讲在设置面板右边到场一个自定义面板,用来显现申明、捐赠或许其他信息等

前面提到了Options Framework一些基础的运用要领,平常的,主题作者都会在主题设置中到场一些大众申明信息,主题更新,捐赠等等的信息,如今我们来相识如安在Options Framework设置面板背面到场一个自定义面板,来显现这些信息。完成后示例以下:

文章上面提到了在设置面板面板背面到场html代码,自定义面板也是经由过程此要领来完成,在主函数中到场以下代码:

  1. add_action('optionsframework_after','options_after_panel', 100);

  2. function options_after_panel() { ?<

  3.     <div class="metabox-holder" id="custom-panel">

  4.        <div class="postbox>

  5.             <h3><span>自定义面板</span></h3>

  6.             <div class="inside">

  7.                 <p>Options Framework是一款很不错的轻量级主题背景设置框架!</p>

  8.             </div>

  9.        </div>

  10.     </div>

  11. <?php

  12. }

再在inc/css/optionsframework.css增加以下自定义面板款式保留预览:

  1. #custom-panel{

  2.     position: relative;

  3.     z-index: 0;

  4.     max-width: 782px;

  5.     background: #fff;

  6. }

  7. #custom-panel h3{

  8.     cursor: default;

  9. }

以上要领合适新手运用,简朴轻易,固然我们也能够经由过程修正框架代码来在右边或其他位置到场自定义面板,详细不再赘述。

文章转自zi-han博客”

相关文章

评论列表

发表评论:
验证码

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。