博客实现多合一标签(按钮)的方法

如果您一直都是使用收费的WordPress主题,您应该注意到了不少主题的侧边栏往往带有一些比较特殊的标签按钮,就如上图所示的,三个按钮同在一行,点击其中一个按钮,就会在下方同一个位置显示与其相应的内容,不少博客将它们显示为最近文章,最近评论和归档文章等等。这样做的目的主要是为了在有限的空间里能够容纳更多内容。这样的效果实现起来也不难,向大家解释一下,继续往下看吧!

jquery-tabs
首先,我们需要用到两个文件,一个js文件,另一个css样式文件,下载此压缩包Domtabs ,将其解压缩,就可以看到这两个文件了:

QQ截图未命名

将domtab.js和domtab.css这两个文件统统放到当前主题夹下,然后再将下面这段script代码复制并粘贴到主题header.php文件中,也就是</head>标签之前:

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/domtab.js"></script>
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/domtab.css" media="screen" />

为了让标签按钮显示出来,将以下的css及html代码放到主题模板任何您想要显示按钮的地方即可,一般是侧边栏(sidebar.php),这样可以加上一些php代码,实现较多功能;或者可以到后台的小工具那里将一个文本小工具直接拖到侧边栏,这样可能更简单一些,但想要实现的功能就少一些,因为您不能直接添加php代码。

<div class="domtab">
<ul class="domtabs">
<li><a href="#t1">按钮-1</a></li>
<li><a href="#t2">按钮-2</a></li>
<li><a href="#t3">按钮-3</a></li>
</ul>
<div>
<a name="t1" id="t1"></a>
<p>这里加入您想要显示的内容,比如一个插件的代码等。</p>
</div>
<div>
<a name="t2" id="t2"></a>
<p>这里是第二个按钮对应要显示的内容。</p>
</div>
<div>
<a name="t3" id="t3"></a>
<p>这里是第三个按钮对应要显示的内容。<p>
</div>
</div>

以上按钮部份的名称及下面要添加的内容都是可以按需要从修改的,整个按钮的外观也可以通过修改样式文件domtab.css来改变。

代码来源:blogohblog

如无特别说明,本站文章皆为原创,若要转载,必须注明以下原文信息:
日志标题: 《博客实现多合一标签(按钮)的方法》
日志链接: http://www.chenchunlin.info/all-in-one-tabs.html
博客名称: Chenchunlinblog

This entry was posted in WordPress and tagged . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.

欢迎发表评论

我们不会公开您的邮箱地址, 标有*号的是必填项哦!

*
*

您可以使用这些HTML标签及其属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>