Question

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

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

当他们选择这个元素时，它应该＆＃34; print＆＃34;将相关的CSS转换为样式表。

我可以调用我创建的包含CSS的函数，只有在启用该功能后才会调用它吗？

Answer 1

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

您可以使用内联css而不需要主题的样式表。并在条件之间写下您需要的内容，例如第一个示例或使用wp_add_inline_style。

IDEA 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;

}

IDEA 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' );

Answer 2

如果你需要在加载网站后加载库，你最好的希望是javascript。例如。您可以在单击元素时将代码段添加到头部。在jQuery中

library(microbenchmark)

microbenchmark(
    m1 = {
        df.expanded <- NULL
        for(i in unique(df$ID)) {
            x <- df[df$ID == i,]
            y <- x[rep(seq_len(nrow(x)), x$Weight),1:3]
            y$order <- rep(1:max(x$Weight), nrow(x))
            y <- y[with(y, order(order)),]
            y$IDNew <- rep(max(y$ID)*100 + 1:max(x$Weight), each = nrow(x))
            df.expanded <- rbind(df.expanded, y)
        }
    },
    m2 = {
        df2 <- df[rep(seq_along(df$Weight), df$Weight), ]
        df2$ID <- paste(df2$ID, unlist(lapply(df$Weight, seq_len)), sep = '')

        # sort the rows
        df2 <- df2[order(df2$ID), ]
    }
)

# Unit: microseconds
# expr     min      lq      mean   median       uq      max neval
# m1 806.295 862.460 1101.6672 921.0690 1283.387 2588.730   100
# m2 171.731 194.199  245.7246 214.3725  283.145  506.184   100

将e变量替换为将在单击时将代码添加到标题中的类或元素。

更新：在源代码中查找css文件的标识符（ID）并将其放入remove_css变量中。单击元素后它将删除它。我应该注意，这个解决方案并不持久，并且会持续到页面切换。

-

如果您需要根据选项加载css，请在管理员中创建一个选项，注册您的样式，然后根据选项启用它。

代码中的某个地方注册了你的风格：

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();
});

然后基于选项

使其成为可能

wp_register_style( 'my_style_original', '/path/to/css_part.css' );
wp_register_style( 'my_style_replace', '/path/to/css_part.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

通过php添加css到文件

5 个答案:

IDEA 1：不使用wp_add_inline_style

IDEA 2，带有wp_add_inline_style