如何在Genesis Authority Pro标头中添加搜索图标（）

在标题中添加切换搜索图标的过程(导航菜单旁边)
StudioPress的Authority Pro是一个很棒的Genesis子主题, 旨在建立作者, 博客作者, 自由职业者等的信任。

文章图片
最近, 我切换到Authority Pro主题, 我想在标题中添加搜索图标, 但无法在Internet上找到简单的解决方案。
但这并不意味着不可能。我不得不从一位开发人员那里寻求帮助, 并想与你共享代码。
最佳做法是在修改之前备份所需的文件, 以便在出现问题时进行还原。

登录到WordPress服务器(如果你在共享主机上, 则为cPanel)
转到WP安装, 然后进入wp-content / themes / authority-pro
在functions.php文件的末尾添加以下内容。

// Header Search Functionadd_filter( 'genesis_header', 'genesis_header_icon', 10, 2 ); function genesis_header_icon(){ ?> < div class="custom-search head-custom-search"> < ?php echo sprintf( '%s', __( genesis_search_form( $echo ) ) ); ?> < /div> < div class="header-icons"> < span class="search-box"> < a class="search-icon" href="javascript:void(0)"> < i class="dashicons dashicons-search"> < /i> < /a> < /span> < /div> < ?php }

接下来, 在” 加入脚本和样式” 部分中添加以下内容

wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', 'jquery', '3.0.0', TRUE);

/** * Enqueues scripts and styles. * * @since 1.0.0 */function authority_enqueue_scripts_styles() {wp_enqueue_script('custom', get_stylesheet_directory_uri() . '/js/custom.js', 'jquery', '3.0.0', TRUE);

保存文件

让我们添加切换jquery函数

转到js文件夹并使用以下代码创建一个名为custom.js的新文件

// Header Search Toggle//---------------------------------------------------------------jQuery(document).ready(function(){ jQuery(".header-icons .search-box .search-icon").click(function(){ jQuery(".site-header .wrap .head-custom-search").slideToggle(); //alert('thtyh'); jQuery(".header-icons .search-box .search-icon i").toggleClass("dashicons-search dashicons-no-alt"); }); jQuery(document).mouseup(function(e) { var container = jQuery(".site-header .wrap .head-custom-search"); var search_icon = jQuery(".header-icons .search-box .search-icon"); // if the target of the click isn't the container nor a descendant of the container if (!container.is(e.target) & & container.has(e.target).length === 0) { if (!search_icon.is(e.target) & & search_icon.has(e.target).length === 0) { jQuery('.site-header .wrap .head-custom-search').slideUp(); jQuery('.header-icons .search-box .search-icon i').removeClass("dashicons-no-alt"); jQuery('.header-icons .search-box .search-icon i').addClass("dashicons-search"); } } }); });

最后, 是时候美化搜索切换框了。

在style.css文件中添加以下内容

header .header-icons{ width: 112px; float: right; text-align: right; padding: 15px 0px 8px; position:relative; }header .header-icons .search-box{ position:relative; }header .header-icons a{ margin-left:10px; text-decoration:none; }header .header-icons .search-box i{ color:#333; }header .header-icons .twitter-icon i{ color:#3FA9F5; }header .header-icons .fb-icon i{ color:#3A559F; display: none; }.genesis-nav-menu i{ vertical-align:middle; }.genesis-nav-menu .custom-search-icon i{ vertical-align:middle; padding: 0px 25px 0px 10px; cursor:pointer; }.genesis-nav-menu li a.icon{ padding: 12px 5px; }.site-header .wrap{ position:relative; }.site-header .wrap .head-custom-search{ position:absolute; top: 78px; right: 20px; width: 712px; text-align: center; background:#fff; display:none; z-index: 9999; }.site-header .wrap .head-custom-search::before{ border-color: transparent transparent #ff5722; border-style: solid; border-width: 0.5em; content: ""; display: block; position: absolute; right: 50px; top: -20px; z-index: 10; }.site-header .wrap .head-custom-search .search-form { margin-bottom: 0px; width: 100%; padding: 20px 18px; border-top: 3px solid #ff5722; }.site-header .wrap .head-custom-search .search-form input[type='search']{ width: 562px; height:58px; border:1px solid #e1e1e1; border-right:0px; }.site-header .wrap .head-custom-search .search-form input[type="submit"] { margin-top: 0px !important; padding: 20px 26px 18px; border-left: 0px; background:#ff5722; color:#fff; }.site-header .wrap .head-custom-search .search-form input:focus[type="submit"], .site-header .wrap .head-custom-search .search-form input:hover[type="submit"]{ transform: translate3d(0, 0, 0); }