Hướng dẫn này cung cấp các bước để thêm biểu tượng tìm kiếm kính lúp ở bên phải menu Điều hướng chính trong Genesis, khi được nhấp vào, sẽ hiển thị hộp tìm kiếm bao gồm toàn bộ tiêu đề trang web dựa trên mã từ Monochrome Pro.
Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.6.0, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào
Bước 1
Thay thế toàn bộ nội dung của js / genesis-sample.js bằng:
/**
* Genesis Sample entry point.
*
* @package GenesisSample\JS
* @author StudioPress
* @license GPL-2.0+
*/
var genesisSample = ( function( $ ) {
'use strict';
/**
* Adjust site inner margin top to compensate for sticky header height.
*
* @since 2.6.0
*/
var moveContentBelowFixedHeader = function() {
var siteInnerMarginTop = 0;
if( $('.site-header').css('position') === 'fixed' ) {
siteInnerMarginTop = $('.site-header').outerHeight();
}
$('.site-inner').css('margin-top', siteInnerMarginTop);
},
/**
* Initialize Genesis Sample.
*
* Internal functions to execute on document load can be called here.
*
* @since 2.6.0
*/
init = function() {
// Run on first load.
moveContentBelowFixedHeader();
// Run after window resize.
$( window ).resize(function() {
moveContentBelowFixedHeader();
});
// Run after the Customizer updates.
// 1.5s delay is to allow logo area reflow.
if (typeof wp.customize != "undefined") {
wp.customize.bind( 'change', function ( setting ) {
setTimeout(function() {
moveContentBelowFixedHeader();
}, 1500);
});
}
// Make sure JS class is added.
$('body').addClass('js');
// set the variables.
var $header = $('.site-header'),
$hsToggle = $('.toggle-header-search'),
$hsWrap = $('#header-search-wrap'),
$hsInput = $hsWrap.find('input[type="search"]');
// Handler for click a show/hide button.
$hsToggle.on('click', function (event) {
event.preventDefault();
if ($(this).hasClass('close')) {
hideSearch();
} else {
showSearch();
}
});
// Handler for pressing show/hide button.
$hsToggle.on('keydown', function (event) {
// If tabbing from toggle button, and search is hidden, exit early.
if (event.keyCode === 9 && !$header.hasClass('search-visible')) {
return;
}
event.preventDefault();
handleKeyDown(event);
});
// Handler for tabbing out of the search bar when focused.
$hsInput.on('keydown', function (event) {
if (event.keyCode === 9) {
hideSearch(event.target);
}
});
// Helper function to show the search form.
function showSearch() {
$header.addClass('search-visible');
$hsWrap.fadeIn('fast').find('input[type="search"]').focus();
$hsToggle.attr('aria-expanded', true);
}
// Helper function to hide the search form.
function hideSearch() {
$hsWrap.fadeOut('fast').parents('.site-header').removeClass('search-visible');
$hsToggle.attr('aria-expanded', false);
}
// Keydown handler function for toggling search field visibility.
function handleKeyDown(event) {
// Enter/Space, respectively.
if (event.keyCode === 13 || event.keyCode === 32) {
event.preventDefault();
if ($(event.target).hasClass('close')) {
hideSearch();
} else {
showSearch();
}
}
}
};
// Expose the init function only.
return {
init: init
};
})( jQuery );
jQuery( window ).on( 'load', genesisSample.init );
Bước 2
Chỉnh sửa các hàm.php .
a) Bên trong genesis_sample_enqueue_scripts_styles (), thêm vào cuối
wp_enqueue_style(
'monochrome-ionicons', '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css',
array(),
CHILD_THEME_VERSION
);
b) Ở cuối functions.php, thêm
add_action( 'genesis_header', 'custom_get_header_search_toggle' );
/**
* Outputs the header search form toggle button.
*/
function custom_get_header_search_toggle() {
printf(
'<a href="#header-search-wrap" aria-controls="header-search-wrap" aria-expanded="false" role="button" class="toggle-header-search"><span class="screen-reader-text">%s</span><span class="ionicons ion-ios-search"></span></a>',
__( 'Show Search', 'genesis-sample' )
);
}
add_action( 'genesis_header', 'custom_do_header_search_form' );
/**
* Outputs the header search form.
*/
function custom_do_header_search_form() {
$button = sprintf(
'<a href="#" role="button" aria-expanded="false" aria-controls="header-search-wrap" class="toggle-header-search close"><span class="screen-reader-text">%s</span><span class="ionicons ion-ios-close-empty"></span></a>',
__( 'Hide Search', 'genesis-sample' )
);
printf(
'<div id="header-search-wrap" class="header-search-wrap">%s %s</div>',
get_search_form( false ),
$button
);
}
Bước 3
Chỉnh sửa style.css .
a) Bên trên các truy vấn phương tiện, hãy thêm
.site-header > .wrap {
position: relative;
}
.menu-toggle {
margin: 10px 30px 0 auto;
}
.header-search-wrap {
display: none;
}
.js .header-search-wrap {
position: absolute;
z-index: 1001; /* Show above the menu toggle button */
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-transition: none;
transition: none;
-webkit-transform: translate3d(0,-100%,0);
transform: translate3d(0,-100%,0);
}
.js .header-search-wrap .search-form,
.js .header-search-wrap input[type="search"] {
height: 100%;
}
.search-visible .header-search-wrap {
-webkit-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
.header-search-wrap:target {
display: block;
clear: both;
position: relative;
}
.header-search-wrap input[type="search"] {
padding: 0;
border: 0;
}
.header-search-wrap input[type="submit"]:focus {
right: 50px;
margin-top: 1px;
padding: 20px;
border-radius: 3px;
}
.js .toggle-header-search.close:focus {
outline: 0;
}
.toggle-header-search.close {
position: absolute;
z-index: 100;
top: 0;
right: 0;
width: 30px;
height: 100%;
padding: 0;
color: #000;
-webkit-transition: -webkit-transform 0.2s ease-in-out;
transition: -webkit-transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out;
transition: transform 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-webkit-transform: translate3d(-6px,0,0);
transform: translate3d(-6px,0,0);
}
.header-search-wrap:target .toggle-header-search.close {
-webkit-transform: none;
transform: none;
}
.toggle-header-search .ionicons {
font-size: 12px;
font-size: 1.2rem;
-webkit-transform: scale(2);
transform: scale(2);
}
.toggle-header-search.close .ionicons {
position: absolute;
top: calc(50% - 5px);
right: 0;
-webkit-transform: scale(3);
transform: scale(3);
}
.toggle-header-search {
position: absolute;
right: 5px;
top: 20px;
}
b) Khi kết thúc truy vấn phương tiện chiều rộng tối thiểu 960px, hãy thêm
/* Header Search
--------------------------------------------- */
.site-header > .wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
}
.title-area,
.nav-primary {
float: none;
}
.nav-primary {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: right;
}
.toggle-header-search {
position: static;
display: block;
padding: 12px 15px;
line-height: 1;
margin-left: 20px;
}