编程马·菜鸟教程

Appearance

4.4 编写 footer.php：网站底部 ​

footer.php是WordPress主题的核心文件之一，它包含网站的底部内容，如版权信息、备案信息、底部导航等。编写一个规范的footer.php文件对于主题的正常运行至关重要。本章节将详细介绍如何编写footer.php文件。

基本结构 ​

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

  1. 网站底部：包含版权信息、备案信息、底部导航等
  2. wp_footer()钩子：允许插件添加内容到页脚
  3. 关闭标签：关闭body和html标签

1. 基本HTML结构 ​

首先，我们需要编写基本的HTML结构，包括网站底部的容器和内容。

php
<footer>
    <div class="container">
        <!-- 网站底部内容 -->
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

2. 底部内容 ​

在底部区域，我们可以添加以下内容：

  • 网站信息：网站名称、描述等
  • 底部导航：辅助导航菜单
  • 社交媒体链接：Facebook、Twitter等社交媒体链接
  • 版权信息：版权声明、备案信息等
php
<footer>
    <div class="container">
        <div class="footer-content">
            <!-- 网站信息 -->
            <div class="footer-info">
                <h3><?php bloginfo('name'); ?></h3>
                <p><?php bloginfo('description'); ?></p>
                <div class="social-links">
                    <a href="#" class="social-link">Facebook</a>
                    <a href="#" class="social-link">Twitter</a>
                    <a href="#" class="social-link">Instagram</a>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="footer-links">
                <h3>Quick Links</h3>
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'footer',
                    'menu_class' => 'footer-nav',
                    'container' => false,
                    'depth' => 1,
                ));
                ?>
            </div>
            
            <!-- 联系信息 -->
            <div class="footer-contact">
                <h3>Contact Us</h3>
                <p>Email: info@example.com</p>
                <p>Phone: 123-456-7890</p>
                <p>Address: 123 Main Street, City, State 12345</p>
            </div>
        </div>
        
        <!-- 版权信息 -->
        <div class="footer-copyright">
            <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
            <?php if (get_option('zh_cn_l10n_icp_num')) : ?>
                <p><a href="https://beian.miit.gov.cn/" target="_blank"><?php echo get_option('zh_cn_l10n_icp_num'); ?></a></p>
            <?php endif; ?>
        </div>
    </div>
</footer>

3. 完整的 footer.php 文件 ​

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

php
<footer>
    <div class="container">
        <div class="footer-content">
            <!-- 网站信息 -->
            <div class="footer-info">
                <h3><?php bloginfo('name'); ?></h3>
                <p><?php bloginfo('description'); ?></p>
                <div class="social-links">
                    <a href="#" class="social-link">Facebook</a>
                    <a href="#" class="social-link">Twitter</a>
                    <a href="#" class="social-link">Instagram</a>
                </div>
            </div>
            
            <!-- 底部导航 -->
            <div class="footer-links">
                <h3>Quick Links</h3>
                <?php
                wp_nav_menu(array(
                    'theme_location' => 'footer',
                    'menu_class' => 'footer-nav',
                    'container' => false,
                    'depth' => 1,
                ));
                ?>
            </div>
            
            <!-- 联系信息 -->
            <div class="footer-contact">
                <h3>Contact Us</h3>
                <p>Email: info@example.com</p>
                <p>Phone: 123-456-7890</p>
                <p>Address: 123 Main Street, City, State 12345</p>
            </div>
        </div>
        
        <!-- 版权信息 -->
        <div class="footer-copyright">
            <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
            <?php if (get_option('zh_cn_l10n_icp_num')) : ?>
                <p><a href="https://beian.miit.gov.cn/" target="_blank"><?php echo get_option('zh_cn_l10n_icp_num'); ?></a></p>
            <?php endif; ?>
        </div>
    </div>
</footer>

<?php wp_footer(); ?>
</body>
</html>

功能说明 ​

1. 网站信息 ​

bloginfo('name')和bloginfo('description')函数用于显示网站的名称和描述。

2. 底部导航 ​

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

3. 版权信息 ​

date('Y')函数用于显示当前年份，bloginfo('name')函数用于显示网站名称。

4. 备案信息 ​

get_option('zh_cn_l10n_icp_num')函数用于显示网站的备案信息，这是中国网站必需的。

5. wp_footer() 钩子 ​

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

样式设计 ​

为了让底部看起来更加美观，我们需要在style.css文件中添加相应的样式。

css
/* 底部样式 */
footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: 2rem 0;
    margin-top: 2rem;
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.footer-info {
    flex: 1;
    min-width: 250px;
}

.footer-info h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.social-links {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}

.social-link {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.social-link:hover {
    color: var(--accent-color);
}

.footer-links {
    flex: 1;
    min-width: 250px;
}

.footer-links h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footer-nav {
    list-style: none;
}

.footer-nav li {
    margin-bottom: 0.5rem;
}

.footer-nav li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-nav li a:hover {
    color: #fff;
}

.footer-contact {
    flex: 1;
    min-width: 250px;
}

.footer-contact h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.footer-contact p {
    margin-bottom: 0.5rem;
}

.footer-copyright {
    text-align: center;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-size: 0.9rem;
}

.footer-copyright a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-copyright a:hover {
    color: #fff;
}

/* 响应式底部 */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
    }
    
    .footer-info,
    .footer-links,
    .footer-contact {
        min-width: 100%;
    }
}

最佳实践 ​

  1. 结构清晰：保持footer.php文件的结构清晰，使用适当的缩进和注释
  2. 响应式设计：确保底部在不同屏幕尺寸下都能正常显示
  3. 版权信息：确保版权信息完整，包括年份和网站名称
  4. 备案信息：对于中国网站，确保添加备案信息
  5. 性能优化：避免在底部添加过多的脚本和样式
  6. 可访问性：确保底部内容对屏幕阅读器友好
  7. 兼容性：确保代码在不同浏览器中都能正常工作

常见错误及解决方法 ​

1. 缺少wp_footer()钩子 ​

问题：缺少wp_footer()钩子，导致插件无法添加内容到页脚

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

2. 底部导航不显示 ​

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

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

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

3. 备案信息不显示 ​

问题：备案信息不显示，可能是因为没有在WordPress后台设置备案信息

解决方法：在WordPress后台，进入"设置" > "常规"，在"站点备案号"字段中输入备案信息

4. 样式问题 ​

问题：底部样式显示异常

解决方法：

  • 检查CSS样式是否正确
  • 确保CSS选择器与HTML结构匹配
  • 测试在不同浏览器中的显示效果

小结 ​

footer.php文件是WordPress主题的重要组成部分，它包含网站的底部内容和版权信息。通过本章节的学习，你应该：

  1. 了解footer.php文件的基本结构
  2. 掌握如何添加网站信息和底部导航
  3. 掌握如何添加版权信息和备案信息
  4. 了解如何设计底部样式
  5. 掌握footer.php文件的最佳实践
  6. 了解常见错误及解决方法

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

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

基于 VitePress 构建