Daha eski yayınlar, kaçınılmaz olarak kronolojik olarak daha yeni içerik tarafından gömülür. Bu durum özellikle web siteniz büyüdüyse veya bir süredir blog yazıyorsanız ve eski makaleleriniz yeterince ilgi görmüyorsa geçerlidir. Daha eski makaleler hala eskimeyen içerik barındırabileceğinden, WordPress site sahipleri bunlara dikkat çekmek için çeşitli tekniklere başvururlar. Bu tekniklerden biri, varsayılan WordPress arşiv sayfasını kullanmaktır.
Arşiv sayfaları, temanız tarafından sağlanan karşılık gelen bir şablon dosyası (çoğu durumdaarchive.php dosyası) sayesinde etkinleştirilir. Bu genellikle, bu sayfalara yönlendiren çeşitli widget’lar (arama, kategoriler ve etiket bulutu gibi) ekleyen gönderi kenar çubuklarıyla birleştirilir. Fakat hem varsayılan arşiv sayfası hem de gönderi kenar çubuğunun kusurları vardır.
Varsayılan arşiv sayfaları genellikle gönderiler hakkında ek bilgi vermeden yalnızca bir taksonomiye dayalı gönderilerin bir listesini gösterir. Öte yandan, uzun kenar çubukları genellikle bir gönderide dağınıklık hissine neden olabilir ve genel olarak mobil web sitesi deneyimi için kötüdür. Bu yüzden bazı site sahipleri özel bir WordPress arşiv sayfası oluşturmayı tercih eder. Bu yazıda, böyle bir sayfanın nasıl oluşturulacağını ele alacağız.
Özel bir WordPress arşiv sayfası nasıl oluşturulur?
Artık özel bir arşiv sayfasının neden yararlı olabileceğini bildiğinize göre, onu nasıl oluşturabileceğinizi görelim. Bu yazı için kod kullanarak özel bir arşiv sayfası oluşturduk. Kodlama kullanımı göz önüne alındığında, bu görev daha ileri düzey WordPress kullanıcıları için daha uygundur. Bununla birlikte kullandığımız kodu da daha geniş bir kitlenin anlayabilmesi için parça parça açıklayacağız. WordPress konfor seviyenize bağlı olarak öğretici ve kullanmanız veya geliştirmeniz kolay olması gereken bir örnek oluşturduk.
Önceki makalelerimizde olduğu gibi, daha ileri gitmeden önce web sitenizin bir yedeğini almanızı şiddetle tavsiye ederiz. Bu durum web sitenize hiçbir zarar verilmemesini sağlayacak ve ileriye dönük olarak size gönül rahatlığı sağlayacaktır. Bunu yaptıktan sonra, FTP’nin nasıl kullanılacağını bilmek aşağıda açıklanan adımlardan bazıları için çok önemli olduğundan, FTP kullanımı hakkındaki makalemizi de gözden geçirmenizi öneririz. Bunu söyledikten sonra devam edelim.
Özel WordPress arşiv sayfamızı yapmak için oluşturduğumuz kod aşağıda verilmiştir.
<?php
/* Template Name: Custom Archive Template */
get_header();
?>
<main id="main" class="content-wrapper">
<?php if ( have_posts() ) {
while ( have_posts() ) {
the_post(); ?>
<h1 class="page-title"><?php echo esc_html( get_the_title() ); ?></h1>
<div class="page-section">
<div class="page-content">
<?php the_content(); ?>
</div>
<?php }
wp_reset_postdata();
} ?>
<div class="archive-sidebar">
<div class="archive-categories">
<p><strong><?php echo esc_html__( 'Categories', 'textdomain' ); ?></strong></p>
<ul class="category-list">
<?php wp_list_categories(
array(
'title_li' => '',
'hide_title_if_empty' => true
) ); ?>
</ul>
</div>
<div class="archive-tags">
<p><strong><?php echo esc_html__( 'Tags', 'textdomain' ); ?></strong></p>
<?php wp_tag_cloud(); ?>
</div>
<div class="archive-authors">
<p><strong><?php echo esc_html__( 'Authors', 'textdomain' ); ?></strong></p>
<?php wp_list_authors(
array(
'hide_empty' => 'true',
'optioncount' => 'true'
) ); ?>
</div>
</div>
</div>
<?php $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$posts_query = new WP_Query(
array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 8,
'paged' => $paged
) ); ?>
<div class="posts-section">
<?php if ( $posts_query->have_posts() ) { ?>
<h2><?php echo esc_html__( 'Our latest work', 'textdomain' ); ?></h2>
<div class="archived-posts">
<?php while ( $posts_query->have_posts() ) {
$posts_query->the_post(); ?>
<div class="archive-item">
<?php if ( has_post_thumbnail( get_the_ID() ) ) { ?>
<div class="post-thumbnail">
<a href="https://hikmetdokumaci.com/blog/ <?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<?php } ?>
<div class="post-title">
<a href="https://hikmetdokumaci.com/blog/ <?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
</div>
</div>
<?php } ?>
</div>
<?php
$total_pages = $posts_query->max_num_pages;
if ( $total_pages > 1 ) {
$current_page = max( 1, get_query_var( 'paged' ) ); ?>
<div class="archive-pagination">
<?php echo paginate_links( array(
'base' => get_pagenum_link( 1 ) . '%_%',
'format' => 'page/%#%',
'current' => $current_page,
'total' => $total_pages
) ); ?>
</div>
<?php }
wp_reset_postdata();
} else { ?>
<div class="archived-posts"><?php echo esc_html__( 'No posts matching the query were found.', 'textdomain' ); ?></div>
<?php } ?>
</div>
</main>
<?php
get_footer();
Şimdi onu daha detaylı anlatalım. Bunu yapmanın ilk adımı, onu çok basitleştirilmiş bir biçimde incelemektir.
<?php /* Template Name: Custom Archive Template */ get_header(); ?> <main id="main" class="content-wrapper"> <!-- Some code goes here--> </main> <?php get_footer();
Şablon başlığı yorumunu inceleyerek, kodun Özel Arşiv Şablonu adı verilen özel bir sayfa şablonunu temsil ettiği sonucuna varabilirsiniz. Herhangi bir ek bilgi eklenmediğinden, bu şablon yalnızca sayfalar için geçerli olacaktır ve belirli bir sayfada Sayfa Nitelikleri bölümünde şablon olarak seçilebilir.
Bunun dışında get_header() ve get_footer() fonksiyonlarını kullanarak o anda aktif olan temanın header ve footer şablonlarını yüklüyoruz. Kalan kod, sayfanın ana bölümünü oluşturmak için kullanılır.
Sayfa içeriğinin ana kısmı üç alt bölümden oluşmaktadır. İlk bölüm, sayfa başlığını ve sayfa düzenleyiciye eklenen içeriği gösterir. Başlık, get_the_title() işlevi sayesinde görüntülenirken, sayfa düzenleyici içeriği, the_content() işlevi bir WordPress Döngüsüne yerleştirilerek gösterilir.
<?php if ( have_posts() ) {
while ( have_posts() ) {
the_post(); ?>
<h1 class="page-title"><?php echo esc_html( get_the_title() ); ?></h1>
<div class="page-section">
<div class="page-content">
<?php the_content(); ?>
</div>
<?php }
wp_reset_postdata();
} ?>
<!-- Sidebar code goes here-->
</div>
Kenar çubuğu olarak tasarlanan ikinci bölüm, kategorileri, etiketleri ve yazarları gösteren varsayılan WordPress arşiv sayfalarına bağlantılar içerir. Çok fazla içerik eklemek sayfayı karmakarışık hale getirebileceğinden, bilerek yalnızca bu üçünü dahil ettik. Fakat özel pencere öğesi alanları veya diğer arşiv sayfalarına bağlantılar gibi ek içerikler eklemeyi tercih edebilirsiniz.
Bununla birlikte yukarıda belirtilen üç bölümün her birinin önünde ne olduklarını belirten küçük bir paragraf bulunur (sırasıyla Kategoriler, Etiketler ve Yazarlar). Kategori bağlantıları, adından da anlaşılacağı gibi kategori adlarının bir listesini gösteren wp_list_categories() işlevi sayesinde gösterilir. Zaten Kategoriler başlıklı küçük bir paragraf kullandığımız için, bu kategori listesine ek bir başlık eklemek istemedik, bu nedenle title_li niteliğini boş bir dize olarak ayarladık. Hatta herhangi bir boş kategoriyi, yani kendilerine herhangi bir gönderi atanmış olmayan kategorileri gizlemeyi seçtik.
Etiketler, herhangi bir parametre belirtilmeden wp_tag_cloud() işlevi çağrılırken basitçe gösterilir.
Son olarak wp_list_authors() fonksiyonunu çağırarak yazarları göstermiş olduk. Ek olarak gönderisi olmayan yazarları gizlemeyi ve her yazarın kaç gönderi oluşturduğunu göstermeyi seçtik. Bu durum yazarın adından sonra parantez içinde gösterilecektir.
<div class="archive-sidebar"> <div class="archive-categories"> <p><strong><?php echo esc_html__( 'Categories', 'textdomain' ); ?></strong></p> <ul class="category-list"> <?php wp_list_categories( array( 'title_li' => '', 'hide_title_if_empty' => true ) ); ?> </ul> </div> <div class="archive-tags"> <p><strong><?php echo esc_html__( 'Tags', 'textdomain' ); ?></strong></p> <?php wp_tag_cloud(); ?> </div> <div class="archive-authors"> <p><strong><?php echo esc_html__( 'Authors', 'textdomain' ); ?></strong></p> <?php wp_list_authors( array( 'hide_empty' => 'true', 'optioncount' => 'true' ) ); ?> </div> </div>
Üçüncü bölüm, WP_Query sınıfı ve özel bir sorgu sayesinde, en yakın geçmişten başlayarak web sitenizde yayınlanan tüm gönderileri basitçe gösterir. Web sitenizde çok sayıda gönderi bulunabileceğinden, bu bölümü sayfa başına yalnızca sekiz gönderi gösterecek şekilde yaptık. Hatta alt kısımda ziyaretçilerin tüm gönderiler arasında gezinmesine yardımcı olacak sayısal sayfalandırma olacaktır. Hatta get_query_var() işlevini kullanarak, yalnızca belirli bir sayfadaki gönderileri düzgün bir şekilde kontrol etmeyi ve görüntülemeyi sağladık.
Verilen şablon zaten içerik olarak zengin olduğu için bu bölümün içeriğini sade tutmaya çalıştık. Bu yüzden yayınlanmış yayınlar varsa, bunlar En son çalışmalarımız yazan bir h2 başlığının yanında gösterilecektir. Yayınlanmış gönderi yoksa, Sorguyla eşleşen gönderi bulunamadı diyen bir etiket. yerine gösterilecektir. Gönderiler, başlıkları ve öne çıkan görselleri ile temsil edilir (eğer gönderilerde öne çıkan görseller varsa). İkincisi, has_post_thumbnail() koşullu ifadesi kullanılarak elde edilir. Bunun dışında, the_permalink() işlevinin kullanımı sayesinde, hem başlık hem de öne çıkan görsel, uygun gönderinin sayfasına bağlanır. Son olarak bu ve önceki bölümlerdeki tüm etiketler, güvenlik nedenleriyle esc_html() işlevi kullanılarak düzgün bir şekilde çıkarılır ve çevrilebilir hale getirilir.
<?php $paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1;
$posts_query = new WP_Query(
array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 8,
'paged' => $paged
) ); ?>
<div class="posts-section">
<?php if ( $posts_query->have_posts() ) { ?>
<h2><?php echo esc_html__( 'Our latest work', 'textdomain' ); ?></h2>
<div class="archived-posts">
<?php while ( $posts_query->have_posts() ) {
$posts_query->the_post(); ?>
<div class="archive-item">
<?php if ( has_post_thumbnail( get_the_ID() ) ) { ?>
<div class="post-thumbnail">
<a href="https://hikmetdokumaci.com/blog/ <?php the_permalink(); ?>">
<?php the_post_thumbnail(); ?>
</a>
</div>
<?php } ?>
<div class="post-title">
<a href="https://hikmetdokumaci.com/blog/ <?php the_permalink(); ?>">
<h3><?php the_title(); ?></h3>
</a>
</div>
</div>
<?php } ?>
</div>
<?php
// Pagination code goes here
wp_reset_postdata();
} else { ?>
<div class="archived-posts"><?php echo esc_html__( 'No posts matching the query were found.', 'textdomain' ); ?></div>
<?php } ?>
</div>
Şimdi bunu açıkladığımıza göre, üzerinde durmamız gereken tek şey sayfalandırma kodu. Sayfalandırma, sayfalandırılmış bir bağlantı listesi oluşturmak için kullanılabilen paginate_links() işlevi kullanılarak yapıldı. Hatta sayfalandırmanın yalnızca yeterli gönderi olduğu durumlarda gösterilmesini sağlayan ek kod ekledik.
Daha doğrusu daha önce oluşturduğumuz $posts_query adlı özel sorgunun max_num_pages özelliğine eriştik. Bu sayede navigasyon yalnızca sayfa sayısı birden fazla olduğunda gösterilir. Sayfa başına gönderi sayısını daha önce sekiz olarak ayarladığımız için, bu, sayfalandırmanın yalnızca sekizden fazla gönderi varsa gösterileceği anlamına gelir ki bu beklenen davranıştır.
paginate_links() işlevine gelince, yalnızca şu parametreleri kullandık: base, format, current ve total. Taban, sayfalandırma URL’sinin ana bölümünü temsil eder. İlk sayfanın, yani özel şablonun etkinleştirildiği sayfanın bağlantısını temsil eden get_pagenum_link(1)’i kullanmayı seçtik. Format parametresiyle değiştirilecek olan %_%’yi de ekledik.
Ve biçim için, %#% bölümünün uygun sayfalandırma numarasıyla değiştirileceği page/%#% koyduk. Örnek olarak sayfalandırmadan ikinci sayfaya erişmek istiyorsak, seçilen format sayesinde URL’si mevcut-sayfa-URL/sayfa/2 olacaktır.
Ek olarak bizim durumumuzda, web sitesinde yaptığımız kalıcı bağlantı seçimi nedeniyle, mevcut sayfanın URL’sinin sonunda bir eğik çizgi ile bittiğini belirtmeliyiz. Sonunda eğik çizgi içermeyen bir kalıcı bağlantı ayarı kullanıyorsanız, biçimi ayarlamanız gerekir. Gelen iki çözüm…