子比主题 – 侧边栏帮助网站SEO的小工具
这篇文章之前我也写过一款帮助SEO小工具，那个是比较有色彩的，不过这篇文章是非常简约的一款侧边栏seo搜索小工具，喜欢的自行部署吧！代码部署
将下面的代码放到：WP后台–>>外观–>>小工具
<!-- 侧边栏搜索组件容器 -->
<div class="search-widget">
<!-- 顶部宣传横幅 -->
<div class="banner">百度一下-协助本站SEO</div>
<!-- 搜索输入区域 -->
<div class="search-container">
<input type="text" id="searchInput"
placeholder="腾飞博客"
value="腾飞博客">
<button onclick="handleSearch()">搜索</button>
</div>
</div>
<style>
/* 组件基础样式 */
.search-widget {
width: 100%;
margin: 10px 0;
transition: all 0.3s;
}
/* 顶部横幅样式 - 修改部分 */
.banner {
background: #FE3459; /* 改为指定的红色 */
color: white;
padding: 12px;
text-align: left; /* 文字左对齐 */
border-radius: 4px 4px 0 0;
font-size: 14px;
}
/* 搜索区域布局 */
.search-container {
display: flex;
gap: 8px;
padding: 12px;
background: inherit;
border-radius: 0 0 4px 4px;
border: 1px solid #dfe1e5;
}
/* 输入框样式 */
#searchInput {
flex: 1;
padding: 8px 12px;
border: 1px solid #dfe1e5;
border-radius: 4px;
font-size: 14px;
background: inherit;
color: inherit;
}
/* 按钮基础样式 - 修改部分 */
button {
padding: 8px 16px;
background: #0066FF; /* 改为指定的蓝色 */
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s;
}
/* 按钮悬停效果 - 修改部分 */
button:hover {
background: #0047B3; /* 对应深蓝色 */
}
/* 暗黑模式适配 */
body.dark-mode .search-container {
border-color: #5f6368;
background: #202124;
}
body.dark-mode #searchInput {
background: #303134;
border-color: #5f6368;
color: #e8eaed;
}
/* 保持暗黑模式按钮原样式 */
body.dark-mode button {
background: #8ab4f8;
color: #202124;
}
body.dark-mode button:hover {
background: #aecbfa;
}
</style>
<script>
// 搜索功能保持不变
function handleSearch() {
const keyword = document.getElementById('searchInput').value;
window.open(
`https://www.baidu.com/s?wd=${encodeURIComponent(keyword)}`,
'_blank'
);
}
</script>
页:
[1]