Thông thường thì các theme sẽ lựa chọn tên website trong phần cài đặt để làm thẻ H1 cho trang chủ. Tuy nhiên, thẻ H1 trên header của theme Flatsome có một vấn đề là nó không hiển thị ngoài trang chủ mặc dù các trang con vẫn hiển thị tốt. Vậy làm cách nào để giải quyết vấn đề này? Rất đơn giản, bạn chỉ cần làm theo các bước sau.

Trước tiên, bạn truy cập vào phần quản trị hosting/vps, phần lưu trữ mã nguồn website của bạn.

Bước 1: Mở file public_html/wp-content/themes/flatsome/template-parts/header/partials/element-logo.php

Bước 2: Xóa nội dung bên trong file element-logo.php và copy – paste nội dung bên dưới vào.

<!-- Header logo -->
<?php if (is_front_page()) : ?>
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?><?php echo get_bloginfo( 'name' ) && get_bloginfo( 'description' ) ? ' - ' : ''; ?><?php bloginfo( 'description' ); ?>" rel="home">
<?php if(flatsome_option('site_logo')){
$logo_height = get_theme_mod('header_height',90);
$logo_width = get_theme_mod('logo_width', 200);
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
if(get_theme_mod('site_logo_sticky')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_sticky').'" class="header-logo-sticky" alt="'.$site_title.'"/>';
echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header_logo header-logo" alt="'.$site_title.'"/>';
if(!get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header-logo-dark" alt="'.$site_title.'"/>';
if(get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_dark').'" class="header-logo-dark" alt="'.$site_title.'"/>';
} else {
bloginfo( 'name' );
}
?>
</a></h1>
<?php endif; ?>
<?php if (!is_front_page()) : ?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?><?php echo get_bloginfo( 'name' ) && get_bloginfo( 'description' ) ? ' - ' : ''; ?><?php bloginfo( 'description' ); ?>" rel="home">
<?php if(flatsome_option('site_logo')){
$logo_height = get_theme_mod('header_height',90);
$logo_width = get_theme_mod('logo_width', 200);
$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );
if(get_theme_mod('site_logo_sticky')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_sticky').'" class="header-logo-sticky" alt="'.$site_title.'"/>';
echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header_logo header-logo" alt="'.$site_title.'"/>';
if(!get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header-logo-dark" alt="'.$site_title.'"/>';
if(get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_dark').'" class="header-logo-dark" alt="'.$site_title.'"/>';
} else {
bloginfo( 'name' );
}
?>
</a>
<?php endif; ?>
<?php
if(get_theme_mod('site_logo_slogan')){
echo '<p class="logo-tagline">'.get_bloginfo('description').'</p>';
}
?>

<?php if (is_front_page()) : ?>

<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?><?php echo get_bloginfo( 'name' ) && get_bloginfo( 'description' ) ? ' - ' : ''; ?><?php bloginfo( 'description' ); ?>" rel="home">

<?php if(flatsome_option('site_logo')){

$logo_height = get_theme_mod('header_height',90);

$logo_width = get_theme_mod('logo_width', 200);

$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );

if(get_theme_mod('site_logo_sticky')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_sticky').'" class="header-logo-sticky" alt="'.$site_title.'"/>';

echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header_logo header-logo" alt="'.$site_title.'"/>';

if(!get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header-logo-dark" alt="'.$site_title.'"/>';

if(get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_dark').'" class="header-logo-dark" alt="'.$site_title.'"/>';

} else {

bloginfo( 'name' );

}

</a></h1>

<?php endif; ?>

<?php if (!is_front_page()) : ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?><?php echo get_bloginfo( 'name' ) && get_bloginfo( 'description' ) ? ' - ' : ''; ?><?php bloginfo( 'description' ); ?>" rel="home">

<?php if(flatsome_option('site_logo')){

$logo_height = get_theme_mod('header_height',90);

$logo_width = get_theme_mod('logo_width', 200);

$site_title = esc_attr( get_bloginfo( 'name', 'display' ) );

if(get_theme_mod('site_logo_sticky')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_sticky').'" class="header-logo-sticky" alt="'.$site_title.'"/>';

echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header_logo header-logo" alt="'.$site_title.'"/>';

if(!get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.flatsome_option('site_logo').'" class="header-logo-dark" alt="'.$site_title.'"/>';

if(get_theme_mod('site_logo_dark')) echo '<img width="'.$logo_width.'" height="'.$logo_height.'" src="'.get_theme_mod('site_logo_dark').'" class="header-logo-dark" alt="'.$site_title.'"/>';

} else {

bloginfo( 'name' );

}

</a>

<?php endif; ?>

<?php

if(get_theme_mod('site_logo_slogan')){

echo '<p class="logo-tagline">'.get_bloginfo('description').'</p>';

}

Bước 3: Lưu lại.

Như vậy là đã hoàn tất, bạn clear cache và refesh lại để xem kết quả nhé.