Hầu hết các chủ đề con của Genesis đều có hai vị trí menu - Menu Điều hướng chính và Menu Điều hướng phụ. Họ cũng có một khu vực tiện ích Header Right cho một widget menu tùy chỉnh. Trong một số chủ đề con, Menu Điều hướng Phụ đã được chuyển đến khu vực chân trang.
Nếu bạn muốn một vị trí menu thứ ba mới, thật dễ dàng để thêm. Giả sử bạn cần cả Menu Điều hướng Chính và Phụ ở đầu các trang của trang web và bạn muốn thêm menu thứ ba, làm menu chân trang. Hướng dẫn WordPress này chỉ cho bạn cách thêm menu chân trang vào chủ đề con Genesis của bạn ngay phía trên khu vực tiện ích chân trang.
Thêm hỗ trợ chủ đề cho menu chân trang mới
Tất cả mã cho hướng dẫn này đều có trong GitHub Gist.Điều đầu tiên bạn cần làm là quyết định tên cho vị trí menu chân trang và tên bạn muốn xuất hiện trong Quản trị viên WordPress trong Giao diện> Trình đơn.
Bạn có thể gọi menu của mình - “footer” với vị trí là “Footer Naviagation Menu”.
Nó sẽ giống như thế này, sau khi bạn thêm tất cả mã bên dưới.
Trước tiên, bạn cần thêm hỗ trợ chủ đề cho menu mới. Nhưng bạn không thể chỉ thêm menu mới; bạn sẽ cần liệt kê tất cả các menu bạn muốn có sẵn cho chủ đề con của bạn.
Vì vậy, hãy mở một trình soạn thảo văn bản để chỉnh sửa tệp functions.php chủ đề con của bạn. Bạn có thể thêm mã này vào cuối tệp.
<?php
// Remove the line above when adding to functions.php
// Add theme support for new menu
// Add Footer Menu; Keep Primary and Secondary Menus
add_theme_support ( 'genesis-menus' , array (
'primary' => __( 'Primary Navigation Menu', 'genesis' ),
'secondary' => __( 'Secondary Navigation Menu', 'genesis' ),
'footer' => __( 'Footer Navigation Menu', 'genesis' )
) );Mã giữ các menu chính và phụ, đồng thời thêm menu chân trang.
Dòng này thêm văn bản ‘Trình đơn Điều hướng Chân trang’ vào tệp tên miền văn bản sẽ được dịch.
__( ‘Footer Navigation Menu’, ‘genesis’ )
Bạn có thể thêm tên miền văn bản chủ đề con của mình, nếu có, thay vì ‘genesis’.
Thêm Menu Chân trang vào Vị trí Chủ đề
Tiếp theo, bạn muốn thêm vị trí menu mới ngay phía trên khu vực footer-widget. Bạn cũng muốn thêm đánh dấu mà Genesis sử dụng trong các menu khác để có thể có HTML và kiểu nhất quán. Thêm phần sau vào functions.php của bạn ngay bên dưới phần mã đầu tiên.<?php // Remove the line above when adding to functions.php// Add attributes to markup
// Add footer menu just above footer widget area
add_action( ‘genesis_before_footer’, ‘amethyst_footer_menu’, 9 );
function amethyst_footer_menu() {genesis_nav_menu( array( 'theme_location' => 'footer', 'container' => 'div', 'container_class' => 'wrap', 'menu_class' => 'menu genesis-nav-menu menu-footer', 'depth' => 1 ) );
}
Giải thích về Quy tắc
Đầu tiên, bạn đang thêm menu mới với hook 'genesis_before_footer'. Mã ưu tiên của 9 thêm nó vào trước các tiện ích con ở chân trang.-
vị trí chủ đề thêm
< nav class="footer" >chủ đề vào chủ đề -
container và container_class của 'div' và 'wrap' thêm một vùng chứa bọc của
< div class="wrap" > - menu_class thêm genesis-nav-menu và các lớp khác để nhất quán với các menu khác
- độ sâu 1 cho phép menu chỉ có một mức; sử dụng 0, nếu bạn muốn thả xuống
.nav-footer { background-color: #333; }.nav-footer .genesis-nav-menu a {
color: #fff;
}
.nav-footer .genesis-nav-menu a:hover {
color: #e5554e;
}
Nếu bạn muốn thêm biểu tượng menu đáp ứng cho các kích thước màn hình nhỏ, như các menu ở trên cùng, bạn sẽ cần chỉnh sửa tệp menu đáp ứng.
Và để có điểm thưởng, bạn cũng có thể thêm phần sau vào functions.php của mình để thêm các thuộc tính vào đánh dấu điều hướng chân trang mới của bạn. Bạn có thể đọc thêm về đánh dấu genesis tại đây.
<?php
// Remove the line above when adding to functions.php
// Add custom attributes to footer navigation
add_filter( 'genesis_attr_nav-footer', 'custom_add_nav_footer_attr' );
function custom_add_nav_footer_attr( $attributes ){
$attributes['role'] = 'navigation';
$attributes['itemscope'] = 'itemscope';
$attributes['itemtype'] = 'http://schema.org/SiteNavigationElement';
return $attributes;
}