个性化阅读
专注于IT技术分析

WordPress在Sage模板中使用图像

我试图在我的Sage模板文件之一中使用背景图像。

但是, 当我尝试此操作时, 图像未显示。

<section class="banner" style="background-image: url(../images/banner.jpg);">

banner.jpg文件位于theme-name / assets / images / banner.jpg中

我在这里做错了什么?


#1


用下面的代码替换你的代码。你需要在图片文件夹之前添加资产, 因为你提到的图片路径是图片文件夹是资产的子文件夹

<section class="banner" style="background-image: url('../assets/images/banner.jpg');">

使用了get_template_directory_uri()。检索主题目录URI。

<section class="banner" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/banner.jpg');">

如果使用子主题, 则使用get_stylesheet_directory_uri()。它返回当前主题/子主题的URI。

<section class="banner" style="background-image: url('<?php echo get_stylesheet_directory_uri(); ?>/assets/images/banner.jpg');">

#2


请使用wordpress模板目录路径

<section class="banner" style="background-image: url(<?php echo get_template_directory(); ?>/images/banner.jpg);">

#3


尝试这个:

<section class="banner" style="background-image: url(/wp-content/themes/theme-name/assets/banner.jpg);">

或这个:

<section class="banner" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/banner.jpg');">

也许你只是忘记了”资产”:

<section class="banner" style="background-image: url('../assets/images/banner.jpg');">

#4


在header.php中尝试一下:

<section class="banner" style="background-image: url(wp-content/themes/theme-name/dist/images/about-us-top-side.png);">

or

<section class="banner" style="background-image: url(wp-content/themes/theme-name/assets/images/about-us-top-side.png);">

如果正确使用Sage主题, 则第一个图像将具有优化的图像。


#5


先前的答案使用WordPress的一些内置函数来解析当前主题的路径。但是, 在Sage(使用Blade模板)中, 这是通过@asset指令处理的:

<section class="banner" style="background-image: url("@asset('images/example.jpg')");">

文献资料

赞(0) 打赏
未经允许不得转载:srcmini » WordPress在Sage模板中使用图像
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏