Tuy chỉnh menu trong flatsome

Nội dung

Tạo menu riêng cho từng trang Flatsome

B1: Khai báo, khởi tạo các menu riêng để sử dụng
// Codfe.com đăng ký một menu
function register_codfe_menu() {
register_nav_menu(‘codfe-menu’,__( ‘Codfe menu’ ));
}
add_action( ‘init’, ‘register_codfe_menu’ );
// Codfe.com đăng ký một menu
function register_codfe_menu() {
register_nav_menu(‘codfe-menu’,__( ‘Codfe menu’ ));
}
add_action( ‘init’, ‘register_codfe_menu’ );
Sau khi khai báo chúng ta tiến hành tạo các menu cho từng trang, trong ví dụ mình sẽ tạo menu “Codfe menu” như hình.
Tạo menu riêng cho từng trang
Tạo menu riêng cho từng trang
B2: Tạo shortcode menu để hiển thị menu cho từng trang khác nhau
Các bạn có thể xem thêm bài Tạo shortcode cho menu để dùng khắp mọi nơi, trong ví dụ bài viết này mình sẽ tạo 1 function như sau:

// Codfe.com gắn menu vào trang riêng
function codfe_custom_menu(){
global $wp_query;
switch ($wp_query->post->ID) {
case ‘742’: //id trang
//include ‘path-to-the-file’;
return wp_nav_menu(
array(
‘theme_location’ => ‘codfe-menu’,
‘container’ => ‘false’,
‘menu_id’ => ‘codfe-menu’,
‘menu_class’ => ‘codfe-menu’
)
);
break;
case ‘another_page_id’:
//include ‘path-to-another-file’;
break;
default:
echo ‘Page id = ‘.$wp_query->post->ID;
break;
}
}
add_shortcode(‘codfe-custom-menu’, ‘codfe_custom_menu’);
// Codfe.com gắn menu vào trang riêng
function codfe_custom_menu(){
global $wp_query;
switch ($wp_query->post->ID) {
case ‘742’: //id trang
//include ‘path-to-the-file’;
return wp_nav_menu(
array(
‘theme_location’ => ‘codfe-menu’,
‘container’ => ‘false’,
‘menu_id’ => ‘codfe-menu’,
‘menu_class’ => ‘codfe-menu’
)
);
break;
case ‘another_page_id’:
//include ‘path-to-another-file’;
break;
default:
echo ‘Page id = ‘.$wp_query->post->ID;
break;
}
}
add_shortcode(‘codfe-custom-menu’, ‘codfe_custom_menu’);
Trong hàm trên mình tạo ra một short code là codfe-custom-menu short code này có chức năng là hiển thị menu cho từng trang khác nhau. Trong ví dụ trên đối với trang có id = ‘742’ mình sẽ cho hiện thị menu tự tạo là codfe-menu ở bước đầu tiên.

B3. Gắn menu vào header
Các bạn có thể hook shorcode menu trên vào vị trí cần hiển thị, đối với theme flatsome các bạn có thể đơn giản gắn vào bằng cách cho shortcode vào header như hình.
Sau bước này các bạn có thể kiểm tra menu đã hiển thị đúng trang mình cần chưa nhé, tuy nhiên lúc này các bạn sẽ thấy menu này chưa được css và chạy lung tung. Các bạn có thể css lại theo id #codfe-menu mà mình đã gắn vào ở các bước trên.

B4. Css lại cho menu
Các bạn tham khảo css đơn giản này nhé

#codfe-menu {
background-color:#565656;
color:white;
text-align:center;
height:10%;
}
#codfe-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align:center;
}

#codfe-menu li {
display:inline;
}

#codfe-menu li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: middle;
}

#codfe-menu li a:hover {
background-color: #111;
#codfe-menu {
background-color:#565656;
color:white;
text-align:center;
height:10%;
}
#codfe-menu ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align:center;
}

#codfe-menu li {
display:inline;
}

#codfe-menu li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: middle;
}

#codfe-menu li a:hover {
background-color: #111;
}
https://codfe.com/tao-menu-rieng-cho-tung-trang-flatsome/

Tạo shortcode cho menu để dùng khắp mọi nơi

Menu thông thường chỉ được xài cho Header và Footed tuy nhiên nếu bạn muốn phá cách mang menu đi khắp mọi nơi thì hãy biến em nó thành Shortcode rồi xài nhé! Đoạn code biến menu thành shortcode chỉ bao gồm vài dòng như bên dưới

//Codfe.com Tạo shortcode menu [menu name=”menu_name”] function print_menu_shortcode($atts, $content = null) {
extract(shortcode_atts(array( ‘name’ => null, ‘class’ => null ), $atts));
return wp_nav_menu( array( ‘menu’ => $name, ‘menu_class’ => ‘myclass’, ‘echo’ => false ) );
}
add_shortcode(‘menu’, ‘print_menu_shortcode’);

#header {
background-color:#565656;
color:white;
text-align:center;
height:10%;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align:center;
}

#header li {
display:inline;
}

#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: middle;
}

#header li a:hover {
background-color: #111;
}

#header {
background-color:#565656;
color:white;
text-align:center;
height:10%;
}
#header ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
text-align:center;
}

#header li {
display:inline;
}

#header li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
vertical-align: middle;
}

#header li a:hover {
background-color: #111;
}

https://codfe.com/tao-shortcode-cho-menu-de-dung-khap-moi-noi/