如何在Genesis Authority Pro标题中添加搜索图标？

在标题栏中添加切换搜索图标的步骤（在导航菜单旁边）

Authority Pro由StudioPress是一个很棒的Genesis子主题，用于建立作者、博客作者、自由职业者等的信任。

最近，我切换到了Authority Pro主题，并希望在标题栏中有一个搜索图标，但在互联网上找不到简单直接的解决方案。

但这并不意味着不可能。

我不得不向我的开发人员寻求帮助，并希望与您分享代码。好消息是Authority Pro主题集成了WordPress Dashicons，使得这一切变得容易。

作为最佳实践，在修改文件之前备份所需文件，以便在出现问题时恢复。

登录到您的WordPress服务器（如果您使用的是共享托管，则登录到cPanel）
进入WP安装目录，然后进入wp-content/themes/authority-pro
在functions.php文件的末尾添加以下内容。

// Header Search Function
add_filter( 'genesis_header', 'genesis_header_icon', 10, 2 );
function genesis_header_icon(){ ?>
        
                
        
        
                
                        
                                
                        
                
        
<?php }

接下来，在Enqueues scripts and styles部分中添加以下内容。

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);
}