Home > 博客资讯 > WordPress教程:教你如何在侧边轻松加上Tab栏


8,399 views/ 2008.10.05 / 9:09 上午

What’s the best script?

The recent blog redesign gave me a bit of a head ache. In order to implement the tabbed navigation from my sidebar, I had to test a couple of scripts. I know all of them integrate like a charm on other WordPress blogs, but for one reason or another, each time I finished setting up and customizing a certain script, some new weird bug showed up.

The problems were caused by various factors (some of them very weird): having other anchor links (like #comments) in my WordPress theme, a conflict between Prototype framework used by WordPress and jQuery used by a script, etc, etc.

So after testing DomTab, Tabifier and idTabs, I finally managed to get the job done. When all hope was lost, I thought I should give Yahoo! UI Library a shot. They have this really neat component called TabView, which in my case worked like clockwork. On top of that, it’s pretty quick and has absolutely no flicker or delay when loading the content. All the other scripts had at least a small delay.

I saw implementations of each of the above mentioned scripts on WordPress and they all have pretty much the same HTML structure. Still, I think the Yahoo! TabView is the best choice.
Implementing Yahoo! TabView

In this WordPress tutorial I won’t go into too many details about the script or HTML, since you can get all that info from the TabView homepage. Instead, I will focus on the specifics of using this script with WordPress, as well as pointing out what CSS code you need to add to your style.css file, for a seamless integration with your WordPress theme.

First of all, you need to know that you won’t be able to insert widgets into the tabbed navigation, using the visual editor from WordPress admin. You can still add widgets, but outside the tabbed navigation.

I personally stopped using widgets in themes that I design for myself. So if you are ready to “get your hands dirty” and really customize your own theme, I think this is the best way to go.

So just add the script reference to your header.php and the HTML code to the sidebar.php file. Now you’re ready to perform some CSS surgery. 😉 We’ll use the script’s built-in styles.

WordPress Tutorial: Adding tabs to your blog sidebar | Custom WordPress Theme Design.

Categories: 博客资讯 Tags: ,

Comments (3) Trackbacks (0) 本篇共有 3 篇评论↓
  1. 十月 7th, 2008 at 14:46 | #1


  2. 十月 8th, 2008 at 00:13 | #2

    @hhuy: 确实,挺实用的:)

  3. 十月 24th, 2008 at 11:08 | #3

    倒 、、、

  1. No trackbacks yet.