Thêm biểu tượng xã hội vào bên phải của nút menu trong Essence Theme Pro Genesis

Theo mặc định, Chủ đề Essence Pro Genesis hiển thị menu lớp phủ toàn màn hình khi nhấp vào nút menu. Bạn có muốn thêm các biểu tượng xã hội bên cạnh nút menu này để hiển thị tốt hơn cho các liên kết hồ sơ xã hội của mình không? Đây là cách thêm các biểu tượng Facebook, Twitter và Instagram vào vùng tiêu đề chủ đề.

Đoạn mã PHP: Thay thế chức năng menu

Trong Bảng điều khiển WordPress, hãy chuyển đến trang Appearance → Theme Editor và mở tệp header-functions.php có trong thư mục lib . Chuyển đến dòng số 66 và tìm hàm này essence_header_right_menu () . Thay thế mã này bằng mã sau.

function essence_header_right_menu() {
// Bail out if the off-screen theme is not set up.
if ( ! has_nav_menu( 'off-screen' ) ) {
return;
}
$menu_text = __( 'Menu', 'essence-pro' );
$hide_text = __( 'Hide Off Screen Menu', 'essence-pro' );
$menu_args = [
'theme_location' => 'off-screen',
'depth' => 1,
'fallback_cb' => false,
];
if ( genesis_is_amp() ) {
?>
<amp-lightbox id="off-screen-lightbox" class="off-screen-menu off-screen-content" layout="nodisplay" scrollable>
<div class="off-screen-container">
<div class="off-screen-wrapper">
<div class="wrap">
<button class="lightbox toggle-off-screen-menu-area close" on="tap:off-screen-lightbox.close"><span class="screen-reader-text"><?php echo esc_html( $hide_text ); ?></span>X</button>
<?php genesis_nav_menu( $menu_args ); ?>
</div>
</div>
</div>
</amp-lightbox>
<div class="header-right">
<button class="off-screen-item toggle-off-screen-menu-area" on="tap:off-screen-lightbox"><i class="icon ion-md-menu"></i> <?php echo esc_html( $menu_text ); ?></button>
<div class="header-social-links">
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-facebook"></i></a>
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-twitter"></i></a>
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-instagram"></i></a>
</div>
</div>
<?php
} else {
?>
<div class="off-screen-menu off-screen-content">
<div class="off-screen-container">
<div class="off-screen-wrapper">
<div class="wrap">
<button class="toggle-off-screen-menu-area close"><span class="screen-reader-text"><?php echo esc_html( $menu_text ); ?></span>X</button>
<?php genesis_nav_menu( $menu_args ); ?>
</div>
</div>
</div>
</div>
<div class="header-right">
<button class="off-screen-item toggle-off-screen-menu-area"><i
class="icon ion-md-menu"></i> <?php echo esc_html( $menu_text ); ?>
</button>
<div class="header-social-links">
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-facebook"></i></a>
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-twitter"></i></a>
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-instagram"></i></a>
</div>
</div>
<?php
}
}

Đảm bảo rằng bạn sửa đổi mã trên cho hai điều. Trước tiên, hãy thêm URL hồ sơ xã hội của bạn bằng cách thay thế # trong mã. Thứ hai, thêm tiêu đề tùy chỉnh thay cho NHẬP TIÊU ĐỀ CỦA BẠN trong mã.

<div class="header-social-links">
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-facebook"></i></a>
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-twitter"></i></a>
<a href="#" title="ENTER YOUR TITLE" target="_blank"><i class="icon ion-logo-instagram"></i></a>
</div>

Mã CSS: Để tạo kiểu tốt hơn

Để làm cho các biểu tượng xã hội trông đẹp mắt, hãy thêm mã CSS sau. Trong Bảng điều khiển WordPress, đi tới Giao diện → Tùy chỉnh và sau đó dán mã CSS này vào hộp CSS bổ sung.

.header-social-links {
    display: inline-block;
    padding: 10px 0 0;
    float: right;
    line-height: 1;
}
.header-social-links a {
	color: #fff;
	border: 2px solid #fff;
	border-radius: 50%;
	display: inline-block;
	margin: 0 8px 0 0;
	height: 35px;
	text-align: center;
	text-decoration: none;
	width: 35px;
}
.header-social-links a:last-child {
	margin-right: 0;
}
.header-social-links a:hover,
.header-social-links a:active {
	color: #bbb;
	border-color: #bbb;
}
.header-social-links i.icon {
	font-size: 14px;
	vertical-align: bottom;
	text-align: center;
	line-height: 34px;
}
@media only screen and (max-width: 580px) {
	.header-social-links {
		display: none;
	}
}