在WordPress主题中，动态css与代码中的内联问题有什么关系吗？

时间：2016-02-16 作者：The WP Intermediate

我的一位开发人员使用这种代码来设计-

<div class="progress-bar progress-bar-striped custom-color-progress" role="progressbar" aria-valuenow="<?php echo $percentage?>" aria-valuemin="0" aria-valuemax="100" style="width:<?php echo $percentage * 100?>%"></div>
但是很少有专家认为这-

style="width:<?php echo $percentage * 100?>%"
看起来最终是硬编码的（或浏览器中的内联CSS），而不是专业主题。

这是我的开发人员所想的-他们没有其他办法，这是唯一的办法，因为他们有各种实例，其中CSS值通过主题选项面板存储在数据库（或变量）中。

然而，当专家设计师和评论家认为他们应该采取一些更好的方法来避免这种内联CSS，即使它是动态出现的。

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

另一个解决方案是wp_add_inline_style() 这为您提供了注入动态内联样式的机会：

function my_custom_style() {

    wp_enqueue_style(
        \'custom-style\',
        get_template_directory_uri() . \'/css/custom-style.css\'
    );

    //our customer percentage set by a user in some options panel
    $percentage = get_theme_mod(\'my-custom-percentage\');

    $inline_style =<<<DOC

    .progress-bar {
        width: {$percentage}%;
    }

DOC;   

    //inject our custom percentage after "custom-style.css"
    wp_add_inline_style( \'custom-style\', $inline_style );

}

add_action(\'wp_enqueue_scripts\', \'my_custom_style\');
除此之外，当用户在后端更改设置时，还可以通过编程方式生成css文件，将其存储在uploads目录中的某个位置，然后使用wp_enqueue_scripts.

您还可以连接到wp_head 并以这种方式注入您的风格，虽然可能不是最好的方式，但这里有一个示例：

function my_custom_style() {

    $percentage = get_theme_mod(\'my-custom-percentage\');

    ?>

    <style type="text/css">
        .progress-bar {
            width: <?php echo $percentage; ?>%;
        }
    </style>

    <?php

}

add_action(\'wp_head\', \'my_custom_style\', 100);

标签： plugins   plugin-development   小码农  

相关推荐

从wp-content/languages/plugins/woocommerce-ro_RO？编辑语言文件是安全的

可以安全地编辑wp内容/语言/插件/woocommerce-ro\\U ro中的语言文件。mo（.po）？我这样问是因为我不想在插件更新时覆盖它们。抱歉，如果是愚蠢的问题。