Hiển thị khung tìm kiếm trên menu của Genesis Framework

10/16/2017

Chia Sẻ :

Tweet

Bài viết liên quan

Nếu bạn là một tín đồ của Genesis thì chắc hẳn cũng đã biết, kể từ phiên bản 2.1 trở đi, Genesis không cho phép hiển thị thêm các “tiện ích mở rộng” trên menu nữa. Và vì vậy chúng ta không thể thêm menu ngay trên Theme Settings được. Muốn làm được điều này, các bạn phải đụng đến code.

Nhắc đến việc sử dụng code, thực sự có nhiều bạn rất rất ngại sử dụng, đơn giản vì dễ gây lỗi nếu không cẩn thận. Chính vì vậy hôm nay tôi sẽ giới thiệu tới các bạn một plugin có khả năng tinh chỉnh Genesis rất mạnh mẽ đó là Genesis Club Lite.

Một trong những tính năng của Genesis Club Lite là tạo thêm khung tìm kiếm cho menu trong WordPress mà tôi đề cập trong bài viết này.

Việc đầu tiên và cũng cực kỳ quan trọng đó là cài đặt và kích hoạt plugin lên nhé.

Sau khi kích hoạt thành công, bạn sẽ thấy thêm một lựa chọn nữa trên menu trong Admin Dashboard là Genesis Club Lite. Các bạn vào đây và chọn Menus nhé.

Tại đây, bạn chuyển qua tab Search, thiết lập một số tùy chọn sau đó Save Changes để lưu lại.

Các thông số các bạn test thử với menu của bạn sao cho phù hợp là được, do mỗi bạn có một kiểu menu khác nhau nên tôi không thể đưa ra các thông số cụ thể.

Ok rồi đó. Đang tính kết thúc bài viết nhưng thấy các bạn ưa dùng code lại ngậm ngùi thì đành viết thêm chút nữa. Nếu không muốn sử dụng plugin thì các bạn thêm đoạn code vào file function.php của Child Theme nhé.

function cswp_add_search_box( $menu, $args ) {if ( 'secondary' !== $args->theme_location )return $menu;ob_start();get_search_form();$search = ob_get_clean();$menu .= '<li class="right search">' . $search . '</li>';return $menu;}add_filter( 'wp_nav_menu_items', 'cswp_add_search_box', 10, 2 );

1

2

3

4

5

6

7

8

9

10

function cswp_add_search_box( $menu, $args ) {

if ( 'secondary' !== $args->theme_location )

return $menu;

ob_start();

get_search_form();

$search = ob_get_clean();

$menu  .= '<li class="right search">' . $search . '</li>';

return $menu;

}

add_filter( 'wp_nav_menu_items', 'cswp_add_search_box', 10, 2 );

Lưu ý: Các bạn thay chữ secondary ở dòng thứ 2 thành primary để hiển thị trên menu primary.

Để chỉnh lại stylesheet các bạn dùng thuộc tính .genesis-nav-menu .search-form input. Ví dụ như của tôi.

.genesis-nav-menu .search-form input {padding: 10px;margin-right: 4px;background-color: rgb(34, 34, 34); color: rgb(255, 255, 255); text-transform: uppercase; width: 180px; border-width: 1px; border-style: solid; border-color: rgb(34, 34, 34); border-image: initial;}

1

2

3

4

5

6

7

8

9

10

11

12

.genesis-nav-menu .search-form input {

padding: 10px;

margin-right: 4px;

background-color: rgb(34, 34, 34);

    color: rgb(255, 255, 255);

    text-transform: uppercase;

    width: 180px;

    border-width: 1px;

    border-style: solid;

    border-color: rgb(34, 34, 34);

    border-image: initial;

}

Tổng kết

Tôi đã hướng xong các bạn thêm khung tìm kiếm trên menu của Genesis rồi đó. Nếu có khó khăn gì hãy cho tôi biết ở phần comment nhé. Chúc các bạn thành công.

Nguồn: Việt Hùng admin https://chiasewp.com/

Thẻ : Wordpress