theme.json'un Özel Posta Türlerine ve Eklenti Çıktısına Genişletilmesi: Pratik Bir Kılavuz

Özet

Birçok WordPress geliştiricisi, özel posta türleri veya içerik çıktısı veren eklentiler (ör. referanslar, portföyler) oluşturur. Ancak theme.json—küresel stiller için merkezi yapılandırma—çoğu zaman bu özel öğeleri varsayılan olarak yok sayar ve tasarımda tutarsızlığa yol açar. Bu makale, özel posta türlerini theme.json stillerini devralacak şekilde kaydetme, belirli bloklar için ayarları geçersiz kılma ve eklenti çıktısını çekirdek tasarım belirteçleriyle köprüleme konularında size yol gösterir. Adım adım talimatlar, 'Ekip Üyesi' CPT'sini şekillendirme gibi gerçek dünya örnekleri ve performans ile üçüncü taraf çakışmalarıyla ilgili uyarılar alacaksınız. Sonunda, herhangi bir özel içeriğin sitenizin düzenleyici tarafından tanımlanan tasarım sistemiyle eşleşmesini sağlayabilirsiniz.

Hiç özel bir posta türü oluşturdunuz veya üçüncü taraf bir eklenti entegre ettiniz ve çıktısının theme.json dosyasında özenle yapılandırdığınız güzel tasarım sistemini tamamen görmezden geldiğini fark ettiniz mi? Yalnız değilsiniz. Varsayılan olarak, theme.json yalnızca çekirdek WordPress bloklarına ve kayıtlı blok stillerine uygulanır; özel posta türlerini ve eklenti tarafından oluşturulan içeriği kendi hallerine bırakır. Bu genellikle satır içi CSS, yinelenen yazı tipi yığınları veya kullanıcı deneyimini bozan uyumsuz bir renk paleti ile sonuçlanır. Ancak daha iyi bir yol var: theme.json'u bu özel öğeleri kapsayacak şekilde genişletebilir, tüm sitenizde tutarlı, sürdürülebilir bir tasarım sistemi sağlayabilirsiniz. Bu kılavuzda, kod örnekleri ve gerçek dünya uyarılarıyla birlikte bunu başarmak için dört pratik adımı ele alacağız.

theme.json Kapsamını Anlama

Derinlemesine incelemeye başlamadan önce, theme.json'un bir blok teması konsepti olduğunu anlamak çok önemlidir. Blok düzenleyici ve ön yüz için küresel stiller, ayarlar (renk paletleri ve yazı tipi boyutları gibi) ve blok özel stilleri tanımlar. Ancak etki alanı sınırlıdır: yalnızca register_block_type veya eski add_theme_support aracılığıyla theme.json özelliklerini açıkça destekleyen blokları kontrol eder. register_post_type ile oluşturulan özel posta türleri, bloklarla oluşturulmadıkça veya açıkça stillendirilmedikçe bu stilleri otomatik olarak devralmaz.

Adım 1: Özel Posta Türlerini Blok Düzenleyici Desteğiyle Kaydetme

İlk adım, özel posta türünüzün blok düzenleyiciyi kullandığından emin olmaktır. register_post_type çağrılırken 'show_in_rest' => true olarak ayarlayın ve supports dizisine 'editor' ekleyin. Bu, o posta türü için blok düzenleyiciyi etkinleştirir ve yazarların theme.json'dan blok düzeyi stilleri kullanmasına olanak tanır. Örneğin, bir "Ekip Üyesi" CPT'si:

function create_team_member_cpt() {
    $args = array(
        'public' => true,
        'show_in_rest' => true,
        'supports' => array( 'title', 'editor', 'thumbnail', 'custom-fields' ),
        'show_in_menu' => true,
        'labels' => array(
            'name' => 'Ekip Üyeleri',
            'singular_name' => 'Ekip Üyesi',
        ),
        'rewrite' => array( 'slug' => 'ekip' ),
    );
    register_post_type( 'team_member', $args );
}
add_action( 'init', 'create_team_member_cpt' );

Artık bir ekip üyesi yazısını düzenlerken, temanızın küresel stillerinin Paragraf, Başlık ve Görsel gibi çekirdek bloklara uygulandığı blok düzenleyiciyi göreceksiniz. Bu genellikle çoğu stil sorununu çözer. Daha ayrıntılı kontrole ihtiyacınız varsa, bir sonraki adıma geçin. theme.json ile blok temaları oluşturma hakkında daha derinlemesine bilgi için bkz. theme.json ile Özel Bir WordPress Blok Teması Nasıl Oluşturulur.

Adım 2: theme.json ile Özel Blok Stilleri Ekleme

Bazen özel posta türünüzün içeriğinin tüm örneklerine belirli stiller uygulamak istersiniz—örneğin, tüm yazıya bir arka plan rengi veya özel dolgu vermek. core/post-content'i hedefleyebilir veya içeriğinizi özel bir grup bloğuna sarıp bunu theme.json aracılığıyla şekillendirebilirsiniz. Aşağıdakileri theme.json dosyanıza styles nesnesinin altına ekleyin:

{
  "styles": {
    "blocks": {
      "core/post-content": {
        "css": "background-color: var(--wp--preset--color--light); padding: 2rem;"
      }
    }
  }
}

Bu, Ekip Üyesi CPT'niz de dahil olmak üzere tüm yazıların içerik alanına açık bir arka plan ve dolgu uygulayacaktır. Ayrıca düzenleyicide stil seçenekleri sağlamak için settings.blocks içinde blok özel varyasyonları tanımlayabilirsiniz.

Adım 3: Eklenti Çıktısı için theme.json Özel Özelliklerini Kullanma

Eklentiler genellikle kısa kodlar, widget'lar veya özel bloklar aracılığıyla içerik çıktısı verir. Bunları tutarlı bir şekilde şekillendirmek için theme.json tarafından oluşturulan CSS özel özelliklerinden yararlanın. Örneğin, temanız birincil rengi --wp--preset--color--primary olarak tanımlıyorsa, bunu eklentinizin CSS'sinde kullanabilirsiniz:

.my-plugin-button {
    background-color: var(--wp--preset--color--primary);
    font-size: var(--wp--preset--font-size--medium);
}

Bu, site yöneticisi theme.json içinde renk paletini değiştirdiğinde eklentinizin düğmesinin otomatik olarak güncellenmesini sağlar. Bunu sağlam kılmak için her zaman önceden ayarlanmış CSS değişkenlerini kullanın, değerleri sabit kodlamayın. Ek olarak, eklentiniz kendi bloklarını kaydediyorsa, JavaScript'te useSetting kullanarak veya PHP oluşturmada $attributes ileterek theme.json ayarlarını devralabilirsiniz; bu konu WordPress Dinamik Bloklarında Uzmanlaşma bölümünde ele alınmıştır.

Adım 4: Dinamik Blokları Yönetme

Dinamik içerik çıktısı veren özel bloklar (ör. bir referans kaydırıcısı) için, bloğu blok düzenleyici desteğiyle kaydetmeniz ve theme.json'a açıkça bağlamanız gerekir. PHP'de, 'render_callback' içeren $args ile register_block_type kullanın ve bloğunuzun block.json dosyasının 'supports' => array( 'color' => true, 'typography' => true ) ayarladığından emin olun. Ardından, oluşturma geri çağrınızda, wp_get_global_styles() aracılığıyla küresel stillere erişebilir ve uygulayabilirsiniz. Örneğin:

function render_testimonial_block( $attributes, $content ) {
    $styles = wp_get_global_styles();
    $color = $styles['elements']['link']['color']['text'] ?? '#000';
    return '<div style="color: ' . esc_attr( $color ) . ';">' . $content . '</div>';
}

Bu yaklaşım, özel bloğunuzun temanın tasarım belirteçlerine saygı duymasını sağlar. Blok kaydı hakkında daha fazla bilgi için bkz. Sağlam WordPress Eklentileri Oluşturma.

Uyarılar

theme.json'u genişletmek güçlü olsa da, şu tuzaklara dikkat edin:

1. Performans: theme.json'a çok fazla özel stil eklemek dosyayı şişirebilir ve CSS ayrıştırma süresini artırabilir. Küresel ayarlara bağlı kalın ve blok özel stilleri idareli kullanın.
2. Eklenti Çakışmaları: Bazı eklentiler theme.json ayarlarını sıfırlayabilir veya geçersiz kılabilir. Her zaman minimal bir eklenti setiyle test yapın ve özelleştirmelerinizi yeniden uygulamak için after_setup_theme kancasını kullanmayı düşünün.
3. Klasik Temalar: Temanız blok düzenleyiciyi kullanmıyorsa (yani klasik bir temaysa), theme.json sınırlı etkiye sahiptir. Bir blok temasına geçmeyi veya stilleri yüklemek için wp_enqueue_global_styles işlevini kullanmayı düşünün.
4. Tarayıcı Önbelleği: theme.json değişiklikleri önbelleğe alma nedeniyle hemen görünmeyebilir. Tarayıcı önbelleğini temizleyin ve stil sayfanız için sürümleme kullanın.

Sonuç

Artık özel posta türlerinin ve eklenti çıktılarının theme.json tasarım sisteminizle uyumlu çalışmasını sağlamak için net bir yol haritanız var. Anahtar, CPT'nizi blok düzenleyici desteğiyle kaydetmek, yazı içerik bloğu için belirli stiller tanımlamak, eklenti çıktısında CSS özel özelliklerini kullanmak ve özel bloklarınızı uygun theme.json entegrasyonuyla kaydetmektir. Bu yaklaşım tutarsızlığı ortadan kaldırır, bakımı azaltır ve site yöneticilerine tek bir doğruluk kaynağından görünüm ve hissi kontrol etme gücü verir. WordPress projelerinize bütünlük getirmek için bu adımları bugün uygulamaya başlayın.