Tabs didalam WordPress
Posted: July 12th, 2008 | Author: Bali Web Maker | Filed under: Wordpress | No Comments »
kali ini kita coba gabungin jquery tabs supaya bisa terintegasi di WordPress
File jquery yang dipakai didapat dari paket yang sudah di donlot di web http://stilbuero.de/jquery/tabs/:
- jquery-1.1.3.1.pack.js
- jquery.history_remote.pack.js
- jquery.tabs.js
- jquery.tabs.pack.js
- jquery.tabs-ie.css
- jquery.tabs.css
- loading.gif
- tab.png
Masukan file diatas ke dalam folder js dan kemudian kita letakan didalam folder themes wordpress kitamisal saya punya themes folder dengan nama bali maka folder js tadi kita terletak di wp-content/themes/bali/js
Untuk file themes wordpress sendiri ada dua file yang harus kita tambahkan yaiut header.php dan sidebar.php) ditambah dengan file jquery.tabs.php yang kita buat sendiri.
Buka file header.php dan tambahkan baris kode dibwaha ini, letakan sebelum tag </head>
<!– Additional IE/Win specific style sheet (Conditional Comments) –>
<!–[if lte IE 7]>
<link rel=”stylesheet” href=”<?=bloginfo(‘stylesheet_directory’) .’/js/jquery.tabs-ie.css’;?>” type=”text/css” media=”projection, screen”>
<![endif]–>
<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/jquery-1.1.3.1.pack.js’;?>” type=”text/javascript”></script>
<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/jquery.history_remote.pack.js’;?>” type=”text/javascript”></script>
<script src=”<?php echo bloginfo(stylesheet_directory) .’/js/jquery.tabs.pack.js’;?>” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function() {
$(‘#container-a’).tabs({ fxShow: { height: ‘show’, opacity: ‘show’ }, fxSpeed: ‘normal’, fxAutoHeight: true });
});
</script>
karena gue mau si tab keluar di sidebar , maka kita edit sidebar.php dan tambahkan baris berikut ini
Dan untuk file jquery.tabs.php yang kita buat maka kita isi file tersebut dengan kode dibawah ini
<ul>
<li><a href=”#fragment-1″ title=”<?php _e(‘Latest Headlines’); ?>”><span><?php _e(‘Latest Post’); ?></span></a></li>
<li><a href=”#fragment-2″ title=”<?php _e(‘Categories’); ?>”><span><?php _e(‘Popular Post’); ?></span></a></li>
<li><a href=”#fragment-3″ title=”<?php _e(‘Categories’); ?>”><span><?php _e(‘Categories’); ?></span></a></li>
</ul>
<div id=”fragment-1″>
<?php rewind_posts(); ?>
<ul>
<?php $posts = get_posts(‘numberposts=10&offset=0′); foreach ($posts as $post): setup_postdata($post); ?>
<li><a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”><?php the_title(); ?></a></li>
<?php endforeach; ?>
</ul>
</div>
<div id=”fragment-2″>
<ul>
<?php
if(function_exists(akpc_most_popular)) {
akpc_most_popular($limit = ’10′, $before = ‘<li>’, $after = ‘</li>’);
}
else {
$result = $wpdb->get_results(“SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10″);
foreach ($result as $topten) {
$postid = $topten->ID;
$title = $topten->post_title;
$commentcount = $topten->comment_count;
if ($commentcount != 0) { ?>
<li><a href=”<?php echo get_permalink($postid); ?>” title=”<?php echo $title ?>”><?php echo $title ?></a></li>
<?php } } } ?>
</ul>
</div>
<div id=”fragment-3″>
<ul>
<?php wp_list_categories(‘sort_column=name&optioncount=1&hierarchical=0&offset=5&title_li=’); ?>
</ul>
</div>
</div>
<br class=”clear” />
Nah gitu aja, harusnya sih dia udah muncul, kalo di Mozilla Firefox bisa endah banget, tapi kalo di IE jangan dimasukin kode adsense atau javascript di dalamnya, suka error.
Leave a Reply