Trước đây, tôi đã viết về việc tách các mục menu của thanh điều hướng thành các vùng bên trái và bên phải với hình ảnh tiêu đề (logo) ở giữa ở đây. Hướng dẫn đó dựa trên một plugin (thương mại) WP Nav Plus.
Trong bài viết này, tôi trình bày một phương pháp tốt hơn, sạch hơn và dễ dàng hơn để đạt được điều tương tự.
Lợi ích của cách tiếp cận này so với những cách khác:
- Không cần một plugin
- Không có lợi nhuận âm hoặc định vị tuyệt đối hoặc các tấn công CSS khác
- Không cần phải chia các mục menu thành hai menu chính và phụ riêng biệt
Mặc dù hướng dẫn đã được viết cho chủ đề con Genesis Sample, nó sẽ hoạt động với những điều chỉnh nhỏ trong bất kỳ chủ đề con nào của Genesis.
Bước 1
Chỉnh sửa các functions.php của chủ đề con .
a) Quyết định kích thước của biểu trưng hình ảnh của bạn và chỉ định gấp đôi kích thước của nó trong tiêu đề tùy chỉnh thêm chức năng hỗ trợ chủ đề.
Trong ví dụ này, tôi muốn hiển thị logo 100px x 100px. Do đó, tôi sẽ thay đổi chiều rộng và chiều cao thành 200px.
tức là, thay đổi
//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 600,
'height' => 160,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => true,
) );
đến
//* Add support for custom header
add_theme_support( 'custom-header', array(
'width' => 200,
'height' => 200,
'header-selector' => '.site-title a',
'header-text' => false,
'flex-height' => true,
) );
b) Thêm
// if header image is set, remove Header Right widget area and inject CSS to apply the header image as background image for home menu item and more
add_action( 'wp_head', 'sk_home_menu_item_background_image' );
function sk_home_menu_item_background_image() {
if ( get_header_image() ) {
// Remove the header right widget area
unregister_sidebar( 'header-right' ); ?>
<style type="text/css">
.nav-primary li.menu-item-home a {
background-image: url(<?php echo get_header_image(); ?>);
text-indent: -9999em;
width: 100px;
height: 100px;
}
@media only screen and (min-width: 1024px) {
.site-header > .wrap {
padding: 0;
}
.title-area {
display: none;
}
.nav-primary {
padding: 20px 0;
}
.menu-primary {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center; /* center flex items horizontally */
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; /* center flex items vertically */
}
}
</style>
<?php }
}
Đặt chiều rộng và chiều cao cho kích thước hiển thị hình ảnh biểu trưng mong muốn của bạn..nav-primary li.menu-item-home a
Bước 2
Thêm phần sau vào style.css của chủ đề con :
.header-image .site-title > a {
min-height: 100px;
}
@media only screen and (min-width: 1024px) {
.nav-primary li.menu-item-home a {
background-repeat: no-repeat;
background-size: contain;
margin: 0 10px;
}
}
@media only screen and (max-width: 1023px) {
.nav-primary .genesis-nav-menu .menu-item.menu-item-home {
display: none;
}
}
Đặt chiều cao tối thiểu của kích thước hiển thị hình ảnh biểu trưng mong muốn của bạn..header-image .site-title > a
Bước 3
Tại Giao diện> Tiêu đề, tải lên / chọn hình ảnh biểu trưng mong muốn của bạn.
Bước 4
Tại Giao diện> Menu, chỉnh sửa menu chính của bạn. Thêm một mục menu “Trang chủ” (phần Trang> tab Xem Tất cả> đánh dấu Trang chủ> Thêm vào nút Trình đơn) và di chuyển nó để nó ở giữa với các mục menu ở trên và bên dưới nó.
Đó là nó!