Wordpress 主题中的相对图像链接

Posted

技术标签:

【中文标题】Wordpress 主题中的相对图像链接【英文标题】:Relative image links in Wordpress themes 【发布时间】:2013-06-02 19:00:22 【问题描述】:

我知道 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

并报告找不到图片。

背景图片是如何工作的?

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

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

【问题讨论】:

【参考方案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

【讨论】:

非常感谢先生,但我有一个问题,使用 get_template_directory_uri() 与 bloginfo('template_directory') 有什么好处吗?哪一种是正确的做法? 第一个。因为后者已被弃用。 第一个。为什么?这是一个小故事。在这里阅读:wordpress.stackexchange.com/a/72731 那个和 bloginfo('template_directory') 已被弃用,因此可能会在未来的 wordpress 更新中被删除。【参考方案2】:

background-image 有效,因为它位于模板的样式表文件中。因此,它使用模板文件夹的基础来查找图像。

但是当您使用&lt;img src="images/Logo.png" /&gt; 时,它正在查看网站的底部。 Veelen 解释说您需要使用get_template_directory_uri() 来获取动态的当前主题文件夹路径。

【讨论】:

【参考方案3】:

就这么简单:

简单替换:

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

【讨论】:

【参考方案4】:

这是我的管理方式。

图片位于此处

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

在你的子主题 CSS 中,它的位置一般是这样的

\themes\mytheme\style.css

那么背景图片就会变成

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

【讨论】:

不太清楚。为什么必须返回一个目录?没有提到主题是儿童主题。

以上是关于Wordpress 主题中的相对图像链接的主要内容,如果未能解决你的问题,请参考以下文章

如何从wordpress网站删除图像路径

php Wordpress - 主题目录中的图像

WordPress获取某个分类关联的标签

引导到 wordpress 不会正确显示图像

如何在 Wordpress 的标题中添加图像 [关闭]

HTML 将Wordpress链接到主题中的文件 - bloginfo(template_directory);