Wordpress主题制作之DOMTab, Tabber应用
大家在许多所谓的Premium WordPress Theme主题里是不是经常会看到这样的效果，今天无意中发现了一篇介绍如何实现的文章，但很可惜是英文的，我自己看后总结了一点介绍给大家！
要实现这样的效果，可以通过DOMTab和Tabber来实现.现在我先来说一说：
一.DOMTab：你可以在这里下载
a.下载之后请把domtab.js，domtab.css上传到你的wordpress主题文件夹根目录，如我的主题是options，那就上传到options/文件夹下，然后在你的wordpress主题的header.php文件的<head>和</head>之间加入：
PHP:
-
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/domtab.js'; ?>"></script>
-
<script type="text/javascript">
-
document.write('<style type="text/css">');
-
document.write('div.domtab div{display:none;}<');
-
document.write('/s'+'tyle>');
-
</script>
-
<link rel="stylesheet" href="<?php echo bloginfo(stylesheet_directory) .'/domtab.css'; ?>" type="text/css" media="screen" />
b.在你的模板的sidebar.php文件里或任何你想加的地方加入：
HTML:
-
<div id=”dom ” class=”domtab doprevnext”>
-
<ul class=”domtabs”>
-
</ul>
-
<?php query_posts('showposts=10'); ?>
-
<?php while (have_posts()) : the_post(); ?>
-
<?php endwhile;?>
-
<p><a href=”#top”>回到顶部</a></p>
-
</div>
-
<div>
-
<h2><a name=”t2″ id=”t2″>最受欢迎</a></h2>
-
<?php if (function_exists('get_most_viewed')) : ?>
-
<p><?php get_most_viewed(); ?</p>
-
<?php endif; ?>
-
-
<p><a href=”#top”>回到顶部</a></p>
-
</div>
-
<div>
-
<h2><a name=”t3″ id=”t3″>分类</a></h2>
-
<p><?php wp_list_cats(’sort_column=name& amp;optioncount=1 &hierarchical=0′); ?>
-
</p>
-
<p><a href=”#top”>回到顶部</a></p>
-
</div>
-
<div>
-
<h2><a name=”t4″ id=”t4″>归档</a></h2>
-
<p><?php wp_get_archives(’type=monthly’); ?> </p>
-
</div>
-
</div>
二.Tabber：你可以在这里下载
a.同样的把你下载的example.css，tabber.js上传到你的wordpress主题文件夹根目录，如我的主题是options，那就上传到options/文件夹下，然后在你的wordpress主题的header.php文件的<head>和</head>之间加入：
PHP:
-
<script type="text/javascript" src="<?php echo bloginfo(stylesheet_directory) .'/tabber.js'; ?>"></script>
-
<script type="text/javascript">
-
document.write('<style type="text/css">.tabber{display:none;}<\/style>');
-
</script>
-
<link rel="stylesheet" href="<?php echo bloginfo(stylesheet_directory) .'/example.css'; ?>" type="text/css" media="screen" />
b.在你的模板的sidebar.php文件里或任何你想加的地方加入：
HTML:
-
<div class=”tabber”>
-
<div class=”tabbertab”>
-
<h2>最新日志</h2>
-
<p><?php query_posts('showposts=10'); ?>
-
<?php while (have_posts()) : the_post(); ?>
-
<?php endwhile;?>.</p>
-
</div>
-
<div class=”tabbertab”>
-
<h2>最受欢迎</h2>
-
<?php if (function_exists('get_most_viewed')) : ?>
-
<p><?php get_most_viewed(); ?</p>
-
<?php endif; ?>
-
</div>
-
<div class=”tabbertab”>
-
<h2>分类</h2>
-
<p><?php wp_list_cats(’sort_column=name& amp;optioncount=1 &hierarchical=0′); ?>
-
</p>
-
</div>
-
<div class=”tabbertab”>
-
<h2>归档</h2>
-
<p>><?php wp_get_archives(’type=monthly’); ?></p>
-
</div>
-
</div>
注意：你看到的和演示不同的是因为CSS样式的原因，另外你可以自定义显示内容！
呵呵，我只是照葫芦画的，有不对的地方请大虾指正，我也不想误导大家！