douhu7807 2018-06-18 22:36
浏览 336
已采纳

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

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!

  • 写回答

1条回答

  • douna1895 2018-06-18 23:12
    关注

    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>';
    }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥20 在虚拟机的pycharm上
  • ¥15 jupyterthemes 设置完毕后没有效果
  • ¥15 matlab图像高斯低通滤波
  • ¥15 针对曲面部件的制孔路径规划,大家有什么思路吗
  • ¥15 钢筋实图交点识别,机器视觉代码
  • ¥15 如何在Linux系统中,但是在window系统上idea里面可以正常运行?(相关搜索:jar包)
  • ¥50 400g qsfp 光模块iphy方案
  • ¥15 两块ADC0804用proteus仿真时,出现异常
  • ¥15 关于风控系统,如何去选择
  • ¥15 这款软件是什么?需要能满足我的需求