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>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 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. */
}Not: İşlemler bittikten sonra cache temizlemeyi unutmayın. (ctrl + f5)
2 yorum
merhaba sizden sonraki makaleye otomatik geçme çalışması yapmıştık ancak sahifa uyum sağlamamıştı. Ben şuan bu eklentiyi kaldırıp, eski haline çevirmeye çalışıyorum ancak sitemde YORUMLAR bölümü ne yaptıysam açamıyorum. Hiçbir makaleye yorum yapılamıyor. bu konuda acil yardımınıza ihtiyacım var. siteyi baştan kurup uğraşmak istiyorum. yardım ederseniz sevinirim. saygılarımla.
Merhaba. Site bilgilerinizi e-posta ile iletisim@wpuzman.com adresine gönderirseniz düzeltebilirim. Kolay gelsin.
Yorum Yapın