Hướng dẫn add search full screen vào Nav Primary trong theme Genesis

Trong hướng dẫn này, tôi chia sẻ các bước để thêm biểu tượng tìm kiếm kính lúp ở bên phải thanh nav primary menu trong theme Genesis khi click vào sẽ mở ra lớp phủ toàn màn hình hiển thị khung tìm kiếm.

Ngoài ra chúng tôi sẽ sử dụng tập lệnh jQuery Sticky-Kit để làm cho nav chính vẫn cố định trên đầu trình duyệt khi người dùng cuộn đến nó.

Note: Bài viết được hướng dẫn trên theme Magazine Pro và nó sẽ hoạt động trên bất kỳ child theme nào.

Hướng dẫn add search full screen vào Nav Primary trong theme Genesis

Bước 1: Tải toàn bộ thư viên full-screen-overlay-styles.zip

Bước 2: Giải nén file full-screen-overlay-styles.zip

Giải nén tệp tin zip vừa tải xuống, copy toàn bộ file classie.js, demo1.js, global.jsmodernizr.custom.js vào thư mục js.

Tải lên file css/style3.css tới thư mục css của child theme (tạo mới nếu không có thư mục css).

Tải lên images/cross.png vào thư mục images của chủ đề con (child theme).

Bước 3: Thêm đoạn mã sau vào cuối file functions.php

Thêm đoạn mã bên dưới vào cuối files functions.php trong thư mục child theme.
//* Do NOT include the opening php tag
//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
wp_enqueue_style( 'font-awesome', '//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' );
}
add_filter( 'wp_nav_menu_items', 'sk_menu_extras', 10, 2 );
/**
 * Filter menu items, appending a a search icon at the end.
 *
 * @param string $menu HTML string of list items.
 * @param stdClass $args Menu arguments.
 *
 * @return string Amended HTML string of list items.
 */
function sk_menu_extras( $menu, $args ) {
 //* Change 'primary' to 'secondary' to add extras to the secondary navigation menu
 if ( 'primary' !== $args->theme_location )
 return $menu;
 $menu .= '<li class="menu-item alignright"><a id="trigger-overlay" class="search-icon" href="#"><i class="fa fa-search"></i></a></li>';
 return $menu;
}
//* Enqueue Search in Overlay Scripts
add_action( 'wp_enqueue_scripts', 'custom_load_scripts' );
function custom_load_scripts() {
 wp_enqueue_style( 'style3', get_stylesheet_directory_uri() . '/css/style3.css' );
 wp_enqueue_script( 'modernizr', get_stylesheet_directory_uri() . '/js/modernizr.custom.js' );
 wp_enqueue_script( 'classie', get_stylesheet_directory_uri() . '/js/classie.js', '', '', true );
 wp_enqueue_script( 'demo1', get_stylesheet_directory_uri() . '/js/demo1.js', '', '', true );
 wp_enqueue_script( 'global', get_stylesheet_directory_uri() .'/js/global.js' , array( 'jquery' ), '1.0.0', true );
}
//* Customize search form input button text
add_filter( 'genesis_search_button_text', 'sk_search_button_text' );
function sk_search_button_text( $text ) {
 return esc_attr( '' );
}
//* Overlay content
add_action( 'genesis_after', 'sk_search' );
function sk_search() {
 echo '<div class="overlay overlay-slidedown">';
 echo '<button type="button" class="overlay-close">Close</button>';
 get_search_form();
 echo '</div>';
}

Bước 4: Thêm đoạn CSS vào style.css

/* Search Box in Full Screen Overlay/* Search Box in Full Screen Overlay------------------------------------------------------ */
a.search-icon {
}
.genesis-nav-menu a.search-icon:hover { color: #1ac5a5;}
body .overlay { background: rgba(26,197,165,0.9);}
body .overlay .overlay-close { background-image: url(images/cross.png);}
.admin-bar .overlay .overlay-close { margin-top: 55px;}
.overlay .search-form { text-align: center; position: relative; top: 50%; /*height: 60%;*/ -webkit-transform: translateY(-50%); transform: translateY(-50%);}
.overlay .search-form { margin: 0 auto;}
.overlay .search-form input[type="search"] { width: 500px; border-radius: 4px;}
.overlay .search-form input[type="submit"] { font-family: FontAwesome; clip: inherit; width: 55px; height: 55px; font-size: 40px; background: transparent; color: #fff; position: static; margin-left: 10px; padding: 0; vertical-align: top;}
.overlay .search-form input[type="submit"]:hover { color: #333;}
@media screen and (max-height: 30.5em) {
 .overlay .search-form { /*height: 70%;*/ font-size: 34px; }
}
@media only screen and (max-width: 768px) {
 a.search-icon { font-size: 16px; padding: 20px 16px; }
 .overlay .search-form { height: 70%; }
}
@media only screen and (max-width: 568px) {
 .overlay .search-form { height: auto; }
 .overlay .search-form input[type="search"] { width: 300px; }
 .overlay .search-form input[type="submit"] { vertical-align: middle; }
}
@media only screen and (max-width: 568px) {
 .overlay .search-form input[type="search"] { width: 200px; }
}