Comment ajouter une icône de recherche dans l'en-tête Genesis Authority Pro?

Procédure pour ajouter une icône de recherche à bascule dans l'en-tête (à côté du menu de navigation)

Autorité Pro by StudioPress est un fantastique thème enfant Genesis pour établir la confiance en tant qu'auteur, blogueur, pigiste, etc.

autorité-pro

Dernièrement, je suis passé au thème Authority Pro, et je voulais avoir l'icône de recherche dans un en-tête, mais je n'ai pas trouvé de solution simple sur Internet.

Mais cela ne veut pas dire que ce n'est pas possible.

J'ai dû prendre l'aide de mon développeur et j'ai pensé partager le code avec vous. La bonne nouvelle est que le thème Authority Pro est livré avec Dashicons WordPress intégré ce qui le rend facile.

Comme meilleure pratique, effectuez une sauvegarde des fichiers requis avant de procéder à la modification afin de pouvoir restaurer en cas de problème.

Connectez-vous à votre serveur WordPress (cPanel si vous êtes sur un hébergement mutualisé)
Accédez à l'installation de WP puis wp-content/themes/authority-pro
Ajoutez ce qui suit à la fin du functions.php fichier.

// Header Search Function
add_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 }

Ensuite, ajoutez ce qui suit dans 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);

Enregistrer le fichier

Ajoutons les fonctions jquery toggle

Cliquez sur js dossier et créez un nouveau fichier appelé custom.js avec les codes suivants

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

et, enfin, il est temps d'embellir la boîte à bascule de recherche.

Ajoutez ce qui suit dans un style.css filet

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

Enregistrer le fichier

C'est tout.

Actualisez votre page et vous devriez voir l'icône de recherche et basculer en action.

icône de recherche de genèse

J'espère que cela vous aidera à ajouter l'icône de recherche dans le Genèse cadre.