如何使用jQuery在WordPress的wp-login.php页面添加自定义段落？

代码无效果的核心原因 #

• 资源加载范围问题：主题选项内添加的自定义JS代码默认仅会加载到站点前台页面，wp-login.php是WordPress核心提供的独立登录入口，默认不会加载主题侧的自定义代码、样式等资源，你写的jQuery代码根本没有在登录页运行，自然没有效果。
• 额外兼容问题：部分WordPress安全插件会修改默认登录页的DOM结构，调整/移除#nav元素的ID属性，或是拦截未注册的JS脚本运行，就算代码加载成功也可能失效。

正确实现登录页自定义的方法 #

推荐优先使用PHP钩子实现，不需要依赖客户端JS加载，兼容性和稳定性更强，直接将以下代码添加到主题functions.php文件，或是通过自定义代码片段插件加载即可：

add_filter( 'login_message', 'add_custom_text_to_login_page' );
function add_custom_text_to_login_page( $output ) {
    // 可自行修改下方的HTML内容为你需要展示的自定义文本
    $custom_content = '<p style="margin: 16px 0;text-align: center;">这里是你要添加的自定义文本</p>';
    return $output . $custom_content;
}

如果你坚持要通过jQuery实现，需要使用login_enqueue_scripts钩子将脚本正确挂载到登录页资源队列中，代码示例如下：

add_action( 'login_enqueue_scripts', 'inject_custom_login_jquery' );
function inject_custom_login_jquery() {
    ?>
    <script>
    (function($) {
        $(document).ready(function() {
            // 先校验目标元素存在再插入内容，避免JS报错
            if ($('#nav').length > 0) {
                $('#nav').after('<p>some text</p>');
            }
        });
    })(jQuery);
    </script>
    <?php
}

内容的提问来源于stack exchange，提问作者TonyDiMasi