WordPress Ekran Kaydırma Çubuğu Yapma [Eklentisiz]

kategori Wordpress Kod tarih 12.08.2018yazar wpuzman

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. <body> yazan yerin hemen altına aşağıdaki kodu ekleyin:

<div class="wpuprogress"></div>
view raw progress_div.html hosted with ❤ by GitHub

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 + '%');
});
});
view raw scrollbar.js hosted with ❤ by GitHub

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 wpu_scripts() {
wp_enqueue_script( 'wpu-progressBar', get_template_directory_uri() . '/js/progressBar.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'wpu_scripts' );

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. */
}
view raw progress_bar.css hosted with ❤ by GitHub

Not: İşlemler bittikten sonra cache temizlemeyi unutmayın. (ctrl + f5)

Kategoriler: Wordpress Kod