通过php将css添加到文件

Question

我正在开发一个 WordPress 插件，当有人启用某个功能时，我希望它能够将一些预定义的 CSS 添加到样式表中。

除了常规样式表之外，我不能简单地包含样式表，因为某些功能会与之冲突。我希望这样当他们单击一个元素时，它只加载与此相关的 CSS。

当他们选择这个元素时，它应该将相关的 CSS “打印”到样式表中。

我可以调用我创建的包含 CSS 并且仅在启用该功能后才被调用的函数吗？

Answer 1

我有几种方法可以解决这个问题。

您可以使用内联 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;

}   

带有 wp_add_inline_style 的 IDEA 2

或者，您可以使用 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' );

Answer 2

如果您需要在网站加载后加载库，您最好的希望是javascript。 例如。单击元素时，您可以将代码 sn-p 添加到头部。在 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 变量替换为将在点击时将代码添加到标题中的类或元素。

更新：在源代码中找到您的 css 文件的标识符 (ID) 并将其放入 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'不是false或空时才加载样式。 要创建选项页面，请参阅https://codex.wordpress.org/Creating_Options_Pages 或为了更轻松的设置，您可以坚持使用 ACF 选项 (https://www.advancedcustomfields.com/add-ons/options-page/)；

Answer 3

您可以创建一个将缩进样式写入特定元素的函数。请记住，这不被认为是糟糕的编码，反正我不知道如何考虑它，因为它是动态内容。

因此，例如，您有：

<input type="text" />

当用户点击添加样式时，函数会添加：

<input type="text" style="..." />

另一方面，当用户刷新页面时，样式会消失。

Answer 4

创建一个 php 函数，该函数接受启用哪些功能的参数来制作自定义样式表，并动态地将该样式表排入队列。使用 .htaccess 或类似设置将您的 custom_thingy.css 请求重定向到 custom_thingy.php 并让它回显自定义样式，它的行为就像一个常规样式表。

foreach($style_options as $option) {
    echo file_get_contents($option_style_file[$option]);
}

Answer 5

如果你使用 wordpress。你可以使用 wp_add_inline_style