如何通过WordPress自定义功能实现站点Logo的修改控制？

要实现通过Customize >> Site Identity面板控制站点Logo，分两步操作即可：

1. 在主题的functions.php中启用自定义Logo支持 #

先让主题开启自定义Logo功能，这样后台自定义面板才会出现Logo上传选项。将以下代码添加到主题的functions.php文件里：

function custom_theme_setup() {
    add_theme_support( 'custom-logo', array(
        'height'      => 100,    // Logo的建议高度
        'width'       => 400,    // Logo的建议宽度
        'flex-height' => true,   // 允许Logo高度自适应
        'flex-width'  => true,   // 允许Logo宽度自适应
        'header-text' => array( 'site-title', 'site-description' ), // 可选：设置Logo存在时可隐藏的标题/描述类
    ) );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

2. 在模板文件中替换静态Logo为动态输出代码 #

找到主题里显示Logo的模板文件（一般是header.php），把原来的静态图片代码替换成以下动态输出代码：

最简输出方式（调用官方标准函数） #

<?php the_custom_logo(); ?>

这个函数会自动输出带首页链接的Logo图片，HTML结构符合WordPress规范。

自定义结构输出方式（适合需要调整HTML的场景） #

如果需要自定义Logo的HTML结构，用下面的代码：

<?php
if ( has_custom_logo() ) {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $logo_data = wp_get_attachment_image_src( $custom_logo_id, 'full' );
    if ( $logo_data ) :
?>
    <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
        <img 
            src="<?php echo esc_url( $logo_data[0] ); ?>" 
            alt="<?php bloginfo( 'name' ); ?>" 
            width="<?php echo esc_attr( $logo_data[1] ); ?>" 
            height="<?php echo esc_attr( $logo_data[2] ); ?>"
        >
    </a>
<?php
    endif;
} else {
    // 未设置Logo时的备用内容，比如显示站点标题
?>
    <h1 class="site-title">
        <a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
    </h1>
<?php } ?>

完成以上操作后，你就能在Customize >> Site Identity面板里直接上传、修改站点Logo，不用再手动修改模板文件里的图片路径。

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