本文介绍了如何在WordPress子比主题的侧边栏添加一个百度搜索小工具,以帮助网站优化SEO。通过复制提供的HTML、CSS和JavaScript代码,用户可以在后台自定义HTML小工具中实现该功能。代码包含搜索框和按钮,点击按钮后会跳转到百度搜索结果页面。样式支持明暗模式切换,界面简洁美观。操作简单,适合网站管理员快速部署。
![图片[1]轩玮博客-探索建站技术,分享专业见解IT博客子比主题-侧边栏添加百度一下小工具轩玮博客-探索建站技术,分享专业见解IT博客轩玮博客](https://img.xuwbk.com/uploads/2025/06/18.jpg)
此效果为子比论坛网友写的一款样式,原文地址侧边栏加入一个帮助网站SEO的小工具
复制下面代码 添加到wordpress后台-外观-小工具-自定义HTML中即可(信息自行修改)
<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>















暂无评论内容