我了解CSS会相对于其自身位置获取图像, 但是如何在Wordpress主题内以相同的方式执行此操作?
场景:我的标题右侧有一个搜索框。该搜索框附带了二十一个Wordpress主题, 并且具有以下CSS:
background: url(images/Search-Button.jpg) no-repeat;
它渲染出位于主题文件夹内images文件夹中的背景图像。它在这里找到图片:
C:\wamp\www\wordpress\wp-content\themes\twentyeleven\images\Search-Button.jpg
现在, 我想在徽标旁边的某个地方添加徽标, 因此将其添加到主题的header.php中:
<
div id="Title_logo">
<
img src="http://www.srcmini.com/images/Logo.png" />
<
/div>
但它无法成功渲染图像, 因为它不在” … \ wp-content \ themes \ twentyeleven \ images \ Logo.png” (与Search-Button.jpg相同的目录)中寻找图像。
相反, 结果图像src是:C:\ wamp \ www \ images \ Logo.png
并报告找不到该图像。
背景图像如何工作?
还是至少有人可以向我展示正确的方法, 并解释为什么这不起作用?
我希望即使重命名主题文件夹也能正常工作。
#1你必须这样做。
<
div id="Title_logo">
<
img src="http://www.srcmini.com/<
?php echo get_template_directory_uri();
?>
/images/Logo.png" />
<
/div>
然后, 如果将主题安装在另一台服务器上, 它也将起作用。请参阅:http://codex.wordpress.org/Function_Reference/get_template_directory_uri#bodyContent
在示例中的执行方式(src =http://www.srcmini.com/” images / Logo.png” )将浏览器指向你的根文件夹, 因为整个Wordpress cms是从根文件夹中的index.php构建的。
因此, 你必须(通过php)告诉浏览器该图像位于主题目录的images目录中。
css文件也以这种方式加载, 但是从存在的地方调用他对相关文件的引用。 (主题目录)。因此, 在css中, 你可以像平常一样引用文件, 但是从theme-docs(php)中, 你必须在路径中使用特殊的Wordpress函数, 因此该函数为:get_template_directory_uri(); 。
get_template_directory_uri文档
#2背景图像之所以有效, 是因为它在模板的样式表文件中。因此, 它使用模板文件夹的基础来查找图像。
但是, 当你使用< img src =http://www.srcmini.com/” images / Logo.png” /> 时, 它只是在查看网站的基础。 Veelen解释了你需要使用get_template_directory_uri()来获取当前动态主题文件夹的路径。
#3这很简单:
只需更换:
<
div id="Title_logo">
<
img src="http://www.srcmini.com/images/Logo.png" />
<
/div>
带有:
<
div id="Title_logo">
<
img src="http://www.srcmini.com/<
?php echo get_theme_file_uri('images/Logo.png');
?>
" />
<
/div>
注意:echo get_theme_file_uri(‘ 资产的路径’ );
#4这是我的管理方式。
图片位于此处
\themes\twentyeleven\images\Search-Button.jpg
通常在你的儿童主题CSS中, 其位置如下
\themes\mytheme\style.css
【WordPress主题中的相对图像链接】然后背景图片会变成
background: url(../twentyeleven/images/Search-Button.jpg) no-repeat;
推荐阅读
- 从buddypress个人资料页面中删除”Activity”标签
- 重新安装WordPress主题以修复错误
- 从wordpress管理员中删除仪表盘访问
- Java关键字
- #yyds干货盘点#如何用Python发送告警通知到钉钉()
- JAVA赋值和赋值扩展运算符
- JAVA快速入门总结
- Java变量分类
- 七牛云 | ??致力于提供最适合开发者的数据在线托管??传输加速??以及云端处??理的服务