WordPress'te Küçük Resimlerle Sayfa Listesini Kolayca Gösterme

WordPress sayfa listelerinizi daha ilgi çekici hale getirmenin kolay bir yolunu mu istiyorsunuz? Küçük resimler eklemek, görsel çekiciliği artırmak ve site gezinmesini iyileştirmek için basit ama etkili bir tekniktir.

Sayfa başlıklarınızın yanında öne çıkan görselleri görüntülemek, ziyaretçilerinize içerik hakkında daha fazla bilgi verir, bu nedenle tıklama ve bu sayfalara gitme olasılıkları daha yüksektir.

WPBeginner olarak birçok kullanıcının WordPress sitelerini optimize etmelerine yardımcı olduk ve bu hilenin büyük bir fark yaratabileceğini biliyoruz. 

Bu makalede, WordPress'te adım adım küçük resimlerle bir sayfa listesini nasıl göstereceğinizi anlatacağız.

Neden WordPress'te Küçük Resimlerle Sayfa Listesi Göstermelisiniz?

WordPress'in gönderiler ve sayfalar adında iki farklı gönderi türü vardır.

Sayfalar, “Hakkımızda”, “Bize Ulaşın” ve “Hizmetler” sayfaları gibi daha kalıcı içerikler için kullanılırken, gönderiler daha sık güncellenen blog içerikleri için kullanılır.

En önemli sayfalarınız genellikle ana gezinme menünüzden bağlantılıdır, ancak göstermek istediğiniz daha fazla sayfanız olabilir.

Küçük resimli bir sayfa listesi ekleyerek, bağlantılarınızı standart metin bağlantılarından daha çekici hale getirebilir ve ziyaretçilerinize WordPress web sitenizdeki her sayfanın içeriği hakkında daha iyi bir fikir verebilirsiniz.

Ziyaretçiler meşgul olduğunda ve ilgilendiğinde, daha fazla sayfayı ziyaret etme ve web sitenizde daha uzun süre kalma olasılıkları yüksektir, bu da bir satın alma yapma veya e-posta listenize katılma olasılıklarını artırır.

Bununla birlikte, web sitenizde küçük resimli bir sayfa listesini göstermenin birkaç farklı yoluna bakalım. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

• Yöntem 1. WordPress'e Kod Ekleyerek Küçük Resimlerle Sayfa Listesi Gösterme
• Yöntem 2. WordPress Blok Düzenleyiciyi Kullanarak Küçük Resimli Sayfa Listesi Gösterin

Yöntem 1. WordPress'e Kod Ekleyerek Küçük Resimlerle Sayfa Listesi Gösterme

Küçük resimlerle sayfa listesi göstermenin bir yolu, WordPress dosyalarınıza kod eklemektir.

Bu yöntem daha gelişmiştir, ancak avantajı, özelleştirilebilir kısa kodları kullanabilmenizdir. Her yeni sayfa yayınladığınızda listeyi manuel olarak güncellemek zorunda kalmak yerine, kısa kodlar sizin için otomatik olarak güncellenmiş bir sayfa listesi oluşturacaktır.

Daha önce WordPress sitenize kod eklemediyseniz, web'den kod parçacıklarını WordPress'e yapıştırma konusundaki başlangıç kılavuzumuza göz atabilirsiniz.

Ardından, aşağıdaki kodu functions.php dosyanıza, siteye özel bir eklentiye veya kod parçacıkları eklentisi kullanarak eklemeniz gerekir:

add_shortcode('pagelist', function ($args) {
    $args = wp_parse_args($args, [
        'type'  => 'page',
        'limit' => 10,
    ]);
    $out = [];
    $ids = [];
    // Check if we have a predefined list od IDs
    if ( ! empty($args['id'])) {
        $ids = array_filter(explode(',', $args['id']), function ($id) {
            return ! empty($id);
        });
        $ids = array_map('intval', $ids);
    }
    // If we don't have a predefined list od IDs, get the latest posts based on 'limit' parameter
    if (empty($ids)) {
        $queryArgs = [
            'post_type'              => isset($args['type']) && post_type_exists($args['type']) ? $args['type'] : 'page',
            'posts_per_page'         => ! empty($args['limit']) && is_numeric($args['limit']) ? intval($args['limit']) : 10,
            'ignore_sticky_posts'    => true,
            'fields'                 => 'ids',
            'cache_results'          => false,
            'update_post_meta_cache' => false,
            'update_post_term_cache' => false,
        ];
        $ids = get_posts($queryArgs);
        wp_reset_postdata();
    }
    foreach ($ids as $id) {
        $img = has_post_thumbnail($id)
            ? get_the_post_thumbnail($id, [60, 60])
            : '<span class="wpb-post-list__no-image"></span>';
        $excerpt = has_excerpt($id) ? wpautop(get_the_excerpt($id)) : '';
        $out[] = "<a href='" . get_the_permalink($id) . "' class='wpb-page-list__item'>
            <div>{$img}</div>
            <div>
                <div><h4>" . get_the_title($id) . "</h4></div>
                {$excerpt}
            </div>
        </a>";
    }
    return "<div class='wpb-page-list'>" . implode('', $out) . "</div>";
});

Bu kodu, piyasadaki en iyi kod parçacığı eklentisi olan WPCode kullanarak eklemenizi öneririz.

WPCode, temanızın functions.php dosyasını düzenlemeden özel kod eklemeyi güvenli ve kolay hale getirir.

Başlamak için, ücretsiz WPCode eklentisini yükleyip etkinleştirmeniz gerekir. Yardıma ihtiyacınız olursa, bir WordPress eklentisinin nasıl kurulacağına dair eğitimimize bakın.

Eklenti etkinleştirildikten sonra, WordPress kontrol panelinizden Kod Parçacıkları » + Parçacık Ekle'ye gidin. 

Kod Parçacığı Ekle sayfasında, 'Özel Kodunuzu Ekleyin (Yeni Kod Parçacığı)' seçeneğinin üzerine gelin ve 'Özel Kod Parçacığı Ekle' düğmesine tıklayın.

Ardından, ekranda görünen açılır pencerede kod türü olarak 'PHP Snippet'i seçin.

Oradan, kodun ne işe yaradığını hatırlamanıza yardımcı olacak bir başlık eklemeniz gerekir.

Ardından, yukarıdaki kodu 'Kod Önizleme' kutusuna yapıştırın.

Bundan sonra, anahtarı 'Etkin Değil'den 'Etkin'e getirin ve sayfanın üst kısmındaki 'Kod Parçasını Kaydet' düğmesine tıklayın.

Bu kod parçacığı, sitenizin herhangi bir yerinde küçük resimlerle sayfa listenizi görüntülemek için kullanabileceğiniz bir kısa kod oluşturacaktır.

Kısa kodu kullanmadan önce, sayfa listenizin güzel görünmesini sağlamak için sitenize aşağıdaki CSS'yi eklemeniz gerekecektir.

Bunu daha önce yapmadıysanız, WordPress sitenize kolayca özel CSS ekleme hakkındaki rehberimize bakın.

.wpb-page-list{
    display: block;
    margin: 10px 0 35px;
}
.wpb-page-list__item{
    display: grid;
    grid-template-columns: 60px 1fr;
    grid-column-gap: 16px;
    align-items: center;
    text-decoration: none;
    margin: 10px 0;
}
.wpb-page-list__item:hover h4{
    text-decoration: underline;
}
.wpb-post-list img,
.wpb-post-list__no-image{
    display: block;
    width: 60px;
    height: 60px;
}
.wpb-post-list__no-image{
    background: #aaa;
}
.wpb-page-list__item h4{
    font-size: 20px;
}
.wpb-page-list__item p {
    font-size: 1rem;
    color: #555;
}

Bundan sonra, sayfa listenizi eklemek için WordPress'e aşağıdaki kısa kodu eklemeniz gerekir:

[sayfalistesi]

Bu kısa kod, yayınlanma tarihine göre en son 10 sayfanızı içeren bir sayfa listesi görüntüler. Yeni sayfalar eklendikçe otomatik olarak güncellenir.

Görüntülenecek sayfa sayısını sınırlamak istiyorsanız, aşağıdaki kısa kodu kullanabilirsiniz:

[sayfa listesi limit=3]

Göstermek istediğiniz sayfa sayısıyla '3' yerine ilgili sayıyı yazın.

Kısa kodu WordPress'e eklemek için, düzenlemek istediğiniz sayfayı açın ve ardından 'Artı' blok ekle düğmesine tıklayın.

Bundan sonra, 'Kısa Kod' bloğunu arayın.

Ardından, sitenize eklemek için 'Kısa Kod' bloğuna tıklayın ve yukarıdaki kısa kodu yapıştırın.

İşiniz bittiğinde, değişikliklerinizi kaydetmek için 'Kaydet' veya 'Yayınla'ya tıkladığınızdan emin olun.

Bundan sonra, ziyaretçileriniz küçük resimli sayfa listenizi görüntüleyebilecektir.

Sayfa listenizi kenar çubuğunuzda veya altbilginizde görüntülemek için kısa kodu bir widget'ta da kullanabilirsiniz.

Belirli Site Sayfaları ile Bir Sayfa Listesi Görüntüleme

Yalnızca belirli sayfaları içeren bir sayfa listesi görüntülemek için sitenize aşağıdaki kısa kodu eklemeniz gerekecektir:

[sayfalistesi id="20, 10, 35"]

Bu kısa kod, sayfa kimliklerine göre belirli sayfaları gösterecektir. Daha fazla ayrıntı için WordPress'te sayfa kimliklerinin nasıl bulunacağına dair rehberimize bakın.

En Son Blog Yazılarınızla Bir Liste Görüntüleyin

En son blog yazılarınızı görüntülemek için kısa kodu da kullanabilirsiniz. Bu, blog yazılarınızdaki sayfa görüntülemelerini artırmak için harika bir yol olabilir.

Sadece aşağıdaki kısa kodu WordPress'e ekleyin:

[sayfalistesi tip=yazı]

En son blog yazılarınızın listesi okuyucularınıza şu şekilde görünecektir:

Yayınladığınız Her Sayfa ile Bir Sayfa Listesi Görüntüleme

Son olarak, yayınladığınız her sayfayı içeren küçük resimlerle bir sayfa listesi gösterebilirsiniz.

Bu, bir arşiv sayfası veya okuyucularınız için HTML site haritası sayfası oluşturmak istediğinizde faydalı olabilir. Eklenen gönderi küçük resimleri, bunu basit bir sayfa listesinden daha ilgi çekici hale getirir.

Sitenize aşağıdaki kısa kodu eklemeniz gerekecek:

[pagelist limit="-1"]

Yeni sayfalar yayınladıkça, sayfa listeniz otomatik olarak güncellenecektir.

Yöntem 2. WordPress Blok Düzenleyiciyi Kullanarak Küçük Resimli Sayfa Listesi Gösterin

WordPress'te sayfa listesi göstermenin bir başka yolu da WordPress blok düzenleyiciyi kullanmaktır.

Not: Bu yöntemi kullanırken sayfa listenizi manuel olarak oluşturmanız ve güncellemeniz gerekecektir, çünkü yayınlanan yeni sayfalar otomatik olarak eklenmeyecektir.

Bunu yapmak için düzenlemek istediğiniz sayfayı açın.

Ardından, blok menüsünü açmak için 'Artı' ekleme bloğu simgesine tıklayın.

Bundan sonra, arama kutusunda 'Sütunlar'ı arayın.

Ardından, 'Sütunlar' bloğunu seçin.

Bu, kullanılabilir sütun bloklarının bir listesini getirir.

'30/70' sütun bloğunu seçin. Küçük resimler için sol sütunu, sayfa başlığı ve kısa bir özet için sağ sütunu kullanacağız.

Ardından, 'Artı' ekleme bloğu simgesine tıklayın.

Bundan sonra, öne çıkan görselinizi eklemek için 'Görsel' bloğunu seçin. Bu size yeni bir görsel yükleme veya medya kitaplığınızdan birini seçme seçeneği sunar.

Görüntünüze bağlantı vermek istiyorsanız, 'Bağlantı Ekle' simgesine tıklayın.

Ardından, sayfa URL'nizi eklemeniz yeterlidir.

Resminizi ekledikten sonra, sağ sütundaki 'Artı' ekleme bloğu simgesine tıklayın.

Ardından, 'Başlık' bloğunu arayın ve sayfanıza eklemek için tıklayın.

Ardından, sayfa başlığınızı girin ve vurgulayın.

Ardından, sayfaya bir bağlantı eklemek için 'Bağlantı' simgesine tıklayın.

Bağlantının aynı sayfada mı yoksa yeni bir sekmede mi açılacağını, geçiş düğmesini açıp kapatarak seçebilirsiniz.

Başlığınızın altına metin eklemek istiyorsanız, tekrar 'Blok Ekle' simgesine tıklayın ve 'Paragraf' bloğunu seçin.

Ardından, mevcut metin alanına yazmanız yeterlidir.

Oluşturduğunuz biçimlendirmeyi kullanarak listenize daha fazla öğe eklemek için sütun bloğuna tıklayın ve üç nokta 'Seçenek' menüsünü seçin.

Ardından, açılır listeden 'Kopyala' seçeneğini seçin.

Bu, sütunun otomatik olarak bir kopyasını oluşturacaktır.

Görüntüyü, başlığı ve metni değiştirmek için yukarıdaki adımları izlemeniz yeterlidir.

Sayfa listenizde değişiklik yapmayı bitirdikten sonra, sayfanın üst kısmındaki 'Güncelle' veya 'Yayımla' düğmesine tıkladığınızdan emin olun.

Artık ziyaretçileriniz gönderi küçük resimleriyle daha ilgi çekici bir sayfa listesi görecek.

Not: Küçük resimler olmadan bir sayfa listesi eklemenizi sağlayan 'Sayfa Listesi' adlı başka bir blok da mevcuttur.

Ancak, yukarıdaki manuel yöntem, blok düzenleyiciyi kullanarak küçük resimlerle bir liste eklemenin tek yoludur.

Eğer sayfa listesi ve küçük resimler içeren tamamen özel sayfalar oluşturmak istiyorsanız, bunu sürükle ve bırak oluşturucu kullanarak yapmak için SeedProd eklentisini kullanabilirsiniz. Daha fazla ayrıntı için, WordPress'te özel sayfa oluşturma kılavuzumuza bakın.

Umarım bu makale, WordPress'te küçük resimlerle bir sayfa listesini nasıl kolayca göstereceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, en iyi WordPress tema oluşturucularımız ve WordPress sitenize sonsuz kaydırma ekleme rehberimize de göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.