html - Wordpress 主题中的相关图像链接

Question

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

场景:我的标题右侧有一个搜索框。搜索框带有 Twentyeleven Wordpress 主题并具有以下 CSS:

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

它渲染出位于 themes 文件夹内的 images 文件夹中的背景图像。它在这里找到了图像:

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

现在，我想在它旁边的某处添加一个 Logo ，所以我将其添加到主题的 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

并报告找不到该图像。

背景图片是如何工作的？

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

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

Answer 1

你必须这样做;

<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 中，您可以像往常一样引用您的文件，但是从主题文档 (php) 中，您必须在路径中使用特殊的 Wordpress 函数，因此函数:get_template_directory_uri();

get_template_directory_uri documentation