WordPress Gutenberg Düzenleyicide Metin Nasıl Özelleştirilir (Arka Uç Alanı)

Yayınlanan: 2024-12-09

WordPress Gutenberg düzenleyicisi içerik oluşturmak için güçlü bir araçtır ancak varsayılan arka uç arayüzü her zaman her kullanıcının özel ihtiyaçlarını karşılamaz.

Birçok WordPress kullanıcısı ön uç tasarıma odaklanırken, arka uç alanı (düzenleyicinin kendisi) iş akışını kolaylaştırmak ve düzenleme deneyimini geliştirmek için özelleştirme fırsatları da sunar.

Bu makalede, kullandığınız herhangi bir WordPress temasına uygulayabileceğiniz özel PHP parçacıkları ve CSS değişiklikleri ekleyerek Gutenberg editörünün arka ucundaki metnin nasıl özelleştirileceğini keşfedeceğiz.

İster geliştirici ister WordPress tutkunu olun, bu kılavuz işinize yarayacak özel bir düzenleme ortamı oluşturmanıza yardımcı olacaktır.

WordPress Gutenberg Düzenleyicinin Arka Uç Alanındaki Metni Özelleştirme Adımları

Adım 1: Özel Kodu function.php dosyasına ekleyin

Öncelikle, editör (arka uç) ile web sitesinin ön ucu arasında daha iyi görsel uyum sağlamak için WordPress blok düzenleyicisini (Gutenberg) değiştirmek üzere özel kod eklemeniz gerekir.

WordPress kontrol panelinizde Görünüm > Tema Dosyası Düzenleyicisi seçeneğine gidin. Blok teması kullanıyorsanız Tema Dosyası Düzenleyicisini Araçlar menüsü altında bulabilirsiniz.

Tema Dosyası Düzenleyici sayfasına girdikten sonra Functions.php dosyası. Daha sonra aşağıdaki PHP pasajını function.php dosya içeriğinin sonuna yapıştırın. Daha sonra Dosyayı Güncelle butonuna tıklayarak tema dosyasını güncelleyin.

 // Gutenberg düzenleyicisine özel CSS ekleyin
function görenek_gutenberg_editor_styles() {
    add_theme_support('editör stilleri'); // Düzenleyici stillerini etkinleştir
    add_editor_style('custom-editor-style.css'); // Özel CSS dosyasını kuyruğa alın
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

// Özel düzenleyici stillerini doğrudan sıraya alın
function enqueue_custom_editor_css() {
    wp_enqueue_style(
        'özel düzenleyici stilleri', 
        get_template_directory_uri() . '/custom-editor-style.css',
        sıralamak(),
        '1.0'
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Adım 2: CSS Dosyasını Tema Dizininize ekleyin ( custom-editor-style.css )

Daha sonra tema dizininizde (örneğin, wp-content/themes/your-theme/) özel-editor-style.css adında bir CSS dosyası oluşturmanız gerekir.

1: WordPress için bir Dosya Yöneticisi yükleyin

Tema dizininizde bir CSS dosya adı oluşturmak için WordPress eklenti dizininde bulunan WordPress için herhangi bir dosya yöneticisini kullanabilirsiniz.

Lütfen kurun ve etkinleştirin, ardından tema dizininizde özel-editor-style.css adında yeni bir CSS dosyası oluşturmaya başlayın. Bu örnek için Gelişmiş Dosya Yöneticisi eklentisini kullanıyoruz ve mevcut WordPress temamız Astra olduğundan yol şu şekilde olacaktır: wp-content/themes/astra/custom-editor-style.css

2: CSS pasajını custom-editor-style.css dosyasına ekleyin

Daha sonra, Gutenberg'in arka uç alanındaki metni değiştirmek için özel stilleri bu dosyaya ekleyin. Aşağıdaki CSS parçacığını kopyalayıp giriş alanına yapıştırın.

İşte kullanabileceğiniz CSS pasajı:

 /* Paragraf yazı tipi boyutunu ve satır yüksekliğini özelleştirin */
.editor-styles-wrapper p {
    yazı tipi boyutu: 18 piksel !önemli;
    satır yüksekliği: 1,6 !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}



/* Editör yazı başlığını özelleştirin (H1) */
.editor-post-title__input {
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    yazı tipi boyutu: 40 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 700 !önemli;
    satır yüksekliği: 1,6 !önemli;
}

/* Başlık bloklarını özelleştirin (H2, H3, H4, H5) */

.editor-styles-wrapper h2{
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    yazı tipi boyutu: 36 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 700 !önemli;
    satır yüksekliği: 1,6 !önemli;
}

.editor-styles-wrapper h3{
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    yazı tipi boyutu: 32 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 700 !önemli;
    satır yüksekliği: 1,6 !önemli;
}

.editor-styles-wrapper h4{
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    yazı tipi boyutu: 30 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 700 !önemli;
    satır yüksekliği: 1,6 !önemli;
}

.editor-styles-wrapper h5{
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    yazı tipi boyutu: 28 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 700 !önemli;
    satır yüksekliği: 1,6 !önemli;
}


/* Sırasız listelerin stili */
.editor-styles-wrapper ul {
    sol kenar boşluğu: 20 piksel;
    sol dolgu: 20px;
    liste stili türü: disk;
    yazı tipi boyutu: 18 piksel !önemli;
    satır yüksekliği: 1,6 !önemli;
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}

/* Liste öğelerinin stili */
.editor-styles-wrapper ul li {
    kenar boşluğu alt: 10 piksel;
    yazı tipi boyutu: 18 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}

/* İç içe liste stilleri */
.editor-styles-wrapper ul ul {
    sol kenar boşluğu: 20 piksel;
    liste stili türü: daire;
}

/* Gerekirse sıralı listeler için ek stiller */
.editor-styles-wrapper ol {
    sol kenar boşluğu: 20 piksel;
    sol dolgu: 20px;
    liste stili türü: ondalık;
    yazı tipi boyutu: 18 piksel !önemli;
    satır yüksekliği: 1,6 !önemli;
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}

Custom-editor-style.css dosyasına CSS pasajını ekledikten sonra, Gutenberg editörünün arka uç alanındaki özelleştirmelerinizin başarıyla uygulanıp uygulanmadığını kontrol edebilirsiniz.

Yeni bir yazı türü (sayfa veya yazı) oluşturarak veya mevcut olanı seçerek WordPress Gutenberg düzenleyicisine gidin.

Kod ne yaptı?

1: Function.php dosyasındaki özel kod

İlk Fonksiyon

 function görenek_gutenberg_editor_styles() {
    add_theme_support('editör stilleri'); // Düzenleyici stillerini etkinleştir
    add_editor_style('custom-editor-style.css'); // Özel CSS dosyasını kuyruğa alın
}
add_action('after_setup_theme', 'custom_gutenberg_editor_styles');

Bu işlev, WordPress'e Gutenberg düzenleyicisinde özel bir CSS dosyası ( custom-editor-style.css ) kullanmasını söyler.

İkinci Fonksiyon

 function enqueue_custom_editor_css() {
    wp_enqueue_style(
        'özel editör stilleri', // Stil sayfası için benzersiz ad.
        get_template_directory_uri() . '/custom-editor-style.css', // CSS dosyanızın yolu.
        dizi(), // Bağımlılık yok.
        '1.0' // CSS dosyasının sürümü.
    );
}
add_action('enqueue_block_editor_assets', 'enqueue_custom_editor_css');

Bu işlev, özel-editor-style.css dosyasını doğrudan düzenleyiciye yükler.

Neden iki fonksiyon?

İlk işlev, WordPress Gutenberg düzenleyicisinin stilini oluşturmak için temel tema desteği ekler.
İkinci işlev CSS dosyasının nasıl ve ne zaman yüklendiğini kontrol eder.

2: Custom-editor-style.css dosyasındaki CSS pasajı

Paragraf Metnini Özelleştir (p)

 .editor-styles-wrapper p {
    yazı tipi boyutu: 18 piksel !önemli;
    satır yüksekliği: 1,6 !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}

Ne yapar:

Paragrafların yazı tipi boyutunu 18 piksel olarak değiştirir.
Daha iyi okunabilirlik için satır yüksekliğini 1,6'ya ayarlar.
Siyah metin rengi #000000'i uygular.
Normal bir yazı tipi ağırlığı (400) kullanır.
!important : Bu stillerin çakışan stilleri geçersiz kılmasını sağlar.

Gönderi Başlığını Özelleştir (H1)

 .editor-post-title__input {
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    yazı tipi boyutu: 40 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 700;
    satır yüksekliği: 1,6;
}

Ne yapar:

Yazı başlığı yazı tipini sans-serif geri dönüşüyle Arial olarak değiştirir.
40 piksellik büyük bir yazı tipi boyutu ayarlar.
Metnin kalın olmasını (yazı tipi ağırlığı: 700) ve siyah renk kullanılmasını sağlar.
Tutarlı bir çizgi yüksekliğini korur.

Başlık Bloklarını Özelleştirme (H2, H3, H4, H5)

 .editor-styles-wrapper h2 {
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    yazı tipi boyutu: 36 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 700;
    satır yüksekliği: 1,6;
}

H3, H4 ve H5 için yazı tipi boyutları küçültülerek benzer stiller uygulanır:

H2: 36 piksel
H3: 32 piksel
H4: 30 piksel
H5: 28 piksel

Ne yapar:

Tüm başlık düzeylerinde yazı tipi ailesini, rengini, ağırlığını ve satır yüksekliğini standartlaştırır.
Yazı tipi boyutlarını ayarlayarak net bir hiyerarşi sağlar.

Sırasız Listeler için Stil (ul)

 .editor-styles-wrapper ul {
    sol kenar boşluğu: 20 piksel;
    sol dolgu: 20px;
    liste stili türü: disk;
    yazı tipi boyutu: 18 piksel !önemli;
    satır yüksekliği: 1,6 !önemli;
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}

Ne yapar:

Sırasız listelerin soluna boşluk ekler (girinti).
Liste öğelerinin disk madde işareti stilini kullanmasını sağlar.
Paragraf metnine uyacak şekilde tutarlı yazı tipi boyutu, rengi ve satır yüksekliği uygular.

Liste Öğeleri için Stil (ul li)

 .editor-styles-wrapper ul li {
    kenar boşluğu alt: 10 piksel;
    yazı tipi boyutu: 18 piksel !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}

Ne yapar:

Okunabilirlik için liste öğeleri arasına boşluk ekler (kenar boşluğu-alt: 10 piksel).
Metin stillerinin genel tasarımla eşleşmesini sağlar.

İç İçe Liste Stilleri

 .editor-styles-wrapper ul ul {
    sol kenar boşluğu: 20 piksel;
    liste stili türü: daire;
}

Ne yapar:

İç içe sıralanmamış listeler için girintiyi ayarlar.
İç içe geçmiş listelerin madde işareti stilini daire olarak değiştirir.

Sıralı Listeler için Stil (ol)

 .editor-styles-wrapper ol {
    sol kenar boşluğu: 20 piksel;
    sol dolgu: 20px;
    liste stili türü: ondalık;
    yazı tipi boyutu: 18 piksel !önemli;
    satır yüksekliği: 1,6 !önemli;
    yazı tipi ailesi: 'Arial', sans-serif !önemli;
    renk: #000000 !önemli;
    yazı tipi ağırlığı: 400 !önemli;
}

Ne yapar:

Sıralı listeler için aralık ekler ve ondalık numaralandırmayı kullanır.
Sıralı listelerin paragraflar ve sırasız listelerle aynı tipografiyi takip etmesini sağlar.

Sonuç olarak

Bu makale, WordPress Gutenberg düzenleyicisinin arka uç alanındaki metni ne kadar kolay özelleştirebileceğinizi gösterir. Bu makalenin başında da belirttiğimiz gibi, Gutenberg'in arka uç alanındaki metni özelleştirmek, düzenleme deneyiminizi geliştirecektir. İçerik oluşturucular olarak verimliliğimizi, yaratıcılığımızı ve memnuniyetimizi doğrudan etkilediği için WordPress'te düzenleme deneyimini geliştirmek çok önemlidir.

Bu makaledeki yöntemi uygulamak (özel kodu function.php dosyasına ekleyin ve CSS dosyasını tema dizininize ekleyin), hangi WordPress temasını kullanırsanız kullanın Gutenberg'in arka uç alanındaki metni özelleştirmenize olanak tanır. Bu yaklaşım, değişikliklerinizin farklı temalar ve güncellemeler arasında tutarlı kalmasını sağlar.

Metninizin Gutenberg'in arka uç alanında en iyi görünümünü elde etmek için CSS pasajındaki değerleri ayarlamaktan çekinmeyin. İçeriğin okunaklı ve görsel olarak çekici olmasını sağlamak için yazı tipi boyutu, satır yüksekliği, renk ve kenar boşlukları gibi özellik değerlerini değiştirebilirsiniz. Örneğin, yazı tipi ailesini daha okunabilir bir yazı tipiyle değiştirmek veya okunabilirliği artıran bir satır yüksekliği ayarlamak düzenleme deneyimini iyileştirebilir. Ek olarak, dolgu ve kenar boşluğu özelliklerinin ayarlanması, öğelerin daha etkili bir şekilde aralıklandırılmasına yardımcı olabilir ve düzenin aşırı kalabalık görünmesini önleyebilir.