• 心动官网已成功升级到全新模板,还在持续优化中,感谢大家长久以来的支持!
  • 全新主题,全新体验,流畅到爆!有BUG欢迎及时提出!
  • 已停用又拍云,本站无经济收入,无法续费坚持下去使用CDN……
  • 时间太久的文章中失效链接已清除,如发现没有链接的,那么就是已失效的!
  • 幻灯片出现BUG,心动正在寻找替换方案。

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

学习教程 心动 4个月前 (08-04) 213次浏览 已收录 8个评论 扫描二维码

可能有的人不太明白什么是一图三按钮的效果,其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮,具体效果请移步参观懿古今站点侧边的一图三按钮效果,或见下图所示:

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 target="_blank" href="http://yigujin.cn/1208.html"><img src="https://tp.yigujin.cn/170204_Nana.jpg?imageslim" title="Nana主题升级到3.1版本" alt="Nana主题升级到3.0版本"></a><a target="_blank" href="http://yigujin.cn/nanablog/" class="blog_link">博客布局</a><a target="_blank" href="http://yigujin.cn/" class="cms_link">杂志布局</a><a target="_blank" href="http://yigujin.cn/nanagrid/" class="grid_link">图片布局</a></div>

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

这个一图三按钮的效果,不单单适用于 WordPress,也适用于 zblogPHP 站点的侧边栏,更是适用于其他程序所见的站点侧边栏。当然,如果添加到不到侧边栏的地方应该也是可以,具体效果请自行测试和修改。

心动博客 , 版权所有丨如未注明 , 均为原创丨本网站采用WordPress制作
转载请注明原文链接:WordPress侧边栏如何实现一图三按钮的效果?
喜欢 (0)
关于作者:

要想成功,你必须自己制造机会,绝不能愚蠢地坐在路边,等待有人经过,邀请你同往财富与幸福之路。——歌夫

发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 没有侧边栏的我飘过
    晴和君2017-08-17 16:34 Reply Mac OS X | Safari浏览器 603.3.8
    • :evil: 简洁是美
      心动2017-08-17 16:41 Reply Windows 10 | Chrome 60.0.3112.101
  2. 这个功能看着还挺不错的。
    themebetter2017-08-08 10:04 Reply Windows 10 | Chrome 53.0.2785.104
    • ;-) 是的,偶尔用用很不错,老古出品,必属精品啊~
      心动2017-08-08 10:20 Reply Windows 10 | Chrome 60.0.3112.78
  3. 偶尔用用这个功能还是挺不错的
    boke112导航2017-08-04 21:32 Reply Windows 7 | Chrome 55.0.2883.87
    • 功能非常不错,本地测试了下,不过我网站现在没有放这个小工具的打算,支持博主放出这么好的教程。 :evil:
      心动2017-08-04 21:43 Reply Mac OS X | UC浏览器 UCBrowser
  4. 已阅!
    老地儿2017-08-04 17:00 Reply Linux | Safari浏览器 534.30
    • :smile: 感谢支持!
      心动2017-08-04 17:12 Reply Windows 10 | Chrome 60.0.3112.78