Mở rộng Search Box trong Genesis

Trong bài viết này chúng ta sẽ hướng dẫn các bạn tạo hiệu ứng mở rộng trong khung tìm kiếm. Bình thường nó được thu hẹp lại nhưng khi viết vào khung Search Box sẽ được mở rộng ra

Primary Navigation

expanding-search-form-primary-nav

Các bạn vào  Genesis > Theme Settings > Navigation và cài được khung tìm kiếm được hiện thị tại Primary Navigation Extras.

Thêm đoạn code sau vào file function.php trong thư mục child theme

//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
 
	wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );
 
}
 
//* Customize search form input box text
add_filter( 'genesis_search_text', 'sp_search_text' );
function sp_search_text( $text ) {
	return esc_attr( 'Search' );
}
 
//* 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( '' );
 
}

Với đoạn code trên, chúng ta sẽ

  • Tải  Font Awesome’s CSS vào blog của chúng ta
  • Thay thế mặc định chữ ‘Search this website…’ trong khung tìm kiếm bằng từ  ‘Search’
  • Cài đặt icon tìm kiếm ở Font Awesome vào khung tìm kiếm

Nếu bạn đã load Font Awesome trước đó thì không thêm đoạn code sau vào function.php nữa

//* Make Font Awesome available
add_action( 'wp_enqueue_scripts', 'enqueue_font_awesome' );
function enqueue_font_awesome() {
 
	wp_enqueue_style( 'font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );
 
}

Thêm đoạn code sau vào fule style.css trong thư mục theme

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* Firefox 18- */
input:focus::-moz-placeholder { color:transparent; } /* Firefox 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* oldIE ;) */
 
.genesis-nav-menu .search-form input[type="search"] {
	padding-right: 3rem;
	-moz-transition: 400ms width ease;
    -webkit-transition-duration: 400ms;
    -webkit-transition-property: width;
    -webkit-transition-timing-function: ease;
    -o-transition-duration: 400ms;
    -o-transition-property: width;
    -o-transition-timing-function: ease;
    width: 92px;
}
 
.genesis-nav-menu .search-form input[type="search"]:focus {
	width: 189px;
}
 
.search-form {
	position: relative;
}
 
.search-form input[type="submit"] {
	position: absolute;
	font-family: FontAwesome;
	clip: inherit;
	width: 16px;
	height: 16px;
	background: transparent;
	color: #999;
	right: 10px;
	top: 18px;
}
 
.search-form input[type="submit"]:hover {
	color: #F15123;
}

Secondary Navigation

expanding-search-form-secondary-nav

Thêm đoạn code sau vào file function.php

//* Add a right aligned search form in Secondary Navigation
add_filter( 'genesis_nav_items', 'sk_search_form', 10, 2 );
add_filter( 'wp_nav_menu_items', 'sk_search_form', 10, 2 );
 
function sk_search_form($menu, $args) {
	$args = (array)$args;
	if ( 'secondary' !== $args['theme_location']  )
		return $menu;
	ob_start();
	get_search_form();
	$search_form = ob_get_clean();
	return $menu . '<li class="right">' . $search_form . '</li>';
}

Thêm vào style.css

.menu-secondary > .right {
	padding: 0;
	margin-top: 1.4rem;
}

Leave a Comment