customizer-library-demo, 定制定制库项目演示

分享于 

4分钟阅读

GitHub

  繁體 雙語
Demo for the Customizer Library project.
  • 源代码名称:customizer-library-demo
  • 源代码网址:http://www.github.com/devinsays/customizer-library-demo
  • customizer-library-demo源代码文档
  • customizer-library-demo源代码下载
  • Git URL:
    git://www.github.com/devinsays/customizer-library-demo.git
    Git Clone代码到本地:
    git clone http://www.github.com/devinsays/customizer-library-demo
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/devinsays/customizer-library-demo
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    定制定制库演示

    演示如何使用定制程序库的示例主题。

    阅读定制程序库项目的描述。

    安装

    要安装这里演示和所需的子模块,请使用: git clone --recursive git@github.com:devinsays/customizer-library-demo

    在这个主题中,定制程序库插件包含在这个主题中作为一个git模块。 要在你自己的项目中包含它,请导航到目录并使用:

    git submodule add git@github.com:devinsays/customizer-library customizer-library

    定义选项

    本主题演示包括以下自定义选项作为示例:

    • Logo
    • 主要颜色
    • 次要颜色
    • 边框颜色
    • 主字体( Google字体)
    • 次要字体( Google字体)
    • 示例复选框
    • 示例选择
    • 示例收音机
    • 文本文本示例

    这些选项在"。inc/定制程序选项"中定义为 array。

    下面是如何设置"logo"和定制器控制图像上传器的自定义节的示例:

    // Logo$section='logo';$sections[] =array('id'=>$section,'title'=> __( 'Logo Example', 'demo' ),'priority'=>'30');$options['logo'] =array('id'=>'logo','label'=> __( 'Logo', 'demo' ),'section'=>$section,'type'=>'upload','default'=>'',);

    定义所有选项和节之后,使用定制程序库加载它们:

    // Adds the sections to the $options array$options['sections'] =$sections;$customizer_library=Customizer_Library::Instance();$customizer_library->add_options( $options );

    样式

    定制器库有一个 helper 类来输出 inline 样式。 这段代码最初是由的主题Foundry开发的,用于在中使用。 要查看它的工作方式,请参见"。inc/样式。php"。

    CSS选择器和值被传递到Customizer_Library_Styles类,如下所示:

    Customizer_Library_Styles()->add( array('selectors'=>array('.primary' ),'declarations'=>array('color'=>$color )) );

    字体

    定制的定制库有一个 helper 函数来输出字体栈和加载 inline 字体。 这段代码也是由开发的主题铸造插件,用于的使用。 你可以在"。inc/mods。php"中看到字体enqueing的示例:

    functiondemo_fonts() {// Font options$fonts=array( get_theme_mod( 'primary-font', customizer_library_get_default( 'primary-font' ) ), get_theme_mod( 'secondary-font', customizer_library_get_default( 'secondary-font' ) ) );$font_uri= customizer_library_get_google_font_uri( $fonts );// Load Google Fonts wp_enqueue_style( 'demo_fonts', $font_uri, array(), null, 'screen' );}add_action( 'wp_enqueue_scripts', 'demo_fonts' );

    字体可以在 inline 样式中使用,如下所示:

    // Primary Font$setting='primary-font';$mod= get_theme_mod( $setting, customizer_library_get_default( $setting ) );$stack= customizer_library_get_font_stack( $mod );if ( $mod!= customizer_library_get_default( $setting ) ) { Customizer_Library_Styles()->add( array('selectors'=>array('.primary' ),'declarations'=>array('font-family'=>$stack ) ) );}