WordPress theme.json Dosyası İçin Kapsamlı Bir Kılavuz

WordPress sitenizde özel stil değişiklikleri yapmak, genellikle birden çok dosyayı manuel olarak düzenlemek anlamına gelir. Ayrıca, tema değiştirirseniz, tüm bu ayarları sıfırdan yeniden yapılandırmanız gerekir. Bu zaman alan bir süreç olabilir.

Neyse ki, WordPress 5.8 sürümünü başlattığında yeni bir theme.json dosyası tanıttı. Bu, ön ve arka uçta blok düzenleyiciyi (ve tek tek blokları) şekillendirmek için ayrılmış bir alandır. Sonuç olarak, web siteniz için stilleri yönetmek çok daha kolaydır.

Bu gönderide, theme.json dosyasına daha yakından bakacağız. Ardından, theme.json dosyanızı nasıl düzenleyeceğinizi göstermeden önce bazı önemli noktaları gözden geçireceğiz.

WordPress'te theme.json nedir?

theme.json dosyası, Blok Düzenleyiciyi daha fazla kontrolle yapılandırmanızı sağlayan bir mekanizmadır. Bloklarınızın tümüne (veya bazılarına) varsayılan stiller atayabileceğiniz için, site çapında stilistik değişiklikler yapmak için kullanışlıdır.

Temelde theme.json , Block Editor API'nin yeteneklerini geliştiren bir çözümdür. Örneğin, theme.json ile düzenleyiciyi programlı olarak kontrol etme yeteneği kazanacaksınız. Ayrıca, bir blok stili sistemi entegre edebilirsiniz. Bu, kullanıcı, tema ve temel tercihleri ​​yönetme şeklinizi kolaylaştırır.

theme.json dosyası, Site Düzenleyicisi ile aynı zamanda tanıtıldı. Birlikte, theme.json, gelecekteki WordPress sürümleri için stilleri yönetmenin ilk önemli adımlarından biridir. Menülerinizde, üstbilgilerinizde ve altbilgilerinizde değişiklik yapabilmeniz için temanız (ve siteniz) üzerinde daha fazla kontrol sahibi olmanın harika bir yoludur.

Kısacası, Site Düzenleyici tonlarca küresel biçimsel değişiklik yapmanızı sağlarken theme.json, bloklarınız için özel seçenekleri yapılandırmanıza izin veren mekanizmadır.

Örneğin, belirli kullanıcılar için özelleştirme seçeneklerini gizlemek veya göstermek için Blok Düzenleyicinin ayarlarını yeniden tanımlayabilirsiniz. Ek olarak, düzenleyici için yeni bir genişlik veya hizalama yapılandırırken bloklarınız için varsayılan renkleri ve yazı tipi boyutlarını tanımlayabilirsiniz.

theme.json dosyası nerede bulunur?

theme.json dosyanızı tema dizininizin kök dizininde bulabilirsiniz. Site Düzenleyici kullanıyorsanız ve Twenty Twenty-Three gibi blok tabanlı bir temayı etkinleştirdiyseniz, o zaman kesinlikle bir theme.json dosyasına erişiminiz olur.

Ancak, seçtiğiniz tema bir theme.json dosyasıyla birlikte gelmezse, temaları değiştirebilir veya kendi dosyanızı oluşturabilirsiniz. Bazı temaların, theme.json'da yaptığınız değişikliklerle uyumsuz olabilecek çok özel CSS veya stil blokları ile geldiğini unutmamak önemlidir. Örneğin, Twenty Twenty-One'daki karanlık mod, theme.json'a eklenen biçimsel değişikliklerle geçersiz kılınamaz.

theme.json dosyanızı düzenlemeden önce yapmanız gerekenler

Artık theme.json dosyası hakkında biraz daha bilgi sahibi olduğunuza göre, düzenlemelerinizi yapmadan önce göz önünde bulundurmanız gereken bazı önemli faktörlere bir göz atalım.

1. Sitenizi yedekleyin

Önemli bir değişiklik yapmadan önce sitenizin yedeğini almanız önemlidir. Bu şekilde, bir şeyler ters giderse web sitenizi kurtarabilir ve baştan başlayabilirsiniz.

Jetpack VaultPress Yedekleme eklentisini kullanmak, sitenizi yedeklemenin en kolay yollarından biridir.

Bu Jetpack aracı, gerçek zamanlı, bulut tabanlı yedeklemeler oluşturur ve bunları WordPress.com'un güvenli sunucu ağında depolar. Ayrıca, restorasyon işlemi hızlı ve basittir.

Siteniz tamamen kapalı olsa bile, mobil uygulamadan tek tıklamayla geri yükleme avantajından yararlanabilirsiniz.

2. Bir hazırlama sitesi kullanmayı düşünün

Hazırlama sitesi, canlı web sitenizi etkilemeden yapmak istediğiniz değişiklikleri test etmenin harika bir yoludur. Temel olarak, bir hazırlık sitesi, web sitenizin genel kullanıma açık olmayan bir kopyasıdır. Bu nedenle, yeni özellikleri denemek veya sitenizi güncellemek için mahremiyet kazanacaksınız.

Bu şekilde, theme.json dosyasını düzenlerken ters giden şeyler için endişelenmenize gerek kalmayacak. Ayrıca, bir sorun olursa canlı sitenize erişmeye devam edebileceksiniz. Ayrıca, yayındaki sitenizde herhangi bir değişiklik yaptığınızda, bunların sayfalarınızın işlevselliğine zarar vermeyeceğinden emin olabilirsiniz.

Hazırlama sitesi kurmanın çeşitli yolları vardır. Web barındırıcınıza sorabilir, siteniz için manuel olarak farklı alt alanlar ayarlayabilir veya bir eklenti yükleyebilirsiniz. Ancak yerel bir WordPress geliştirme aracını tercih etmek daha kolay olabilir.

theme.json dosyanızı nasıl düzenlersiniz?

Bu noktada, theme.json dosyanıza erişmeye ve bunları düzenlemeye hazırsınız! Bu bölümde size, bir renk paleti oluşturmak ve bloklarınız için varsayılan yazı tipi boyutunu geçersiz kılmak gibi theme.json'u düzenlemenin bazı yararlı yollarını göstereceğiz.

Başlamak için web sitenizin kök dizinine erişmeniz gerekir. Bunu FileZilla gibi bir SFTP istemcisi kullanarak veya Dosya Yöneticinizi ziyaret ederek yapabilirsiniz. Ardından, public_html dizinine gitmeniz yeterlidir . Bunun içinde, wp-content klasörünüzü bulun.

Ardından, temalara gidin ve siteniz için aktif temayı seçin. Temanızda varsa theme.json'u burada bulacaksınız.

1. Varsayılan bir renk paleti oluşturun

Editör için ayarlanmış bir renk paleti oluşturmak isteyebilirsiniz. Bu şekilde, renklerinize hızlı bir şekilde erişebilir ve sayfalarınızda tutarlı bir görsel marka sağlayabilirsiniz.

Ayrıca, yalnızca renk havuzunuza eklediğiniz renklere erişebileceklerinden, sitenizde gönderiler ve sayfalar oluşturan başka kullanıcıların olması yararlı olabilir. Ek olarak, kendi tonlarını ve gradyanlarını oluşturamazlar.

Başlamak için, daha önce özetlediğimiz adımları izleyerek theme.json'u bulun. Bu ayarı etkinleştirmek için dikkate alınması gereken üç faktör vardır:

1. Özel degradeleri devre dışı bırakmanız gerekecek
2. Özel renk seçeneklerini devre dışı bırakmanız gerekecek
3. Marka renklerinizle özel bir palet eklemeniz gerekecek

SFTP veya Dosya Yöneticinizi kullanarak tema dosyalarınıza bağlandıktan sonra, aşağıdaki kodu kopyalayıp temanızın kök dizinine kaydetmeniz gerekir:

 { “version”: 1, “settings”: { “color”: { “custom”: false, “customGradient”: false, “gradients”:[], “link”: false, “palette”:[ { “slug”: “vivadcyanblue”, “color”: “#0693E3” }, { “slug”: “vividgreencyan”, “color”: “#00D084”, }, { “slug”: “white”, “color”: “#ffffff” } ] }

Tercihlerinizi yansıtmak için yukarıdaki kodu değiştirmeniz gerekeceğini unutmayın. Burada özel gradyan ve özel renk seçeneklerini devre dışı bıraktık.

Ayrıca, üç farklı tondan oluşan bir set renk paleti belirledik. Bu nedenle, kullanıcılar sitede gönderi ve sayfa oluşturduklarında yalnızca bu gölgelere erişebileceklerdir.

theme.json'da özel bir palet oluşturmanın harika yanı, WordPress'in gerekli tüm CSS'yi de yeniden yazacak olmasıdır. Bu şekilde, Blok Düzenleyicide yapılan herhangi bir renk değişikliği de ön uca yansıtılacaktır.

2. Özel yazı tipi boyutlarını yapılandırın

Paragraf bloğu için belirli yazı tipi boyutlarını yapılandırmak da yararlı olabilir. Elbette, blok bir dizi varsayılan yazı tipi boyutu sağlar, ancak theme.json'u tercihlerinize göre geçersiz kılmak için kullanabilirsiniz.

Yine, wp-content içindeki theme klasörünü ziyaret ederek temanızın kök dizinini bulmanız gerekecek. Ardından, theme.json'u bulun. Yazı tipi boyutları, settings → tipografi → fontSizes altında theme.json'a eklenir .

Ardından, değerlerinizi girmeniz gerekecek. Geçerli bir CSS yazı tipi boyutu değeri eklemek için boyutu kullanacaksınız. Bu arada, slug, WordPress'in özel CSS özelliğinde kullandığı tanımlayıcıdır. Ayrıca bir ad da ekleyebilirsiniz, ancak bu, düzenleyicide göreceğiniz şey olduğundan yalnızca kendi kullanımınız içindir.

WordPress'te, varsayılan "küçük" yazı tipi boyutu 13 piksel değerine sahiptir, bu nedenle değerlerinizi buna dayandırabilirsiniz. Sonuç olarak, bu kodu dosyaya ekledikten sonra theme.json dosyanız şöyle görünecektir:

 add_theme_support( 'editor-font-sizes', array(    array(        'name' => esc_attr__( 'Small', 'themeLangDomain' ),        'size' => 12,        'slug' => 'small'    ),    array(        'name' => esc_attr__( 'Regular', 'themeLangDomain' ),        'size' => 16,        'slug' => 'regular'    ),    array(        'name' => esc_attr__( 'Large', 'themeLangDomain' ),        'size' => 36,        'slug' => 'large'    ),    array(        'name' => esc_attr__( 'Huge', 'themeLangDomain' ),        'size' => 50,        'slug' => 'huge'    ) ) );

WordPress blok ayarlarınızı güncellemek için değişiklikleri kaydetmeniz yeterlidir.

3. Özel şablonlar ve şablon parçaları oluşturun

theme.json dosyasını düzenlemenin başka bir yolu da özel şablonlar ve şablon parçaları oluşturmaktır. Temalar, şablonlar klasöründe bulunan özel şablonları listeleyebildiğinden, onu kullanabilen gönderi türlerini ve kullanıcılarınıza gösterdiğiniz başlığı bildirebilirsiniz.

Başlamak için theme.json'u açın. Son ayar isteğe bağlı olsa da, bir ad, başlık ve gönderi türü düşünmeniz gerekecek. Daha sonra, dosyaya aşağıdaki kodu ekleyin:

 { “version”: 1, “customTemplates”: [ { “name”: “custom-template-example”, “title”: “The Custom Template Title”, “postTypes”: [ “page”, “post”, “my-cpt” ] } ] }

Bu noktada sayfalarınız, gönderileriniz ve özel gönderi türleriniz için bir şablon oluşturdunuz. Bir adım daha ileri giderek temanız için şablon parçaları oluşturabilirsiniz.

Bu şekilde, theme.json'u üst bilgi veya alt bilgi bloğu gibi bir şablon parçası için alan terimi bildirecek şekilde yapılandırabilirsiniz. Bunu theme.json'da tanımlayarak, ayarın tek bir blok yerine o şablon parçası varlığının tüm kullanımlarına uygulanmasını sağlayabilirsiniz.

Başlamadan önce, şablon bölümünüzün adını, başlığını ve alanını göz önünde bulundurmanız gerekir. Bir alan belirtmezseniz, bunun "kategorize edilmemiş" olarak ayarlanacağını ve blok varyasyonu tetiklemeyeceğini unutmamak önemlidir.

Temanız için bir şablon bölümü oluşturmak üzere theme.json dosyasına aşağıdaki kodu ekleyin:

 { “version”: 1, “templateParts”: [ { “name: “my-template-part”, “title”: “Footer”, “area”: “footer” } ] }

Ardından, theme.json'dan çıkmadan önce değişikliklerinizi kaydettiğinizden emin olun.

WordPress'te theme.json hakkında sık sorulan sorular

Artık theme.json'u nasıl düzenleyeceğinizi biliyorsunuz, ancak yine de bu konuda bazı şüpheleriniz olabilir. Bu nedenle, aşağıdaki en yaygın theme.json sorularından bazılarını yanıtladık!

Theme.json WordPress'te ilk ne zaman tanıtıldı?

theme.json dosyası ilk olarak WordPress 5.8'in piyasaya sürülmesiyle tanıtıldı. Bu, blok tabanlı temaları kullanma yeteneği ile birlikte Tam Site Düzenlemenin (FSE) başlatıldığı zamandır.

Bu sürüm, kullanıcılar site çapında değişiklikler yapma yeteneği kazandığından ve stilistik ayarlar üzerinde daha fazla kontrol sahibi olduğundan, platform için büyük bir değişime işaret etti. Daha sonra WordPress 5.9 ile theme.json ikinci bir sürüme dönüştü.

theme.json dosyasıyla neler yapabilirsiniz?

Kısacası, theme.json, stille ilgili yeni ayarları değiştirmenize ve tüm WordPress bloklarınıza uygulamanıza olanak tanır. Bu nedenle, stil değişiklikleri üzerinde daha iyi bir kontrol düzeyi elde edersiniz. Artı, bu değişiklikleri blok düzeyinde ayrı ayrı yapılandırma gereksinimini ortadan kaldırabileceğiniz anlamına gelir.

Örneğin, büyük harf, dolgu, kenar boşluğu ve özel satır yüksekliği gibi özellikleri devre dışı bırakmak/etkinleştirmek için theme.json dosyasını düzenleyebilirsiniz. Ayrıca, marka renklerinizi sayfanızdaki öğelere daha hızlı uygulamak için birden çok renk paleti, çift ton ve degrade ekleyebilirsiniz.

Dahası, tam yazı tipi boyutlarını belirleyebilir ve bunu sitenize uygulayabilirsiniz. Veya içeriğiniz için varsayılan genişlikler ekleyin ve şablon parçaları alanlarına şablon parçaları atayın.

theme.json dosyasını kullanmanın ön koşulları nelerdir?

theme.json'u düzenlemek, site genelinde biçimsel değişiklikler yapmanın kolay bir yoludur. Ancak, ne yazık ki, tüm kullanıcılar için bir seçenek değildir.

Öncelikle, Blok Düzenleyiciyi kullanmanız gerekecek. Sayfa oluşturucuları kullanmayı tercih ederseniz, bu işlevsellikten yararlanamayacaksınız. Bunun da ötesinde, biraz CSS bilgisine sahip olmanız ve site dosyalarınızı düzenlerken kendinizi rahat hissetmeniz gerekir.

Son olarak, theme.json'a erişebilmeniz gerekir. Daha önce tartıştığımız gibi, her temanın theme.json dosyası yoktur. Ayrıca, bazı temaların ayarları, theme.json'da yaptığınız tüm değişiklikleri geçersiz kılar.

Temanızda theme.json varsa, onu sitenizin kök dizininde bulabilirsiniz. Bunu SFTP kullanarak veya Dosya Yöneticinizi ziyaret ederek bulabilirsiniz. Ardından, wp-content içindeki temalar klasörünü bulun. Bu, theme.json'un bulunduğu yerdir. Temanızda theme.json yoksa temalar arasında geçiş yapabilir veya kendiniz bir theme.json dosyası oluşturabilirsiniz.

Kolaylaştırılmış web tasarımı için WordPress theme.json dosyasını kullanın

Site çapında özel değişiklikler yapmak, genellikle çok sayıda dosyayı düzenlemek veya çok sayıda manuel görevi tamamlamak anlamına gelir. Ancak theme.json ile siteniz için tüm biçimsel ayarları kontrol etmek ve yönetmek için ayrılmış bir alana sahip olacaksınız.

theme.json dosyası, WordPress 5.8'den itibaren sitenizin kök dizininde bulunur. Sitenize özel bir renk paleti uygulamak ve WordPress varsayılan yazı tipi boyutlarını geçersiz kılmak gibi kapsamlı değişiklikler yapmak için dosyayı düzenleyebilirsiniz.

theme.json dosyanızı düzenlemeden önce sitenizin yedeğini almanız önemlidir. Jetpack VaultPress Backup, çevrimdışıyken bile sitenizi geri yüklemenizi sağlayan, kullanımı kolay bir eklentidir. Ayrıca, tüm dosyalarınızı, WooCommerce verilerinizi ve veritabanınızı yedekler!