WordPress Blok Düzenleyici Arka Plan Rengini Özelleştirme

WordPress'te arka plan renklerini değiştirmenin kodlara dalmayı ve hiçbir şeyin bozulmamasını ummayı gerektirdiği zamanlar vardı. O günleri iyi hatırlıyoruz. WordPress o zamandan beri çok yol kat etti ve blok düzenleyici özelleştirmeyi her zamankinden daha kolay hale getirdi.

Yine de, birçok web sitesi sahibi arka plan renklerinin tam olarak istediği gibi görünmesini sağlamakta zorlanıyor.

Birden fazla WordPress sitesi çalıştırdıktan ve binlerce kullanıcıya yardım ettikten sonra, bu değişiklikleri ele almanın en basit ve en güvenilir yollarını öğrendik.

Bu kılavuzda, herhangi bir tema ve beceri seviyesi için çalışan yöntemleri kullanarak WordPress blok düzenleyicide arka plan renklerinin tam olarak nasıl değiştirileceğini göstereceğiz.

WordPress'te Blok Düzenleyici Arka Plan Rengini Neden Değiştirmeli?

WordPress blok düzenleyicisinin arka plan rengini çeşitli nedenlerle değiştirmek isteyebilirsiniz.

Örneğin, çoğu modern WordPress teması, OceanWP, GeneratePress ve daha fazlası dahil olmak üzere, blok düzenleyici için canlı web sitesiyle aynı arka plan rengini kullanır.

Ancak, WordPress temanız aynı renkleri kullanmıyorsa, düzenleyicideki gönderinizin görünümü, kullanıcılarınızın canlı web sitesinde göreceklerinden oldukça farklı görünecektir.

Başka bir neden basitçe kişisel rahatınız olabilir.

Uzun saatler yazı yazıyorsanız, parlak beyaz bir ekrana bakmak gözleriniz için zorlayıcı olabilir. Düzenleyicinin arka planını daha yumuşak bir renge değiştirmek, çalışma sürenizi çok daha keyifli hale getirebilir.

Bununla birlikte, WordPress düzenleyici arka plan rengini nasıl kolayca değiştirebileceğinizi görelim.

WordPress Düzenleyici Arka Plan Rengi Nasıl Değiştirilir

WordPress düzenleyici arka plan rengini, temanızın functions.php dosyasına özel kod ekleyerek değiştirebilirsiniz.

Ancak, kodda yapılan en küçük bir hata bile web sitenizi bozabilir ve erişilemez hale getirebilir.

Bu nedenle WPCode eklentisini kullanmanızı öneririz.

Kapsamlı testlerin ardından, WordPress web sitenize özel kod eklemenin en kolay ve en güvenli yolu olduğuna karar verdik. Daha fazla bilgi edinmek için WPCode incelememize bakın.

Öncelikle, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla talimat için lütfen WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, WordPress yönetici kenar çubuğundan Kod Parçacıkları » +Parçacık Ekle sayfasına gidin.

Buradan, ‘Özel Kodunuzu Ekleyin (Yeni Kod Parçacığı)’ seçeneğinin altındaki ‘Kod Parçacığını Kullan’ düğmesine tıklayın.

Bu sizi, kod parçacığınız için bir isim yazarak başlayabileceğiniz ‘Özel Kod Parçacığı Oluştur’ sayfasına götürecektir. Bu sadece sizin içindir ve kodu tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Ardından, ekranın sağ üst köşesindeki ‘Kod Türü’ menüsüne tıkladıktan sonra görünen komut isteminden ‘PHP Kod Parçacığı’nı seçin

Ardından, aşağıdaki kodu 'Kod Önizleme' kutusuna kopyalayıp yapıştırın:

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Bu kod parçacığı iki basit şey yapar. add_action kısmı, WordPress'e özel stilimizi yönetici alanının altbilgisine eklemesini söyler.

Bunun içinde, CSS kodu blok düzenleyicinin ana kapsayıcısını (.editor-styles-wrapper) hedefler ve background-color özelliğini yeni bir hex koduna ayarlar.

Bunu yaptıktan sonra, az önce yapıştırdığınız PHP kod parçacığında aşağıdaki kodu arayın:

background-color: #bee0ec;

Ardından, arka plan rengi seçeneğinin yanına tercih ettiğiniz rengin onaltılık kodunu eklemeniz gerekir.

Bir onaltılık kod kullanmak istemiyorsanız, bunun yerine 'beyaz' veya 'mavi' gibi bazı temel renk adlarını kullanabilirsiniz.

Ardından, ‘Ekleme’ bölümüne gidin ve ‘Otomatik Ekle’ seçeneğini belirleyin.

Ardından, kod parçacığının 'Konumunu' açılır menüden 'Yalnızca Yönetici' olarak seçmelisiniz.

Ardından, sayfanın başına geri dönün ve ‘Devre Dışı’ anahtarını ‘Etkin’ olarak değiştirin.

Son olarak, değişikliklerinizi kaydetmek için ‘Snippet Kaydet’ düğmesine tıklamayı unutmayın.

Şimdi, yönetici kenar çubuğundan blok düzenleyiciyi ziyaret edin.

PHP kod parçacığını ekledikten sonra blok düzenleyicinin sitemizde nasıl göründüğü kod parçacığı.

Video Eğitim

Video izlemeyi tercih ederseniz, WordPress blok düzenleyicisinin arka plan rengini özelleştirme hakkında YouTube öğreticimize göz atın:

Bonus Yöntem: Canlı Web Sitenizin Arka Plan Rengini Değiştirin

Ziyaretçilerinizin canlı web sitenizde gördüğü arka plan rengini değiştirmek istiyorsanız, yöntem WordPress temanıza bağlı olacaktır.

WordPress'in iki tür teması vardır: klasik temalar ve daha yeni blok temaları. Her iki yolu da göstereceğiz.

Yöntem 1: Tema Özelleştiriciyi Kullanma (Klasik Temalar İçin)

Çoğu klasik tema, renk değişiklikleri için Tema Özelleştiriciyi kullanır. WordPress kontrol panelinizden Görünüm » Özelleştir yolunu izleyerek oraya ulaşabilirsiniz.

Özelleştirici yüklendikten sonra, 'Renkler', 'Renkler & Karanlık Mod' veya benzeri etiketlenmiş bir bölüm arayın. Bu ayarların tam adı ve konumu temadan temaya değişebilir.

İçeride, değişikliklerinizi yapmak için bir renk seçici kullanmanıza olanak tanıyan 'Arka Plan Rengi' seçeneğini bulmalısınız. Sonuçtan memnun kaldığınızda, kaydetmek için 'Yayınla' düğmesine tıklamanız yeterlidir.

Yöntem 2: Tam Site Düzenleyiciyi Kullanma (Blok Temalar İçin)

modern bir blok tema kullanıyorsanız, bu değişiklikleri Tam Site Düzenleyicisinde yapacaksınız. Erişmek için yönetici kenar çubuğunuzda Görünüm » Düzenleyici'ye gidin.

Düzenleyicide, sağ taraftaki 'Stiller' simgesine tıklayın (yarısı dolu bir daireye benziyor). Bu, genel stiller panelini açacaktır.

Buradan 'Renkler'e ve ardından 'Arka Plan' seçeneğini seçin.

Artık tüm siteniz için yeni bir arka plan rengi seçebilirsiniz. Düzenleyici size canlı bir önizleme gösterecek ve işiniz bittiğinde ‘Kaydet’e tıklayabilirsiniz.

Her iki yöntem hakkında daha ayrıntılı bir anlatım için, WordPress web sitenizde renkleri nasıl özelleştireceğiniz konusundaki başlangıç kılavuzumuza bakabilirsiniz.

Düzenleyici Arka Planını Değiştirme Hakkında Sıkça Sorulan Sorular

WordPress düzenleyicisinin arka plan rengini değiştirmekle ilgili okuyucularımızın sıkça sorduğu bazı sorular şunlardır:

Bu kod parçacığı web sitemi yavaşlatır mı?

Hayır, bu özel kod web sitenizi yavaşlatmaz. WPCode kod parçasını yalnızca ‘Yalnızca Yönetici’ alanında yüklenecek şekilde ayarladığımız için, sitenizin ön ucuna ek bir kod eklemez. Yalnızca blok düzenleyiciyi aktif olarak kullanan oturum açmış kullanıcılar için yüklenir.

Katı bir renk yerine düzenleyici arka planı için gradyan veya resim kullanabilir miyim?

Evet, kullanabilirsiniz. CSS kodunda küçük bir değişiklik gerektirir. background-color yerine background özelliğini kullanırsınız.

Örneğin, basit bir doğrusal gradyan eklemek için, kod parçacığındaki CSS'niz şöyle görünebilir:

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

Daha karmaşık stiller oluşturmak için çevrimiçi CSS gradyan oluşturucularını kullanabilirsiniz.

Kod çalışmadı. Önce neyi kontrol etmeliyim?

Renk değişmiyorsa, önce WPCode kod parçacığınızdaki ayarlara tekrar göz atın. En üstteki geçişin ‘Aktif’ olarak ayarlandığından ve Ekleme konumunun ‘Yalnızca Yönetici’ olarak ayarlandığından emin olun.

Ayrıca, özellikle CSS seçicisindeki (.editor-styles-wrapper) ve onaltılık renk kodundaki olası yazım hataları için koda kendisi de bakın.

Kullanmak istediğim belirli bir rengin onaltılık kodunu nasıl bulabilirim?

En kolay yol, çevrimiçi bir renk seçici araç kullanmaktır. Google'ın Renk Seçicisi, HTML Renk Kodları veya Adobe Renk gibi web siteleri, herhangi bir rengi görsel olarak seçmenize olanak tanır. Kopyalayıp kod parçacığına yapıştıracağınız doğru onaltılık kodu (örneğin, #1a457c) anında size sağlayacaklardır.

Temamı güncellersem, blok düzenleyici arka plan rengi değişikliğini kaybeder miyim?

Hayır, değişikliği kaybetmezsiniz. Doğrudan temanızın functions.php dosyasını düzenlemek yerine WPCode gibi bir eklenti kullanmanın en büyük avantajı budur. Kod parçacığı temanızdan bağımsız olarak kaydedilir, bu nedenle tema güncellemelerinden sonra bile çalışmaya devam edecektir.

Umarım bu makale, WordPress düzenleyici arka plan rengini nasıl kolayca değiştireceğinizi öğrenmenize yardımcı olmuştur. Ayrıca, WordPress'te tam ekran düzenleyiciyi nasıl devre dışı bırakacağınıza dair nihai kılavuzumuza bakmak veya WordPress için en iyi Gutenberg blok eklentileri için en iyi seçimlerimize göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.