如何在WordPress Real Place主题中添加banner图片？及functions.php修改合理性

你的代码存在的问题 #

你写的代码里用了get_template_directory_uri()，这个函数返回的是当前主题文件夹的URL，但媒体库的uploads文件夹是独立于主题目录的（在WordPress根目录下），所以拼接后的路径会变成主题URL/wp-content/uploads/...，这是错误的，会导致图片加载失败。

正确的图片添加方法 #

方法1：直接使用媒体库的固定URL #

从WordPress后台媒体库找到这张banner.jpg，复制它的完整URL，直接写HTML代码到你想显示图片的模板文件（比如header.php、front-page.php等）：

<img src="https://你的域名/wp-content/uploads/2023/02/banner.jpg" alt="网站横幅" />

方法2：用WordPress函数动态获取路径 #

如果想让路径更灵活（比如后续uploads目录变动也能适配），可以用wp_get_upload_dir()函数获取uploads的基础URL，再拼接图片路径，同样写到对应的模板文件里：

<?php
// 获取uploads目录的URL信息
$upload_info = wp_get_upload_dir();
// 拼接完整图片URL
$banner_url = $upload_info['baseurl'] . '/2023/02/banner.jpg';
// 输出图片标签，用esc_url确保URL安全
echo '<img src="' . esc_url($banner_url) . '" alt="网站横幅" />';
?>

在functions.php中添加代码是否可行？ #

直接在functions.php里写<img>标签不可行，因为functions.php是用来定义函数、注册钩子的文件，直接输出HTML会导致页面加载时提前输出内容，破坏页面结构，甚至引发报错。

如果一定要通过functions.php添加，需要用**WordPress动作钩子（Action Hooks）**来实现，比如找到主题提供的钩子（比如Real Place主题可能有realplace_header_top这类自定义钩子，或者用通用的wp_head、wp_footer），示例代码：

// 定义输出banner的函数
function display_custom_banner() {
    $upload_info = wp_get_upload_dir();
    $banner_url = esc_url($upload_info['baseurl'] . '/2023/02/banner.jpg');
    // 输出图片，可自行添加样式
    echo '<img src="' . $banner_url . '" alt="网站横幅" style="width:100%;height:auto;" />';
}
// 绑定到主题的头部钩子（这里假设用wp_head，实际要根据主题结构调整）
add_action('wp_head', 'display_custom_banner');

这样代码会在钩子指定的位置输出图片，不会破坏页面结构。

内容的提问来源于stack exchange，提问作者Elly