如何在WordPress中用函数/过滤器在站点logo下方显示自定义文字

以下两种方案均可直接添加到主题functions.php文件，或通过代码片段插件导入，主题更新后不会丢失修改。

方案1：主题原生钩子实现（性能最优） #

首先打开主题header.php文件，找到logo输出代码附近的do_action('钩子名称')字段，多数主流主题（如GeneratePress、Astra等）的logo后置钩子命名多为[主题前缀]_after_logo格式，替换下方代码中的占位符即可使用：

// 在logo下方插入自定义标语
add_action( '替换为你找到的实际钩子名', 'add_custom_site_tagline_after_logo' );
function add_custom_site_tagline_after_logo() {
    // 引号内内容替换为你的四字标语
    echo '<div class="custom-site-tagline">你的标语</div>';
}

// 注入标语样式，可自行调整参数
add_action( 'wp_head', 'add_custom_tagline_style' );
function add_custom_tagline_style() {
    echo '<style>
    .custom-site-tagline {
        font-size: 14px;
        color: #666;
        margin-top: 4px;
        /* 不需要居中可删除下一行 */
        text-align: center;
    }
    </style>';
}

方案2：通用兼容实现（找不到对应钩子时使用） #

如果找不到主题对应的钩子，可使用JS注入的方式适配所有主题，只需替换代码中logo元素的CSS选择器即可，选择器可通过浏览器F12审查元素获取：

add_action( 'wp_footer', 'inject_tagline_after_logo' );
function inject_tagline_after_logo() {
    ?>
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 引号内替换为你站点logo的实际CSS选择器，例如.site-logo、.custom-logo-link
        const logo = document.querySelector('.logo');
        if (logo) {
            const tagline = document.createElement('div');
            tagline.className = 'custom-site-tagline';
            tagline.innerText = '你的标语';
            logo.parentNode.insertBefore(tagline, logo.nextSibling);
        }
    });
    </script>
    <style>
    .custom-site-tagline {
        font-size: 14px;
        color: #666;
        margin-top: 4px;
    }
    </style>
    <?php
}

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