Yöneticiler için WordPress blok düzenleyicisinin arka plan rengini özelleştirmek ister misiniz?
Bazen, özel bir müşteri projesi üzerinde çalışırken, WordPress’teki Gutenberg düzenleyici arka plan rengini marka renkleriyle eşleşecek şekilde değiştirmek isteyebilirsiniz.
Bu makalede, yönetici alanı için WordPress blok düzenleyicisinin arka plan rengini nasıl kolayca özelleştirebileceğinizi göstereceğiz.
Not: Bu kılavuz WordPress yöneticisinde editör rengini değiştirmeyi kapsamaktadır. WordPress ön uçtaki arka plan rengini değiştirmek istiyorsanız, bonus bölümüne ilerleyebilir veya WordPress‘te arka plan rengini değiştirme hakkındaki eğitimimize bakabilirsiniz.
WordPress’te Blok Düzenleyicinin Arka Plan Rengi Neden Değiştirilir?
WordPress blok düzenleyicisinin arka plan rengini çeşitli nedenlerle değiştirmek isteyebilirsiniz.
Örneğin, Astra, OceanWP, GeneratePress ve daha fazlası dahil olmak üzere çoğu modern WordPress teması, blok düzenleyici için canlı web sitesiyle aynı arka plan rengini kullanır.
Ancak, WordPress temanız aynı renkleri kullanmıyorsa, yazınızın editör içindeki görünümü, kullanıcılarınızın canlı web sitesinde göreceklerinden oldukça farklı görünecektir.
Arka plan rengini değiştirmenin bir başka nedeni de kişisel tercih olabilir.
Örneğin, varsayılan olarak blok düzenleyici düz beyaz bir arka plan kullanır. Bazı kullanıcılar uzun saatler boyunca beyaz ekrana bakmayı biraz stresli bulabilir. Göz yorgunluğu birçok insan için gerçek bir sorun olabilir ve varsayılan beyaz arka plan gözler için kolay değildir.
Bununla birlikte, WordPress editör arka plan rengini nasıl kolayca değiştirebileceğinizi görelim.
Video Eğitimi
Yazılı talimatları tercih ediyorsanız, okumaya devam edin.
WordPress Editör Arka Plan Rengi Nasıl Değiştirilir
Temanızın functions.php dosyasına özel kod ekleyerek WordPress editör arka plan rengini kolayca değiştirebilirsiniz.
Ancak koddaki en küçük bir hata bile web sitenizi bozabilir ve erişilemez hale getirebilir.
Bu yüzden WPCode eklentisini kullanmanızı öneriyoruz. Piyasadaki en iyi WordPress kod parçacıkları eklentisidir ve WordPress web sitenize özel kod eklemenin en kolay ve en güvenli yoludur.
İlk olarak, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla talimat için lütfen bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.
Not: WPCode’un bu eğitim için kullanabileceğiniz ücretsiz bir planı da vardır. Ancak, premium planı kullanmak size kod parçacığı kitaplığı, koşullu mantık ve daha fazlası gibi daha fazla özelliğe erişim sağlayacaktır.
Etkinleştirmenin ardından WordPress yönetici kenar çubuğundan Code Snippets ” +Add Snippet sayfasını ziyaret edin.
Buradan, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğinin altındaki ‘Snippet Kullan’ düğmesine tıklayın.
Bu sizi kod parçacığınız için bir ad yazarak başlayabileceğiniz ‘Özel Snippet 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ğ köşesindeki açılır menüden ‘Kod Türü’ olarak ‘PHP Snippet’i seçin.
Bundan sonra, aşağıdaki kodu kopyalayıp ‘Kod Önizleme’ kutusuna yapıştırın:
add_action( 'admin_footer', function() {
?>
<style>
.editor-styles-wrapper {
background-color: #bee0ec;
}
</style>
<?php
});
Bunu yaptıktan sonra, az önce yapıştırdığınız PHP parçacığında aşağıdaki kodu aramanız gerekir:
background-color: #bee0ec;
Ardından, arka plan rengi seçeneğinin yanına tercih ettiğiniz rengin onaltılık kodunu eklemeniz gerekir. Onaltılık kod kullanmak istemiyorsanız, bunun yerine ‘beyaz’ veya ‘mavi’ gibi bazı temel renk adlarını kullanabilirsiniz.
Bundan sonra, ‘Ekleme’ bölümüne gidin ve ‘Otomatik Ekle’ seçeneğini seçin.
Ardından, açılır menüden kod parçacığının ‘Konumunu’ ‘Yalnızca Yönetici’ olarak seçmelisiniz.
Bundan sonra, sayfanın en üstüne geri dönün ve ‘Etkin Değil’ anahtarını ‘Etkin’ olarak değiştirin.
Son olarak, değişikliklerinizi kaydetmek için ‘Snippet’i 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üzenleyicisi sitemizde bu şekilde görünüyordu.
Bonus: WordPress’te Arka Plan Rengini Değiştirin
Web sitenizin ön yüzündeki arka plan rengini değiştirmek istiyorsanız, bunu WordPress panosundan Görünüm ” Özelleştir ekranını ziyaret ederek yapabilirsiniz.
Bu, sol sütundaki ‘Renkler ve Koyu Mod’ sekmesine tıklamanız gereken tema özelleştir iciyi başlatacaktır. Özelleştiricinizin kullandığınız temaya bağlı olarak farklı görünebileceğini unutmayın.
Bu, kenar çubuğunda ‘Renk Seç’ seçeneğine tıklamanız gereken yeni bir panel açacaktır.
Renk Seçici şimdi ekranınızda açılacak ve tercih ettiğiniz arka plan rengini seçebilirsiniz. İşiniz bittiğinde, ayarlarınızı kaydetmek için üstteki ‘Yayınla’ düğmesine tıklamayı unutmayın.
Tema özelleştiriciden metin rengini, vurgu rengini, düğme rengini ve daha fazlasını da değiştirebilirsiniz. Ancak, bir blok tema kullanıyorsanız, bu değişiklikleri tam site düzenleyicisinde yapmanız gerekecektir.
Tüm bunlarla ilgili daha fazla ayrıntı için WordPress web sitenizde renkleri nasıl özelleştireceğinize ilişkin başlangıç kılavuzumuza bakabilirsiniz.
Umarız bu makale WordPress editör arka plan rengini nasıl kolayca değiştirebileceğinizi öğrenmenize yardımcı olmuştur. Ayrıca en kullanışlı ve zaman kazandıran WordPress kısayolları hakkındaki nihai kılavuzumuzu görmek veya en iyi WordPress sayfa oluşturucu eklentileri için en iyi seçimlerimize göz atmak isteyebilirsiniz.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Dennis Muthomi says
great post on customizing the WordPress block editor’s background color
I was wondering, though – is there a way to enable a dark mode for the block editor? (like maybe a code or a plugin)
I often work on my blog posts late at night, and the bright white background can be a bit tough on the eyes. It would be really cool if there was an option to switch to a darker color scheme for those late-night writing sessions
WPBeginner Support says
For a dark mode we would recommend taking a look at our guide below:
https://www.wpbeginner.com/plugins/how-to-add-dark-mode-to-your-wordpress-admin-dashboard/
Yönetici
Shawn says
This works better for me;
.editor-styles-wrapper, body.mce-content-body, .wp-block {
background-color: ;
color: ;
}
WPBeginner Support says
Thank you for sharing what worked for you!
Yönetici
Broc Hite says
This was great, but it was only an incomplete solution for me since I spend more time in the code editor vs the visual editor. I’m still Googling trying to figure out how to change the color there.
WPBeginner Support says
If you wanted to change the background color in the text/code editor, you could instead target .edit-post-text-editor in the code above.
Yönetici