编程马·菜鸟教程

Appearance

10.3 步骤2：编写头部与底部 ​

在搭建好主题基础结构后，我们需要完善头部和底部的代码，确保它们能够正确显示网站的标题、导航菜单、版权信息等内容。本章节将详细介绍如何编写和优化主题的头部与底部。

完善 header.php 文件 ​

header.php 文件包含网站的头部内容，如网站标题、导航菜单、元数据等。我们需要确保它能够正确显示这些内容，并具有良好的响应式设计。

1. 修复语法错误 ​

首先，我们需要修复 header.php 文件中的语法错误。在之前的代码中，有一个语法错误：

php
<meta charset="<?php bloginfo('charset'); ?>>

应该修改为：

php
<meta charset="<?php bloginfo('charset'); ?>">

2. 完善网站标题 ​

我们需要确保网站标题能够正确显示，包括首页和其他页面的标题。修改 header.php 文件中的标题部分：

php
<title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>

3. 优化导航菜单样式 ​

我们需要为导航菜单添加样式，确保它在不同屏幕尺寸下都能正常显示。在 style.css 文件中添加导航菜单的样式：

css
/* Navigation Menu Styles */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo h1 {
    font-size: 1.8rem;
    margin: 0;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-menu li {
    margin-left: var(--spacing-lg);
}

.nav-menu a {
    display: block;
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s ease;
}

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

/* Mobile Menu Button */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
    .menu-toggle {
        display: block;
    }
    
    .nav-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--white);
        box-shadow: var(--shadow-sm);
        flex-direction: column;
        padding: var(--spacing-md);
        display: none;
    }
    
    .nav-menu.active {
        display: flex;
    }
    
    .nav-menu li {
        margin: 0;
        margin-bottom: var(--spacing-sm);
    }
    
    .nav-menu a {
        padding: var(--spacing-sm) 0;
    }
}

4. 添加网站描述 ​

我们可以在网站标题下方添加网站描述，使网站更加完整。修改 header.php 文件，在 logo 部分添加网站描述：

php
<div class="logo">
    <a href="<?php echo home_url(); ?>">
        <?php if (has_custom_logo()) : ?>
            <?php the_custom_logo(); ?>
        <?php else : ?>
            <h1><?php bloginfo('name'); ?></h1>
            <p class="site-description"><?php bloginfo('description'); ?></p>
        <?php endif; ?>
    </a>
</div>

然后在 style.css 文件中添加网站描述的样式：

css
/* Site Description Styles */
.site-description {
    font-size: 0.9rem;
    color: var(--light-text-color);
    margin: var(--spacing-xs) 0 0 0;
}

footer.php 文件包含网站的底部内容，如版权信息、页脚菜单、联系信息等。我们需要确保它能够正确显示这些内容，并具有良好的响应式设计。

1. 优化页脚布局 ​

我们需要优化页脚的布局，确保它在不同屏幕尺寸下都能正常显示。在 style.css 文件中添加页脚的样式：

css
/* Footer Styles */
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-xl);
}

.footer-info h3,
.footer-links h3,
.footer-contact h3 {
    font-size: 1.2rem;
    margin-bottom: var(--spacing-md);
    color: var(--white);
}

.footer-info p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-sm);
}

.footer-nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-nav li {
    margin-bottom: var(--spacing-sm);
}

.footer-nav a {
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.footer-nav a:hover {
    color: var(--white);
}

.footer-contact p {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: var(--spacing-sm);
}

.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: var(--spacing-md);
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

.footer-copyright a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
}

.footer-copyright a:hover {
    color: var(--white);
}

/* Responsive Footer Styles */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
    }
}

2. 添加社交图标 ​

我们可以在页脚添加社交图标，使网站更加完整。首先，在 footer.php 文件中添加社交图标部分：

php
<div class="footer-social">
    <h3>Follow Us</h3>
    <div class="social-icons">
        <a href="#" class="social-icon" aria-label="Facebook">
            <i class="fab fa-facebook-f"></i>
        </a>
        <a href="#" class="social-icon" aria-label="Twitter">
            <i class="fab fa-twitter"></i>
        </a>
        <a href="#" class="social-icon" aria-label="Instagram">
            <i class="fab fa-instagram"></i>
        </a>
        <a href="#" class="social-icon" aria-label="LinkedIn">
            <i class="fab fa-linkedin-in"></i>
        </a>
    </div>
</div>

然后在 style.css 文件中添加社交图标的样式：

css
/* Social Icons Styles */
.social-icons {
    display: flex;
    gap: var(--spacing-md);
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    color: var(--white);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-icon:hover {
    background-color: var(--white);
    color: var(--primary-color);
    transform: translateY(-3px);
}

3. 添加 Font Awesome 图标库 ​

为了使用社交图标，我们需要添加 Font Awesome 图标库。在 header.php 文件中添加 Font Awesome 的 CDN 链接：

php
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

测试头部与底部 ​

现在，我们已经完善了头部和底部的代码，接下来我们需要测试它们是否能正常工作。

步骤1：更新主题文件 ​

将修改后的 header.php、footer.php 和 style.css 文件上传到主题目录中。

步骤2：测试网站标题和描述 ​

在浏览器中访问网站，检查网站标题和描述是否正确显示。

步骤3：测试导航菜单 ​

在浏览器中访问网站，检查导航菜单是否正确显示，并且在移动设备上能够正常折叠和展开。

步骤4：测试页脚 ​

在浏览器中访问网站，检查页脚是否正确显示，包括版权信息、页脚菜单、联系信息和社交图标。

步骤5：测试响应式设计 ​

在不同屏幕尺寸下测试网站，确保头部和底部在不同设备上都能正常显示。

小结 ​

编写头部与底部是主题开发的重要步骤，它们是网站的重要组成部分。通过本章节的学习，你应该：

  1. 了解如何修复 header.php 文件中的语法错误
  2. 掌握如何完善网站标题和描述
  3. 了解如何优化导航菜单样式，确保它在不同屏幕尺寸下都能正常显示
  4. 掌握如何优化页脚布局，确保它在不同屏幕尺寸下都能正常显示
  5. 了解如何添加社交图标，使网站更加完整

在后续的章节中，我们将继续完善主题的功能，包括编写首页、编写文章页与页面等。

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

基于 VitePress 构建