如何根据在主题定制器中点击的选项来实时加载css?

时间:2014-01-05 作者:NextGenThemes

我有个问题。我正在尝试让主题定制器根据单击的无线电输入加载不同的CSS文件,live!

目前为止,该选项在我单击“保存和发布”时保存,只有在手动重新加载整个自定义程序页面时才会加载。预览面板会在选择时刷新,但不会加载选定的CSS,我不知道是什么让Twenty Eleven这样做,但我也希望它这样说。

我已经查看了Twentyeleven主题来编写此代码。区别在于:

主题使用option 用于设置,而不是theme_mod 对于它来说,它有一些设置处理,但我认为这是针对其单独的主题选项页面,我不希望这样enqueue scripts 在普通主题的基础上添加它的“黑暗”主题,如果单击它,它实际上是实时应用的,这也是我喜欢的

如果您能帮助我了解如何在定制器预览上应用CSS,我将非常高兴。

供参考:Twentyeleven theme-options.php

这是我插件的精简版本。

<?php
/**
 * Plugin Name: S Skins
 * Plugin URI: 
 * Description: 
 * Version: 1.0
 * Author: 
 * Author URI: 
 * License: GPLv3+
 */

add_action( \'plugins_loaded\', array( \'S_Color_Themes\', \'get_instance\' ) );

class S_Color_Themes {

    /**
     * Plugin version, used for cache-busting of style and script file references.
     *
     * @since   2.6.0
     *
     * @var     string
     */
    const VERSION = \'1.0.0\';

    /**
     * Unique identifier for your plugin.
     *
     *
     * The variable name is used as the text domain when internationalizing strings
     * of text. Its value should match the Text Domain file header in the main
     * plugin file.
     *
     * @since    1.0.0
     *
     * @var      string
     */
    protected $plugin_slug = \'s-color-themes\';

    public $color_themes = array();

    /**
     * Instance of this class.
     *
     * @since    1.0.0
     *
     * @var      object
     */
    protected static $instance = null;

    /**
     * Initialize the plugin by setting localization and loading public scripts
     * and styles.
     *
     * @since    2.6.0
     */
    private function __construct() {

        $this->get_color_themes();

        if ( is_admin () ) {
            add_action( \'customize_register\', array( $this, \'wp_customize_register\' ) );
        }

        add_filter( \'stylesheet_uri\', array( $this, \'stylesheet_uri\' ), 10, 2 );
    }

    /**
     * Return the plugin slug.
     *
     * @since    1.0.0
     *
     *@return    Plugin slug variable.
     */
    public function get_plugin_slug() {
        return $this->plugin_slug;
    }

    /**
     * Return an instance of this class.
     *
     * @since     1.0.0
     *
     * @return    object    A single instance of this class.
     */
    public static function get_instance() {

        // If the single instance hasn\'t been set, set it now.
        if ( null == self::$instance ) {
            self::$instance = new self;
        }

        return self::$instance;
    }

    public function stylesheet_uri( $stylesheet, $dir_uri ) {

        $color_theme = apply_filters( \'s_color_theme\', get_theme_mod( \'s_skin\' ) );

        if ( empty( $color_theme ) || \'default\' == $color_theme || ! is_file( get_stylesheet_directory() . "/style-$color_theme.css" ) ) {
            return $stylesheet;
        }

        return "$dir_uri/style-$color_theme.css";
    }

    public function wp_customize_register( $wp_customize ) {

        #remove_theme_mod( \'s_skin\' );

        $wp_customize->add_setting( 
            \'s_skin\', 
            array(
                \'default\'    => \'\',
                \'type\'       => \'theme_mod\',
                \'capability\' => \'edit_theme_options\',
            )
        );

        #show($color_theme_names);

        $schemes = array();
        $choices = array();
        foreach ( $this->color_themes as $color_theme ) {

            $schemes[$color_theme] = array(
                \'value\' => $color_theme,
                \'label\' => ucfirst( $color_theme ),
                \'thumbnail\' => get_template_directory_uri() . \'/images/color-theme-thumbnails/\' . $color_theme . \'.png\'
            );

            $choices[ $color_theme ] = ucfirst( $color_theme );
        }

        $wp_customize->add_section(
            \'s-color-themes\',
            array(
                \'title\'     => \'Color Themes\',
                \'priority\'  => 1,
            )
        );

        $wp_customize->add_control( \'s_skin\', array(
            #\'label\'    => __( \'Color Scheme\', $this->plugin_slug ),
            \'section\'  => \'s-color-themes\',
            \'settings\' => \'s_skin\',
            \'type\'     => \'radio\',
            \'choices\'  => $choices,
            #\'priority\' => 5,
        ) );

    }

    public function get_color_themes() {

        $color_theme_files = glob( get_stylesheet_directory() . "/style-*.css" );

        if ( empty( $color_theme_files ) ) {
            return false;
        }

        $this->color_themes = array( \'default\' );

        foreach ( $color_theme_files as $file ) {
            $this->color_themes[] = str_replace( array( get_stylesheet_directory() . \'/style-\', \'.css\' ), \'\', $file );
        }
    }
}

2 个回复
最合适的回答,由SO网友:NextGenThemes 整理而成

为了解决这个问题,我不得不打电话

add_action( \'customize_register\', array( $this, \'wp_customize_register\' ) );

直接而不是在if admin 现在一切都很好,无需JavaScript即可轻松操作。

SO网友:user43506

为什么不创建一个JavaScript来监听变化呢。当您单击应该单击的内容时,只需使用JS更改CSS或添加一些类。

因此,当您单击“保存”时,它将起作用,您将获得实时预览。

结束

相关推荐

Style.css中的主题信息已损坏

我正在自定义其他人的主题,以允许网站所有者编辑比以前更多的区域。我将主题复制到一个新文件夹中,文件夹名称与原始文件夹不同。我编辑了样式。css,并将主题信息替换为:/* Theme Name: Customisable SuperBaby & Ted Author: Steve Doig Author URI: http://tech.doig.com.au Description: Modified version of SuperBaby & Ted t