3

我知道 CSS 会相对于它自己的位置获取图像，但我如何在 Wordpress 主题中以同样的方式执行此操作？

场景：我的标题右侧有一个搜索框。搜索框带有 Twenty11 Wordpress 主题，并具有以下 css：

background: url(images/Search-Button.jpg) no-repeat;

它呈现位于主题文件夹内的图像文件夹中的背景图像。它在这里找到了图像：

C:\wamp\www\wordpress\wp-content\themes\twentyeleven\images\Search-Button.jpg

现在，我想在它旁边的某个地方添加一个徽标，所以我将它添加到主题的 header.php 中：

<div id="Title_logo">
    <img src="images/Logo.png" />
</div>

但它没有成功渲染图像，因为它没有在"...\wp-content\themes\twentyeleven\images\Logo.png"（与 Search-Button.jpg 相同的目录）寻找图像。

相反，结果图像src是： C:\wamp\www\images\Logo.png

并报告找不到图像。

背景图像是如何工作的？

或者有人至少可以告诉我正确的方法，并解释为什么这不起作用？

即使我重命名主题文件夹，我也希望它能够工作。

4

4 回答 4

7

你必须这样做；

<div id="Title_logo">
    <img src="<?php echo get_template_directory_uri(); ?>/images/Logo.png" />
</div>

然后，如果您将主题安装在另一台服务器上，它也将起作用。请参阅：http ://codex.wordpress.org/Function_Reference/get_template_directory_uri#bodyContent

您在示例中执行的方式 (src="images/Logo.png") 将浏览器指向您的根文件夹，因为整个 Wordpress cms 是从根文件夹中的index.php构建的。

所以你必须告诉你的浏览器（通过 php）图片在主题目录的 images 目录中。

css 文件也是以这种方式加载的，但会从它存在的地方调用他对相关文件的引用。（主题目录）。所以在css中你可以像往常一样引用你的文件，但是从theme-docs（php）你必须在你的路径中使用特殊的Wordpress函数，因此函数：get_template_directory_uri();

get_template_directory_uri 文档

于 2013-06-06T16:54:24.283 回答
1

之所以background-image有效，是因为它位于模板的样式表文件中。所以它需要模板文件夹的基础来查找图像。

但是当您使用<img src="images/Logo.png" />它时，它正在查看站点的基础。Veelen 解释说您需要使用get_template_directory_uri()来获取动态的当前主题文件夹路径。

于 2013-06-06T16:58:15.407 回答
1

这很容易：

只需更换：

<div id="Title_logo">
    <img src="images/Logo.png" />
</div>

和：

<div id="Title_logo">
    <img src="<?php echo get_theme_file_uri('images/Logo.png'); ?>" />
</div>

注意：echo get_theme_file_uri('path to your assets ');

于 2017-12-19T16:28:54.927 回答
0

这是我的管理方式。

图片位于此处

\themes\twentyeleven\images\Search-Button.jpg

通常在您的子主题 CSS 中，它的位置如下

\themes\mytheme\style.css

然后背景图像会变成

background: url(../twentyeleven/images/Search-Button.jpg) no-repeat;
于 2013-06-06T17:06:43.377 回答