WordPress + Bootstrap yorum sayfalama

Fırat Kaya 14 Haziran 2020 16:15

Bugün blogumdaki yorumlar sistemini geliştirirken ileride çok fazla yorum gelirse diye bir senaryo düşündüm ve sayfalama sistemini yapmak istedim. Halihazırda WordPress’in oluşturduğu bir fonksiyon var fakat bu fonksiyonu kendimize göre yapılandırmak gerçekten beni zorladı. Ben de bu sistemi kendim yapsam nasıl olur diye düşünürken bir araştırma yaptım ve istediğim yöntemi bulamadım. Sonra aklıma daha önce yapmış olduğum yazıları sayfalayan sistemi düzenlemek geldi. WordPress’in kendi fonksiyonundan aldığım kodlarla ve daha önce yapmış olduğum yazı sayfalama sistemini birleştirip istediğim sonucu aldım. İsterseniz koda geçelim.

Öncelikle iki adet fonksiyon oluşturdum.
Birisi fragment dediğimiz bir fonksiyon. Bu fonksiyon bir linke #fragment şeklinde ekleme yapıyor. Bu sayede linke gittiğimiz zaman fragment id’li elementi bulup linke gidince scroll’u oraya taşıyor. Örneğin yorumlar sayfalama sisteminde sonraki sayfaya gite bastığımızda #comments e yönlendiriyor ve bu sayede link açılınca sayfanın en üstten açmak yerine comments id’li elemanın yüksekliğine göre kendi scrollunu ayarlıyor.

Bu fonksiyonları tema klasörünüzdeki functions.php içine yazınız.

Kod:

function benfiratkaya_add_fragment($url, $fragment = '#') {
  return esc_url($url.$fragment);
}

İkincisi fonksiyonumuz ise yorumun linkini oluşturuyor.

function benfiratkaya_get_comment_pagenum_link($page = 0, $fragment = '#comments') {
  global $wp_rewrite;
  if ($wp_rewrite->using_permalinks()) {
    $pagenum_link = user_trailingslashit(trailingslashit(get_permalink()).$wp_rewrite->comments_pagination_base.'-'.$page, 'commentpaged');
  }
  else {
    $pagenum_link = add_query_arg('cpage', $page);
  }
  return benfiratkaya_add_fragment(esc_url($pagenum_link), $fragment);
}

Evet fonsiyonlarımız hazır. Şimdi ise bir template parts oluşturalım.

Benim template-parts adında bir klasörüm var buranın içine pagination-comments.php adında bir dosya açtım.

Kod:

<?php
  $range = 2;
  $showitems = ($range * 2) + 1;
  $fragment = '#comments';
  $paged = get_query_var('cpage');
  if (empty($paged)) $paged = 1;
  $pages = get_comment_pages_count();
  if (!$pages) {
    $pages = 1;
  }
?>
<?php if ($pages != 1): ?>
  <div class="d-flex justify-content-center">
    <nav aria-label="Comments Page Navigation">
      <ul class="pagination">
        <li class="page-item <?php echo ($paged == 1) ? 'disabled' : null; ?>" data-toggle="tooltip" data-placement="top" title="<?php _e('Previous page'); ?>">
          <a class="page-link" href="<?php echo ($paged != 1) ? benfiratkaya_get_comment_pagenum_link($paged-1, $fragment) : $fragment; ?>" aria-label="Previous">
            <i class="fa fa-angle-left"></i>
          </a>
        </li>
        <?php for ($i = 1; $i <= $pages; $i++): ?>
          <?php if ($pages != 1 && (!($i >= $paged + $range + 1 || $i <= $paged - $range - 1) || $pages <= $showitems)): ?>
            <li class="page-item <?php echo ($paged == $i) ? 'active' : null; ?>">
              <a class="page-link" href=" <?php echo ($paged == $i) ? $fragment : benfiratkaya_get_comment_pagenum_link($i, $fragment); ?>"><?php echo $i; ?></a>
            </li>
          <?php endif; ?>
        <?php endfor; ?>
        <li class="page-item <?php echo ($paged == $pages) ? 'disabled' : null; ?>" data-toggle="tooltip" data-placement="top" title="<?php _e('Next page'); ?>">
          <a class="page-link" href="<?php echo ($paged != $pages) ? benfiratkaya_get_comment_pagenum_link($paged+1, $fragment) : $fragment; ?>" aria-label="Next">
            <i class="fa fa-angle-right"></i>
          </a>
        </li>
      </ul>
    </nav>
  </div>
<?php endif; ?>

Ben kendi sitemde sadece sonraki, önceki sayfa şeklinde kullanıyorum. Ben burda sayfa numaralarını da gösterdim fakat isterseniz for döngüsünü silip sonraki, önceki şeklinde kullanabilirsiniz.

Şimdi bu pagination-comments.php adındaki dosyayı comments.php dosyamıza ekleyelim.

Ben wp_list_comments fonksyinonun hemen altına ekledim.

<?php get_template_part('template-parts/paginations/pagination', 'comments'); ?>

Evet kodumuz bu kadardı. Şimdi yorum sayfalama sistemi açık mı emin olalım. Ayarlar > Tartışma sayfasındaki ayarları aşağıdaki görsel gibi yapalım.

Kodlama bitince test etmek için yukarıdaki görselde 50 olan değeri 1 yapıp yazınıza 3-4 tane yorum yapın ve test edin.

wordpress bootstrap comments page wordpress bootstrap comments pagination wordpress custom comments page wordpress custom comments pagination wordpress yorum sayfalama