srcmini在标题中添加切换搜索图标的过程(导航菜单旁边)
StudioPress的Authority Pro是一个很棒的Genesis子主题, 旨在建立作者, 博客作者, 自由职业者等的信任。
最近, 我切换到Authority Pro主题, 我想在标题中添加搜索图标, 但无法在Internet上找到简单的解决方案。
但这并不意味着不可能。我不得不从一位开发人员那里寻求帮助, 并想与你共享代码。
最佳做法是在修改之前备份所需的文件, 以便在出现问题时进行还原。
- 登录到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(){ ?>
<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);Ex
/**
* 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);
}- 保存文件
就这样。刷新页面, 你应该看到搜索图标并进行操作。
我希望这可以帮助你在Genesis框架中添加搜索图标。
评论前必须登录！
注册