WordPress自定义主题如何在菜单栏左侧添加logo

1. 开启主题自定义logo支持 #

先进入「外观 > 主题编辑器」，找到当前主题的functions.php文件，添加以下代码开启logo上传功能：

add_action('after_setup_theme', function() {
    add_theme_support('custom-logo', array(
        'height'      => 40,
        'width'       => 120,
        'flex-height' => true,
        'flex-width'  => true,
    ));
});

添加完成后保存，你就可以在「外观 > 自定义 > 站点身份」里上传需要的logo了。

2. 修改header.php代码 #

你当前提供的header.php存在结构错误（</html>标签位置错误），直接替换为以下完整代码即可实现左侧logo+右侧菜单的导航结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="xxxxx" crossorigin="anonymous">
    <?php wp_head(); ?>
</head>
<body <?php body_class('bg'); ?>>
<?php wp_body_open(); ?>

<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg bg-white shadow-sm">
    <div class="container">
        <!-- 左侧logo -->
        <a class="navbar-brand d-flex align-items-center" href="<?php echo esc_url(home_url('/')); ?>">
            <?php 
            if (function_exists('the_custom_logo') && has_custom_logo()) {
                the_custom_logo();
            } else {
                echo esc_html(get_bloginfo('name'));
            }
            ?>
        </a>
        
        <!-- 移动端菜单触发按钮 -->
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#siteNav" aria-controls="siteNav" aria-expanded="false" aria-label="切换菜单">
            <span class="navbar-toggler-icon"></span>
        </button>

        <!-- 右侧菜单 -->
        <div class="collapse navbar-collapse" id="siteNav">
            <?php
            wp_nav_menu(array(
                'container' => false,
                'menu_class' => 'navbar-nav ms-auto gap-3',
            ));
            ?>
        </div>
    </div>
</nav>

保存后即可看到导航栏左侧已经显示你上传的logo。

3. 样式调整（可选） #

如果logo尺寸不符合预期，可以进入「外观 > 自定义 > 额外CSS」添加以下代码调整大小：

.navbar-brand img {
    max-height: 40px;
    width: auto;
}

如果不想使用后台上传logo的方式，也可以直接硬编码logo路径：将上面代码中the_custom_logo()的部分替换为<img src="你的logo图片地址" alt="<?php echo esc_attr(get_bloginfo('name')); ?>">即可。

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