Geçenlerde kullanıcılarımızdan biri bize kenar çubuğundaki son widget için nasıl bir solma efekti ekleyebileceğimizi sordu. Bu popüler jQuery efekti birçok tanınmış web sitesi ve blogda kullanılmaktadır. Kullanıcı sayfayı aşağı kaydırdıkça, kenar çubuğundaki son widget kaybolur ve görünür hale gelir. Animasyon, widget’ı göz alıcı ve dikkat çekici hale getirerek tıklama oranını önemli ölçüde artırır. Bu makalede, jQuery kullanarak WordPress’te son kenar çubuğu widget’ını nasıl soluklaştıracağınızı göstereceğiz.
Aşağıda nasıl görüneceğine dair bir demo bulunmaktadır:
Bu eğitimde tema dosyalarınızı değiştireceksiniz. Daha fazla ilerlemeden önce temanızı yedeklemeniz önerilir.
Adım 1: Fadein Efekti için JavaScript Ekleme
Öncelikle jQuery kodunu WordPress temanıza ayrı bir JavaScript dosyası olarak eklemeniz gerekir. Not Defteri gibi bir metin düzenleyicide boş bir dosya açarak başlayın. Daha sonra bu boş dosyayı masaüstünüze wpb_fadein_widget.js olarak kaydedin ve aşağıdaki kodu içine yapıştırın.
jQuery(document).ready(function($) {
/**
* Konfigürasyon
* Kenar çubuğunuz için kapsayıcı, örneğin aside, #sidebar vb.
*/
var sidebarElement = $('div#secondary');
// Kenar çubuğunun var olup olmadığını kontrol edin
if ($(sidebarElement).length > 0) {
// Kenar çubuğundaki son widget'ı ve ekrandaki konumunu al
var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
// Son widget'ı gizle
$(lastWidget).hide();
// Kullanıcı kaydırmasının son widget'ın en üstüne ulaşıp ulaşmadığını kontrol edin ve görüntüleyin
$(document).scroll(function() {
// Widget görüntülenmişse, kontrol yapmaya devam etmemize gerek yoktur.
if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;
}
}
});
}
});
Bu koddaki en önemli satır var sidebarElement = $('div#secondary'); şeklindedir.
Bu, kenar çubuğunuzu içeren div’in kimliğidir. Her tema farklı kenar çubuğu kapsayıcı div’leri kullanabileceğinden, temanızın kenar çubuğu için kullandığı kapsayıcı kimliğini bulmanız gerekir.
Bunu Google Chrome’daki öğeyi incele aracını kullanarak öğrenebilirsiniz. Google Chrome’da kenar çubuğunuza sağ tıklayın ve ardından Öğeyi İncele’yi seçin.
Kaynak kodunda, kenar çubuğu kapsayıcı div’inizi görebileceksiniz. Örneğin, varsayılan Twenty Twelve teması kenar çubuğu kapsayıcısının kimliği olarak secondary, Twenty Thirteen ise teritary kullanır. secondary yerine kenar çubuğu kapsayıcı div’inizin kimliğini koymanız gerekir.
Daha sonra bu dosyayı WordPress tema dizininizdeki js klasörüne yüklemek için bir FTP İst emcisi kullanmanız gerekir. Tema dizininizde bir js klasörü yoksa, FTP istemcinizde sağ tıklayıp ‘Yeni Dizin Oluştur’u seçerek oluşturmanız gerekir.
Adım 2: JavaScript’inizi WordPress Temasına Kaydetme
Artık jQuery betiğiniz hazır olduğuna göre, sıra onu temanıza eklemeye geldi. Javascript’i temanıza eklemek için uygun yöntemi kullanacağız, bu nedenle aşağıdaki kodu temanızın functions.php dosyasına yapıştırmanız yeterlidir.
wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
Hepsi bu kadar, şimdi kenar çubuğunuza fadein efekti ile görünmesini istediğiniz bir widget ekleyebilir ve ardından web sitenizi ziyaret ederek çalıştığını görebilirsiniz.
Adım 3: Soluklaştırma Etkisinden Sonra Son Widget’ı Yapışkan Hale Getirme
Solma efektiyle sıklıkla istenen bir özellik, kullanıcı kaydırdıkça son kenar çubuğu widget’ının da kaydırılmasını sağlamaktır. Buna kayan widget veya yapışkan widget denir.
Yukarıdaki jQuery koduna bakarsanız, solma efektinden sonra widget’a bir wpbstickywidget CSS sınıfı eklediğimizi fark edeceksiniz. Bu CSS sınıfını kullanarak son widget’ınızı silikleştikten sonra yapışkan hale getirebilirsiniz. Tek yapmanız gereken bu CSS’yi temanızın stil sayfasına yapıştırmaktır.
.wpbstickywidget {
position:fixed;
top:0px;
}
İhtiyaçlarınızı karşılamak için CSS’yi değiştirmekten çekinmeyin. Widget’ı daha da belirgin hale getirmek için arka plan rengini veya yazı tiplerini değiştirebilirsiniz. İsterseniz, son widget’ınızın yanına kullanıcıların hızlı bir şekilde geri kaydırmasını sağlayacak yumuşak bir üste kaydırma efekti bile ekleyebilirsiniz.
Umarız bu makale WordPress kenar çubuğunuzdaki son widget’a solma efekti eklemenize yardımcı olmuştur. Daha fazla jQuery iyiliği için WordPress için en iyi jQuery eğitimlerine göz atın.
Bu makaleyi beğendiyseniz, WordPress video eğitimleri için lütfen YouTube Kanalımıza abone olun. Bizi Twitter ve Google+‘da da bulabilirsiniz.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Roger Perkin
I am trying to implement this on my site but it’s not working
2 Questions
are you able to check my site and verify the sidebar div id?
Also should the enqueue script be get_stylesheet_directory_uri() . and not get_template_directory
Thanks – would love to get this working
Roger
Jonathan
I was wondering can this be done instead off fade in to fade out an sticky widget??
WPBeginner Support
Try replacing fadeIn with fadeOut in the JavaScript.
Yönetici
Johnny
Hi I’m trying to implement this on my page and can’t seem to get it working. Added the .js file to my theme directory’s js folder and added it to my functions.php and no fade is showing. Where exactly should I be adding it in my functions.php as it’s a big file.
I’m using twenty fourteen, and my sidebar ID is “content-sidebar” which I have changed in the .js file. I have a few other widgets in the sidebar so perhaps something is conflicting?
Any help is appreciated! Thanks.
Johnny
Here is my .JS Code
jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/
var sidebarElement = $(‘div#content-sidebar’);
// Check if the sidebar exists
if ($(sidebarElement).length > 0) {
// Get the last widget in the sidebar, and its position on screen
var widgetDisplayed = false;
var lastWidget = $(‘.widget:last-child’, $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;
// Hide the last widget
$(lastWidget).hide();
// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {
// If the widget has been displayed, we don’t need to keep doing a check.
if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn(‘slow’).addClass(‘wpbstickywidget’);
widgetDisplayed = true;
}
}
});
}
});
WPBeginner Support
Try deactivating all your plugins and see if it works. You can also use inspect element to see if there are any errors.
Yönetici
bb
Hi wpbeginner, I love this tweak and the solution you’ve been giving to the community, thanks a million! I have a question, please, how can I integrate or if there’s a plugin/solution that can be use to query application forms submitted by applicants and the result show come up in the admin dashboard, for instance; how many applicant are below 25yrs? and the plugin should fetch the result from the database and show the relevant details in a nice table format that can be exported to excel. Possible? Please advise. Thanks
Jean Gérard Bousiquot
You can check Gravity forms for that, but you’ll need to know some PHP. Otherwise you’ll have to pay a developer to help you achieve what you need.
Derek Price
Isn’t this a bit off topic? Did you do this on purpose? If you have a question for WP staff, why not use the contact feature so you don’t take the blog post off topic?