Bữa giờ có anh em hỏi mình cách hiển thị lượt view bài viết như trên website của mình, thì nay mình xin chia sẻ với anh em cách làm nhé.
Khai báo function đăng ký menu
Dưới đây là đăng ký khai báo cho 1 menu
|
1 2 3 4 5 |
function register_my_menus() { register_nav_menus( array( 'new-menu' => __( 'New Menu' ) ) );} add_action( 'init', 'register_my_menus' ); |
Ở code trên chúng ta đăng ký với tên menu là: “New Menu” (hoặc nếu các bạn muốn nhiều hơn 1 Menu các bạn cũng có thể thực hiện bằng Code sau).
|
1 2 3 4 5 6 7 |
function register_my_menus() { register_nav_menus( array( '<span style="color: #ff0000;">new-menu</span>' => __( 'New Menu' ), 'add-menu' => __( 'Add Menu' ) ));} add_action( 'init', 'register_my_menus' ); |
Tiếp theo là sử dụng short code gọi menu
Và bây giờ chúng ta sẽ có 2 Menu tương ứng đó là “New Menu” và “Add Menu”, tiếp tục bạn hãy copy đoạn code sau dán vào những vị trí bạn muốn xuất hiện Menu như trong tập tin Header.php, Footer.php … Chẳng hạn.
Đại khái là gọi trong bất kỳ file php chỗ nào mình muốn.
|
1 |
<?php wp_nav_menu( array( 'theme_location' => '<span style="color: #ff0000;">new-menu</span>' ) ); ?> |
Tiếp theo là thêm class vào shortcode menu để có thể css cho đẹp
|
1 |
<?php wp_nav_menu( array( 'theme_location' => 'add-menu', 'container_class' => '<span style="color: #ff0000;">my_add_menu_class</span>' ) );?> |
còn các class của từng menu nhỏ hơn và megamenu thì thêm ở trong quản trị admin chỗ menu điền class.
Ứng dụng của tôi vào code demo function.php
|
1 2 3 4 5 6 7 8 9 |
// đăng ký nhiều menu function register_my_menus() { register_nav_menus( array( 'new-menu-main-truyentranh' => __( 'Menu Main Truyện Tranh' ), 'new-menu-category-truyentranh' => __( 'Menu Category Truyện Tranh' ), 'add-menu-chapter-noidung' => __( 'Chapter menu nội dung truyện tranh' ) ));} add_action( 'init', 'register_my_menus' ); |
style.css
|
1 2 3 |
.category_truyentranh_menu_class ul { display: flex; } |
single-truyentranh.php
|
1 2 3 4 5 6 7 |
<div class="row"> <div class="col-md-12"> <!-- Add your menu code here --> Menu số 2 phụ thể loại short code <?php wp_nav_menu( array( 'theme_location' => 'new-menu-category-truyentranh', 'container_class' => 'category_truyentranh_menu_class' ) );?> </div> </div> |
Chúc các bạn thành công.
