Добавление CSS в файл с помощью переполнения стека
Я разрабатываю плагин для WordPress, в который я хотел бы добавить предопределенный CSS в таблицу стилей, когда кто-то включает функцию.
Я не могу просто включить таблицу стилей в дополнение к обычной таблице стилей, потому что некоторые функции будут конфликтовать с ней. Мне бы хотелось, чтобы при нажатии на один элемент загружался только соответствующий CSS.
Когда они выбирают этот элемент, он должен «напечатать» соответствующий CSS в таблицу стилей.
Могу ли я вызвать созданную мной функцию, которая содержит CSS и вызывается только после включения этой функции?
Решение
Есть несколько способов подойти к этому.
Вы можете использовать встроенный CSS и не требовать таблицы стилей темы. И напишите, что вам нужно между вашими условиями, как этот первый пример или используйте wp_add_inline_style,
ИДЕЯ 1: не используя wp_add_inline_style
//* Load CSS
function yourplugin_prefix_load_css() {
add_action( 'wp_head', 'yourpluginprefix_css', 15 );
}
add_action( 'plugins_loaded' , 'yourplugin_prefix_load_css' );//* CSS
function yourpluginprefix_css() {
//vars
$a = get_option( 'where_a', 'what_a' );
$b = get_option( 'where_b', 'what_b' );
// begin CSS
$css = '';
$css .= '<style class="whatever" >';
//condition $a
if ( $a == '0' ) :
$css .= '
.property{
display: inline-block;
}
';
endif; //condition for $a//condition $b
if ( $b != '1' ) :
$css .= '
.property-something{
border: 1px solid #333;
}
';
endif; //condition for $b//close the style sheet
$css .= '</style>';
//minify it
$css_min = str_replace( array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $css );
echo $css_min;
}
ИДЕЯ 2 с wp_add_inline_style
Кроме того, вы можете использовать wp_add_inline_style и получить дескриптор текущей темы.
function pluginprefix_css() {
//get current theme stylesheet handle
$current_theme = ( wp_get_theme() );
//get our values for conditions
$a = get_option( 'where_a', 'what_a' );
$b = get_option( 'where_b', 'what_b' );//begin css
$css = '';//condition $a
if ( $a == '0' ) :
$css .= '
.property{
display: inline-block;
}
';
endif; //condition for $a//condition $b
if ( $b != '1' ) :
$css .= '
.property-something{
border: 1px solid #333;
}
';
endif; //condition for $b//minify css
$css_min = str_replace( array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $css );
//add inline style
wp_add_inline_style( $current_theme->stylesheet, $css_min );}
add_action( 'wp_enqueue_scripts', 'pluginprefix_css' );
Другие решения
Если вам нужно загрузить библиотеку после загрузки сайта, ваша лучшая надежда — javascript.
Например. Вы можете добавить фрагмент кода в голову при нажатии на элемент. В jQuery
var e = 'button.class';
var remove_css = '#my_style_1';
var code = '<link rel="stylesheet" type="text/css" href="/path/to/css_part.css">';
$(e).on( 'click', function() {
$('head').append( code );
$(remove_css).remove();
});
Замените переменную e классом или элементом, который будет добавлять код в заголовок при нажатии.
ОБНОВЛЕНО: найдите в источнике идентификатор (ID) вашего css-файла и поместите его в переменную remove_css. Он удалит его после нажатия на элемент. Следует отметить, что это решение не является постоянным и длится до переключения страниц.
—
Если вам нужно загрузить css на основе опции, создайте опцию в вашем администраторе, зарегистрируйте ваши стили и затем включите ее на основе опции.
Где-нибудь в коде зарегистрируйте свой стиль:
wp_register_style( 'my_style_original', '/path/to/css_part.css' );
wp_register_style( 'my_style_replace', '/path/to/css_part.css' );
А потом сдать его в зависимости от варианта
$enable_css = get_option( 'enable_css' );
if( $enable_css )
wp_enqueue_style( 'my_style_replace' ); // if setting enabled load second css
else
wp_enqueue_style( 'my_style_original' ); // if setting not enabled load original css
Это будет загружать стиль только тогда, когда опция ‘enable_css’ не является ложной или пустой.
Для создания страницы параметров см. https://codex.wordpress.org/Creating_Options_Pages или для более легкой настройки вы можете придерживаться параметров ACF (https://www.advancedcustomfields.com/add-ons/options-page/);
Вы можете создать функцию, которая записывает стиль с отступом в конкретный элемент. Помните, что это не считается плохим кодированием, во всяком случае, я не знаю, как это будет рассматриваться, поскольку это будет динамический контент.
Так, например, у вас есть:
<input type="text" />
И когда пользователь нажимает, чтобы добавить стиль, функция добавит:
<input type="text" style="..." />
С другой стороны, когда пользователь обновляет страницу, стиль исчезает.
Создайте функцию php, которая принимает аргументы включенных функций для создания пользовательской таблицы стилей и динамически ставит в очередь эту таблицу стилей. Используйте .htaccess или аналогичные настройки для перенаправления запросов на ваш custom_thingy.css в custom_thingy.php и просто сделайте так, чтобы он повторял пользовательские стили, он будет вести себя как обычная таблица стилей.
foreach($style_options as $option) {
echo file_get_contents($option_style_file[$option]);
}
если вы используете WordPress. ты можешь использовать wp_add_inline_style
detector