将 CSS 添加到 PHP Wordpress 插件

Posted 2023-02-24

【中文标题】将 CSS 添加到 PHP Wordpress 插件

【英文标题】：Add CSS to Php Wordpress plugin

【发布时间】：2012-06-09 11:55:58

【问题描述】：

我写了一个简单的插件，它使用 wp_options 设置一些 css 代码。这一切看起来都像这样：

add_action('init','easy_style');

function easy_style()

    ?>
    <style>
    #header a 
        color: <?php echo get_option('topcolor'); ?>;
        font-size: <?php echo get_option('topsize'); ?>px;
        <?php
            if (get_option('topstyle') == "bold")
             echo "font-weight: bold;"; echo "font-style: normal;"; 
            elseif (get_option('topstyle') == "italic")
             echo "font-style: italic;"; echo "font-weight: normal;"; 
            elseif (get_option('topstyle') == "bolditalic")
             echo "font-weight: bold;"; echo "font-style: italic;"; 
            else  echo "font-weight: normal;"; echo "font-style: normal;"; 
        ?>;
    

    </style>
    <?php

现在可以了，但是如果我激活我的“联系表格 7”插件，联系表格 7 就不再起作用了。它不能发送任何邮件。所以我认为我的做法是错误的。如果我删除这段代码，联系表格会再次起作用...

我认为我做错了，因为 css 需要加载到标题中，不是吗？ 所以我认为我会做的测试是将相同的代码放在标题中。但是，其他一些 css（我不知道在哪里）会覆盖这些，所以这也不起作用。

我认为有一些 wp 函数可以将 css 代码添加到标题中，但我不知道如何准确。

有什么想法吗？

谢谢

【问题讨论】：

查看这个答案***.com/a/38050537/1153703

【参考方案1】：

也许您正在使用的插件想要发送一些 http 标头。

由于您使用的是 init 钩子（在此处详细说明：http://codex.wordpress.org/Plugin_API/Action_Reference/init），因此当插件开发人员认为标头尚未发送时，您正在运行一些操作。

但是，由于您发送了一些输出（回显某些样式），因此您会强制更快地发送标头。我建议你使用另一个在输出已经启动后发生的钩子。

更新：您可以使用 wp_enqueue_style 函数（此处参考：http://codex.wordpress.org/Function_Reference/wp_enqueue_style），因为它是显示样式的推荐方式。您只需将这些规则保存在一个 css 文件中并在调用 wp_head 函数之前将其加入队列以加载

【讨论】：

这帮我解决了问题！你是对的，“init”是问题所在。我将其更改为“wp_loaded”，现在联系表格再次起作用。非常感谢！ :)

似乎我错了，它在本地工作，但在我的主机上我得到：无法修改标头信息 - 标头已发送（输出开始于 /home/gnc0081000/domains/claeysparts.be/public_html/ wp-content/plugins/easy-styler.php:18) 在 /home/gnc0081000/domains/claeysparts.be/public_html/wp-includes/pluggable.php 866 行

@WtFudgE 完全一样，只需阅读错误消息即可。在使用 header 功能之前，您正在打印一些东西。这与我上面所说的相同，但在我无法访问的脚本的一部分中，但错误消息会告诉您错误在哪里：在 /home/gnc0081000/domains/claeysparts.be/public_html/wp-第 18 行的 content/plugins/easy-styl‌​er.php

【参考方案2】：

将 CSS 添加到插件的安全方法是使用 wp_enqueue_style。

/**
 * Register with hook 'wp_enqueue_scripts', which can be used for front end CSS and javascript
 */
add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' );

/**
 * Enqueue plugin style-file
 */
function prefix_add_my_stylesheet() 
    // Respects SSL, Style.css is relative to the current file
    wp_register_style( 'prefix-style', plugins_url('style.css', __FILE__) );
    wp_enqueue_style( 'prefix-style' );

Reference.

【讨论】：

我尝试写入一个 css 文件，然后使用您的代码注册它。它加载了 CSS 文件，但是我似乎遇到了和以前一样的问题。和我放到头文件里的时候一样。

我注意到一些 css 代码有效，但有些则无效。例如，菜单链接上的字体大小和字体粗细有效，但颜色似乎没有改变。有什么想法吗？

那是因为你的模板 CSS 覆盖了你的插件 CSS。看看包含顺序和 CSS 特异性：w3.org/TR/CSS2/cascade.html#specificity

【参考方案3】：

我通过加载 styles.css 文件解决了我的问题，编辑它并再次保存

【讨论】：

您确实想切换到使用 enqueu 样式。这将使您的插件更强大，并且在新版本的 WP 出现时不太可能中断。

【参考方案4】：

在插件dev中，不要忘记发送class ($this)的引用

add_action( 'wp_enqueue_scripts', array($this,'prefix_add_my_stylesheet' ));