Wordpress sitelerde sayfayı aşağı kaydırdıkça yukarıda sağa doğru uzayan bir çubuk yapalım. Bu sayede ziyaretçiler yazının sonuna ne kadar yaklaştığını daha güzel bir şekilde görebilecekler.
1. Temanızda header.php dosyasını açın. yazan yerin hemen altına aşağıdaki kodu ekleyin:
2. Temanızın ana klasörüne js adında bir klasör oluşturun ve içerisine progressBar.js adında bir javasrcript dosyası oluşturun. İçerisine aşağıdaki kodu ekleyin.
$(document).ready(function () {
var winHeight = $(window).height(),
docHeight = $(document).height(),
progressBar = $(‘.wpuprogress’),
max, value;
max = docHeight – winHeight;
$(document).on(‘scroll’, function(){
value = $(window).scrollTop();
progressBar.css(‘width’, value / max * 100 + ‘%’ );
});
$(window).on(‘resize’, function() {
winHeight = $(window).height(),
docHeight = $(document).height();
max = docHeight – winHeight;
progressBar.css(‘width’, value / max * 100 + ‘%’);
});
});
3. Sonra bu javascript dosyasını temamıza tanıtmamız lazım. Bunun için functions.php ye aşağıdaki kodu ekleyin.
function wpuScripts() {
wp_enqueue_script( ‘wpu-progressBar’, get_template_directory_uri() . ‘/js/progressBar.js’, array(), ‘1.0.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘wpuScripts’ );
4. Son olarak çubuğu şekillendirelim. Aşağıdaki kodu temanızın style.css dosyasına ekleyin.
.wpuprogress {
position: fixed; /* Çubuğun sayfada sabit kalması için. */
top: 0; /* Çubuğu sayfanın en üstüne aldık. */
height: 2px; /* Çubuğun kalınlığını artırmak için 2 sayısını değiştirebilirsiniz. */
background-color: #f44336; /* Çubuğun rengi. */
}
Not: İşlemler bittikten sonra cache temizlemeyi unutmayın. (ctrl + f5)
Kaynak
