WordPress'te Madde İşaretleri ve Numaralı Listeleri Kolayca Ekleme

Madde işaretleri ve numaralı listelerle iyi organize edilmiş içerik oluşturmak basit görünebilir, ancak birçok kullanıcının bunları tam olarak istediği gibi göstermekte zorlandığını gördük. 📋

Blok düzenleyicide çeşitli biçimlendirme yöntemlerini araştırdıktan sonra, temiz ve tutarlı listeler oluşturmanın en kolay yollarını keşfettik.

Demo ortamlarımızda yaptığımız kapsamlı testler sayesinde, basit madde işaretlerinden özelleştirilmiş listelere kadar WordPress'te liste ekleme ve stil verme konusunda çeşitli yöntemler belirledik.

Harika olan şey, listelerinizin profesyonel görünmesi için herhangi bir kodlama bilgisine ihtiyacınız olmamasıdır.

Bu başlangıç seviyesine uygun rehberde, WordPress'te madde işaretli ve numaralı listeleri tam olarak nasıl ekleyeceğinizi ve biçimlendireceğinizi göstereceğiz.

WordPress'te Madde İşaretleri ve Numaralı Listeleri Ne Zaman Eklemelisiniz

Bilgileri yapılandırılmış, taranması kolay bir biçimde sunmanız gerektiğinde içeriğinize listeler eklemelisiniz. Önemli olan, içeriğiniz için doğru liste türünü seçmektir.

Öğelerin sırasının önemli olduğu durumlarda numaralı bir liste kullanın. Bu, adım adım öğreticiler, ilk 10 sıralaması veya belirli bir sırayı izleyen herhangi bir işlem için idealdir.

Öğelerin sırasının önemli olmadığı durumlarda madde işaretli bir liste kullanın. Bu, ürün özelliklerini, örnekleri veya ilgili fikirler grubunu listelemek için harikadır.

Listeleri doğru kullanmak, bilgiler karmaşık olsa bile ziyaretçilerin içeriğinizi bir bakışta anlamalarına yardımcı olur. Bu, kullanıcı deneyimini iyileştirir ve insanların WordPress web sitenizde daha uzun süre kalmasını sağlayabilir.

Bunu akılda tutarak, WordPress'te madde işaretleri ve numaralı listeleri nasıl ekleyebileceğinize bakalım. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir:

• Method 1: Using the Built-in WordPress List Block (Easy)
• Yöntem 2: Shortcodes Ultimate Kullanma (Özel Simgeli Listeler)
• Method 3: Using a Page Builder Plugin (Best for Landing Pages)
• Method 4: Using Code to Add Bullet Points and Number Lists (Advanced)
• WordPress'te Madde İşaretleri ve Numaralı Listeler Ekleme Hakkında Sıkça Sorulan Sorular

Yöntem 1: Dahili WordPress Liste Bloğunu Kullanma (Kolay)

Madde işaretleri ve numaralı listeler eklemenin en kolay yolu Liste bloğunu ve WordPress Gutenberg blok düzenleyicisini kullanmaktır.

Bu, ayrı bir WordPress eklentisi kurmadan basit numaralı veya madde işaretli listeler oluşturmanıza olanak tanır. Bununla birlikte, bu varsayılan bloğun yalnızca birkaç özelleştirme seçeneği vardır.

Listelerinizi özel simgeler, yatay düzenler, farklı renkler ve daha fazlasıyla ince ayar yapmak istiyorsanız, bu makaledeki diğer yöntemlerden birini kullanmanızı öneririz.

Başlamak için, listeyi eklemek istediğiniz WordPress yazısı veya sayfası için blok düzenleyiciyi açmanız yeterlidir. Alternatif olarak, madde işaretli listeyi kenar çubuğu gibi bir widget alanına eklemek için widget düzenleyicisini açabilirsiniz.

Ardından, madde işareti veya numaralı liste oluşturmayı seçebilirsiniz.

WordPress'te Madde İşaretli Liste Nasıl Oluşturulur

Madde işaretli bir liste oluşturmak için yeni bir WordPress bloğu eklemek üzere '+' simgesine tıklayın.

Görünen açılır pencerede, ‘List’ yazın.

Doğru blok göründüğünde, sayfaya eklemek için tıklayın.

Bu, madde işaretli bir listenin ilk öğesini oluşturur. İlk liste öğesi için kullanmak istediğiniz metni yazmanız yeterlidir.

Bu işlem tamamlandıktan sonra, bir sonraki satıra geçmek için klavyenizdeki 'Enter' tuşuna basın. WordPress otomatik olarak ikinci madde işaretini oluşturacaktır.

Artık ikinci madde işareti için kullanmak istediğiniz metni yazmaya devam edebilirsiniz. Listeye daha fazla öğe eklemek için bu adımları tekrarlamanız yeterlidir.

İç içe bir liste oluşturmak istiyorsanız, 'Girinti' düğmesine tıklayın. Bu, imleci sağa doğru bir adım kaydırır ve girintili metni yazmaya hazır hale getirir.

İç içe madde işaretleri oluşturmak için tekrar 'Girinti' düğmesine tıklayabilirsiniz.

Aşağıdaki resimde görebileceğiniz gibi, her seviye farklı bir simge kullanır.

Girintiyi azaltmak için 'Girintiyi Azalt' düğmesine tıklayın.

İmleci bir adım sola kaydırır, yazmaya başlamanız için hazırdır.

‘Girinti’ ve ‘Girintiyi Kaldır’ düğmelerine basarak birden çok farklı seviyede iç içe listeler oluşturabilirsiniz.

Varsayılan olarak, WordPress blok düzenleyici ‘Orta’ yazı tipi boyutunu kullanır, ancak sağdaki blok seçeneklerindeki ‘Tipografi’ ayarlarını kullanarak küçük, büyük ve ekstra büyük boyutlar arasında geçiş yapabilirsiniz.

Ayrıca bağlantılar ekleyebilir veya kalın ve italik gibi standart metin biçimlendirme seçeneklerini kullanabilirsiniz. Bu, listelerinizi gözden kaçırmadan taramayı ve anlamayı daha kolay hale getirir.

WordPress'te Numaralı Liste Oluşturma

WordPress'te numaralı bir liste oluşturmak için klavyenizdeki '1' tuşuna ardından bir nokta (.) basın

WordPress bu metni otomatik olarak numaralı bir listenin ilk öğesine dönüştürecektir.

Artık numaralı listedeki ilk öğeyi yazmaya hazırsınız.

Bundan sonra, klavyenizdeki 'Enter' tuşuna basmanız yeterlidir ve WordPress otomatik olarak bir sonraki numaralı noktayı oluşturacaktır.

Madde işaretlerinde olduğu gibi, 'Girinti' ve 'Girintiyi Kaldır' düğmelerine tıklayarak iç içe listeler oluşturabilirsiniz.

Bu, numaralı madde işaretinin altında girintili bir madde işareti oluşturur.

Madde işaretli listelerin aksine, yalnızca tek bir girinti seviyesi kullanabilirsiniz.

Liste görünümünden memnun kaldığınızda, WordPress web sitenizde yayına almak için 'Güncelle' veya 'Yayınla' düğmesine tıklamanız yeterlidir.

Yöntem 2: Shortcodes Ultimate Kullanma (Özel Simgeli Listeler)

Yerleşik Liste bloğu, metin tabanlı listeler oluşturmak için mükemmeldir, ancak bazen özel simgelerle bir liste oluşturmak isteyebilirsiniz. Bu şekilde, listelerinizi daha görsel olarak çekici hale getirebilir ve içerik temanıza daha uygun hale getirebilirsiniz.

Bunu yapmanın en kolay yolu Kısa Kodlar Ultimate kullanmaktır. Bu eklenti, basit kısa kodlar kullanarak özel simgelerle listeler oluşturmanıza olanak tanır.

Bunun için, ücretsiz eklenti sürümünü kullanacağız çünkü bu yöntem için yeterlidir. Ancak daha gelişmiş özellikler istiyorsanız, ücretli bir plana yükseltebilirsiniz.

Shortcodes Ultimate'yi kullanmak için, yönetici alanınıza WordPress eklentisini kurun. Ardından, yeni bir gönderi oluşturun veya blok düzenleyicide mevcut bir gönderiyi düzenleyin.

Şimdi, sayfadaki herhangi bir yere ‘+’ düğmesine tıklayın ve ‘Shortcode’ bloğunu seçin.

Bu aşamada, aşağıdaki kısa kodu bloğa yapıştırın:

[su_list icon="icon: star" icon_color="#ffde0f"]
<ul>
 	<li>List item</li>
 	<li>List item</li>
 	<li>List item</li>
</ul>
[/su_list]

Bu kısa kod, şöyle üç tane sarı yıldız simgeli madde işaretli liste öğesi gösterecektir:

Simgeyi ve rengi özelleştirmek için Fork Awesome web sitesine gidebilirsiniz. Madde işaretli listelerinizde kullanabileceğiniz tüm simgeleri burada göreceksiniz. Buradan, kullanmak istediğiniz bir simgeyi aramanız yeterlidir.

Örneğin, ‘bayrak’ simgesini kullanacağız. Şimdi, simgenin adını kopyalayın ve blok düzenleyiciye geri dönün.

Oradayken, icon: star yerine star yazısını değiştirin. Yani icon: star yerine icon: flag kullanacağız.

Rengi değiştirmek için icon_color="#ffde0f" içindeki HEX kodunu istediğiniz rengin HEX koduyla değiştirin.

Yani simgeyi yeşil yapmak istiyorsanız, icon_color="#008000" yazmanız gerekir. WordPress siteniz için mükemmel renk şemasını nasıl seçeceğiniz hakkındaki makalemizde doğru renkleri bulma hakkında daha fazla bilgi edinebilirsiniz: WordPress siteniz için mükemmel renk şemasını nasıl seçeceğiniz.

Şimdi, List item kısmını kendi metninizle değiştirmeyi unutmayın. 

Kodumuzun şu anki hali şöyle görünüyor:

Liste görünümünden memnun kaldığınızda, bunu WordPress blogunuzda veya web sitenizde yayına almak için 'Güncelle' veya 'Yayımla' düğmesine tıklayabilirsiniz.

Listenin ön uçta görünümü şöyledir:

Yöntem 3: Sayfa Oluşturucu Eklentisi Kullanma (Açılış Sayfaları İçin En İyisi)

Özel stil ile güzel listeler oluşturmak istiyorsanız, SeedProd'u kullanmak isteyebilirsiniz.

Bu gelişmiş WordPress teması ve sayfa oluşturucu eklentisi, basit bir sürükle ve bırak düzenleyici kullanarak profesyonelce tasarlanmış sayfalar oluşturmanıza olanak tanır.

Ayrıca, liste tasarımının her bölümünü ince ayar yapmanıza olanak tanıyan, bireysel öğeler arasındaki boşluğu değiştirmeyi, standart madde işaretlerini özel simgelerle değiştirmeyi ve daha fazlasını içeren hazır bir Liste bloğu ile birlikte gelir.

Ayrıca, benzersiz bir tasarıma sahip bağımsız sayfalar tasarlamayı kolaylaştırır, bu nedenle listeleri özel bir ana sayfaya veya açılış sayfasına eklemek istiyorsanız bu da harika bir seçenektir.

Aracı kapsamlı bir şekilde test ettik ve yeni başlayanlar için süper kolay olduğunu gördük. Daha fazla bilgi edinmek için SeedProd incelememize bakın.

Yapmanız gereken ilk şey SeedProd'u yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra lisans anahtarınızı girmeniz gerekir.

Bu bilgiyi SeedProd web sitesindeki hesabınızda bulabilirsiniz. Lisans anahtarını ekledikten sonra, 'Anahtarı Doğrula'ya tıklamanız yeterlidir.

Profesyonelce Tasarlanmış Bir Şablon Seçin

Bundan sonra, SeedProd » Açılış Sayfaları 'na gidin ve ‘Yeni Açılış Sayfası Ekle’ye tıklayın.

Bir sonraki ekranda bir şablon seçmeniz istenecektir.

SeedProd, 404 sayfa şablonları ve özel WooCommerce ‘teşekkürler’ sayfaları gibi farklı kategorilere ayrılmış 300'den fazla güzel şablona sahiptir.

Her kategorideki farklı şablonları görmek için herhangi bir sekmeye tıklamanız yeterlidir.

Kullanmak istediğiniz bir şablon bulduğunuzda, üzerine fareyle gelin ve ardından onay işareti simgesine tıklayın.

Tüm görsellerimizde 'Explosive Growth Webinar' şablonunu kullanıyoruz, ancak istediğiniz herhangi bir tasarımı kullanabilirsiniz.

Ardından, sayfaya bir başlık vermeniz gerekir.

SeedProd, sayfa başlığına göre otomatik olarak bir URL oluşturacaktır, ancak bunu istediğiniz herhangi bir şeyle değiştirebilirsiniz. Örneğin, bir URL'ye ilgili anahtar kelimeler eklemek genellikle WordPress SEO'nuzu iyileştirir ve sayfanın ilgili arama sonuçlarında görünmesine yardımcı olur.

Daha fazla bilgi edinmek için lütfen WordPress blogunuz için anahtar kelime araştırması yapma kılavuzumuza bakın.

Başlık ve URL'den memnun kaldığınızda, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ya tıklamanız yeterlidir.

Özel Sayfa Düzeninizi Oluşturun

SeedProd artık şablonunuzu sürükle-bırak düzenleyicisinde açacaktır. Sağ tarafta sayfa tasarımının canlı önizlemesini, sol tarafta ise bazı ayarları göreceksiniz.

SeedProd, tasarımınıza ekleyebileceğiniz birçok blokla birlikte gelir; bunlar arasında sosyal paylaşım düğmeleri, videolar, iletişim formları ve daha fazlasını eklemenizi sağlayan bloklar da bulunur.

Daha fazla bilgi için lütfen WordPress'te özel sayfa oluşturma kılavuzumuza bakın.

Tasarımınıza bir liste eklemek için 'Liste' bloğunu bulun ve sayfaya sürükleyin.

Bu, sayfanıza ‘Öğe 1.’ yer tutucusuyla dikey bir liste ekler.

Bunun yerine yatay bir liste oluşturmak istiyorsanız, 'Gelişmiş' sekmesine tıklayın ve ardından 'Yatay' düğmesini seçin.

Artık ‘İçerik’ sekmesini seçerek listenizi oluşturmaya hazırsınız.

Varsayılan metni kendi mesajlarınızla değiştirmek için sol menüdeki ‘Öğe 1’e tıklayın.

Artık görünen küçük metin düzenleyiciye liste öğenizi yazabilirsiniz.

Burada, kalın veya italik gibi kullanmak istediğiniz biçimlendirmeleri de uygulayabilirsiniz.

Varsayılan olarak SeedProd, her madde işareti için bir onay işareti kullanır, ancak bunun yerine kullanabileceğiniz 1400 Font Awesome simgesini içeren yerleşik bir simge yazı tipleri kitaplığına sahiptir.

İşareti değiştirmek için üzerine fareyle gelin ve göründüğünde 'Simge Kitaplığı'na tıklayın.

Bu, kullanmak istediğiniz simgeyi seçebileceğiniz bir açılır pencere açar.

Liste içindeki tek tek madde işaretleri için farklı simgeler kullanabilirsiniz, bu nedenle daha ilginç ve dikkat çekici listeler oluşturmak için harika bir yoldur.

Daha fazla madde işareti oluşturmak için 'Yeni Öğe Ekle' düğmesine tıklamanız yeterlidir.

Artık yukarıda açıklananla aynı işlemi izleyerek metin ekleyebilir ve varsayılan simgeyi değiştirebilirsiniz.

Listenize tüm öğeleri ekledikten sonra, sol taraftaki menüdeki ayarları kullanarak yazı tipi boyutunu ve hizalamayı değiştirebilirsiniz.

Ayrıca, ‘Aralık’ kaydırıcısını kullanarak tek tek liste öğeleri arasındaki boşluğu artırabilir veya azaltabilirsiniz.

Bundan sonra, listedeki simgelerin rengini değiştirmek isteyebilirsiniz. Farklı simgeler kullanıyor olsanız bile, SeedProd her öğeye aynı rengi uygulayacak, böylece tasarım her zaman tutarlı görünecektir.

Bu değişikliği yapmak için ‘Simgenin Rengi’ alanına tıklayın ve ardından görünen açılır menüden yeni bir renk seçin.

Bu yapıldıktan sonra, ‘Gelişmiş’e tıklayıp ek ayarlara bakmak isteyebilirsiniz. Dikey ve yatay liste düzenleri arasında geçiş yapabileceğinizi zaten gördük, ancak metin rengini ve yazı tipini de değiştirebilirsiniz.

Listenizi gerçekten öne çıkarmak için, kutu gölgesi veya CSS animasyonu bile ekleyebilirsiniz.

'Gelişmiş' sekmesindeki ayarların çoğu oldukça anlaşılırdır, bu nedenle ne tür efektler oluşturabileceğinizi görmek için bunları keşfetmeye değer.

Bu işlem tamamlandıktan sonra, daha fazla blok ekleyerek ve ardından sol menüdeki ayarları kullanarak bunları özelleştirerek sayfa tasarımınız üzerinde çalışmaya devam edebilirsiniz.

Sayfanın görünümünden memnun kaldığınızda, 'Kaydet' düğmesindeki açılır menüye tıklayın ve 'Yayınla'yı seçin.

Listeyi çevrimiçi mağazanızda veya web sitenizde canlı görmek için şimdi bu sayfayı ziyaret edebilirsiniz.

Yöntem 4: Madde İşaretleri ve Numaralı Listeler Eklemek İçin Kod Kullanma (Gelişmiş)

Ayrıca yerleşik WordPress kod düzenleyicisini ve HTML kullanarak listeler oluşturabilirsiniz.

Blok düzenleyici daha kolay olsa da, kod düzenleyiciyi kullanmak HTML yapısı üzerinde hassas kontrol sağlar, bu da sorun giderme veya karmaşık, önceden biçimlendirilmiş listeleri yapıştırma için faydalı olabilir.

Bu konu hakkında daha fazla bilgi için, WordPress kod düzenleyicisinde HTML'nin nasıl düzenleneceği hakkındaki rehberimize bakın.

Başlamak için, listeyi göstermek istediğiniz sayfayı veya gönderiyi açın. Ardından, sağ üst köşedeki üç noktalı simgeye tıklayın ve 'Kod düzenleyici'yi seçin.

Sonraki adımlar, madde işaretli bir liste mi yoksa numaralı bir liste mi eklemek istediğinize bağlı olarak değişecektir.

Kod Kullanarak Madde İşaretli Liste Oluşturma

Madde işaretli bir liste oluşturmak için şunları yazarak başlayın:

<!-- wp:list -->
<ul>

ul 'sırasız liste' anlamına gelir, bu da listenin herhangi bir numarası olmadığı anlamına gelir ve wp:list WordPress'e manuel olarak bir Liste bloğu oluşturduğunuzu söyler.

Ardından, yeni bir satıra geçmek ve ilk liste öğenizi oluşturmak için 'Enter' tuşuna basın:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Burada, li 'liste öğesi' anlamına gelir ve satırı /li ile kapatıyoruz.

Daha fazla liste öğesi oluşturmak için bu işlemi tekrarlayabilirsiniz. Örneğin:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->

Bitirdiğinizde, kod bloğunu başka bir 'sırasız liste' bayrağıyla kapatın:

</ul>
<!-- /wp:list -->

Bu bize aşağıdaki liste kodunu verir:

<!-- wp:list -->
<ul>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Aşağıdaki resimde görebileceğiniz gibi, bu çok basit bir liste oluşturur, ancak diğer HTML'leri ekleyerek özelleştirebilirsiniz, örneğin başlık etiketleri.

Kod Kullanarak Numaralı Liste Oluşturma

Numaralı bir liste oluşturmak için şunu yazmanız yeterlidir:

<!-- wp:list {"ordered":true} -->

Ardından sıralı liste anlamına gelen ol yazabilirsiniz:

<!-- wp:list {"ordered":true} -->
<ol>

Bundan sonra, her liste öğesini yukarıda açıklanan aynı işlemi izleyerek ekleyin:

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

Son olarak, sıralı listeyi bir /ol etiketi ve wp:list kullanarak kapatın.

<!-- wp:list {"ordered":true} -->
<ol>
<!-- wp:list-item -->
<li>Red</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Orange</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Green </li>
<!-- /wp:list-item -->
</ol>
<!-- /wp:list -->

WordPress'te Madde İşaretleri ve Numaralı Listeler Ekleme Hakkında Sıkça Sorulan Sorular

WordPress'te madde işaretleri ve numaralı listeler ekleme hakkında okuyucularımızın sıkça sorduğu bazı sorular şunlardır:

Madde işaretleri ve numaralandırma ile nasıl liste oluşturulur?

'Girinti' düğmesini kullanarak karışık bir liste oluşturabilirsiniz. Numaralı bir listeyle başlayın ve madde işareti alt öğesi eklemek istediğinizde, araç çubuğundaki 'Girinti' düğmesine tıklamanız yeterlidir. Bu, numaralı öğenizin altında iç içe bir madde işareti oluşturacaktır.

WordPress'te madde işaretleri için kısayol nedir?

WordPress blok düzenleyicisinde madde işareti listesi başlatmak için ana klavye kısayolu, bir yıldız (*) yazıp ardından boşluk çubuğuna basmaktır. Numaralı bir liste için, 1. yazıp ardından boşluk çubuğuna basın.

Numaralı bir listeyi a) dl b) ol c) list d) ul şeklinde nasıl yapabilirsiniz?

HTML'deki <ol> etiketini kullanarak (b) seçeneğiyle numaralı bir liste yapabilirsiniz. 'ol', öğelerin sırasının önemli olduğu durumlarda kullanılan "sıralı liste" anlamına gelir. <ul> etiketi, sırasız (madde işaretli) listeler için kullanılır.

Liste mi yoksa div mi kullanmak daha iyidir?

Liste içeriği için <div> etiketleri yerine uygun liste etiketlerini (<ul> veya <ol> gibi) kullanmak her zaman daha iyidir. Liste etiketleri, SEO ve ekran okuyucular gibi erişilebilirlik araçlarının içeriğinizin yapısını anlaması için kritik öneme sahip anlamsal anlam sağlar.

Bu öğreticinin, WordPress'te madde işaretleri ve numaralı listeler eklemeyi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca WordPress blok düzenleyicide işbirliğinin nasıl ekleneceğini ve WordPress için en iyi Gutenberg blok eklentilerini öğrenmek 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.