WordPress美化：侧边栏实现一图三按钮的效果方法

2023年7月8日18:00:00 发表评论

其实这个一图三按钮效果，一般人还真用不到，但是一直都有掘友来问如何实现。虽然每次都说这个是比较简单的代码，直接浏览器中查看元素复制相应的 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、登录站点后台 >> 外观 >> 小工具 >> 将『文本』小工具添加到指定侧边栏中。

3、接着输入标题（可选，可不输入），并将文本小工具编辑框切换到文本格式，然后将以下代码添加进去并保存即可。

<div id="update_version"><a href="http://jjsoho.com/" target="_blank" rel="noopener"><img title="新手教程" src="http://jjsoho.com/wp-content/uploads/2020/01/xinshou.jpg" alt="新手教程" /></a><a class="blog_link" href="http://jjsoho.com/" target="_blank" rel="noopener">新手教程</a><a class="cms_link" href="http://jjsoho.com/" target="_blank" rel="noopener">最火项目</a><a class="grid_link" href="http://jjsoho.com/" target="_blank" rel="noopener">靠谱项目</a></div>
<div><i class="be be-daohang"></i> 联系方式：<b><a href="http://jjsoho.com/" target="_blank" rel="noopener">QQ/微信</a></b></div>

说明：其他代码不用修改，只需将代码中的链接名称及链接地址等内容修改成自己想要的名称及地址即可。

Tips:

做副业长期赚不到钱的话很容易放弃，特别是对于新手来说，新手刚入行的时候期望值都比较高，以为进来就马上能赚到钱，但是现实却很残酷，很多新手都没能坚持到赚钱的时候。因此，我在朋友圈《加微信》会给大家推荐一些破零项目，钱虽然不多，但是我觉得能让很多新手做副业的信心不那么容易被打垮。

登录