Twenty Twelve主题增加顶部搜索框

使用这个主题很多年了,之前有在顶部增加一个搜索框,由于主题自动更新掉了,这里补充记录一下。

首先进入主题代码编辑页面,修改header.php这个文件。找到</hgroup>这个结束标签,在后面添加上搜索框调用代码:

<div class="header-search"><?php get_search_form(); ?></div>

这时候,打开首页,就能看见顶部搜索框了,但是并不美观。接下来在自定义CSS中进行美化

.header-search {
	float: right;
	margin-top: -50px;
	margin-right:30px;
}

#searchsubmit {
	font-size: 13px!important;
	height: 29px;
	line-height: 18px!important;
	background-color: white;
	background-image:none;
	padding:5px 10px;
	box-shadow:none !important;
}

#searchsubmit:hover {
	color:#404040;
}

@media (max-width: 650px) {
	.header-search {
		margin-top:10px;
		text-align:center;
		float:none;
		margin-right:0px;
	}
	.main-navigation  {
		clear:both;
	}
}

#submit {
	font-size: 13px!important;
	height: 29px;
	line-height: 18px!important;
	background-color: white;
	background-image:none;
	padding:5px 10px;
	box-shadow:none !important;
}

#submit:hover {
	color:#404040;
}

#submit:submit {
	color:#404040;
	box-shadow:none !important;
}

button {
	font-size: 13px!important;
	height: 29px;
	line-height: 18px!important;
	background-color: white !important;
	background-image:none !important;
	padding:5px 10px;
	box-shadow:none !important;
}

botton:hover {
	color:#404040;
}

.menu-toggle.toggled-on {
	color:#404040;
	background-color:white !important;
	background-image:none !important;
	box-shadow:none !important;
	border:1px solid #ccc;
}

有一点需要注意,主题更新后,加在header.php中的代码会被更新掉,需要手动加回来,或者也可以建立一个子主题保存更改。

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注