您现在的位置是：首页 > WordPress教程WordPress教程

如何在WordPress中添加自定义页眉

WP集市 2025-08-27 【WordPress教程】 1525人已围观

想在WordPress里搞个自定义页眉？其实比煮泡面还简单。咱们先理清思路：页眉不就是header.php那点事儿嘛！别被代码吓到，跟着我左手右手一个慢动作——
首先得让孩子（主题）学会自立。在子主题里操作最安全，这样主题更新时你的修改不会消失。没有子主题？赶紧到functions.php里注册个新菜单区域：
```
function register_custom_header() {
register_nav_menus( array(
    'custom-header' => __( '自定义页眉导航' )
) );
}
add_action( 'init', 'register_custom_header' );
```

接着要去header.php里挖个坑。找到这类注释（没有就自己刻一个），在想要的位置插入：

<?php if ( has_nav_menu( 'custom-header' ) ) : ?>
<div class="9c1f-e0f8-9401-039e custom-header-area">
    <?php wp_nav_menu( array( 
        'theme_location' => 'custom-header',
        'container_class' => 'custom-header-container' 
    ) ); ?>
</div>
<?php endif; ?>

这时候后台突然长出新功能！到外观->菜单里，你会发现多了个"自定义页眉导航"选项。像搭乐高那样拖拽菜单项，保存时记得勾选新位置。

要是想玩更花的，比如在页眉塞个搜索框+LOGO旋转动画？可以用CSS选择器给.custom-header-container化妆：

.custom-header-area {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
padding: 1rem;
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

最后记得用响应式设计思维——在媒体查询里调整移动端页眉显示方式，毕竟手机屏幕只有巴掌大。用Chrome开发者工具反复调试，直到在各种设备上看起来都像米其林三星摆盘。
突然想到，其实还可以用Elementor Pro这类页面构建器直接拖拽生成页眉，但原生开发就像亲手炒菜，你知道每味调料什么时候下锅。试试看，你的WordPress网站马上就能拥有像杂志封面般的页眉了。