Trong nhóm Genesis Facebook, một người dùng đã hỏi,
Có thể hiển thị Tiêu đề Trang trên trang chủ và Biểu trưng Trang trên tất cả các trang khác không? Tôi đang sử dụng Altitude Pro. Cảm ơn vì bất kì sự giúp đỡ.
Trong hướng dẫn này, tôi chia sẻ mã để hiển thị hình ảnh tiêu đề (logo) được tải lên trong tùy biến dưới dạng hình ảnh nội tuyến thay vì làm nền cho các trang bên trong của Altitude Pro. Trang đầu sẽ có tiêu đề trang trong tiêu đề thay vì biểu trưng.
Bước 1
Trong functions.php thay thế
//* Add support for custom header
add_theme_support( 'custom-header', array(
'flex-height' => true,
'width' => 360,
'height' => 76,
'header-selector' => '.site-title a',
'header-text' => false,
) );
với
// Add support for custom header
// https://codex.wordpress.org/Custom_Headers
add_theme_support( 'custom-header', array(
'width' => 360,
'height' => 76,
'flex-height' => true,
'flex-width' => true,
'header-text' => false,
) );
// Remove custom Genesis custom header style
remove_action( 'wp_head', 'genesis_custom_header_style' );
/**********************************
*
* Replace Header Site Title with Inline Logo on inner pages
*
* @author AlphaBlossom / Tony Eppright, Neil Gee
* @link http://www.alphablossom.com/a-better-wordpress-genesis-responsive-logo-header/
* @link https://wpbeaches.com/adding-in-a-responsive-html-logoimage-header-via-the-customizer-for-genesis/
*
* @edited by Sridhar Katakam
* @link https://sridharkatakam.com/
*
************************************/
add_filter( 'genesis_seo_title', 'custom_header_inline_logo', 10, 3 );
function custom_header_inline_logo( $title, $inside, $wrap ) {
if ( get_header_image() && !is_front_page() ) {
$logo = '<img src="' . get_header_image() . '" width="' . esc_attr( get_custom_header()->width ) . '" height="' . esc_attr( get_custom_header()->height ) . '" alt="' . esc_attr( get_bloginfo( 'name' ) ) . ' Homepage">';
} else {
$logo = get_bloginfo( 'name' );
}
$inside = sprintf( '<a href="%s">%s<span class="screen-reader-text">%s</span></a>', trailingslashit( home_url() ), $logo, get_bloginfo( 'name' ) );
// Determine which wrapping tags to use
$wrap = genesis_is_root_page() && 'title' === genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : 'p';
// A little fallback, in case an SEO plugin is active
$wrap = genesis_is_root_page() && ! genesis_get_seo_option( 'home_h1_on' ) ? 'h1' : $wrap;
// And finally, $wrap in h1 if HTML5 & semantic headings enabled
$wrap = genesis_html5() && genesis_get_seo_option( 'semantic_headings' ) ? 'h1' : $wrap;
return sprintf( '<%1$s %2$s>%3$s</%1$s>', $wrap, genesis_attr( 'site-title' ), $inside );
}
add_filter( 'genesis_attr_site-description', 'abte_add_site_description_class' );
/**
* Add class for screen readers to site description.
*
* Unhook this if you'd like to show the site description.
*
* @since 1.0.0
*
* @param array $attributes Existing HTML attributes for site description element.
* @return string Amended HTML attributes for site description element.
*/
function abte_add_site_description_class( $attributes ) {
$attributes['class'] .= ' screen-reader-text';
return $attributes;
}
add_filter( 'body_class', 'sk_body_class' );
/**
* Add "inner" class to 'body' element for inner pages
* i.e., for all pages other than site's homepage/front page.
*
* @author Sridhar Katakam
* @link http://sridharkatakam.com/add-inner-body-class-inner-pages-wordpress/
*/
function sk_body_class( $classes ) {
if ( ! is_front_page() ) {
$classes[] = 'inner';
}
return $classes;
}
Bước 2
Trong style.css thay thế
.title-area {
float: left;
padding: 25px 0;
width: 360px;
}
.site-header.dark .title-area {
padding: 15px 0;
}
.site-title {
font-size: 24px;
font-weight: 800;
letter-spacing: 2px;
line-height: 1;
margin-bottom: 0;
text-transform: uppercase;
}
.site-title a,
.site-title a:hover {
color: #fff !important;
}
.header-image .title-area,
.header-image .site-header.dark .title-area {
padding: 0;
}
.header-image .site-title > a {
background-size: contain !important;
display: block;
height: 76px;
text-indent: -9999px;
}
.header-image .dark .site-title > a {
height: 56px;
}
với
.title-area {
float: left;
padding: 25px 0;
/*width: 360px;*/
}
.site-header.dark .title-area {
padding: 15px 0;
}
.site-title {
font-size: 24px;
font-weight: 800;
letter-spacing: 2px;
line-height: 1;
margin-bottom: 0;
text-transform: uppercase;
}
.site-title a,
.site-title a:hover {
color: #fff !important;
}
/*.header-image .title-area,
.header-image .site-header.dark .title-area {
padding: 0;
}*/
.inner.header-image .title-area {
padding: 0;
}
.header-image .site-title > a {
/*background-size: contain !important;*/
/*display: block;*/
/*height: 76px;*/
/*text-indent: -9999px;*/
}
.site-title a img {
vertical-align: top;
width: 360px;
height: 76px;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
/*.header-image .dark .site-title > a {
height: 56px;
}*/
.header-image .dark .site-title > a img {
width: 265px;
height: 56px;
}
.screen-reader-text,
.screen-reader-text span {
position: absolute !important;
clip: rect(0, 0, 0, 0);
height: 1px;
width: 1px;
border: 0;
overflow: hidden;
}
.screen-reader-text:focus {
clip: auto !important;
height: auto;
width: auto;
display: block;
font-size: 1em;
font-weight: bold;
padding: 15px 23px 14px;
color: #333;
background: #fff;
z-index: 100000; /* Above WP toolbar. */
text-decoration: none;
box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
}
Bước 3
Tải lên hình ảnh biểu trưng của bạn tại Giao diện> Tiêu đề.