WordPress’te jQuery Tabber Widget’ı Nasıl Eklenir

Popüler sitelerde tek bir tıklamayla popüler, son ve öne çıkan gönderileri görmenizi sağlayan bir sekme alanı gördünüz mü? Buna jQuery tabber widget’ı denir ve farklı widget’ları tek bir widget’ta birleştirerek kullanıcı ekranında yer kazanmanızı sağlar. Bu makalede, WordPress’te bir jQuery Tabber Widget’ının nasıl ekleneceğini göstereceğiz.

Neden bir jQuery Tabber Widget’ı Eklemelisiniz?

Bir WordPress web sitesi çalıştırırken, sürükle ve bırak widget’larını kullanarak kenar çubuklarınıza kolayca öğe ekleyebilirsiniz. Siteniz büyüdükçe, kenar çubuğunda tüm yararlı içeriği göstermek için yeterli alanınız olmadığını hissedebilirsiniz. İşte tam da bu noktada bir sekme çubuğu kullanışlı hale gelir. Farklı öğeleri aynı alanda göstermenizi sağlar. Kullanıcılar her bir sekmeye tıklayabilir ve en çok ilgilendikleri içeriği görebilirler. Birçok büyük site bugünün, bu haftanın ve bu ayın popüler makalelerini göstermek için bunu kullanıyor. Bu eğitimde size bir tabber widget’ının nasıl oluşturulacağını göstereceğiz. Ancak sekmelerinize ne ekleyeceğinizi göstermeyeceğiz. Temelde istediğiniz her şeyi ekleyebilirsiniz.

Not: Bu eğitim orta seviye kullanıcılar içindir ve HTML ve CSS bilgisi gerektirecektir. Başlangıç seviyesindeki kullanıcılar için lütfen bu makaleye bakın.

WordPress’te jQuery Tabber Widget’ı Oluşturma

Hadi başlayalım. Yapmanız gereken ilk şey masaüstünüzde bir klasör oluşturmak ve adını wpbeginner-tabber-widget koymak. Bundan sonra, Not Defteri gibi bir düz metin düzenleyici kullanarak bu klasörün içinde üç dosya oluşturmanız gerekir.

Oluşturacağımız ilk dosya wpb-tabber-widget.php‘dir. Sekmeler ve özel bir WordPress widget’ı oluşturmak için HTML ve PHP kodu içerecektir. Oluşturacağımız ikinci dosya wpb-tabber-style.css‘dir ve sekmeler kabı için CSS stilini içerecektir. Oluşturacağımız üçüncü ve son dosya ise wpb-tabber.js olup sekmeleri değiştirmek ve animasyon eklemek için jQuery betiğini içerecektir.

wpb-tabber-widget.php dosyası ile başlayalım. Bu dosyanın amacı bir widget kaydeden bir eklenti oluşturmaktır. İlk kez bir WordPress widget’ı oluşturuyorsanız, özel bir WordPress widget’ı nasıl oluşturulur kılavuzumuza göz atmanızı veya bu kodu kopyalayıp wpb-tabber-widget.php dosyasına yapıştırmanızı öneririz:

<?php
/* Plugin Name: WPBeginner jQuery Tabber Widget
Plugin URI: https://www.wpbeginner.com
Description: A simple jquery tabber widget.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/

// creating a widget
class WPBTabberWidget extends WP_Widget {

function WPBTabberWidget() {
		$widget_ops = array(
		'classname' => 'WPBTabberWidget',
		'description' => 'Simple jQuery Tabber Widget'
);
$this->WP_Widget(
		'WPBTabberWidget',
		'WPBeginner Tabber Widget',
		$widget_ops
);
}
function widget($args, $instance) { // widget sidebar output

function wpb_tabber() { 

// Now we enqueue our stylesheet and jQuery script

wp_register_style('wpb-tabber-style', plugins_url('wpb-tabber-style.css', __FILE__));
wp_register_script('wpb-tabber-widget-js', plugins_url('wpb-tabber.js', __FILE__), array('jquery'));
wp_enqueue_style('wpb-tabber-style');
wp_enqueue_script('wpb-tabber-widget-js');

// Creating tabs you will be adding you own code inside each tab
?>

<ul class="tabs">
<li class="active"><a href="#tab1">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>

<div class="tab_container">

<div id="tab1" class="tab_content">
<?php 
// Enter code for tab 1 here. 
?>
</div>

<div id="tab2" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 2 here. 
?>
</div>

<div id="tab3" class="tab_content" style="display:none;">
<?php 
// Enter code for tab 3 here. 
?>
</div>

</div>

<div class="tab-clear"></div>

<?php

}

extract($args, EXTR_SKIP);
// pre-widget code from theme
echo $before_widget; 
$tabs = wpb_tabber(); 
// output tabs HTML
echo $tabs; 
// post-widget code from theme
echo $after_widget; 
}
}

// registering and loading widget
add_action(
'widgets_init',
create_function('','return register_widget("WPBTabberWidget");')
);
?>

Yukarıdaki kodda, önce bir eklenti oluşturduk ve daha sonra bu eklentinin içinde bir widget oluşturduk. Widget çıktısı bölümüne komut dosyaları ve stil sayfası ekledik ve ardından sekmelerimiz için HTML çıktısı oluşturduk. Son olarak widget’ı kaydettik. Unutmayın, her sekmede görüntülemek istediğiniz içeriği eklemeniz gerekir.

Sekmelerimiz için gerekli PHP ve HTML kodunu içeren widget’ı oluşturduğumuza göre, bir sonraki adım bunları sekme kabında sekmeler olarak görüntülemek için jQuery eklemektir. Bunu yapmak için bu kodu kopyalayıp wp-tabber.js dosyasına yapıştırmanız gerekir.

(function($) {
$(".tab_content").hide();
$("ul.tabs li:first").addClass("active").show();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).find("a").attr("href");
//$(activeTab).fadeIn();
if ($.browser.msie) {$(activeTab).show();}
else {$(activeTab).fadeIn();}
return false;
});
})(jQuery);

Artık widget’ımız jQuery ile hazır, son adım sekmelere stil eklemek. Kopyalayıp wpb-tabber-style.css dosyasına yapıştırabileceğiniz örnek bir stil sayfası oluşturduk:

ul.tabs { 
position: relative; 
z-index: 1000; 
float: left; 
border-left: 1px solid #C3D4EA; 
}
ul.tabs li {
position: relative; 
overflow: hidden; 
height: 26px; 
float: left; 
margin: 0; 
padding: 0; 
line-height: 26px; 
background-color: #99B2B7;
border: 1px solid #C3D4EA; 
border-left: none; 
}
ul.tabs li  a{ 
display: block; 
padding: 0 10px; 
outline: none; 
text-decoration: none;
}
html ul.tabs li.active, 
html ul.tabs li.active a:hover { 
background-color: #D5DED9; 
border-bottom: 1px solid #D5DED9; 
}
.widget-area .widget .tabs a  { 
color: #FFFFFF; 
}
.tab_container {
position: relative; 
top: -1px; 
z-index: 999; 
width: 100%; 
float: left; 
font-size: 11px; 
background-color: #D5DED9; 
border: 1px solid #C3D4EA;
}
.tab_content { 
padding: 7px 11px 11px 11px;
line-height: 1.5;
}
.tab_content ul { 
margin: 0;
padding: 0; 
list-style: none; 
}
.tab_content li { 
margin: 3px 0;
 }
.tab-clear {
clear:both;
}

Hepsi bu kadar. Şimdi wpbeginner-tabber-widget klasörünü WordPress sitenizin /wp-content/plugins/ dizinine FTP aracılığıyla yükleyin. Alternatif olarak, klasörü bir zip arşivine de ekleyebilir ve WordPress yönetici alanınızda Eklentiler ” Yeni Ekle bölümüne gidebilirsiniz. Eklentiyi yüklemek için yükleme sekmesine tıklayın. Eklenti etkinleştirildikten sonra, Görünüm ” Widget’lar bölümüne gidin, WPBeginner Tabber Widget’ını kenar çubuğunuza sürükleyip bırakın ve hepsi bu kadar.

Umarız bu eğitim WordPress siteniz için bir jQuery tabber oluşturmanıza yardımcı olmuştur. Sorularınız ve geri bildirimleriniz için aşağıya yorum bırakabilir veya Twitter ya da Google+ üzerinden bize katılabilirsiniz.