Logo nội tuyến trong Genesis

Logo sẽ được tải lên tại Appearance> Header ở back end hoặc Customize trong thanh quản trị ở front end thông qua WordPress Customizer trong functions.php:

add_theme_support( 'custom-header', array(
	'width'            => 400,
	'height'           => 150,
	'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
 *
 * @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() ) {
              $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 class for screen readers to site description (if header image has been set) to hide it
add_filter( 'genesis_attr_site-description', 'sk_attributes_screen_reader_class' );
function sk_attributes_screen_reader_class( $attributes ) {
	if ( get_header_image() ) {
		$attributes['class'] .= ' screen-reader-text';
	}

	return $attributes;
}

Chiều rộng và chiều cao trong hàm add_theme_support chỉ để đưa ra đề xuất trực quan về các kích thước ở phần cuối và không thực sự được sử dụng ở bất kỳ đâu trong màn hình logo.

Hình ảnh tiêu đề được tải lên trong Customizer sẽ được hiển thị theo kích thước thực của nó trong style.css:

.site-header {
	min-height: 0;
}

.title-area {
	padding: 0;
}

.header-image .site-title {
	text-indent: 0;
}

.header-image .site-title > a {
	background: none;
	float: none;
	min-height: 0;
	width: auto;
}

.site-title img {
	vertical-align: top;
}

@media only screen and (max-width: 960px) {

	.title-area {
		float: none;
	}

	.site-header .widget-area {
		float: none;
		text-align: center;
		margin-top: 20px;
	}

}

Nếu bạn muốn sử dụng hình ảnh có kích thước 2x cho màn hình võng mạc, hãy chỉ định chiều rộng và chiều cao 1x cho ..site-title img

Ví dụ: Để hiển thị hình ảnh sắc nét 400 x 150, hãy tải lên hình ảnh có kích thước 800 x 300 và ở mã style.css, hãy sử dụng:

.site-title img {
	vertical-align: top;
	width: 400px;
	height: 150px;
}

Nếu CSS sau cho Văn bản Trình đọc Màn hình chưa có trong chủ đề con đang hoạt động của trang web của bạn, hãy thêm nó.

/* ## Screen Reader Text
--------------------------------------------- */

.screen-reader-text,
.screen-reader-text span {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: #fff;
	box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
	clip: auto !important;
	color: #333;
	display: block;
	font-size: 1em;
	font-weight: bold;
	height: auto;
	padding: 15px 23px 14px;
	text-decoration: none;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}