WordPress’te Arka Plan Nasıl Değiştirilir? » Sıra Matematik

In: Search Optimization


WordPress web sitenizin arka planını değiştirmenin kolay bir yolunu mu arıyorsunuz?

Birçok WordPress temaları bir resim yükleyerek veya bir renk seçerek sitenizin arka planını değiştirmenize olanak tanır.

Web sitenizin arka plan rengi, tasarımınızda ve markalaşmanızda ve içeriğinizin daha okunabilir hale getirilmesinde önemli bir rol oynar. Arka plan resimleri, web sitenizin daha ilgi çekici ve estetik açıdan hoş görünmesini sağlayabilir.

Bu gönderide, arka plan rengini nasıl değiştirebileceğinizi ve WordPress sitenize nasıl arka plan resimleri ekleyebileceğinizi göstereceğiz.

O halde lafı fazla uzatmadan başlayalım.

1 WordPress’te Arka Plan Rengi Nasıl Değiştirilir?

WordPress’te arka plan rengini değiştirmenin çeşitli yolları vardır. Bunu bir tema özelleştirici yardımıyla yapabilir veya özel CSS kullanabilirsiniz. Çeşitli yollara ayrıntılı olarak bakalım.

1.1 WordPress Tema Özelleştirici Kullanarak Arka Plan Rengini Değiştirin

WordPress Tema Özelleştirici’yi kullanarak temanıza bağlı olarak arka plan rengini değiştirebilirsiniz. Kodu değiştirmek zorunda kalmadan sitenizin görünümünü gerçek zamanlı olarak değiştirmenize olanak tanır.

Web sitenize giriş yapın ve Görünüm > Temalar > Özelleştir WordPress Tema Özelleştirici’yi kullanmak için.

tema özelleştiriciyi kullanarak arka plan rengini değiştirin

Bu, temanızı çeşitli şekillerde değiştirebileceğiniz Tema Özelleştirici’yi getirecektir. Web sitenizin arka plan rengini değiştirmek için devam edin ve Renkler sağdaki menüden ayarlar sekmesine gidin.

renkleri bul seçeneği

Bir sonraki adım, web siteniz için bir zemin rengi seçmektir. Renk seçici aracını kullanabilir veya arka planınız için onaltılık bir renk kodu girebilirsiniz.

renk seç

basmayı unutmayın Kaydet/Yayınla değişiklik yapmayı tamamladığınızda düğmesine basın. Artık yeni arka plan rengini web sitenizde çalışırken görebilirsiniz.

arka plan rengi değişti

1.2 Özel CSS Ekleyerek Arka Plan Rengini Değiştirin

Sitenizin arka plan rengini değiştirmek için özel bir CSS kodu ekleyebilirsiniz. Bunu yapmak için şuraya gidin: Görünüm > Özelleştir WordPress kontrol panelinizden.

ayarları özelleştirmek için gezinin

Daha sonra şuraya gidin: Ek CSS bölümüne girin ve aşağıdaki kodu ekleyin.

body {
 background-color: #FFFFFF;
}

Arka plan renk kodunu, web sitenizde kullanmak istediğiniz renk koduyla değiştirin. Kodu ekledikten sonra, Yayınla düğmesini tıklayın ve yeni arka plan rengini görüntülemek için sitenizi ziyaret edin.

özel css kodu ekle

1.3 Bireysel Gönderiler İçin Arka Plan Rengini Değiştirin

Web sitenizde tek bir renge sahip olmak yerine, özel CSS kullanarak WordPress’teki her blog gönderisinin arka plan rengini değiştirebilirsiniz.

Tek tek gönderilerin görünümünü ve arka planlarını özelleştirmenize olanak tanır. Örneğin, en çok yorum yapılan makalenizin arka plan rengini değiştirebilir veya yazarlara göre her gönderinin düzenini ayarlayabilirsiniz.

için temanızın CSS’sine bakmanız gerekir. posta kimliği sınıf. Bunu, herhangi bir blog gönderisine göz atarak ve ardından tarayıcınızın İnceleme aracını kullanmak için sağ tıklayarak yapabilirsiniz.

posta kimliği sınıfını bul

Gönderi kimliğinizi aldıktan sonra, tek bir gönderinin arka plan rengini değiştirmek için aşağıdaki özel CSS’yi kullanabilirsiniz. Posta kimliğini kendinize ve istediğiniz arka plan rengi koduyla değiştirin.

.postid-1349 {
background: #D7DEB5
}

WordPress Tema Özelleştirici, özel CSS eklemek için kullanılabilir. kodunu şuraya ekleyin: Ek CSS bölümüne tıklayın ve Yayınla buton.

bireysel gönderiler için arka plan rengini değiştir

Artık gönderiyi kontrol edebilir ve yeni arka plan rengini görüntüleyebilirsiniz.

1.4 Desenler İçin Arka Plan Rengini Değiştir

Kalıplar, blok yerleştiricinin kalıplar sekmesinde erişilen önceden tanımlanmış blok düzenleridir. Bir desen eklemek için aşağıda gösterildiği gibi sol üst köşedeki ‘+’ işaretine tıklayın.

+ işaretine tıklayın

Şuraya gidin: desenler üstbilgiler, altbilgiler, galeri vb. kategorileri seçebileceğiniz sekme.

desenler sekmesine gidin

Örneğin, sütunlar ekledik. Arka plan rengini değiştirmek istediğiniz sütunu seçin ve Renk Aşağıda gösterildiği gibi sağ taraftaki bölüm.

arka plan desenini değiştir

Renk seçiciden arka plan rengini seçin. Gönderiyi güncelledikten sonra, tıklayın Yayınla buton. Ardından gönderinizi ziyaret edebilir ve desenin arka plan rengini görüntüleyebilirsiniz.

Desen rengi değişti

1.5 WordPress’te Rastgele Arka Plan Renkleri Ekleyin

Web siteniz için seçtiğiniz renk, ziyaretçilerinizin onu nasıl algıladığını büyük ölçüde etkiler. Renkler, görünümlerine ek olarak sitenizin genel temasını da destekler. Ancak, bazı insanlar web sitelerinde rengin önemini gözden kaçırıyor ve görmezden gelmeyi tercih ediyor.

Tek bir arka plan rengi kullanırsanız kullanıcılarınız sıkılabilir. WordPress web sitenizde yapabileceğiniz en iyi şey, arka plan renklerini rastgele değiştirmektir.

Başlamak için, arka plan rengini rastgele değiştirmek istediğiniz alanın CSS sınıfını aramanız gerekir. Gönderinize gidin ve Inspect aracının yardımıyla aşağıda gösterildiği gibi CSS sınıfını bulun.

CSS sınıfını bulduktan sonra, not defteri gibi bir düz metin düzenleyici açın ve yeni bir dosya oluşturun. Dosyayı masaüstünüze ‘background.js’ olarak kaydedin. JS dosyasına aşağıdaki kod parçasını ekleyin.

jQuery(function($) {
    $('#masthead').each(function() {
        var $this = $(this),
            colors = ['#e5d1d2', '#d2d1e1', '#c0ebf1'];

        setInterval(function() {
            var color = colors.shift();
            colors.push(color);
            $this.animate({ backgroundColor: color }, 2000);
        }, 4000);
    });
});

Dört farklı renk oluşturmak için altıgen renk kodunu kullandığımızı fark edeceksiniz. Arka planınız için dilediğiniz kadar renk kullanabilirsiniz. Renk kodlarını snippet’e eklemeniz ve bunları virgül ve tek tırnak işaretiyle ayırmanız yeterlidir. CSS seçiciyi değiştirdiğinizden emin olun #masthead yukarıdaki örnekten web sitenizle alakalı olana.

Şimdi JS dosyasını WordPress temanızın JS klasörüne bir dosya kullanarak yüklemeniz gerekecek. dosya aktarım protokolü (FTP) hizmeti. Sitenizin FTP sunucusunda oturum açın. Sitenizin temasının altındaki JS klasörüne gidin. uzak site kolon.

Temanızda yoksa bir js klasörü oluşturabilirsiniz. FTP istemcinizde temanızın klasörüne sağ tıklayın ve Dizin oluştur seçenek.

Filezilla'da dizin oluştur

Daha sonra şuraya gidin: yerel site sütun ve JS dosyanızın konumunu açın. Ardından dosyaya sağ tıklayın ve Yüklemek temanıza dahil etme seçeneği.

background.js dosyasını yükleyin

Aşağıdaki kod parçasını temanızın funtions.php dosyasına ekleyin

function wpb_bg_color_scripts() {    
wp_enqueue_script( 'background',  get_stylesheet_directory_uri() . '/js/background.js', array( 'jquery-color' ), '1.0.0', true ); 
 } 
add_action( 'wp_enqueue_scripts', 'wpb_bg_color_scripts' ); 

Artık sitenizde rastgele değişen arka plan renklerini görüntülemek için web sitenizi ziyaret edebilirsiniz.

WordPress'te rastgele renkler ekleme

2 WordPress’te Arka Plan Resmi Nasıl Eklenir?

Arka plan resimleri, web sitenizi görsel olarak daha çekici ve ilgi çekici hale getirebilir. Şimdi WordPress sitenize nasıl arka plan resimleri ekleyeceğinizi görelim.

2.1 WordPress Tema Ayarlarını Kullanarak Arka Plan Resmi Ekleyin

Şu yöne rotayı ayarla Görünüm > Özelleştir WordPress kontrol panelinizden ayarlar. Farklı tema ayarlarını yönetebileceğiniz tema özelleştiriciye yönlendirileceksiniz.

tema özelleştiriciye gidin

Bundan sonra, seçin Arka plan görüntüsü seçenek. Pencere, web siteniz için bir arka plan resmi yükleme veya seçme seçeneklerini ortaya çıkaracak şekilde kayar. Tıkla Fotoğraf seç buton.

Arka plan resmi seçeneğini seçin

Bilgisayarınızdan bir resim yüklemenize izin veren WordPress medya yükleyici açılır penceresi görünecektir. Daha önce yüklenmiş bir resmi bulmak için medya kitaplığını da kullanabilirsiniz.

Arka plan resmini seçin

Seçildikten sonra, tema özelleştiricide seçtiğiniz resmin önizlemesini göreceksiniz.

Ayrıca görüntünün altındaki arka plan görüntüsü seçeneklerini de fark edeceksiniz. Arka plan görüntüsünün ekranı doldurmasını, ekrana sığmasını, tekrar etmesini veya altında özel olmasını istediğinizi seçebilirsiniz. ön ayar.

Aşağıdaki okları kullanarak arka plan resminin konumunu da değiştirebilirsiniz. Ortadaki düğmeye tıklarsanız görüntü ekranın ortasına hizalanacaktır.

arka plan resmini değiştir

Görüntü ayarlarını güncelledikten sonra, üzerine tıklayın. Yayınla düğmesine tıkladığınızda arka plan resminiz sitenize eklenecektir.

2.2 Bir Eklenti Kullanarak WordPress’te Arka Plan Resmi Ekleyin

Temanızın ayarları arka plan resmi eklemenize izin vermiyorsa, bir eklenti yardımıyla arka plan resmi ekleyebilirsiniz.

WordPress için en popüler sürükle ve bırak sayfa oluşturucu eklentilerinden biri eleman. Eklenti, tek bir kod satırı yazmadan etkileşimli bir kontrol paneli kullanarak tamamen işlevsel bir web sitesi oluşturmanıza olanak tanıyan çeşitli özelliklere sahiptir.

Başlamak için, yüklemeniz ve etkinleştirmeniz gerekir eleman WordPress kontrol panelinizden eklenti.

Elementor eklentisini yükleyin

Arka plan resmini eklemek istediğiniz sayfanıza/gönderinize gidin. Tıkla Elementor ile düzenleyin panoyu açmak için sayfa düzenleyicideki düğmesine basın.

Elementor ile düzenleyin

Sayfanıza bir arka plan resmi eklemek için aşağıda gösterildiği gibi ayarlar simgesine tıklayın.

Ayarlar simgesini tıklayın

üzerindeki Arka Plan açılır menüsünü tıklayın. stil sekme. Bundan sonra, kalem simgesine tıklayın ve ardından Görüntü’yü seçin.

arka plan resmini seç

Artık WordPress medya kitaplığından bir resim seçebilir veya yeni bir tane yükleyebilirsiniz. Tıklamak Yayınla düğmesine tıkladığınızda arka plan resmi sitenize eklenecektir.

arka plan resmi eklendi

2.3 CSS Kodunu Kullanarak WordPress’te Arka Plan Resimleri Ekleyin

Teknoloji konusunda bilgiliyseniz, özel CSS kodları kullanabilir ve sayfalarınıza ve gönderilerinize arka planlar ekleyebilirsiniz.

Özel CSS kullandığınızda, görüntülerin görünümü ve yerleşimi üzerinde çok fazla esnekliğe ve kontrole sahipsiniz.

Bunu yapmak için şuraya gidin: Görünüm > Özelleştir WordPress kontrol panelinizden. Şuraya gidin: Ek CSS bölüm. Ek CSS bölümünde aşağıdaki kod parçacığını ekleyin.

body
{
	background: url(example-image.jpg);
}

example-image.jpg’yi arka plan resminiz olarak kullanmak istediğiniz URL ile değiştirdiğinizden emin olun.

Arka plan resmi eklendi

Yukarıdaki kod, web sitenizin tüm sayfaları için genel bir arka plan resmi ayarlayacaktır. Sitenizi ziyaret edebilir ve sitenize eklenen yeni arka plan resmini görebilirsiniz.

Çözüm

Sayfanızda görünecek arka planı değiştirmek zaman veya çaba gerektirmez. Özel durumlar için arka planı değiştirmeyi kolaylaştıran WordPress Çekirdeğine dahil edilmiş bir özelliktir. Ayrıca hayatınızın geri kalanı için tek bir arka plan seçebilirsiniz.

WordPress sitenizin arka planını değiştirmek için özel CSS kodu, eklentiler ve sayfa oluşturucular kullanabilirsiniz. Belirli sayfalardaki görüntü arka planlarından sitenizin arka plan renklerine kadar olasılıklar sonsuzdur.

Artık WordPress sitenizde her zaman yapmak istediğiniz arka planı değiştirmenin zamanı geldi.

Bu makaleyi beğendiyseniz, bize bildirin @rankmathseo’yu tweetlemek. 💬



Bir cevap yazın

Ready to Grow Your Business?

We Serve our Clients’ Best Interests with the Best Marketing Solutions. Find out More

How Can We Help You?

Need to bounce off ideas for an upcoming project or digital campaign? Looking to transform your business with the implementation of full potential digital marketing?

For any career inquiries, please visit our careers page here.
[contact-form-7 404 "Bulunamadı"]