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

我把它发布到wordpress堆栈交换,但我也认为这是一个好主意在这里发布 </ em> </ p>

你好我发现了一个函数,当放在functions.php中时,它会将整个样式表注入到网站的头部:</ p>

< pre> add_action('wp_head','internal_css_print');
function internal_css_print(){
echo'&lt; style&gt;';

include_once get_template_directory()。 '/style.css';
nn echo'&lt; / style&gt;';
}
</ code> </ pre>

它很棒,整个样式表都在 很好,但一个小问题是css中的网址被破坏了。 例如,当以下内容位于css文件中时:</ p>

  background:url('images / hero-desktop.jpg'); 
</ code> </ pre>

当样式表正常链接时,返回 http:// localhost:8888 / wp-content / themes / my-theme / images / hero-desktop.jpg </ code> - &gt ; 作品</ p>

但是当样式表被注入头部时,它会返回: http:// localhost:8888 / images / hero-desktop.jpg </ code> - &gt; 不起作用。 路径坏了。</ p>

要解决此问题,我可以进行简单的搜索并在css中替换 url('</ code> to url('/ wp-content / themes / my-theme / </ code>但必须有更好的方法。</ p>

所以我在想是有什么要添加到顶部的功能, 所以在将整个css文件吐出到头部之前,它会动态地将URL路径从 url(/ images /)</ code>更改为 / wp-content / themes / my-theme / images / < / code>。如果这是可能的,那么它只是一次性设置,而不是在已经开发的网站上搜索和替换css。</ p>

谢谢!</ p>
</ DIV>

展开原文

原文

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个回答



一个选项是使用 wp_add_inline_style()</ code> 。 这可能是执行此操作的“最正确”方法:</ p>

  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 );
}
</ code> </ pre>

当然,将 style </ code>替换为要扩展的样式表的句柄。</ p> \ n


另一种方法是使用“PHP CSS”文件,如下所示:</ p>

  add_action('wp_head',  'print_internal_css'); 

函数print_internal_css(){
echo'&lt; style&gt;';
包括get_stylesheet_directory()。'/ style.css.php';
echo'&lt; / style&gt;';
}
</ code> </ pre>

style.css.php </ strong>:</ p>

  body {
background :url(&lt;?= get_stylesheet_directory_uri()。'/ images / hero-desktop.jpg';?&gt;);
}
</ code> </ pre>



\ ñ

拉斯 tly,如果您只想快速修复所拥有的内容,可以通过简单的 str_replace </ code>函数运行文件,并使用 file_get_contents </ code>或cURL请求代替 包括:</ p>

  add_action('wp_head','print_internal_css'); 
function print_internal_css(){
echo'&lt; style&gt;';
$ styles = file_get_contents( get_stylesheet_directory()。'/ style.css');
echo str_replace(“url('”,“url('/ wp-content / themes / my-theme /”,$ styles);
echo'&lt; / style&gt;';
}
</ code> </ pre>
</ div>

展开原文

原文

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>';
}

dtvgo28624
dtvgo28624 我没有使用wp_print_styles来排队样式表 - 但是更深入地了解make,看起来它实际上并不局限于排队的脚本,并且该钩子上的任何内容都可以渗透到wp_editor()中。 @cup_of - 由于您使用的是后者功能,因此您可能需要考虑将其保留在wp_head中
大约 2 年之前 回复
doushaiyu5065
doushaiyu5065 自WordPress 3.3 [wp_print_styles](codex.wordpress.org/Plugin_API/Action_Reference / ...不用于排队样式或脚本
大约 2 年之前 回复
duanmaduan1848
duanmaduan1848 真棒看起来像最后一个str_replace将对我有用。 谢谢!
大约 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问