Elementor için JetEngine: özel yazı türleri, taksonomiler ve ilişkiler

Bir kurs kartı başlığı, görseli, konuyu ve süreyi gösterir. Eğitmenin profilinde yalnızca o eğitmenin kursları listelenir. Kurs kaydını bir kez değiştirdiğinde, aynı kaydı kullanan dinamik kartlar yeni bilgiyi bulundukları her yerde okur. Elementor için JetEngine ile oluşturacağımız yapı budur.

Bu uygulama örneği resmi belgelere dayanır ve bir kurs kataloğu oluşturur. Kayıt işlemleri, sınavlar ve ödeme akışı için ayrı bir uygulama gerekir. Courses ve Instructors, yani kurslar ve eğitmenler, kendi kayıtlarına sahiptir. Design ve Development terimleri kataloğu gruplandırır; kaydedilmiş bir ilişki her kursu eğitmenine bağlar. Aynı yaklaşımı emlaklar ile danışmanlar, projeler ile müşteriler veya etkinlikler ile konuşmacılar için de kullanabilirsin.

JetEngine içerik yapısını ve dinamik bileşenleri sağlar. Elementor sayfanın düzenini oluşturur. Dikkat isteyen nokta bu ikisinin bağlantısıdır: sorgu yanlış nesneden başlarsa iyi tasarlanmış bir kart bile yanlış kursları gösterir.

Bu rehber tek bir modeli tanımlama aşamasından ziyaretçiye gösterimine kadar izler. Ardından ilişkiyi ters yönde sorgulamayı ve boş ya da hatalı listelerin nedenini bulmayı açıklar.

Yazı türü, alan, taksonomi ve ilişki arasında seçim yap

Sayfa oluşturucuyu açmadan önce hangi bilgileri saklayacağını belirle. Örneğimizde kursun başlığı, açıklaması, öne çıkan görseli, süresi ve konusu vardır. Eğitmenin adı, biyografisi ve portresi vardır. Eğitmen tek bir kurstan bağımsızdır ve birden fazla kurs verebilir.

Her bilgiyi uygun yapıya yerleştirmek için şu tabloyu kullan:

WordPress taksonomi ile terimi ayırır: Topic taksonomidir; Design ve Development onun terimleridir. Taksonomi belgeleri bu sınıflandırma modelini açıklar.

Eğitmenin adını bir metin alanına yazabilirsin. Ancak bu durumda her kurs kendi kopyasını taşır. Yeniden kullanılabilen bir profil, biyografiyi ve portreyi güncellemek için tek bir yer sağlar; ilişki ise bu profilin hangi kurslarla bağlantılı olduğunu belirler. Benzer şekilde, yalnızca kursları sınıflandırmak için kullanılan bir konunun ayrı bir içerik kaydı olması gerekmez.

Bu örnekte her kursun bir eğitmeni vardır; her eğitmenin birden fazla kursu olabilir. Dolayısıyla ilişki bire çok, yani one-to-many olur. Bir kursu birden fazla eğitmen verebiliyorsa many-to-many seç. Bağlantıları oluşturmadan önce bu içerik kuralını belirle.

WordPress ve Elementor ile dinamik içerik için gerekenler

JetEngine ve Elementor'u kurup etkinleştir. Crocoblock'un Elementor listeleme rehberi, yeniden kullanılabilen kartı ve Listing Grid'i oluşturmak için Elementor Free ile JetEngine kullanır.

Özel tekil içerik ve arşiv şablonları için ayrı bir şablon sistemi gerekir. Elementor Pro'nun Theme Builder özelliğini veya ayrı bir eklenti olan JetThemeCore gibi uyumlu bir sistemi kullanabilirsin. Crocoblock, JetThemeCore tekil şablonlarını Elementor Free ve JetEngine ile açıklar. Elementor Pro seçeneği için Elementor Pro incelememiz oluşturucunun daha geniş kapsamını anlatır.

Bu görevleri birbirinden ayır. Listeleme şablonu, tekrarlanacak tek bir kartı tasarlar. Tekil şablon, ayrıntı sayfasını bu kartın çevresinde düzenler. Courses türünü tanımlamak bu iki tasarımı kendiliğinden oluşturmaz.

Mevcut bir katalog üzerinde çalışıyorsan deneme ortamı kullan. Seçtiğin teknik tanımlayıcıları not al; alanlar, listelemeler ve sorgular bu değerleri kullanacak. Önerilen tanımlayıcılar kurulumunda zaten varsa çakışmayan başka değerler seç.

JetEngine özel yazı türlerini ve kurs alanlarını oluştur

JetEngine → Post Types → Add New yolunu aç. Courses türünü oluştur, ardından Instructors için aynı işlemi tekrarla. Crocoblock'un CPT oluşturma rehberi bu tanımlama ekranını açıklar.

Örnekteki tanımlayıcılar şunlardır:

Bu anahtarlar, editörlerin gördüğü okunabilir etiketlerden farklıdır. WordPress yazı türü tanımlayıcılarını 20 karakterle sınırlar. Projeye ait bir önek çakışmaları azaltmaya yardımcı olur. WordPress'in yazı türü tanımlama önerilerini incele.

Her CPT'nin gelişmiş ayarlarında başlık, düzenleyici ve öne çıkan görsel için Supports seçeneklerini ayarla. Bu herkese açık katalogda Is Public, Publicly Queryable ve Show Admin UI seçeneklerini etkinleştir. Böylece kayıtların herkese açık ayrıntı sayfaları ve yönetim menüsü olabilir. Courses için yerel bir kurs arşivi istiyorsan Has Archive seçeneğini aç. CPT ayarları belgesi bu kontrollerin farkını açıklar.

Öne çıkan görsel özelliği temanın desteğine de bağlıdır. Bu koşul WordPress'in desteklenen yazı özellikleri belgesinde belirtilir.

Tek bir kursu veya eğitmeni doğrudan Elementor'da düzenlemek istiyorsan ilgili yazı türünü Elementor → Settings bölümünde etkinleştir. Bu ayar “Edit with Elementor” seçeneğini kontrol eder. Yeniden kullanılabilen bir listeleme oluşturmak veya tekil şablon uygulamak ayrı işlemlerdir. CPT düzenleyicisi ayarlarını buradan inceleyebilirsin.

Kurs özellikleri için değişmeyen alan adları kullan

Courses türünün meta alanları bölümünde Number türünde bir Duration alanı ekle. wpperk_duration_minutes gibi bir tanımlayıcı kullan. Alan açıklamasında, editörün süreyi birim yazmadan dakika olarak girmesi gerektiğini belirt. 90 değerini sakla; görüntüleme şablonunda sonuna “dk” ekle.

Katalogda ana açıklamadan ayrı bir ders programı gerekiyorsa wpperk_syllabus adlı isteğe bağlı WYSIWYG alanını ekle. Gerekmiyorsa kurs açıklaması için normal düzenleyiciyi kullan ve ek alanı atla.

JetEngine görünür etiket ile saklanan Name/ID değerini ayırır. Otomatik oluşturulan adı doğrudan kabul etmek yerine kaydetmeden önce ID'yi kontrol et. Alan türleri belgesi Number, WYSIWYG ve alan ayarlarını açıklar.

Bu örnekte bütün kayıtlarda dakika kullan. Başka bir birimle girilen süre, aynı kart etiketini yanıltıcı hale getirir ve karşılaştırmaları bozar. Düzenleme talimatına “Dakika cinsinden süre” yaz. Böylece başka bir editör de hangi değeri gireceğini tahmin etmek zorunda kalmaz.

Topic taksonomisini bağla ve içerik kayıtlarını ekle

JetEngine → Taxonomies → Add New yolunu aç. Taksonomiye Topic adını ver, wpperk_topic gibi benzersiz bir anahtar seç ve Courses türüne bağla. Kaydettikten sonra Courses altındaki taksonomi menüsünden Design ve Development terimlerini ekle.

Her kursa bir terim ata ve kursu kaydet. Taksonomi oluşturmak sınıflandırma yapısını tanımlar; mevcut kayıtlara kendiliğinden terim atamaz. Crocoblock'un taksonomi kurulum rehberi iki işlemi de gösterir.

Bu iki konu için düz bir taksonomi kullan. Daha sonra Design → Interface Design ve Design → Graphic Design gibi alt konular gerekirse hiyerarşik bir taksonomi bu yapıyı temsil edebilir. Terimlerin hiyerarşisi, eğitmen ile kurs arasındaki ilişkiden ayrıdır.

Şimdi üç eğitmen ve üç kurs kaydı oluştur. Aşağıdaki adlar ve değerler kurulumu kontrol etmek için hazırlanmış örneklerdir:

Maya Chen, Omar Ali ve Lena Ortiz'i Instructors kayıtları olarak ekle. Kurs açıklamalarını ve öne çıkan görsellerini yerleştir, sayısal süreleri gir ve katalogda görünmesini istediğin örnek kayıtları yayımla. Daha sonra boş sonucu kontrol etmek için Lena'ya kurs bağlama.

Bir alanın tanımı varsa ancak kayıt üzerinde değeri yoksa yararlı bir süre çıktısı oluşmaz. İçerik kaydı olmayan bir listeleme şablonunun tekrarlayacağı anlamlı veri de yoktur. Kataloğun görünümünü tasarlamadan önce bu küçük veri kümesini doldur.

JetEngine ilişkilerini ayarla ve kayıtları bağla

JetEngine → Relations → Add New bölümünü aç. Instructor Courses adlı bir ilişki oluştur. Üst nesne olarak Instructors, alt nesne olarak Courses ve ilişki türü olarak one-to-many seç.

Her iki nesne için düzenleme kontrollerini etkinleştir. Böylece bağlantılar hem eğitmen hem kurs ekranlarından yönetilebilir. Relations ayarları belgesi kontrolleri ve ilişki türlerini açıklar.

“Parent” ve “child” bu bağlantının yönünü anlatır. Kurs yazılarını WordPress'in yerel hiyerarşisinde eğitmen yazılarının altına yerleştirmez. Sorguyu kurarken bu ayrımı koru.

Maya'nın eğitmen kaydını aç, ilişkili alt öğeler alanını bul, mevcut iki Design kursunu seç ve kaydet. Omar'ı WordPress geliştirme kursuna bağla. İlişki kontrolleri etkinse üst öğe bağlantısını kurs kaydından da yönetebilirsin. Crocoblock, ilişkili öğeleri düzenlemeyi ilişkiyi tanımlamaktan ayrı olarak açıklar.

Ardından bir kursu açarak doğru eğitmenin bağlı olduğunu doğrula. Aynı adlar, aynı taksonomi terimleri veya WordPress yazı yazarları bu ilişkiyi oluşturmaz. İki kayıt arasında kaydedilmiş bir bağlantı gerekir.

Biyografiyi eğitmen kaydında, süreyi kurs kaydında tut. İleride bir kursu birden fazla eğitmen verecekse ve her eğitmen-kurs eşleşmesinde farklı bir öğretim rolü gerekiyorsa bu bilgiyi bağlantı üzerinde sakla. JetEngine ilişki meta verilerini ve bunların dinamik gösterimini destekler.

Bir kurs kartı oluştur ve Listing Grid ile tekrarla

JetEngine → Listings/Components bölümünde yeni bir listeleme ekle. Kaynak olarak Posts, yazı türü olarak Courses ve görünüm olarak Elementor seç. Listelemeye Course Card adını ver. Listeleme şablonu belgesi bu kaynak ayarlarını açıklar.

Kaynağı Post thumbnail olan bir Dynamic Image ekle. Ardından Post/Term/User/Object Data kaynağını ve Title nesne alanını kullanan Dynamic Field ekle. Permalink kaynağını kullanan Dynamic Link ile ayrıntı bağlantısını oluştur. Bu JetEngine bileşenleri ilk kursun metnini kopyalamak yerine etkin kurs kaydını okumalıdır.

Süre için başka bir Dynamic Field ekle. Kaynak olarak Meta Data seç ve wpperk_duration_minutes alanını kullan. Customize field output seçeneğini etkinleştirip %s dk yaz; yer tutucu kaydedilmiş değeri temsil eder. İsteğe bağlı değerler için alanın gizlenmesini veya yararlı bir yedek metin göstermesini seç. Dynamic Field belgesi biçimlendirme ve boş değer kontrollerini açıklar.

Topic bilgisini göstermek için JetEngine'in Dynamic Terms bileşenini kullan ve Topic taksonomisini seç. Konu etiketi ile süre etiketi kartta benzer görünse de farklı veri kaynaklarından gelir.

Kartı sade tut: görsel, başlık, konu, süre ve açık bir ayrıntı bağlantısı. Tam açıklamayı ve isteğe bağlı programı kursun tekil sayfasında göster. Başlık seviyesini sayfanın yapısına göre seç; uzun kurs adlarını mobil genişlikte kontrol et.

Listelemeyi kaydet. Normal bir Elementor sayfasına Listing Grid ekle ve temel kataloğu kontrol etmek için Course Card seç. İlişki sorgusunu uygulamadan önce farklı kursların farklı başlıklar, görseller ve süreler ürettiğini doğrula. Böylece veriyi okuma hatalarıyla kayıt seçimi hatalarını birbirinden ayırırsın.

Yalnızca mevcut eğitmenin kurslarını göster

Kart görünümü belirler. Sorgu hangi kayıtların gösterileceğini belirler. Yalnızca ilişki bağlantılarına dayanan bir liste için JetEngine → Query Builder → Add New bölümünde doğrudan Relations Query oluştur. Adını Courses for Current Instructor olarak belirle.

Sorgu türü olarak Relations Query ve ilişki olarak Instructor Courses seç. Sabit üst öğenin alt öğelerini iste; başlangıç nesnesi olarak mevcut nesneyi kullan. Ekrandaki kontroller şunlardır:

Sorguyu kaydet, ardından seçtiğin sistemle Instructor Single şablonunu oluştur. JetThemeCore kullanıyorsan Crocoblock → Theme Builder bölümünde bir sayfa şablonu oluştur. Koşulu Include → Singular → Instructors → All olarak ayarla ve gövde için bir Elementor şablonu oluştur. Elementor Pro kullanıyorsan Single Post şablonu oluşturup görüntüleme koşullarını Instructors türüne uygula.

Eğitmenin başlığı, öne çıkan portresi ve yazı içeriğindeki biyografisi için dinamik bileşenler kullan. Profilin altına Listing Grid ekle, Course Card seç ve Custom Query bölümünde Use Custom Query seçeneğini etkinleştir. Courses for Current Instructor sorgusunu seç. Şablonu kaydet ve koşullarının eğitmen kayıtlarına uygulandığını doğrula.

Gerçek bir eğitmen adresinde sorgu o eğitmenin ID'sinden başlar ve bağlı kursların ID'lerini getirir. Relations Query belgesi sorgunun yönünü ve başlangıç nesnesi seçeneklerini açıklar.

Maya, Omar ve Lena'nın herkese açık profillerini aç. Maya iki, Omar bir kurs kartı göstermeli; Lena'da kurs kartı olmamalı. Boş durumu anlaşılır biçimde düzenle. Ziyaretçi, o eğitmenin henüz listelenmiş kursu olmadığını anlayabilsin.

Açık yazı koşulları için ayrı bir Posts Query kullan

Doğrudan Relations Query, bağlantılara göre öğe getirmek için uygundur. Yalnızca yayımlanmış yazıları açıkça seçmek, sıralamak veya ek taksonomi ve meta veri koşulları kullanmak için ayrı bir Posts Query oluştur.

Yazı türü olarak Courses ve yazı durumu olarak Published seç. Post & Page → Post In alanında Related Items makrosunu kullan. Instructor Courses ilişkisini seç, Child Object iste ve başlangıç ID'sini Current Object ID üzerinden al. Sorguyu kaydedip Listing Grid'in özel sorgusu olarak seç. Crocoblock'un yazı ilişkileri rehberi bu yolu gösterir.

Makronun gelişmiş ayarlarını aç. Kurulumunda bulunmadığını doğruladığın bir yazı ID'sini fallback olarak belirle. Boş bir dahil etme makrosu sorgunun bütün kayıtları döndürmesine neden olabilir. Query Builder makro rehberi bu davranışı açıklar. Örnek bir numaranın kendi sitende kullanılmadığını varsayma.

Lena'yı tekrar kontrol et. Ardından taslak durumundaki bir kursu bağla ve yalnızca yayımlananları seçen sorgunun bunu dışladığını doğrula. Bunlar uygulaman gereken kabul kontrolleridir; düzenleyici önizlemesi tek başına herkese açık sayfanın davranışını kanıtlamaz.

Kurs sayfasında ilişkinin yönünü tersine çevir

Instructors kaynağından Instructor Card listelemesi oluştur. Course Single şablonunda, sabit alt öğenin üst öğelerini isteyen ikinci bir Relations Query kullan. Bu kez başlangıç nesnesi kurstur.

One-to-many modelimizde kursa bağlı tek bir eğitmen vardır. Many-to-many modelinde birkaç eğitmen dönebilir. Görüntüleme yönünü değiştirmek bu temel kuralı değiştirmez.

Mevcut nesne bağlamını bilinçli seç

Bir eğitmen listelemesinde mevcut nesne, o anda gösterilen eğitmen kartı olabilir. İç içe bir kurs listelemesinde mevcut nesne kursa dönüşebilir. Etkin listeleme öğesinden bağımsız olarak dıştaki tekil sayfanın nesnesini kullanmak istediğinde Default WordPress Object (for current page) seçeneğini kullan.

Kurslarını isteyen sorgu için bu genel nesne yine bir eğitmen olmalıdır. Normal bir açılış sayfasında genel nesne açılış sayfasının kendisidir. İlişki bağlamı rehberi bu farkı açıklar. Bütün eğitmenler için hazırlanmış bir şablona Maya'nın ID'sini sabit değer olarak yazma.

Tasarımı değiştirmeden önce veriyi kontrol et

Listeleme yanlış görünüyorsa önce kayıtları ve seçim sorgusunu takip et:

JetEngine ilişkisi yerine Post Parent ID kullanma. Bu kontrol WordPress'in yerel üst-alt yazı yapısını sorgular. Makro yönteminde ilişkili yazı ID'leri Post In alanına gelmelidir. Posts Query ayarlarını incele.

Maya'dan bir kursun bağlantısını kaldır. Kursun kendi kaydı korunurken Maya'nın ızgarasından çıktığını doğrula. Süresini güncelle ve kartın gösterildiği her yerde yeni değeri kontrol et. Kurs sayfasındaki ters sorguyu, mobil düzeni ve ayrıntı bağlantılarını da incele.

Bu kontrollerden sonra yalnızca katalog gerektiriyorsa ziyaretçi filtreleri ekle. Crocoblock'un Listing Grid filtreleme akışı ayrı JetSmartFilters eklentisini kullanır. Ön yüzden içerik göndermek için JetFormBuilder form alanlarını yazılara eşleyebilir ve JetEngine ile Connect Relation Items eylemini kullanabilir. Bunun için ayrı bir form kurulumu gerekir; yönetim tarafındaki ilişki tek başına içerik gönderme ve düzenleme akışını oluşturmaz.

Üç örnek kursla başlayıp modeli, bağlantıları ve sorgunun iki yönünü doğrula. Ardından aynı alanları kullanarak kataloğu genişlet. Sonraki kurs için yeni bir kayıt, konu ataması ve eğitmen bağlantısı yeterli olmalı; yeniden kullanılabilen Elementor düzeni onu göstermek için hazır olacaktır.