• Skip to main content
  • Bỏ qua footer

Tim Toi .Net

Blog chia sẻ kiến thức liên quan đến công nghệ

  • Home
  • Web Development
    • WordPress
    • Domain – Hosting
  • SEO
  • MMO
  • Blog

Đinh Tuấn / Tháng Một 18, 2018

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;
}
Sending
User Review
0(0 votes)

Thuộc chủ đề:Web Development, WordpressTag với:Customize theme genesis, Genesis

Reader Interactions

Trả lời Hủy

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Footer

Chính sách bảo mật
Liên hệ
Giới thiệu

Giới thiệu

Tìm Tòi là 1 blog cá nhân chuyên viết về Web Hosting, WordPress, SEO, MMO ...v.v và những gì mình quan tâm và muốn chia sẻ.

Kết nối

  • Email
  • Facebook
  • Phone
  • YouTube

Copyright © 2021 TimToi.Net All rights reserved · Đăng nhập