如何将WordPress管理栏移至页脚：详细教程-光子波动网 | 专业WordPress修复服务，全球范围，快速响应

WordPress默认情况下在屏幕顶部显示管理栏，这个栏帮助你快速访问WordPress后台功能。然而，有些用户可能会觉得管理栏的位置有些碍眼，想要移动它，尤其更改其外观和位置。

在本教程中，通过WP自学建站，我们将介绍如何通过添加自定义CSS将WordPress管理栏移至页脚，或者通过functions.php文件的代码来实现相同效果，同时保证未登录用户的页面显示不受影响。

为什么要移动WordPress管理栏？

WordPress管理栏提供了一系列导航功能，比如快速访问仪表盘、编辑页面、查看评论、更新插件等。虽然它功能强大，但默认放置在页面顶部，可能会遮挡内容或与自定义设计冲突。

将管理栏移至页面底部可以改善视觉体验，尤其是对需要更大屏幕空间展示前端设计的用户来说，这种方法非常实用。此外，这种操作可以增强页面的整体美观，尤其在页面顶部设计较复杂时，管理栏移至底部可以避免干扰。

准备工作

在我们深入教程之前，以下是需要准备的内容：

一个支持自定义CSS的主题，推荐使用块编辑器（如Twenty Twenty-Three主题）。
子主题（建议先创建子主题，这样更新主题时你的更改不会丢失）。
你的WordPress版本应已更新为最新版本，以确保兼容性。

步骤1：进入主题定制

首先，需要确保所使用的主题支持自定义。在WordPress中，有多种自定义方式，最简单的方法是通过“外观 > 自定义”页面进行设置。

登录WordPress网站，进入仪表盘。
导航至外观 > 自定义，或者直接在主页面上点击“自定义”按钮。

进入主题自定义页面后，寻找“附加CSS”选项。

为什么要创建子主题？

为了确保未来更新主题时不会覆盖你所做的自定义设置，建议你创建并使用子主题。子主题可以对主题进行修改，而不影响原始主题的核心文件。

步骤2：添加自定义CSS

接下来，我们将通过“附加CSS”选项为WordPress管理栏添加自定义样式，使其移动至页面底部。

自定义CSS代码

进入附加CSS页面后，复制并粘贴以下代码：

body {
    margin-top: -28px;
    padding-bottom: 28px;
}
body.admin-bar #wphead {
    padding-top: 0;
}
body.admin-bar #footer {
    padding-bottom: 28px;
}
#wpadminbar {
    top: auto !important;
    bottom: 0;
}
#wpadminbar .menupop .ab-sub-wrapper {
    bottom: 32px;
}

这个CSS代码段将管理栏从顶部移动到页面底部，并调整页面顶部和底部的间距以适应管理栏的新位置。

解释代码功能

margin-top: -28px; padding-bottom: 28px;：将页面顶部的间距减少，同时为底部留出空间，使管理栏不会与页面内容重叠。
#wpadminbar { top: auto !important; bottom: 0; }：强制将管理栏固定在页面底部，而不是默认的顶部位置。
.ab-sub-wrapper { bottom: 32px; }：确保管理栏下拉菜单在底部正确显示。

步骤3：预览和保存更改

完成CSS添加后，点击“保存更改”按钮，并返回网站前端页面以查看效果。

如果一切正常，保存设置并发布更改。你的WordPress管理栏应该已经从顶部移动到页面底部。

其他问题和注意事项

1. 未登录用户显示问题

按照上述步骤更改后，可能会出现未登录用户访问网站时，页面显示被抬高28px的问题。为了解决这个问题，可以选择在functions.php文件中添加额外的条件代码，使得只有登录用户看到管理栏的调整，未登录用户不受影响。

步骤4：通过functions.php添加代码

如果希望管理栏调整仅对登录用户生效，那么可以通过在主题的functions.php文件中添加自定义代码来实现这一点。以下是添加的代码：

function wpg_ubah_posisi_admin_bar() {
    if (is_user_logged_in()) {
        ?>
        <style>
            body {margin-top: -28px; padding-bottom: 28px;}
            body.admin-bar #wphead {padding-top: 0;}
            body.admin-bar #footer {padding-bottom: 28px;}
            #wpadminbar { top: auto !important; bottom: 0;}
            #wpadminbar .menupop .ab-sub-wrapper { bottom: 32px; }
        </style>
        <?php
    }
}

add_action('wp_head', 'wpg_ubah_posisi_admin_bar');