如何在WordPress的header.php中添加指定HTML至Logo下方？

嘿，别担心，不懂PHP也能轻松搞定这个小修改！下面我一步步给你讲清楚该怎么做：

第一步：先备份你的header.php文件 #

这一步超级重要！直接修改主题文件有风险，万一改错了，网站可能出问题。你可以通过FTP下载wp-content/themes/你的当前主题名/header.php到本地备份，或者在WordPress后台的「外观」→「主题文件编辑器」里，先复制整个header.php的内容存到本地文本文件里。

第二步：找到header.php里的Logo代码块 #

打开你的header.php文件（可以在后台「外观」→「主题文件编辑器」里找到它，或者用FTP编辑），然后找和Logo相关的代码。通常你会看到这些特征：

• 包含site-logo、custom-logo这类类名的div标签
• 调用the_custom_logo()函数的代码（这是WordPress默认的自定义Logo函数）
• 带有网站首页链接和图片标签的代码（比如<a href="你的网站地址"><img src="logo图片地址"...></a>）

举个常见的例子，你的Logo代码可能看起来像这样：

<div class="site-branding">
    <div class="site-logo">
        <?php the_custom_logo(); ?>
    </div>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>

第三步：添加你的自定义HTML代码 #

找到Logo所在的容器（比如上面例子里的<div class="site-logo">），把你的这段代码放在这个容器的结束标签</div>之后，也就是紧挨着Logo的下方位置。

修改后的代码就会变成：

<div class="site-branding">
    <div class="site-logo">
        <?php the_custom_logo(); ?>
    </div>
    <!-- 这里就是你要加的代码 -->
    <p class="navbar-text">The World Awaits You</p>
    <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
</div>

如果你的Logo是直接用img标签写的，类似这样：

<div class="logo-container">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="My Site Logo">
    </a>
</div>

那就在</div>后加你的代码：

<div class="logo-container">
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>">
        <img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="My Site Logo">
    </a>
</div>
<p class="navbar-text">The World Awaits You</p>

小提醒 #

• 如果你的主题支持子主题，最好在子主题的header.php里做修改，这样主题更新的时候不会覆盖你的自定义内容。
• 加完代码后，刷新网站看看效果，如果位置不对，可以调整代码的位置（比如是不是放在了错误的容器里），或者用CSS调整.navbar-text的样式。

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