1. 主页
  2. 文档
  3. 基于BootStap制作WordPress主题
  4. header-brand处理
  5. 定制logo处理

定制logo处理

范例1:

<?php the_custom_logo(); ?>

<div class="site-branding-text">
<?php if ( is_front_page() && is_home() ) : ?>
<h1 class="site-title h3 mb-0"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand mb-0"><?php bloginfo( 'name' ); ?></a></h1>
<?php else : ?>
<h2 class="site-title h3 mb-0"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home" class="navbar-brand mb-0"><?php bloginfo( 'name' ); ?></a></h2>
<?php endif;

if ( get_theme_mod( 'show_site_description', 1 ) ) 
{
$description = get_bloginfo( 'description', 'display' );
		                    if ( $description || is_customize_preview() ) : ?>
		                        <p class="site-description"><?php echo esc_html( $description ); ?></p>
		                    <?php
		                    endif;
		                }
?>
</div>

对应的HTML

<a href="http://127.0.0.1/wpstrap/" class="custom-logo-link" rel="home"><img width="150" height="50" src="http://127.0.0.1/wpstrap/wp-content/uploads/2020/07/cropped-驱动力150X50-3.png" class="custom-logo" alt="WPSTRAP" /></a>		
		

一般情况下,bootstrap4要求class为“navbar-brand”,该如何修改?

(如何修改a标签的class值:)

以下来自官方:

如果要获取当前的徽标网址(或使用自己的标记)而不是默认标记,则可以使用以下代码:

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
if ( has_custom_logo() ) {
        echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
        echo '<h1>'. get_bloginfo( 'name' ) .'</h1>';
}

对应:

http://127.0.0.1/wpstrap/wp-content/uploads/2020/07/cropped-驱动力150X50-3.png

其他

<?php echo get_custom_logo(); ?>

对应

<a href="http://127.0.0.1/wpstrap/" class="custom-logo-link" rel="home"><img width="150" height="50" src="http://127.0.0.1/wpstrap/wp-content/uploads/2020/07/cropped-驱动力150X50-3.png" class="custom-logo" alt="WPSTRAP" /></a>
这篇文章对您有用吗?

我们要如何帮助您?