在wordpress中动态更改样式表中的url路径

Question

I posted this to the wordpress stack exchange, but I also think its a good idea to post this here

Hello I found a function that when placed in the functions.php, it injects the entire stylesheet into the head on the website:

add_action( 'wp_head', 'internal_css_print' );
function internal_css_print() {
  echo '<style>';

  include_once get_template_directory() . '/style.css';

  echo '</style>';
}

It works great, the whole stylesheet goes in the head just fine, but one minor issue is that the urls in the css are broken. For example when the following is in the css file:

background: url('images/hero-desktop.jpg');

When the stylesheet is linked normally, this returns http://localhost:8888/wp-content/themes/my-theme/images/hero-desktop.jpg-> works

But when the stylesheet is injected in the head it returns: http://localhost:8888/images/hero-desktop.jpg --> doesnt work. The path is broken.

To fix this I can do a simple search and replace in the css to change url(' to url('/wp-content/themes/my-theme/ but there has to be a better way.

So I was thinking is there something to add to the function at the top, so before spitting out the whole css file into the head, it dynamically changes the url paths from url(/images/) to /wp-content/themes/my-theme/images/. If this is possible that would be great so its just a one time setup instead of searching and replacing css on an already developed site.

Thanks!

Answer 1

One option is to extend an existing stylesheet using wp_add_inline_style(). This is probably the "most correct" way to do this:

add_action( 'wp_enqueue_scripts', 'add_custom_styles' );
function add_custom_styles(){
    $style_handle = 'style';
    $custom_css   = 'body {
        background: url('. get_stylesheet_directory_uri() .'/images/hero-desktop.jpg);
    }';

    wp_add_inline_style( $style_handle, $custom_css );
}

Of course, replace style with the handle for the stylesheet you want to extend.

---

Another method of doing this is to use a "PHP CSS" file like so:

add_action( 'wp_head', 'print_internal_css' );
function print_internal_css(){
    echo '<style>';
        include get_stylesheet_directory().'/style.css.php';
    echo '</style>';
}

style.css.php:

body {
    background: url( <?= get_stylesheet_directory_uri() .'/images/hero-desktop.jpg'; ?> );
}

---

Lastly, if you just want a quick-fix for what you have, you can just run your file through a simple str_replace function, and use file_get_contents or a cURL request instead of include:

add_action( 'wp_head', 'print_internal_css' );
function print_internal_css(){
    echo '<style>';
        $styles = file_get_contents( get_stylesheet_directory().'/style.css' );
        echo str_replace( "url('", "url('/wp-content/themes/my-theme/", $styles );
    echo '</style>';
}