Bir Örnekle WordPress'te Özel Sorgu Sayfalandırması Nasıl Oluşturulur
Yayınlanan: 2020-02-24
WordPress'te özel sorgu sayfalandırması oluşturmak, blog gönderileri ve özel gönderi türleri için en çok sıralanan sayfalama çözümlerinden biridir. WordPress blogunuzda özel sorgu sayfalandırması oluşturmak istiyorsanız, bu gönderi size rehberlik edecektir. İdeal olarak, özel sorgu sayfalandırması, bu sorguyu temel alan WordPress gönderisinin sayfalandırmasını oluşturmak için farklı sorgu parametrelerinin kullanılmasını içerir.
Önceki derste, WordPress'e nasıl sayısal sayfalandırma ekleyebileceğinizi, önceki ve sonraki yazı sayfalandırmasının nasıl küçük resim oluşturulacağını ve sayfalandırma kullanarak bir yazının birden çok sayfaya nasıl bölüneceğini ayrıntılı olarak açıkladım. Ayrıca, tercih ettiğiniz sayfalandırma seçeneğini eklemek için blogunuzda kullanabileceğiniz bir dizi WordPress sayfalandırma kodunu da paylaştım. Bu yazıda, WordPress sitenizde özel sorgu sayfalandırmasının nasıl oluşturulacağını ve uygulanacağını açıklayacağım.
Özel Sorgu Sayfalandırması
Girişte bahsettiğim gibi, özel sorgu sayfalandırması, aşağıdakileri içeren üç bölümden oluşur: özel sorgu, sayfalandırmayı gösterecek kod ve sayfalandırmanın iyi görünmesini sağlayacak bazı stiller. Bu özel sorgu sayfalandırma kodunu şu üç adıma ayıracağız:
Özel Gönderi veya Özel Gönderi Sorgusu Oluşturun
İlk adım, temel olarak özel sorguda kullanmayı düşündüğümüz bir dizi argüman olan bir sorgu oluşturmaktır.
Bu özel sorgu sayfalandırmasını görüntülemek için, özel sorgu sayfalandırma kodunu ekleyeceğimiz özel bir sayfa şablonu oluşturarak başlayalım.
Özel sorgu koduna sahip özel sayfa şablonu örneği aşağıdadır:
<?php
/**
* Şablon Adı: CQ Sayfalandırma
*
*/
get_header();
// Adım 1: Özel Sorgu Oluşturun
$paged = ( get_query_var( 'paged' ) ) ? get_query_var('sayfalanmış') : 1;
$args = dizi(
'posts_per_page' => 2,// son 5 gönderiyi sorgula
'paged' => $sayfalandı
);
$customQuery = new WP_Query($args);Bu kod, aşağıdaki resimde gösterildiği gibi sayfa niteliklerinin altında görebileceğiniz özel bir sayfa şablonu oluşturur:
Sorgunun birkaç argümanı olabilir, ancak bu durumda, yalnızca sayfada görüntülemek istediğimiz gönderi sayısı olan 'posts_per_page' ile sınırlandırdık.
Ayrıca 'post_type', orderby, yazar ve çok daha fazlasını kullanarak gönderi türünü belirtebiliriz. Aşağıda, 'kitap' adlı özel gönderi türü için başka bir sorgu örneği verilmiştir:
// Sorguda kullanmak için mevcut yazarı al
$current_author = ( isset($_GET ) ) ? get_user_by( 'slug', $author_name ) : get_userdata( intval( $author ) );
/* sorgu için argümanları ayarla
$args = dizi(
'post_type' => dizi('hedef'),
'orderby' => 'tarih',
'sıra' => 'azalan',
'posts_per_page' => 10,
'paged' => get_query_var('sayfa')? get_query_var('sayfa'): 1,
'yazar' => $current_author->ID
);
// Sorguyu başlat
$sorgu = new WP_Query( $args);$args'ı oluşturup sorguyu somutlaştırdıktan sonra, artık gönderileri döngüde görüntülemeye ve bir sonraki adımda özel sorguyu eklemeye hazırız.
Sorgulanan Gönderileri Özel Sayfa Şablonunda Görüntüle
Sorgulanan gönderileri görüntülemek için kod, orijinal özel şablon koduna eklenmiştir ve tam kod aşağıdaki gibidir:
<?php
/**
* Şablon Adı: CQ Sayfalandırma
*
*/
get_header();
// Adım 1: Özel Sorgu Oluşturun
$paged = ( get_query_var( 'paged' ) ) ? get_query_var('sayfalanmış') : 1;
$args = dizi(
'posts_per_page' => 2,// son 5 gönderiyi sorgula
'paged' => $sayfalandı
);
$customQuery = new WP_Query($args);
?>
<!-- Adım 2: 1. Adımda Sorguladığımız Gönderileri Görüntüleyin -->
<div class="sarma">
<div id="birincil" class="içerik alanı">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
küresel $yazı;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- blog gönderilerini sonlandır -->
<?php bitiş zamanı;
endif;
wp_reset_query();Sayfalandırma İşlevi Oluşturun
Bu son adımda, özel sorgu sayfalandırmasını görüntülemek için yukarıdaki özel sayfa şablonunda kullanacağımız sayfalama fonksiyonunu oluşturmamız gerekiyor. Sayfalandırma fonksiyonunu oluşturmak için function.php dosyasına aşağıdaki kodu eklememiz gerekiyor:
// Özel sayfalama işlevi
function cq_pagination($sayfalar = '', $aralık = 4)
{
$showitems = ($aralık * 2)+1;
küresel $sayfalanmış;
if(empty($paged)) $paged = 1;
if($sayfalar == '')
{
küresel $wp_query;
$pages = $wp_query->max_num_pages;
if(!$sayfalar)
{
$sayfa = 1;
}
}
if(1 != $sayfa)
{
echo "<nav aria-label='Sayfa gezinme örneği'> <ul class='pagination'> <span>Sayfa ".$paged." of ".$pages."</span>";
if($paged > 2 && $paged > $range+1 && $showitems < $pages) echo "<a href='".get_pagenum_link(1)."'>« İlk</a>";
if($paged > 1 && $showitems < $pages) echo "<a href='".get_pagenum_link($paged - 1)."'>‹ Önceki</a>";
için ($i=1; $i <= $sayfa; $i++)
{
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems ))
{
yankı ($paged == $i)? "<li class=\"page-item active\"><a class='page-link'>".$i."</a></li>":"<li class='page-item' > <a href='".get_pagenum_link($i)."' class=\"page-link\">".$i."</a></li>";
}
}
if ($paged < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=\"".get_pagenum_link($paged + 1)." \">i class='flaticon flaticon-back'></i></a></li>";
if ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) echo " <li class='page-item'><a class='page-link' href=' ".get_pagenum_link($pages)."'><i class='flaticon flaticon-arrow'></i></a></li>";
echo "</ul></nav>\n";
}
}
Özel Şablonda Sayfalandırma İşlevini Çağırın
Son adım, sayfalandırmanın görüntülenmesi için şablonda yukarıda eklediğimiz işlevi çağırmaktır. Bu işlevi çağırmak için aşağıdaki kodu kullanmalıyız:
// Adım 3: Sayfalandırma İşlevini Buraya Çağırın
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}Bu sayfalandırma işleviyle özel bir sayfa şablonu oluşturan son kod aşağıdaki gibi olmalıdır:
<?php
/**
* Şablon Adı: CQ Sayfalandırma
*
*/
get_header();
// Adım 1: Özel Sorgu Oluşturun
$paged = ( get_query_var( 'paged' ) ) ? get_query_var('sayfalanmış') : 1;
$args = dizi(
'posts_per_page' => 2,// son 5 gönderiyi sorgula
'paged' => $sayfalandı
);
$customQuery = new WP_Query($args);
?>
<!-- Adım 2: 1. Adımda Sorguladığımız Gönderileri Görüntüleyin -->
<div class="sarma">
<div id="birincil" class="içerik alanı">
<main id="main" class="site-main" role="main">
<?php
if($customQuery->have_posts() ):
while($customQuery->have_posts()) :
$customQuery->the_post();
küresel $yazı;
?>
<div class ="inner-content-wrap">
<ul class ="cq-posts-list">
<li>
<h3 class ="cq-h3"><a href="<?php the_permalink(); ?>" ><?php the_title(); ?></a></h3>
<div>
<ul>
<div>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
</div>
</ul>
<ul>
<p><?php echo the_content(); ?></p>
</ul>
</div>
</li>
</ul>
</div> <!-- blog gönderilerini sonlandır -->
<?php bitiş zamanı;
endif;
wp_reset_query();
// Adım 3: Sayfalandırma Fonksiyonunu Buraya Çağırın
if (function_exists("cq_pagination")) {
cq_pagination($customQuery->max_num_pages);
}
?>
</main><!-- #ana -->
</div><!-- #birincil -->
</div><!-- .wrap -->
<!----sayfa sonu-------->
<?php get_footer(); ?>Her adımı doğru şekilde takip ettiyseniz, aşağıdaki resimde görüldüğü gibi sayfalandırmaya sahip olmalısınız:
Özel Sorgu Sayfalandırmasını Stillendirin
Son adım, temanın stilleri ve tasarımıyla eşleşmesini sağlamak için stilleri özel sayfalamaya eklemektir. Bu özel sayfalandırmaya stil vermek için stil sayfasına eklemeniz gereken CSS stilleri aşağıdadır:
/**
* CQ Sayfalandırma Stilleri
* @yazar Joe Njenga
*/
.sayfalama {
ikisini de temizle;
konum:göreceli;
yazı tipi boyutu:16px;
satır yüksekliği:13 piksel;
Sağa çık;
liste stili-türü:yok;
genişlik: %100;
}
.pagination yayılma alanı, .pagination a {
Ekran bloğu;
yüzer: sol;
kenar boşluğu: 2px 2px 2px 0;
dolgu:6px 9px 5px 9px;
metin-dekorasyon:yok;
genişlik:otomatik;
renk:#fff;
arka plan: #237697;
}
.pagination a:hover{
renk:#fff;
arka plan: #000;
}
.pagination .current{
dolgu:6px 9px 5px 9px;
arka plan: #999;
renk:#fff;
}Bu sayfalandırma stillerini ekledikten sonra, özel sayfalandırmanın son görünümü aşağıdaki resimde gösterildiği gibi olmalıdır:
Son düşünceler
Bu gönderide, WordPress blogunuza özel sorgu sayfalandırması eklemenin adım adım yolunu özetledik. Bu adımlar; sorguyu oluşturmak, özel sorgulanan gönderileri sayfalama ile görüntülemek için özel bir sayfa şablonu oluşturmak ve function.php dosyasına bir sayfalama işlevi eklemek. Son olarak, sayfalandırma işlevini çağırmayı ve WordPress temanızın tasarımına uyan uygun stilleri eklemeyi unutmayın.