Popüler sitelerde tek bir tıklamayla popüler, en yeni ve öne çıkan gönderileri görmenizi sağlayan bir sekmeli alan gördünüz mü? Bu, jQuery sekmeli widget'ıdır ve farklı widget'ları tek bir yerde birleştirerek kullanıcı ekranında yer tasarrufu yapmanızı sağlar. Bu makalede, WordPress'e bir jQuery Sekmeli Widget eklemeyi göstereceğiz.
Neden Bir jQuery Sekmeli 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 öğeler ekleyebilirsiniz. Siteniz büyüdükçe, kenar çubuğunda tüm faydalı içeriği göstermek için yeterli alanınız olmadığını hissedebilirsiniz. İşte tam da bu noktada bir sekmeli widget işe yarar. Aynı alanda farklı öğeler göstermenizi sağlar. Kullanıcılar her sekmeye tıklayarak en çok ilgilendikleri içeriği görebilirler. Birçok büyük isimli site, popüler makaleleri bugün, bu hafta ve bu ay göstermek için bunu kullanır. Bu eğitimde bir sekmeli widget oluşturmayı göstereceğiz. Ancak, sekmelerinize ne ekleyeceğinizi göstermiyoruz. Temelde istediğiniz herhangi bir şeyi ekleyebilirsiniz.
Not: Bu eğitim orta düzey kullanıcılar içindir ve HTML ve CSS bilgisi gerektirir. Başlangıç seviyesindeki kullanıcılar için lütfen bunun yerine bu makaleye bakın.
WordPress'te jQuery Sekme Widget'ı Oluşturma
Başlamadan önce, masaüstünüzde wpbeginner-tabber-widget adında bir klasör oluşturmanız gerekiyor. Ardından, Not Defteri gibi düz metin düzenleyici kullanarak bu klasörün içine üç dosya oluşturmalısınız.
Oluşturacağımız ilk dosya wpb-tabber-widget.php olacaktır. Bu dosya sekmeler ve özel bir WordPress widget'ı oluşturmak için HTML ve PHP kodu içerecektir. Oluşturacağımız ikinci dosya, sekmeler kapsayıcısı için CSS stilini içerecek olan wpb-tabber-style.css dosyasıdır. Oluşturacağımız üçüncü ve son dosya ise sekmeleri değiştirmek ve animasyon eklemek için jQuery betiğini içerecek olan wpb-tabber.js dosyasıdır.
wpb-tabber-widget.php dosyasıyla başlayalım. Bu dosyanın amacı, bir widget kaydeden bir eklenti oluşturmaktır. Bir WordPress widget'ı oluşturmak sizin için ilk kezse, özel bir WordPress widget'ı oluşturma kılavuzumuza göz atmanızı veya bu kodu wpb-tabber-widget.php dosyasına kopyalayıp 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 ardından bu eklentinin içine bir widget oluşturduk. Widget çıktı bölümünde scriptler ve stil sayfaları ekledik ve ardından sekmelerimiz için HTML çıktısını oluşturduk. Son olarak widget'ı kaydettik. Unutmayın, her sekmede görüntülemek istediğiniz içeriği eklemeniz gerekir.
Sekmelerimiz için gereken PHP ve HTML kodlarıyla widget'ı oluşturduğumuza göre, bir sonraki adım bunları sekme kapsayıcısında sekmeler olarak görüntülemek için jQuery eklemektir. Bunu yapmak için bu kodu wp-tabber.js dosyasına kopyalayıp 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ü FTP aracılığıyla WordPress sitenizin /wp-content/plugins/ dizinine yükleyin. Alternatif olarak, klasörü bir zip arşivine 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, kenar çubuğunuza WPBeginner Sekmeli Widget'ı sürükleyip bırakmak için Görünüm » Widget'lar bölümüne gidin ve hepsi bu.
Bu eğitimimizin WordPress siteniz için bir jQuery sekme oluşturmanıza yardımcı olduğunu umuyoruz. Sorularınız ve geri bildirimleriniz için aşağıya yorum bırakabilir veya Twitter veya Google+ üzerinden bize katılabilirsiniz.
Nitish Chauhan
Merhaba,
Eklentim etkinleştirildi ancak widget bölümünde “Bu widget için seçenek yok.” mesajı gösteriliyor. Lütfen tüm fonksiyonları nasıl etkinleştireceğimi söyler misiniz ve şuna benzer bir eklenti oluşturmak istiyorum:
“jQuery(document).ready(function() {
var wrapper = jQuery(“.input_fields_wrap”); //Alanlar sarmalayıcısı
var add_button = jQuery(“.add_field_button”); //Ekle düğmesi ID
//başlangıç metin kutusu sayısı
jQuery(add_button).click(function(e){ //giriş ekle düğmesine tıklandığında
e.preventDefault();
//izin verilen maksimum giriş kutusu
//metin kutusu artışı
jQuery(wrapper).prepend(‘×’); //giriş kutusu ekle
jQuery(‘.input_fields_wrap’).sortable();
jQuery(‘.input_fields_wrap’).disableSelection();
});
jQuery(wrapper).on(“click”,”.remove_field”, function(e){ //kullanıcı metni kaldırmaya tıkladığında
e.preventDefault(); jQuery(this).parent(‘div’).remove();
});
});”
JavaScript kodum. Eğer bir çözümünüz varsa lütfen önerin.
Teşekkürler
Nabam Rikam
Eklentileri kenar çubuğuna ekledim, ancak tıkladığımda bu eklenti için bir seçenek olmadığını söylüyor. Ve web sitesinde göz attıktan sonra, üç boş sekme görüyoruz. Bana biraz yol göster bro.
goutham
Sitemde sekmeler veya widget'lar alamıyorum. Aynı kodu kopyalayıp yapıştırdım. Çalışmıyor.
Kunle
Oluşturduğum eklentiyi sayfamın herhangi bir yerine, kenar çubuklarına veya altbilgiye değil, yerleştirmek istiyorum.
Bunu, web sayfamın herhangi bir yerine nasıl yerleştirebilirim?
Zadius
Denediğim ikinci eğitim bu ve nedense eklenti dosyası sitemdeki eklenti dizininde görünmüyor. Dosyayı doğrudan FTP kullanarak yüklüyorum ancak wordpress yönetici alanıma giriş yaptığımda eklentiler sekmesinde hiçbir şey görünmüyor. Lütfen tavsiye edin. Teşekkürler.
Güncelleme: Dosyayı zipledim ve wordpress eklenti arayüzü üzerinden yükledim. Dosya FTP arayüzümdeki eklenti klasörümde görünmüyor, bu yüzden nerede göründüğü hakkında hiçbir fikrim yok. Ama kurmayı başardım, teşekkürler!
John
Eğitim için teşekkürler. Ancak, widget'ı widget alanına eklediğimde başlığın eksik olduğunu fark ettim. Başlık girmek için başlık alanını nasıl ekleyebilirim?
Drazen
Merhaba
Bunun için teşekkürler. Sadece merak ediyordum, nasıl bir seçenek ekleyebilirim, böylece widget'ı görüntülerken, her sekmede basitçe bağlantıları yapıştırabilirim?
Örneğin:
Sekme 1 (widget seçeneklerinde yeniden adlandırma seçeneği)
– Widget seçeneklerinde altındaki metin kutusu (metin, bağlantı vb. ekleyebilmem için)
Sekme 2 (widget seçeneklerinde yeniden adlandırma seçeneği)
– Widget seçeneklerinde altındaki metin kutusu (metin, bağlantı vb. ekleyebilmem için)
Sekme 3 (widget seçeneklerinde yeniden adlandırma seçeneği)
– Widget seçeneklerinde altındaki metin kutusu (metin, bağlantı vb. ekleyebilmem için)
Teşekkürler
Gavin Wilshen
Harika bir eğitim. Teşekkürler çocuklar!
Grant
Bana sürekli bu hatayı veriyor:
Eklenti, ölümcül bir hataya neden olduğu için etkinleştirilemedi.
Ayrıştırma hatası: sözdizimi hatası, beklenmeyen T_NS_SEPARATOR, T_STRING bekleniyor /home/content/11/10826211/html/wp-content/plugins/wpbeginner-tabber-widget/wpb-tabber-widget.php dosyasında 16. satırda
WPBeginner Desteği
Grant, kodu tekrar kontrol ettik. Eklenti bizim tarafımızdan sorunsuz bir şekilde etkinleştirildi.
Yönetici
Rahul
Teşekkürler adam, dahisin. Codecanyon'dan premium bir eklenti satın almak üzereydim ve sonra bu rehberi buldum.
Jonathan
Bu eklentiyi kurduğumda neden güncellenmesi gerektiğini ve güncellemenin başka bir geliştiriciye ait olduğunu ve 3 yıldan eski olduğunu söylüyor?
WPBeginner Desteği
Bunu yapmamalı. Eklenti adını değiştirdiyseniz ve başka bir eklentiyle eşleşiyorsa, WordPress onu diğer eklentiyle karıştırırdı.
Yönetici
Jonathan
Hiçbir şey değiştirmedim; sadece yukarıda gösterdiğiniz şeyi yaptım.
Jonathan
Bu, WordPress'in düşündüğü ve güncellemeye çalıştığı eklenti. http://wordpress.org/plugins/tabber-widget/
Eklentiyi 2.0 sürümüne güncelledim ve bu (neden bilinmez) diğer eklentiye güncelleme istemeyi durdurdu. Diğer eklentinin adını değiştirmeyi ve bilgilerini değiştirmeyi denedim, ancak işe yarayan tek şey buydu.
WPBeginner Desteği
The only reason we can think of is that you probably named the plugin file or folder to tabber-widget.php instead of wpb-tabber-widget.php which caused WordPress to confuse the plugin with this other one. The version trick is ok too until this other plugin releases 2.0+
so its bed to clear the confusion.
WPBeginner Desteği
Bunu tekrarlayamadık. Başka bir WordPress sitenizde bunu deneyebilir misiniz, sadece sizin tarafınızdan bir sorun olmadığından emin olmak için?
Doris
Bu, WordPress'in dinamik olma amacını boşa çıkarmaz mı? Bir widget'a metin sabit kodlamak? Veritabanından dinamik içerik çekmenin bir yolu var mı? Biz acemilerin pek kodlama deneyimi yok, biliyorsunuz...Bunu yapacak bir eklenti olduğunu sanırdım...
WPBeginner Desteği
Bu eğitim orta düzey kullanıcılar için tasarlanmıştır ve amaç burada onlara bir sekme widget'ı oluşturmayı göstermektir. Başlangıç düzeyindeki kullanıcılar için, her sekmenin içindeki içeriği dinamik olarak oluşturan birkaç yerleşik şablon etiketi bulunmaktadır. Örneğin:
WordPress sayfalarınızın bir listesini görüntüleyin:
<ul> <?php wp_list_pages('title_li='); ?> </ul>1-click Use in WordPress
Rastgele Gönderileri Göster:
<ul> <?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?> <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a> </li> <?php } ?> </ul>1-click Use in WordPress
Son yorumları göster:
1-click Use in WordPress
Ve daha fazlası.
Yönetici
manoj sakhwar
Güzel makale. teşekkürler…
Grant
Kodu nereye yapıştıracağımı anlamadım. Kodu ne tür bir belgeye koymalıyım? (Mac kullanıyorum).
WPBeginner Desteği
Bu dosyaları oluşturmak için TextEdit'i kullanın.
Yönetici
Keith Davis
Bunu çok sevdim beyler.
Her zaman sınırlı alanları daha iyi kullanmanın yollarını arıyorum.
Jim Davis
Dosyaları yükledim ve widget'ı etkinleştirdim. Beklendiği gibi görünüyor, ancak Sekme 2 ve Sekme 3 sekmelerine tıklamak içeriği değiştirmiyor. İçerik Sekme 1'deki içerik olarak kalıyor. Bir şeyi mi kaçırdım? Test sitemi şu adreste görebilirsiniz: http://jimdavis.org/blog/
Jim
WPBeginner Desteği
Jim, hiçbir şeyi kaçırmadın. Bu örnek bir widget'tır ve düzenleyebilirsiniz. Her sekmenin içindeki kendi kodunuzu ve içeriğinizi eklenti dosyası wpb-tabber-widget.php'yi düzenleyerek girin.
Yönetici