Intereting Posts
Как сделать wp-signup.php 1-ступенчатым процессом WP_Query по ключевому слову OR post tag PHP Неустранимая ошибка: вызов неопределенной функции wp_cache_get () в /var/www/vhosts/visisite.com/httpdocs/wp-includes/functions.php в строке 1367 Как перенаправить после входа в систему, рабочий путь? Вытягивающие сообщения, помеченные аналогичным названием Правила перезаписи: разница между 'init', 'rewrite_rules_array', 'generate_rewrite_rules'? Изменить порядок пользовательского таксономического списка Как добавить медиафайлы из внешнего интерфейса в существующее сообщение и изменить название файла Показывать только похожие сообщения, когда другая должность имеет такой же срок Отобразить первый тег, назначенный сообщению Пытается загрузить миниатюры категорий на странице wordpress Изменить перенаправление сроков обновления Как установить ширину редактора WYSIWYG в функции wp_editor ()? Распределение продуктов Woocommerce на страницу Содержимое Trim Post на главной странице

Как сделать загрузку CSS в реальном времени на основе параметров, нажатых в настройке темы?

У меня проблема. Я пытаюсь получить настройку темы для загрузки другого CSS-файла, основываясь на том, какой вход для радио в нажатом, живом!

Он работает до сих пор, когда опция сохраняется, когда я нажимаю «Сохранить и публиковать», она загружается только при ручной перезагрузке всей страницы настройки. Панель предварительного просмотра обновляется при выборе, но не загружает выбранный CSS, и я не знаю, что на самом деле заставляет Twenty Eleven делать это, но мне нравится, чтобы это так говорило.

Я рассмотрел тему Twentyeleven, чтобы закодировать это. Различия заключаются в следующем:

  • Тема использует option для настроек, а не theme_mod для него
  • У него есть некоторые настройки, но я думаю, что это для отдельной страницы параметров темы, я не хочу этого.
  • Он использует enqueue scripts чтобы добавить свою «темную» тему поверх обычной темы, и она фактически применяется вживую, если щелкнуть ее, это то, что мне тоже нравится.

Как мне это сделать? Не уверен, как это работает, кажется, он сохраняет опцию временную только для настройки и обновляет ее с темной темной темой.

Я был бы рад, если бы вы могли помочь мне выяснить, как применять CSS в предварительном просмотре Customizer.

Для справки: 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 ); } } } 

Solutions Collecting From Web of "Как сделать загрузку CSS в реальном времени на основе параметров, нажатых в настройке темы?"

Почему бы вам не создать JavaScript, который будет прослушивать изменения. Когда вы нажимаете то, что вы должны щелкнуть, вы просто изменяете CSS с помощью JS или добавляете некоторый класс.

Так что, когда вы нажимаете SAVE, он будет работать, и у вас будет предварительный просмотр в реальном времени.

Чтобы решить эту проблему, мне пришлось позвонить

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

прямо, а не внутри условия if admin и теперь все работает отлично и легко без JavaScript.