编程马·菜鸟教程

Appearance

4.3 编写 header.php：网站头部 ​

header.php是WordPress主题的核心文件之一，它包含网站的头部内容，如DOCTYPE声明、HTML头部、网站标题、导航菜单等。编写一个规范的header.php文件对于主题的正常运行至关重要。本章节将详细介绍如何编写header.php文件。

基本结构 ​

header.php文件的基本结构应该包括以下部分：

  1. DOCTYPE声明：定义HTML文档类型
  2. HTML标签：包含language_attributes()函数，用于设置语言属性
  3. 头部区域：包含元数据、标题、CSS和JavaScript文件的引用
  4. 网站头部：包含网站标题、导航菜单等
  5. wp_head()钩子：允许插件添加内容到头部

编写 header.php ​

1. 基本HTML结构 ​

首先，我们需要编写基本的HTML结构，包括DOCTYPE声明、HTML标签和头部区域。

php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <div class="container">
            <!-- 网站头部内容 -->
        </div>
    </header>

在头部区域，我们需要添加网站标题和Logo。

php
<header>
    <div class="container">
        <div class="header-content">
            <!-- 网站Logo -->
            <div class="logo">
                <a href="<?php echo home_url(); ?>">
                    <?php if (has_custom_logo()) : ?>
                        <?php the_custom_logo(); ?>
                    <?php else : ?>
                        <span><?php bloginfo('name'); ?></span>
                    <?php endif; ?>
                </a>
            </div>
            
            <!-- 网站描述 -->
            <?php if (get_bloginfo('description')) : ?>
                <p class="site-description"><?php bloginfo('description'); ?></p>
            <?php endif; ?>
        </div>
    </div>
</header>

3. 导航菜单 ​

在头部区域，我们需要添加导航菜单。

php
<header>
    <div class="container">
        <div class="header-content">
            <!-- 网站Logo -->
            <div class="logo">
                <a href="<?php echo home_url(); ?>">
                    <?php if (has_custom_logo()) : ?>
                        <?php the_custom_logo(); ?>
                    <?php else : ?>
                        <span><?php bloginfo('name'); ?></span>
                    <?php endif; ?>
                </a>
            </div>
            
            <!-- 导航菜单 -->
            <nav class="main-navigation">
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'menu_class' => 'nav-menu',
                    'container' => false,
                    'depth' => 2,
                ));
                ?>
                
                <!-- 移动菜单按钮 -->
                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                    <span class="menu-toggle-icon">☰</span>
                </button>
            </nav>
        </div>
    </div>
</header>

4. 完整的 header.php 文件 ​

将以上部分组合起来，我们得到完整的header.php文件。

php
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <header>
        <div class="container">
            <div class="header-content">
                <!-- 网站Logo -->
                <div class="logo">
                    <a href="<?php echo home_url(); ?>">
                        <?php if (has_custom_logo()) : ?>
                            <?php the_custom_logo(); ?>
                        <?php else : ?>
                            <span><?php bloginfo('name'); ?></span>
                        <?php endif; ?>
                    </a>
                </div>
                
                <!-- 导航菜单 -->
                <nav class="main-navigation">
                    <?php
                    wp_nav_menu(array(
                        'theme_location' => 'primary',
                        'menu_class' => 'nav-menu',
                        'container' => false,
                        'depth' => 2,
                    ));
                    ?>
                    
                    <!-- 移动菜单按钮 -->
                    <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">
                        <span class="menu-toggle-icon">☰</span>
                    </button>
                </nav>
            </div>
        </div>
    </header>

功能说明 ​

1. 语言属性 ​

language_attributes()函数用于输出HTML标签的语言属性，确保网站的语言设置正确。

2. 字符集 ​

bloginfo('charset')函数用于输出网站的字符集设置，通常是UTF-8。

3. 视口设置 ​

<meta name="viewport" content="width=device-width, initial-scale=1">用于设置响应式设计的视口。

4. 页面标题 ​

wp_title()函数用于输出页面标题，它会根据当前页面的类型自动生成合适的标题。

5. wp_head() 钩子 ​

wp_head()函数是一个重要的钩子，允许插件和主题在头部添加内容，如CSS和JavaScript文件。

6. body_class() 函数 ​

body_class()函数用于输出body标签的类，这些类可以用于CSS样式和JavaScript脚本。

has_custom_logo()和the_custom_logo()函数用于显示用户在WordPress后台设置的自定义Logo。

8. 导航菜单 ​

wp_nav_menu()函数用于显示导航菜单，它会根据theme_location参数找到相应的菜单。

响应式导航菜单 ​

为了实现响应式导航菜单，我们需要添加一些JavaScript代码来处理移动设备上的菜单显示和隐藏。

添加JavaScript代码 ​

在functions.php文件中，我们可以添加以下代码来引入处理导航菜单的JavaScript文件：

php
function my_custom_theme_enqueue_scripts() {
    // 引入主题主样式
    wp_enqueue_style('my-custom-theme-style', get_stylesheet_uri());
    
    // 引入导航菜单脚本
    wp_enqueue_script('my-custom-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_custom_theme_enqueue_scripts');

创建navigation.js文件 ​

在assets/js目录中创建navigation.js文件，添加以下代码：

javascript
// 导航菜单交互
document.addEventListener('DOMContentLoaded', function() {
    const menuToggle = document.querySelector('.menu-toggle');
    const navMenu = document.querySelector('.nav-menu');
    
    if (menuToggle && navMenu) {
        menuToggle.addEventListener('click', function() {
            navMenu.classList.toggle('active');
            const expanded = menuToggle.getAttribute('aria-expanded') === 'true';
            menuToggle.setAttribute('aria-expanded', !expanded);
        });
    }
});

添加CSS样式 ​

在style.css文件中，我们需要添加以下CSS样式来处理响应式导航菜单：

css
/* 导航菜单样式 */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 1rem;
}

.nav-menu li a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-menu li a:hover {
    color: var(--accent-color);
}

/* 移动菜单按钮 */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* 响应式导航菜单 */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .nav-menu {
        display: none;
        flex-direction: column;
        gap: 0.5rem;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        padding: 1rem;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .nav-menu.active {
        display: flex;
    }
}

最佳实践 ​

  1. 结构清晰：保持header.php文件的结构清晰，使用适当的缩进和注释
  2. 响应式设计：确保头部在不同屏幕尺寸下都能正常显示
  3. SEO优化：正确设置页面标题和元数据
  4. 性能优化：避免在头部添加过多的脚本和样式
  5. 可访问性：确保导航菜单对屏幕阅读器友好
  6. 兼容性：确保代码在不同浏览器中都能正常工作

常见错误及解决方法 ​

1. 缺少wp_head()钩子 ​

问题：缺少wp_head()钩子，导致插件无法添加内容到头部

解决方法：确保在</head>标签之前添加<?php wp_head(); ?>

2. 导航菜单不显示 ​

问题：导航菜单不显示，可能是因为没有在functions.php中注册导航菜单

解决方法：在functions.php中添加以下代码注册导航菜单：

php
function my_custom_theme_register_menus() {
    register_nav_menus(array(
        'primary' => esc_html__('Primary Menu', 'my-custom-theme'),
    ));
}
add_action('after_setup_theme', 'my_custom_theme_register_menus');

3. 响应式导航菜单不工作 ​

问题：响应式导航菜单在移动设备上不工作

解决方法：

  • 确保添加了正确的JavaScript代码
  • 确保添加了正确的CSS样式
  • 检查是否有JavaScript错误

4. 自定义Logo不显示 ​

问题：自定义Logo不显示，可能是因为没有在functions.php中添加自定义Logo支持

解决方法：在functions.php中添加以下代码：

php
function my_custom_theme_setup() {
    add_theme_support('custom-logo');
}
add_action('after_setup_theme', 'my_custom_theme_setup');

小结 ​

header.php文件是WordPress主题的重要组成部分，它包含网站的头部内容和导航菜单。通过本章节的学习，你应该：

  1. 了解header.php文件的基本结构
  2. 掌握如何添加网站标题和Logo
  3. 掌握如何添加导航菜单
  4. 了解如何实现响应式导航菜单
  5. 掌握header.php文件的最佳实践
  6. 了解常见错误及解决方法

在后续的章节中，我们将详细介绍如何编写footer.php文件，以及如何构建完整的WordPress主题。

© 2026 编程马·菜鸟教程 版权所有

基于 VitePress 构建