Wordpress主题选项:实现一个简单的开关控制功能

功能说明: 通过主题选项开关控制主题是响应式布局还是固定宽度布局

实现原理: 通过向head里面添加响应式CSS文件/assets/css/responsive.css 实现

第一步: 在主题选项文件/framework/admin/admin-panel/masterkey.php中建立一个开关选项:

array(
  "name" => __( "General: Responsive Layout - 常规: 响应布局", "theme_backend" ),
  "desc" => __( "启用手机和平板响应式优化 [ <strong>responsive.css</strong> ]", "theme_backend" ),
  "id" => "enable_responsive_box",
  "default" => 'true',
  "option_structure" => 'sub',
  "divider" => true,
  "type" => "toggle"
),

第二步: 要实现responsive.css文件的添加,通过在/framework/functions/enqueue-front-scripts.php功能文件定义:

function mk_enqueue_styles() {
  $mk_option = theme_option( THEME_OPTIONS );
  wp_enqueue_style( 'mk-style', get_stylesheet_uri(), false, false, 'all' );
  //此处实现了开关控制响应布局,判断主题选项中 id = enable_responsive_box 的值
  if($mk_option['enable_responsive_box'] == 'true') {
  wp_enqueue_style( 'mk-responsive', THEME_DIR_URI.'/assets/css/responsive.css', false, false, 'all' );
  }
}
add_action( 'wp_print_styles', 'mk_enqueue_styles' );

第三步: 确保在/functions.php 文件中引入了enqueue-front-scripts.php文件:

function functions()
    {
        $this->options(); 
        include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
        require_once(THEME_FUNCTIONS . "/general-functions.php");
        require_once(THEME_FUNCTIONS . "/enqueue-front-scripts.php");//此处
}

这样就完成了!!!

转载请注明：组件之家