WordPress侧边栏如何实现一图三按钮的效果?

一点优化
一点优化
一点优化
478
文章
49
评论
2019年12月27日18:36:02
评论
730看 1681字

可能有的人不太明白什么是一图三按钮的效果,其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮,具体效果看下图一图三按钮效果,或见下图所示:
WordPress侧边栏如何实现一图三按钮的效果?
其实这个一图三按钮效果,一般人还真用不到,所以我就没有整合到Nana主题中,但是一直都有博主来问如何实现。虽然每次都说这个是比较简单的代码,直接浏览器中查看元素复制相应的 HTML 代码及 CSS 代码即可,但是还是有很多人不太懂得如何下手去折腾,所以今天就特意把它写成教程,以便让更多喜欢这个效果的博主们能够用上它。

侧边栏实现一图三按钮效果步骤

1、将以下 CSS 代码添加到所使用主题的 style.css 文件中

#update_version img{margin:5px 0 15px}

#update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff}
.blog_link{background-color:#2ba9fa}
.blog_link,.cms_link{float:left;margin-right:5%}
.cms_link{background-color:#ff6969}
.grid_link{float:left;background-color:#70c041}

2、登录站点后台 >> 外观 >> 小工具 >> 将『文本』小工具添加到指定侧边栏中。
WordPress侧边栏如何实现一图三按钮的效果?
3、接着输入标题(可选,可不输入),并将文本小工具编辑框切换到文本格式,然后将以下代码添加进去并保存即可。
WordPress侧边栏如何实现一图三按钮的效果?

<div id=“update_version”><a href=“http://v.seoqe.com/” target=“_blank” rel=“noopener”><img title=“投稿中心” src=“https://ww1.sinaimg.cn/large/005BYqpgly1fruweqkscjj308c05k74e.jpg” alt=“投稿网址” /></a><a class=“blog_link” href=“http://v.seoqe.com/” target=“_blank” rel=“noopener”>手心影院</a><a class=“cms_link” href=“http://xs.seoqe.com/” target=“_blank” rel=“noopener”>手心小说网</a><a class=“grid_link” href=“https://www.seoqe.com/about.html” target=“_blank” rel=“noopener”>关于我们</a></div>
<div>
<a href=“https://www.seoqe.com/%E7%BB%99%E6%88%91%E6%8A%95%E7%A8%BF.html” rel=“noopener” target=“_blank”>点击在线投稿</a>
投稿邮箱:<b>888@seoqe.com</b>
交流 Q群:<b><a href=“https://shang.qq.com/wpa/qunwpa?idkey=c2243c59c200c27b61f6780f568b4ff0e734842c3fce633fdfaf0c885d602f9d” rel=“noopener” target=“_blank”>553851850</a></b></div>

说明:其他代码不用修改,只需将代码中的链接名称及链接地址等内容修改成自己想要的名称及地址即可。
企鹅SEO已经根据以上教程在侧边栏实现了一图三按钮的效果,具体效果请移步企鹅seo侧边栏或见下图:
WordPress侧边栏如何实现一图三按钮的效果?温馨提示
这个一图三按钮的效果,不单单适用于 wordpress,也适用于 zblogPHP 站点的侧边栏,更是适用于其他程序所见的站点侧边栏。当然,如果添加到不到侧边栏的地方应该也是可以,具体效果请自行测试和修改。

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: