WordPress Yazı Listesi Stili Nasıl Oluşturulur? [Demo Kılavuzu]

Tanıtım

Bugün WordPress Post List Gutenberg bloklarını uygulama hakkında konuşacağız. Tartışmaya başlamadan önce önemli bir soru var:

Neden ilk etapta bir Gutenberg gönderi listesi eklentisi kullanmak isteyesiniz?

Her şeyden önce, Eklentilerle uygulamak çok kolaydır [burada yapacağımız seçim PostX'tir]. İkincisi, izleyicileriniz için özel bir tasarım oluşturmak için birçok farklı yerleşik seçenekle oynayabilirsiniz.

Bunlar, içeriği gözden geçirmek için iki zorlayıcı nedendir. PostX ve onun gönderi listesi işlevini kullanmak isteyen biriyseniz, bu gönderi size çok yardımcı olacak!

O halde lafı fazla uzatmadan başlayalım!

PostX WordPress Posta Listesi Varyasyonları

PostX zaten çok çeşitli hazır bloklara sahiptir. Bunların arasında 4 Mesajlı liste varyasyonları bulacaksınız. Öncelikle WordPress Gönderi Listesi #1 hakkında konuşacağız. Keşfedilecek başka varyasyonlar da var.

WordPress Gönderi Listesi Varyasyon demosu [Gönderi Listesi #1]

İlk gönderi listesi varyasyonu, bazı gelişmiş stillere izin verir. Şimdi PostX yerleşik ayarlarını kullanarak Post List #1'in nasıl kullanılacağını göstereceğiz.

Tabii ki, ihtiyacınız olan ilk şey PostX'i kurmak. PostX'i yüklemek, diğer eklentilerle aynıdır. Yine de, daha fazla bilgi edinmek için belgelere göz atabilirsiniz.

Yükledikten sonra, hazır tasarımı WordPress sayfanıza aktarmaya hazırsınız. Bunu yapmak için şunları yapabilirsiniz:

• Sağ üstteki Blok Kitaplığı'na tıklayın.
• Hazır tasarımlara gidin.
• PostX listesi #1 stiline gidin ve Import 'a tıklayın .
• Tasarımın yüklenmesini bekleyin.

Bunu yapmanın başka bir yolu da var. Tabii ki, Gutenberg'i aktif olarak kullanıyorsanız bu daha iyi çalışacaktır:

• Sayfanın sağındaki 'Artı' simgesine tıklayın.
• Şimdi 'Tümüne Gözat' üzerine tıklayın.
• Şimdi sağda mevcut tüm Gutenberg Bloklarını içeren bir pencere göreceksiniz. Arama çubuğuna 'Posta Listesi' yazmanız yeterlidir.
• ' Gönderi Listesi 1'e tıklayın. Tasarımınız otomatik olarak yüklenecektir.

Tasarım yüklendikten sonra gözlemleyebilirsiniz. Şimdi, hangi yeni ayarların olduğunu görelim.

***Gönderi listesi #1, bir düğmeye tıklayarak kolayca kullanabileceğiniz çeşitli önceden hazırlanmış düzen tasarımlarına sahiptir. Ayrıca tasarım önerileri, mevcut düzenlerin hemen altında görünecektir. Ayrıca keşfedebileceğiniz başka Posta Listesi tasarımları da var. Hangisinin sitenizin yapısına en uygun olduğunu kontrol edin.

Özellik kümelerini öğrenmek ve bunları nasıl kullanacağınızı göstermek için 'Ayar' sekmesine gidelim.

PostX Gönderi Listesi #1 Ayarlarını Keşfetme

Ayarlardaki 'Genel' sekmesinin altında Gelişmiş Stil Seç seçeneğini bulacaksınız. Ne olduğunu görmek için her stil seçeneğine tıklayabilirsiniz. Gösteri amacıyla, biz olacağız:

• 1. gelişmiş düzen ayarını seçme.
• Sütun sayısını 2 olarak tutun.
• Sütun boşluğunu 30 pikselde tutun.
• 'Bağlantılar Yeni Sekmede Aç' geçişini etkinleştirin.
• Gönderi başlığı hizalamasını merkeze doğru tutun.

*** PostX eklentisi ile bazı gelişmiş liste yazı stilleri elde edersiniz. Bu gelişmiş düzenler arasından seçim yapabilir ve tasarım ihtiyaçlarınıza nasıl uyduğunu görebilirsiniz.

Tasarım Varyasyonları

Listeleri göstermek için kullanabileceğiniz birkaç tasarım varyasyonu vardır. Tek yapmanız gereken tasarımı Tasarım Bölmesi'nden içe aktarmak ve içe aktarmaktır. İşte farklı tasarım varyasyonlarıyla çalışmaya ilişkin hızlı bir gösteri:

PostX ile kullanabileceğiniz Post Block Tasarım Varyasyonlarını aşağıdaki bağlantıda keşfedin:

***NOT: Ayarlar altındaki 'Genel' sekmesinden ayarları etkinleştirebilir/devre dışı bırakabilirsiniz . Bir ayarı etkinleştirdiğinizde/devre dışı bıraktığınızda, o belirli ayarla ilişkili tasarım özelliklerini değiştirebilirsiniz.

Bu noktada gönderi listemizin düzenini değiştirmek istiyoruz. Bunu yapmak için:

• 'Tasarım Sekmesi'ne gidin.
• Tasarım sekmesi altında 2. düzeni seçeceğiz .  

Şimdi, bir kez daha Ayarlar sekmesine geri döneceğiz. Genel Ayarlar altında:

• Filtreleme dışında tüm ayarları etkinleştirmek için değiştirin.
• ' Merkezde ' olacak hizalamayı seçin.

Şimdi tasarımı daha iyi hale getirebileceğimiz kısma geçelim. Başlık ayarlarıyla başlayalım:

• Başlığı 'Tüm Gönderiler' olarak adlandıracağız.
• Onu merkeze hizalamak istiyoruz.

• Farklı başlık stilleri seçebilirsiniz . Şimdilik, varsayılan başlık stiline bağlı kalacağız. Ayrıca, başlığa herhangi bir URL eklemeyeceğiz.
• Son olarak, PostX başlık kaydırıcısını kullanarak kenarlık boyutunu 3 piksel ve aralığı 20 piksel olarak tutacağız.

Başlık Varyasyonları

Burada bahsetmek için iyi bir şey, PostX ile keşfedebileceğiniz başlık stillerinin sayısıdır. Liste stilinizi daha çekici hale getirmek için çeşitli farklı tasarım seçenekleriyle çalışabilirsiniz. Aşağıdaki örneğe bir göz atın:

Ardından, WordPress gönderi listesi tasarımı için kategorimizi daha iyi göstermek istiyoruz. Bunun için şunları yapacağız:

• 'Her İki Kenar Kenarlığı' kategori stilini seçin.
• Kategoriyi gönderi başlığının üzerinde göstermek için açılır menüden konumu 'Başlığın Üstünde' olarak seçeceğiz.
• [kaydırıcıyı kullanarak] 'Satır Genişliği'nin 20 ve 'Satır Aralığı'nın 40 olmasını istiyoruz.

• 'Çizgi Rengi'ni #037fff onaltılı değerinde tutmak istiyoruz.
• 'Sınır Yarıçapı'nın her tarafta 4 piksel olmasını istiyoruz.
• Belirli kategori rengini göstermek istiyoruz. Bu nedenle, 'Belirli Renk (Pro)'yu etkinleştireceğiz.
• Ayrıca, Üst ve Alt dolgunun 5 piksele ve Sağ ve Sol dolgunun 7 piksele ayarlanmasını istiyoruz.

Şimdi Giriş Başlığına geçeceğiz. İşte WordPress gönderi listesi düzenini tamamlamak için yapmak istediğimiz değişiklikler.

Biz istiyoruz:

• Her tarafa 10 piksellik bir 'Sınır yarıçapı' ekleyin [bu normal durum içindir].
• 'Normal Arka Plan Rengi'ni #b2ff95 hex koduna ayarlayın .
• X-boşluğunu 10-px'e ve Y-Space'i 40-px'e ayarlayın.
• Ayrıca, hoş bir ayırt edici gönderi listesi kategorisi efekti elde etmek için 'Vurgulu Arka Plan Rengi'ni #c8ffb4 hex koduna değiştirmek istiyoruz.

• Ayrıca, 'Hover yarıçapı' da 10 piksel olacaktır.
• Son olarak, Dolgu her tarafta 20 piksel olacaktır. Diğer ayarlar varsayılan olarak kalacaktır.

Ayrıca, değişmesi gereken küçük bir şey var. Ve bu Meta rengi olacak. Daha iyi kontrast için siyaha (#000000) ayarlamak istiyoruz.

Ayrıca WordPress gönderi listesi stilimize bir AJAX sayfalama özelliği ekledik. AJAX sayfalandırma, kullanıcıya daha iyi işlevsellik sunmak için daha etkili özelliklerden biridir. Sayfalandırmanın özelliklerini keşfedebileceğiniz sonraki bölümlere bir video ekledik.

İşte gönderi listesi stiliniz için hızlı sayfalandırma oluşturmaya yönelik hızlı bir örnek [Demo için benzer bir tasarım kullandık]:

Sayfalandırma hakkında daha fazla bilgi edinmek istiyorsanız, aşağıdaki videoyu izlediğinizden emin olun:

Nihai Liste Stili Demosu

Tartıştığımız gibi değişiklikleri yaptığınızda [henüz yapmadıysanız tüm tasarım varyasyonlarını keşfettiğinizden emin olun], WordPress gönderi listesi sayfanız aşağıdaki gibi görünecektir:

WordPress Gönderi Listesi Sayfasını Göstermek için Kısa Kod Nasıl Kullanılır?

Yazı listenizi WordPress sayfanızı göstermek için kısa kodları kullanabilirsiniz. Bunu yapmak için PostX'in ' Kayıtlı Şablon ' işlevini kullanmanız gerekir.

Kısa kodlarla nasıl sergileyeceğinizi göstermek için benzer türde bir sayfa oluşturduk. Birkaç küçük değişiklik yaptık:

• Başlık Tipografisi Tahoma olarak değiştirildi.
• Başlığa 'Hover Altı Çizili' animasyonu eklendi.

Sonra sayfayı yayınladık.

Artık kısa kodu, Kayıtlı Şablon penceresinin kısa kod bölümünden görebileceksiniz. Artık bu kısa kodu popüler sayfa oluşturucularla kullanabilirsiniz. Sayfayı yeni oluşturduğumuz için, gönderi listesi tasarımını diğer WordPress sayfa oluşturucularıyla kullanmak için kısa kodu yapıştıracağız .

Şimdi, farklı yazı listesi WordPress sayfalarını göstermek için kısa kodların nasıl kullanılacağını görelim:

Oxygen Builder ile Kısa Kodları Kullanma

Oxygen Builder kullanıyorsanız, WordPress gönderi listesini göstermek için oluşturucunun kısa kod öğesini kullanabilirsiniz. Bunu nasıl yapacağınız aşağıda açıklanmıştır:

• Düzenlemek istediğiniz sayfaya tıklayın.
• Ardından 'Oxygen Builder ile Düzenle'yi seçin. Sizi oksijen oluşturucu arayüzüne götürecektir.

• Şimdi Oksijen oluşturucu arayüzünün sol üst köşesindeki '+ Ekle' .
• Arama kutusuna 'kısa kod' yazın, otomatik olarak görünmelidir.

• Kısa kod öğesine tıklayın.
• Şimdi PostX Saved Templates seçeneğinden kopyaladığımız kısa kodu yapıştırıyoruz.

Artık tasarımın önizlemesini görebilirsiniz. Takip ettiyseniz, aşağıdakine benzer bir şey görmelisiniz:

Elementor ve Beaver Builder ile Kısa Kodları Kullanma

Kısa kodları hem Elementor hem de Beaver oluşturucu ile kolayca kullanabilirsiniz. Bununla ilgili ayrıntılı olarak PostX belgelerinde okuyabilirsiniz:

WordPress Gönderi Listesi Gelişmiş Düzenleme: Özel Gönderi Listeleri Oluşturma

İzleyicilerinizin mümkün olan en iyi deneyimi elde edebilmesi için daha odaklı bir WordPress liste stili yapmak istemeniz doğaldır. Bu demoda, yukarıda bahsedilen ayarların çoğunu kullanacağız. Ancak size PostX Sorgu Oluşturucu, Filtreleme, sayfalandırma ve daha fazlasının özelliklerini kullanarak uygun gönderi listelerini nasıl oluşturabileceğinizi göstereceğiz.

PostX WordPress Sorgu Oluşturucu Eklentisi İşlevselliği

PostX Sorgu Oluşturucu , belirli gönderi listelerini hedef kitlenize sergilemeniz için güçlü bir araçtır. Kolayca özel sorgular oluşturabilir ve hedef kitlenize yalnızca en alakalı ve en popüler gönderileri gösterebilirsiniz.

Bunun hızlı bir demosu, blogunuzda modayla ilgili yapışkan yazıları göstermek olabilir [şimdi göstereceğimiz gibi]. Bunu yapmak için ayarlar sekmesine gitmeniz ve sorgu oluşturucu ile çalışmanız gerekir.

• Sorgu oluşturucuya girdikten sonra, açılır menüden Yapışkan gönderiyi seçin. Ayrıca popüler gönderileri, rastgele gönderileri göstermeyi, gönderileri alfabetik sırayla göstermeyi ve daha fazlasını seçebilirsiniz.

• Gönderi olarak 'Mesaj Türü'nü seçeceğiz . Çeşitli WordPress gönderi listesi türlerini göstermek için kullanabileceğiniz başka gönderi türleri de vardır. Örneğin, çeşitli sayfaları ve şablonları gösterme seçeneği vardır.
• Ayrıca, bir seferde yalnızca iki gönderi göstermek istiyoruz. Bunu 'Mesaj Sayısı' kaydırıcısını kullanarak gösterebiliriz. Ne kadar çok yayın göstermek istiyorsanız onu göstermeyi seçebilirsiniz.
• Belirli post taksonomilerini kullanarak listeleri de gösterebilirsiniz. İki sekme vardır: Taksonomi ve Taksonomi Değeri . Posta etiketleri kullanıyorsanız, sınıflandırmayı post_tag olarak seçebilirsiniz. Kategorileri kullandığımız için, post sınıflandırmasını 'category' olarak ayarlayacağız. Bunu yaptıktan sonra çeşitli sınıflandırma değerlerini kullanabiliriz. Bir moda kategorimiz olduğu için onu seçeceğiz.

Bunlar, WordPress gönderi listesi kategorilerini göstermek için kullanabileceğiniz ayarlardan sadece birkaçıdır. Aslında, gelişmiş sorgu oluşturucu içinde oynamak için çeşitli seçenekleriniz var:

PostX WordPress Posta Filtresi Eklentisi ile Çalışmak

Kitleniz için gönderi listenizi daha da özelleştirmenin başka bir yolu var. Ve bu, PostX'in AJAX filtreleme yeteneklerini kullanmaktır. Bununla, gönderi listeleri için gönderileri kolayca filtreleyebilirsiniz. WordPress filtre gönderilerini etikete göre göstermek için PostX'in nasıl kullanılacağına dair kısa bir örnek göstereceğiz.

• 'Tüm İçerik Metni'ni ekleyebilirsiniz. Ancak örneğimiz için, onu boş tutacağız.
• Filtre türünü 'Post_tag' olarak seçeceğiz.
• Gönderilerimizde etiketlerimiz var, bu nedenle gönderi etiketi olarak 'Filtre değeri' ekleyeceğiz.
• Eklendikten sonra, altında tipografiyi Tahoma olarak değiştirmek istiyoruz, Metin Transform olarak BÜYÜK HARF ve yazı tipi ağırlığı 500 olacak. Ayrıca, Satır Yüksekliğinin 20 olmasını istiyoruz [Bu ekstrayı getirmek için kapsamlı ayarlarla oynayabilirsiniz. web sitenize yetenek düzeyi!].

• Bir vurgulu efekti eklemek istiyoruz. Böylece, Hover ayarlarına gidiyoruz – metne beyaz (#ffffff) ve #174ab1 olan Hover arka plan rengi ekleyin.

• Son olarak, her kenarda 10 piksellik bir kenarlık yarıçapı ve sağda ve solda 10 piksellik bir dolgunun yanı sıra üstte ve altta 5 piksellik bir dolgu ekleyeceğiz.

PostX filtre işlevinin ne kadar kapsamlı olduğunu artık anlamış olmalısınız. Farklı ayarlarla oynadığınızdan emin olun ve kullanıcılarınıza nasıl süper özelleştirilmiş bir deneyim sunabileceğinizi görün.

SSS

İşte bazı sık sorulan soruların cevapları. Her zaman olduğu gibi, WordPress gönderi listesi varyasyonları söz konusu olduğunda mümkün olduğunca açıklayıcı olmaya çalışacağız.

S: WordPress'te Nasıl Gönderi Listesi yapabilirim?

Cvp.: WordPress'te bir Gönderi listesi oluşturmanın birçok yolu vardır. Ve eğer Gutenberg kullanıyorsanız, PostX ile süreç çok kolaydır. Tüm yapman gereken:

• PostX'i yükleyin – süreci takip etmek çok kolaydır.
• Yeni bir sayfa oluşturabilir/mevcut bir sayfayı güncelleyebilirsiniz .
• PostX kullanarak bir gönderi listesi eklemek için Blok Kitaplığına gidin [Sağ üstten erişin].
• Hazır bir gönderi listesi stili seçin.
• Son olarak, İçe Aktar'a tıklayın .

İçe aktarıldıktan sonra düzeni değiştirebilir ve blok ayarları penceresinden çeşitli tasarım seçeneklerini keşfedebilirsiniz.

S: WordPress'te Listeleri Nasıl Gösterebilirim?

Cvp.: Daha önce de belirtildiği gibi, PostX gönderi listesi WordPress eklentisi ile listeleri kolayca gösterebilirsiniz. Tüm farklı tasarımlar ve düzenlerle çok yaratıcı olabilirsiniz. Ayrıca, farklı WordPress oluşturucularla kısa kod kullanma seçeneği de vardır.

Sadece önceki bölümlerde gösterilen adımları izleyin ve sizin için yeterince esnek olup olmadığına bakın [size şimdiye kadar gösterdiklerimize göre, olması gerektiğine inanıyoruz!].

S: WordPress Gönderilerimi Liste Düzeninde Nasıl Gösterebilirim?

Cvp.: WordPress gönderilerini bir liste düzeninde göstermek için PostX Post List #3'ü kullanabilirsiniz. Bunu şu şekilde yapabilirsiniz:

• Gönderi listelerinizin gösterilmesini istediğiniz sayfaya gidin. Bu bir listeyse, onu kenar çubuğu olarak gösterebilirsiniz.
• Bunu yapmak için bir sütun bloğu (tercihen 70/30) almanız gerekir. Ana içeriğinizi sütunun solunda ve gönderi listesini sağda göstermek istiyorsunuz.
• Bunu yapmak için sağ sütundaki '+' simgesine tıklayın ve Gönderi Listesi #3'ü seçin. Ana içeriğinizi sol tarafta kullanabilirsiniz.
• Farklı düzenler ve hazır tasarımlar arasında da geçiş yapabilirsiniz. Önizlemeyi görmek için istediğinizi seçin.

Bu, WordPress Gönderi Listelerini Liste Düzeninde göstermenin yalnızca bir yoludur. PostX tekrar, PostX'in keşfetmeniz için birçok seçeneği var.

S: WordPress'te Yazı Kategorilerini Nasıl Gösterebilirim?

Cvp.: WordPress'te Posta Kategorilerini göstermek için, seçtiğiniz bir PostX hazır bloğunu içe aktarmanız gerekir. Buradan kategori ayarlarını beğeninize göre değiştirmeyi seçebilirsiniz. Önceki bölümlerde yayınımıza bazı değişiklikler getirdik. Önce kontrol ettiğinizden emin olun.

Muhtemelen PostX'in 'Belirli Renk (Pro)' özelliğinden bahsetmeye değer. Bununla, her gönderide kategorinin kendi rengiyle nasıl görüneceğini gösterebilirsiniz. Böyle bir özellik kesinlikle keşfedilmeye değer.

S: WordPress'te Özel Bir Yazı Tipi Şablonu Nasıl Oluşturulur?

Cvp.: Özel gönderi türleri, WordPress için kendi özel alanlarınızı ekleyebileceğiniz özel içeriklerdir. Örneğin, kendi kitap inceleme sitenizi oluşturuyorsanız, kendi özel alanlarınızla özel bir gönderi türü oluşturmanız gerekebilir.

Örneğin, özel bir gönderi türü için WordPress function.php dosyanıza aşağıdaki kod parçasını eklemeniz gerekir:

 add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'your_custom_name', array( 'labels' => array( 'name' => __( 'Custom_names' ), 'singular_name' => __( 'Custom_names' ) ), 'public' => true, 'has_archive' => true, ) ); }

İşte özel gönderi türlerinin örneklerini bulabileceğiniz hızlı bir bağlantı.

S: WordPress'te kaç tür yazı formatı mevcuttur?

Cvp.: Varsayılan olarak, WordPress 3 özel gönderi türüyle gelir: a)yazı, b)sayfa, c)ek

WordPress gönderi türleri hakkında daha fazla bilgiyi buradan inceleyebilirsiniz.

S: Elementor ile bir Posta Listesi nasıl kullanılır?

Cvp.: PostX 'Kayıtlı Şablonlar' işlevini kullanarak WordPress gönderi listesini Elementor ile kolayca gösterebilirsiniz. Bunu yapmanın iki yolu vardır: Ancak her iki durumda da oluşturduğunuz sayfanın kısa kodunu yapıştırmanız gerekecektir. Bundan sonra, işte nasıl yapıldığı:

• WordPress kontrol panelinizden Sayfalar'a gidin. Yeni bir sayfa oluşturabilir veya mevcut bir sayfayı düzenleyebilirsiniz.
• 'Elementor ile Düzenle'ye tıklayın [Elementor eklentisinin kurulu ve etkinleştirilmiş olduğunu varsayıyoruz].
• Düzenleyiciye girdikten sonra yeni bir bölüm oluşturun/düzenleyin.
• Soldaki öğeler bölmesinde kısa kodları arayın.
• Kısa kodlar öğesini az önce oluşturduğunuz bölüme sürükleyin.
• Şimdi kopyaladığınız kısa kodu 'Kısa kodunuzu girin' alanına yapıştırın.
• Son olarak, değişiklikleri kaydedin.

Ayrıca , Elementor için PostX Gutenberg Post Blocks Element'i kullanarak posta listesi WordPress şablonunu da gösterebilirsiniz. Eleman ekleme işlemi aynıdır. Tek yapmanız gereken, şablonun PostX Kayıtlı Şablonlar Düzenleyicisinden yayınlandığından emin olmaktır. Ardından, Elementor Düzenleyicisine girdikten sonra:

• Elementor için PostX Gutenberg Post Blocks Elementini arayın.
• Gönderi kategorisi listenizi veya tercihinize benzer bir şeyi göstermek istediğiniz bölüme ekleyin.
• Açılır menüden göstermek istediğiniz şablonu seçin.
• Son olarak, değişiklikleri kaydedin.

Bunlar, PostX Elementor öğesini kullanarak bir WordPress gönderi listesini göstermenin yollarıdır. Ancak kısa kodları diğer popüler WordPress oluşturucularla da kullanabilirsiniz.

Son düşünceler

Takip ettiyseniz, WordPress gönderi listesi stilleri oluştururken PostX'in ne kadar esnek olduğunu bilirsiniz. Ayrıca, bu eklenti ile haber dergisi, yemek tarifi, seyahat, moda blogları ve daha fazlasını oluşturmak için farklı ayarları değiştirmenin ne kadar kolay olduğunu artık biliyor olmalısınız.

PostX'teki tasarım esneklikleri hakkında ne düşündüğünüze dair düşüncelerinizi duymak isteriz. Aşağıdaki yorumlarda sesi kapatın.

Ayrıca, yeni özellikler sıcak bir şekilde geliyor! Hemen köşeyi dönünce gelen güncellemeler için bizi izlemeye devam edin.

Şerefe!