在所有其他样式之后添加外部样式表

时间：2017-06-25 作者：Daveh0

我使用的主题广泛使用内部样式表来设置各种类型的页面及其元素的样式。例如，通过他们的插件UI，我可以配置特定页面的英雄布局和内容。。。包括各种文本元素的字体、大小和颜色。配置hero并发布页面后，会将内部样式表添加到页面的<head> 标签：

<style id="ut-hero-custom-css" type="text/css">
    #ut-hero .hero-inner {
        text-align: right
    }
    .hero-description {
        color: #000000;
    }
    .hero-description {
        background: #FCB54B;
        padding-bottom: 0;
        margin-bottom: 5px;
    }
    #ut-hero .hero-title {
        color: #1777FF;
    }
</style>

不幸的是，该插件在允许我自定义的内容方面受到限制，因此我需要添加一些自己的CSS来进行微调。假设我想在文本块周围显示一个边框class="hero-description". 我需要补充一下

.hero-description {
    border: 1px solid #c00;
}

并将其应用于上述初始声明后的页面。添加“我的孩子”主题的样式。css文件或我之前注册并排队添加的任何其他css文件。我希望在排队时可以将插件嵌入的内联样式表指定为新CSS文件的依赖项，但我在$wp\\U样式中看不到任何句柄或引用，所以我无法做到这一点。你甚至可以注册一个内部样式表吗？

无论如何，这可以分解为一个非常普遍的问题。我想在页面的CSS上有“最后一个字”（不包括内联样式和范围元素）。是否没有直接的方法来指定一行代码，例如：

<link rel="stylesheet" src="mycss.css">

始终在结束前包括在内</head> 标签

4 个回复

SO网友:Kalamun

它不优雅，但很管用。

将这些行添加到函数。php：

ob_start();

add_action(\'shutdown\', function() {
    $final = \'\';
    $levels = ob_get_level();
    for ($i = 0; $i < $levels; $i++) {
        $final .= ob_get_clean();
    }

    // append styles just before </head>
    $final = str_replace( "</head>", \'<link rel="stylesheet" src="mycss.css"></head>\', $final );

    echo $final;
}, 0);

或者，您可以将所有内联样式移动到标题的开头，最好是在标题标记之后：

ob_start();

add_action(\'shutdown\', function() {
    $final = \'\';
    $levels = ob_get_level();
    for ($i = 0; $i < $levels; $i++) {
        $final .= ob_get_clean();
    }

    /* Adjust the final output */

    // load HTML DOM
    $dom= new DOMDocument(); 
    $dom->preserveWhiteSpace = false;
    $dom->formatOutput       = true;
    $dom->loadHTML( \'<?xml encoding="utf-8" ?>\' . $final );

    // collect styles and remove them from DOM
    $inline_styles = "";
    $styles = $dom->getElementsByTagName("style");
    foreach( $styles as $style )
    {
        $inline_styles .= $dom->saveHTML( $style );
        $style->parentNode->removeChild( $style );
    }

    $final = $dom->saveHTML();

    // strip utf-8 workaround
    $final = str_replace( \'<?xml encoding="utf-8" ?>\', "", $final );

    // append styles after <title>
    $final = str_replace( "</title>", "</title>\\n" . $inline_styles, $final );

    echo $final;
}, 0);

SO网友:Cedon

您将向wp_enqueue_style() 函数调用。

function my_enqueues() {
    wp_enqueue_style( \'style-one\', \'{path}\' );
    wp_enqueue_style( \'style-two\', \'{path}\', array( \'style-one\' ) );
    wp_enqueue_style( \'style-three\', \'{path}\', array( \'style-two\' ) );
    wp_enqueue_style( \'style-final\', \'{path}\', array( \'style-three\' ) );
}
add_action( \'wp_enqueue_scripts\', \'my_enqueues\' );

这段代码的作用是使每个样式表依赖于前一个样式表。所以他们会按顺序加载style-one, style-two, 等

当然是{path} 占位符应该是您的style.css 使用调用的文件get_stylesheet_uri();.

如果要在插件加载了覆盖的插件后再加载一个插件，请尝试使用plugins_loaded 挂钩：

function my_plugin_overrides() {
   wp_deregister_style( \'plugin-styles\' ); // OPTIONAL
   wp_enqueue_style( \'plugin-css-overrides\', \'{path}\', array( \'deps\' ) );
}
add_action( \'plugins_loaded\', \'my_plugin_overrides\' );

SO网友:Daveh0

我在这里完全被封锁了。因此，目前我将使用以下“变通方法”，以便我至少可以继续开发：

$(function() {
    $(\'head\').append(\'
      <link rel="stylesheet" type="text/css" src="mycss.css">
    \');
});

当然不是“正确”的方式，但我应该能够轻松地将我的新的覆盖样式（如上面的mycss.css中所引用的）移植到它们所属的任何地方，只要我找到了正确的方式。

SO网友:scytale

由于WP 4.7，WP仪表板包括一个CSS定制器（Appearence->Cusomize->Additional CSS）。当WP将样式块添加到<；压头（>）；在按主题将CSS和其他可能的附加内容排入队列后。

按照Cedons enqueing的回答或jimihenrik的评论，正常做法应该可行。

然而这个主题似乎需要一个“非标准”的解决方案（我喜欢你的JS解决方案）——备选方案包括一个编辑过的标题副本。子主题中的php。

“将内部样式表添加到页面的头（<；head>；”

主题可以以多种方式添加到标题中。php，例如硬编码；通过主题“动作钩”；通过wp头

标题的最后一部分。php通常包含：

<?php possibly_themes_own_action_hook(); ?>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
  Some HTML for header and navigation & other stuff prior to Loop adding say H1 title

如果主题没有标题。php或缺少</head> 那么相关代码可能在模板中。

在子标题中。phpjust above </head> （如果不在场，请参见下文）您可以：

硬编码上面的CSS或样式表链接</head>

or <php include(\'path/to/mycss.css\');?>

or 添加您自己的操作：

 my_add_to_head();

在你的功能中。php

 function my_head_function() {
 ?>
 <style>.hero-description {border:1px solid #c00;}</style> 
 <?php
 // or stylesheet link or file_get_contents to get css file and echo
 // + any other stuff you want to add to head
 }
 add_action(\'my_add_to_head\', \'my_head_function\');

解决方案包括bad practice 尤其是如果其他人最终不得不维护，但这可能是你主题的最佳选择。

“当我使用wp\\u head时，它最终与所有JavaScript文件一起出现在标记中。”

如果你的意思是在body标签内，那么主题中有一个编码错误。否则，这是“非标准”设计，可能会导致许多插件“失败”。任何一个wp_head(); 是在主体标签或“wp\\U head”用于插入<body> 也许吧</head>.

如果</head> 不在页眉中。php或模板，然后在上面添加上述“解决方案”wp_head(); 可能仍然有效，但插件问题仍然存在。

结束

文章导航

小码农CODE

在所有其他样式之后添加外部样式表

相关推荐

无法获取要在子主题中加载的自定义css文件