给 WordPress 博客添加 Tabs 标签切换功能
一、准备两个js文件:
jquery-1.3.1.min.js、tabbar.js,你可以直接点击下载。 然后添加到你的博客header部分。
1 <script type="text/javascript" src="http://blog.gexiaofei.com/wp-content/themes/thesis/custom/js/jquery-1.3.1.min.js"></script>
2 <script type="text/javascript" src="http://blog.gexiaofei.com/wp-content/themes/thesis/custom/js/tabbar.js"></script
二、准备tabs切换代码
下面是我博客上使用的代码,可以根据自己需要修改。
1 <div class="box">
2 <div id="menu">
3 <ul id="tabMenu">
4 <li class="posts selected">最新文章</li>
5 <li class="comments">最新评论</li>
6 <li class="category">文章分类</li>
7 <li class="tags">热门话题</li>
8 </ul>
9 </div>
10 <div class="boxTop"><p></p></div>
11 <div class="boxBody">
12 <div id="posts" class="show">
13 <ul>
14 <?php wp_get_archives('title_li=&type=postbypost&limit=10'); ?>
15 </ul>
16 </div>
17 <div id="comments">
18 <?php get_recent_comments_only (); ?>
19 </div>
20 <div id="category">
21 <ul>
22 <?php wp_list_categories('title_li='); ?>
23 </ul>
24 </div>
25 <div id="tags">
26 <?php wp_tag_cloud('smallest=8&largest=22'); ?>
27 </div>
28 </div>
29 <div class="boxBottom"></div>
30 </div
把这段代码放到自己想要提供Tabs切换功能的地方,譬如我是放在sidebar.php里的。
三、设置CSS文件
1 /******Tabbed Sidebar****/
2 .box {margin-bottom:1.2em;}
3 #tabMenu {margin:0;list-style:none;}
4 #tabMenu li {float:left;cursor:pointer;cursor:hand;font-size:14px;margin-right:5px;padding:2px;}
5 li.posts,li.comments,li.tags,li.category {padding-left:5px;}
6 li.selected {font-weight:bold;}
7 .boxTop {clear:both;height:0.2em;;margin-bottom:2px;margin-top:0;background:#F5F5E5 none repeat scroll 0 0;}
8 *html .boxTop {height:1px;padding:0px;}
9 .boxBody div {display:none;}
10 .boxBody div.show {display:block;}
11 .boxBody div ul {list-style-image:none;list-style-position:outside;list-style-type:square;padding-left:15px;}
12 *html .boxBody div ul {margin-left:10px;padding-left:10px;}
13 .boxBody div li {border-bottom:1px dotted #8e8e8e; padding:4px 0;font-size:1.3em;line-height:1.2em;}
14 .boxBody div li a:hover{text-decoration:underline;}
15 *html .boxBody div ul {margin-left:10px;padding-left:15px;
可以按照自己的需求调整,跟自己的主题风格匹配。
需要说明的是这个tabs切换功能是基于jQuery 1.3.1的,所以低版本jQuery可能不适用。另外,在sidebar中添加的代码功能,最新评论部分我是使用自己修改出来的函数获得最新评论信息的,所以你需要使用别的插件或者改成其他信息。
转载于:https://www.cnblogs.com/gszhl/articles/1449010.html
给 WordPress 博客添加 Tabs 标签切换功能相关推荐
- wordpress添加媒体_如何向您的WordPress博客添加表情符号支持
wordpress添加媒体 Emojis are fun and cute. They allow you to express yourself without using too many wor ...
- WordPress博客添加看板娘
效果如下: WordPress博客添加看板娘(送37套服饰) 1. 从我的github下载压缩包 该压缩包已经自带37套服饰.支持换装功能.支持经典动漫台词展示.未来还会支持钉宫日语50音发声喔~ ...
- 如何使WordPress博客添加多个sidebar侧边栏
https://www.cnblogs.com/lydbk/p/4609736.html 如何使WordPress博客添加多个sidebar侧边栏 在制作wordpress模版的时候,也许你会遇到一个 ...
- php语录网站,杨泽业:给你的wordpress博客添加经典语录功能,适合所有php网站
我们做一个网站就是要不断给访客 提供最佳的用户体验,同时 提升自己的品牌价值,而文章结束的经典语录的功能,完全可以实现我们所要达到的效果.(如下图) 给你的wordpress博客添加经典语录功能 这个 ...
- wordpress博客添加新浪微博挂件
我一直想着把我的新浪微博嵌入到博客中,今天抽空到网上搜索了一下相关的插件,没有找到.后来看到了一篇如何把微博嵌入WordPress博客的方法,终于实现成功了.感谢分享这些的朋友们. 一直想着把我的新浪 ...
- php如何添加音乐播放器,怎么为Wordpress博客添加MP3播放器
怎么为Wordpress博客添加MP3播放器? 首先到Flash MP3 Player 的主页上下载该程序.解压缩之后,将 mp3player.swf 和 ufo.js 两个文件放到服务器上,这里假设 ...
- #WordPress小技巧#纯代码为自己博客添加支付宝/微信打赏功能
原文:https://www.wn789.com/13323.html 很多人的WordPress博客在文章尾部都有打赏功能,让读者可以直接通过扫描微信.支付宝二维码进行赞助,毕竟维护博客,编写博文需 ...
- Hexo + yilia 主题 +githubpages博客添加友言评论功能
前言 Hexo博客的Yilia主题中评论系统只提供了畅言.网易云跟帖.多说和Disqus. 由于多说评论.网易云跟帖已经关闭系统,畅言需要域名备案,而github是国外的,没有备案,所以尝试了其他第三 ...
- 为你的CSDN博客添加CNZZ流量统计功能
一.流量统计介绍 流量统计是指通过各种科学的方式,准确的纪录来访某一页面的访问者的流量信息,目前而言,必须具备可以统计. 1.简介 统计独立的访问者数量(独立用户.独立访客): 可以统计独立的IP地址 ...
最新文章
- linux驱动导出文件属性,linux驱动入门——模块参数和导出符号
- 宁夏大学数学与计算机学院,刘续-宁夏大学信息工程学院
- 牛人的博客(机器学习,图像处理,计算机视觉)
- 机器学习:如何在安卓上集成TensorFlow
- [JLOI2015]战争调度
- 重启计算机后桌面顺序是反的,Win10系统为什么重启电脑之后桌面上的图标排列顺序被打乱该如何处理...
- unet图像分割_UNet++解读 + 它是如何对UNet改进 + 作者的研究态度和方式
- 缠论108课_缠论108课第54课:股票具体的走势—图解分析示范
- Activity中四大启动模式
- Oracle 11g ADG 配置没问题,但死活不同步案例
- mongodb常用操作——命令行
- slice indices must be integers or None or have an __index__ method
- html文件一打开就未响应,我的电脑里的文件一右击就未响应是什么状况 求解决...
- linux播放csf文件
- froglt教你使用色相环配色(原创理论)
- ArcGIS 实验理论基础二十二 空间插值
- 微信缓存css怎么清理,前端清除缓存方法(微信缓存引起的bug)
- Word如何转PDF
- 渗透测试之信息收集漏洞库篇
- 快搜搜:让你辞职原因有哪些?
热门文章
- 2021-04-23 商业文章版权协议分类
- 使用postman调试web API
- GDAL源码剖析(二)之编译说明
- C# BackGroundWorker 的简单使用
- iphone各机型参数对比_现在买哪一款iPhone更“香”?
- 如何手动释放linux内存的方法,centos手动释放内存的方法
- jquery mysql jsp_jsp+jquery+mysql实现的一个简单的学生管理系统
- ubuntu安装pip,setuptools
- android期末大作业_关于大学期末的一点碎碎念
- Spark Streaming的IDEA操作在spark操作的差别和解决