前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >WordPress给网站右侧边栏添加百度一下协助SEO优化(以子比主题为例)[WP教程]

WordPress给网站右侧边栏添加百度一下协助SEO优化(以子比主题为例)[WP教程]

作者头像
帝旭科技
发布2022-11-23 18:49:43
4070
发布2022-11-23 18:49:43
举报
文章被收录于专栏:帝讯博客帝讯博客

文章目录[隐藏]

前言

大家在做网站的时候,seo会是一个问题,我们可以让用户在浏览我们网站的时候协助我们seo

废话不多说,先看一下成品是什么样子的吧!

效果演示

作用

这个小工具可以协助网站优化百度 SEO,让用户在浏览我们网站的时候协助我们seo,最早是在 emlog 程序才有的,现在 WordPress 程序也是可以完美适配的

添加教程

首先把下面的代码复制然后在 wordpress 程序的主题小工具中添加自定义 HTML代码。

大家自行修改一下代码里面的网站内容即可,千万不要乱删除。 路径:WordPress 后台——外观——小工具——自定义 HTML——复制代码粘贴代码进去——首页-侧边栏

代码如下

[hidecontent type="reply" desc="隐藏内容:评论后查看"]

第一步:添加小工具-自定义HTML代码:

代码语言:javascript
复制
<div class="searchs">
<div class="tit"><strong>百度一下</strong></div>
<mip-form method="get" url="https://www.baidu.com/s" class="mip-element mip-layout-container">
<form action="https://www.baidu.com/s" method="GET" target="_blank">
<input type="text" name="wd" validatetarget="q" validatetype="must" placeholder="请输入搜索词" value="帝讯博客">
<div target="q">关键词不能为空</div><input type="submit" value="搜索">
</form>
</mip-form>
</div>

第二步:在模板的自定义CSS样式中添加如下代码:

代码语言:javascript
复制
/*百度一下*/
/*by:帝讯博客-www.dixublog.cn*/
.searchs {
background-color: #fff;
border: 1px solid #eaeaea;
padding: 15px;
overflow: hidden;
transition: all 0.3s;
border-radius: 4px;
position: relative;
margin: 0px 0px 15px 0px;
}
.mip-layout-container, .mip-layout-fixed-height {
margin: 0px 0px 0px 0px;
display: block;
position: relative;
}
mip-form form {
position: relative;
}
.searchs input[type="text"] {
border: #45B6F7 1px solid;
border-radius: 4px;
width: calc( 100% - 2px );
}
mip-form input[type='text'], mip-form input[type='input'], mip-form input[type='datetime'], mip-form input[type='email'], mip-form input[type='number'], mip-form input[type='tel'], mip-form input[type='url'] {
padding-right: 30px;
}
.searchs input {
outline: none;
}
mip-form input, mip-form textarea, mip-form select {
border: 1px solid #f1f1f1;
padding: 6px;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
resize: none;
font-size: 16px;
}
mip-form div {
display: none;
color: #ec1f5c;
font-size: 12px;
text-align: left;
padding: 0 10% 0 3%;
}
.searchs input[type="submit"] {
position: absolute;
right: 2px;
top: 2px;
background-color: #45B6F7;
color: #fff;
font-size: 13px;
margin: 1px;
height: 31px;
line-height: 31px;
padding: 0 10px;
font-family: "å¾è½¯é›…黑";
}
mip-form input[type='submit'] {
border: 1px solid #f1f1f1;
border-radius: 5px;
color: #333;
background-color: #d8d7d7;
}
.searchs input {
outline: none;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 14px;
}
.tit strong {
font-weight: normal;
}
.tit {
background-color: #FF5E52;
position: relative;
top: -15px;
display: inline-block;
color: #fff;
padding: 4px 15px;
font-size: 14px;
}
/*by:帝讯博客-www.dixublog.cn*/
/*百度一下*/

[/hidecontent]

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 效果演示
  • 作用
  • 添加教程
  • 代码如下
    • 第一步:添加小工具-自定义HTML代码:
    • 第二步:在模板的自定义CSS样式中添加如下代码:
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档