WordPress'te Arka Plan Resmi Nasıl Eklenir


WordPress sitenize bir arka plan resmi eklemek ister misiniz?

Arka plan resimleri, web sitenizin daha ilgi çekici ve estetik olarak hoş görünmesini sağlamak için kullanılabilir.

Bu yazıda, WordPress sitenize nasıl kolayca arka plan resmi ekleyeceğinizi göstereceğiz.

How to add a background image in WordPress

Video öğretici

WPBeginner'a abone olun

Yazılı talimatları tercih ediyorsanız, lütfen okumaya devam edin.

Yöntem 1. WordPress Tema Ayarlarınızı Kullanarak Arka Plan Resmi Ekleyin

En popüler WordPress temaları, özel arka plan desteği ile birlikte gelir. Bu özellik, WordPress sitenize kolayca bir arka plan resmi ayarlamanıza veya arka plan rengini değiştirmenize olanak tanır.

Temanız özel arka plan özelliğini destekliyorsa, WordPress sitenize bir arka plan resmi eklemek için bu yöntemi kullanmanızı öneririz.

Ancak temanız bu özelliği desteklemiyorsa veya arka plan resimlerini uygulama şeklini beğenmiyorsanız, öğreticimizde belirtilen diğer seçenekleri deneyebilirsiniz.

Öncelikle WordPress yöneticinizdeki Görünüm » Özelleştir sayfasını ziyaret etmeniz gerekir. Bu, web sitenizin canlı bir önizlemesini görüntülerken farklı tema ayarlarını değiştirebileceğiniz WordPress tema özelleştiricisini başlatacaktır.

Background image option in WordPress theme customizer

Ardından, 'Arka plan resmi' seçeneğine tıklamanız gerekir. Panel içeri kayar ve size web siteniz için bir arka plan resmi yükleme veya seçme seçeneklerini gösterir.

Select background image

Devam etmek için resim seç düğmesine tıklayın.

Bu, bilgisayarınızdan bir resim yükleyebileceğiniz WordPress medya yükleyici açılır penceresini açacaktır. Ayrıca medya kitaplığından önceden yüklenmiş bir resmi de seçebilirsiniz.

Upload background image

Ardından, arka plan olarak kullanmak istediğiniz resmi yükledikten veya seçtikten sonra resim seç düğmesine tıklamanız gerekir.

Bu, medya yükleyici açılır penceresini kapatacak ve tema özelleştiricide seçtiğiniz resmin önizlemesini göreceksiniz.

Background image settings

Resmin altında, arka plan resmi seçeneklerini de görebileceksiniz. 'Ön Ayar' altında, arka plan görüntüsünün nasıl görüntüleneceğini seçebilirsiniz: ekranı doldur, ekrana sığdır, tekrarla veya özel.

Ayrıca aşağıdaki oklara tıklayarak arka plan görüntüsünün konumunu seçebilirsiniz. Merkeze tıklamak, görüntüyü ekranın ortasına hizalayacaktır.

Ayarlarınızı saklamak için üst kısımdaki 'Kaydet ve Yayınla' düğmesine tıklamayı unutmayın. Hepsi bu kadar, WordPress sitenize başarıyla bir arka plan resmi eklediniz.

Devam edin ve çalışırken görmek için web sitenizi ziyaret edin.

Yöntem 2. Bir Eklenti Kullanarak WordPress'te Özel Bir Arka Plan Resmi Ekleyin

Bu yöntem çok daha esnektir. Herhangi bir WordPress temasıyla çalışır ve birden çok arka plan görüntüsü ayarlamanıza olanak tanır.

Ayrıca WordPress sitenizin herhangi bir gönderi, sayfa, kategori veya başka herhangi bir bölümü için farklı arka planlar ayarlayabilirsiniz.

Tüm arka plan resimlerinizi otomatik olarak tam ekran ve mobil uyumlu hale getirir. Bu, arka plan resminizin daha küçük cihazlarda kendini otomatik olarak yeniden boyutlandıracağı anlamına gelir.

İlk olarak, Tam Ekran Arka Plan Pro eklentisini kurmanız ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmeden sonra, eklenti ayarlarını yapılandırmak için Görünüm »Tam Ekran BG Görüntüsü'nü ziyaret etmeniz gerekir.

Full screen background

Lisans anahtarınızı eklemeniz istenecektir. Bu bilgiyi eklentiyi satın aldıktan sonra aldığınız e-postadan veya eklentinin web sitesindeki hesabınızdan alabilirsiniz.

Ardından, değişikliklerinizi saklamak için 'Ayarları Kaydet' düğmesini tıklamanız gerekir. Artık WordPress sitenize arka plan resimleri eklemeye hazırsınız.

Devam edin ve eklentinin ayarlar sayfasındaki 'Yeni Resim Ekle' düğmesini tıklayın. Bu sizi arka plan resmi yükleme ekranına götürecektir.

add new background image

Bir resim yüklemek veya seçmek için 'Resim Seç' düğmesini tıklayın. Resmi seçtiğiniz anda, ekranınızda resmin canlı bir önizlemesini görebileceksiniz.

Ardından, bu görüntü için bir ad sağlamanız gerekir. Bu ad dahili olarak kullanılacaktır, böylece burada herhangi bir şeyi kullanabilirsiniz.

Son olarak, bu görüntünün arka plan sayfası olarak nerede kullanılmasını istediğinizi seçmeniz gerekir.

Tam Ekran Arka Plan Pro, görüntüleri küresel bir arka plan olarak ayarlamanıza olanak tanır veya web sitenizin kategoriler, arşivler, ön sayfa veya blog sayfası gibi farklı bölümlerinden seçim yapabilirsiniz.

Arka plan resminizi kaydetmek için resmi kaydet düğmesine tıklamayı unutmayın.

Görünüm » Tam Ekran BG Görseli sayfasını ziyaret ederek istediğiniz kadar görsel ekleyebilirsiniz.

Global olarak kullanılacak birden fazla resim ayarlarsanız, eklenti otomatik olarak arka plan resimlerini slayt gösterisi olarak göstermeye başlar.

Bir görüntünün kaybolması için geçen süreyi ve ardından yeni bir arka plan görüntüsünün solmaya başlaması için geçen süreyi ayarlayabilirsiniz.

Background fade in and fade out settings

Buraya girdiğiniz süre milisaniye cinsindendir. Bir arka plan görüntüsünün 20 saniye sonra solmasını istiyorsanız, 20000 girmeniz gerekir.

Değişikliklerinizi kaydetmek için ayarları kaydet düğmesine tıklamayı unutmayın.

Gönderiler, Sayfalar ve Kategoriler için Arka Plan Resimleri

Tam Ekran Arka Plan Pro ayrıca tek gönderiler, sayfalar, kategoriler, etiketler ve daha fazlası için arka plan resimleri ayarlamanıza olanak tanır.

Farklı bir arka plan resmi görüntülemek istediğiniz gönderiyi/sayfayı düzenlemeniz yeterlidir. Yazı düzenleme ekranında, yazı düzenleyicinin altındaki yeni 'Tam Ekran Arka Plan Resmi' kutusunu göreceksiniz.

Adding a background image for a single post or page

Belirli bir kategori için bir arka plan resmi kullanmak için Görünüm » Tam Ekran BG Resmi sayfasını ziyaret etmeniz ve ardından 'Yeni Resim Ekle' düğmesini tıklamanız gerekir.

Resminizi yükledikten sonra, arka plan resmini görüntülemek istediğiniz bağlam olarak 'Kategori'yi seçebilirsiniz.

Set background image for a specific category

Şimdi, resmi görüntülemek istediğiniz belirli kategori kimliğini veya bilgi parçasını girin. WordPress'te kategori kimliğinin nasıl bulunacağına ilişkin kılavuzumuza bakın.

Ayarlarınızı saklamak için resminizi kaydetmeyi unutmayın.

Yöntem 3. CSS Hero kullanarak Arka Plan Resimleri Ekleme

CSS Hero, tek bir kod satırına dokunmadan temanızda herhangi bir değişiklik yapmanızı sağlayan bir WordPress eklentisidir.

Birkaç basit adımda hızlı bir şekilde arka plan resimleri ekleyebilirsiniz. İlk olarak, CSS Hero'yu kurmanız ve etkinleştirmeniz gerekir. Bunu yaptıktan sonra, web sitenizi özelleştirmeye başlama zamanı.

Şimdi tarayıcınızda ana sayfanızı açın. Yönetici çubuğunuzda 'CS SHero ile Özelleştir' bağlantısını göreceksiniz.

Background Image with CSS Hero

Bu bağlantıyı tıkladıktan sonra, CSS Hero seçeneklerinin açıldığını göreceksiniz. Farenizi, resim eklemek istediğiniz alanın üzerine getirin.

Aşağıdaki ekran görüntüsünde .header-filter-gradient alanını göreceksiniz. Bu alana tıkladığınızda, sol kenar çubuğundaki arka plan bağlantısını seçebilirsiniz.

WordPress background image selector

Arka plan bağlantısı açılacaktır. Oradan, 'Görüntü' üzerine tıklayabilirsiniz. Artık arka planınızı oluşturmak için Unsplash'tan veya yüklemelerinizden bir resim seçebilirsiniz.

Add image to background with CSS Her

İstediğiniz resme tıkladığınızda, 'Resmi Uygula' düğmesini göreceksiniz. Ardından, resminizin hangi boyutta olmasını istediğinizi seçebilirsiniz. Büyük versiyonu, sayfa boyunca yayılacak şekilde seçtik.

Alt kısımdaki 'Kaydet ve Yayınla'ya basın ve arka plan resmi artık siteniz için kaydedilir.

Custom background WordPress image

Yöntem 4. CSS Kodunu Kullanarak WordPress'te Herhangi Bir Yere Özel Arka Plan Resimleri Ekleme

Varsayılan olarak WordPress, WordPress sitenizdeki farklı HTML öğelerine birkaç CSS sınıfı ekler. WordPress tarafından oluşturulan bu CSS sınıflarını kullanarak tek tek gönderilere, kategorilere, yazara ve diğer sayfalara kolayca özel arka plan resimleri ekleyebilirsiniz.

Örneğin, web sitenizde TV adlı bir kategoriniz varsa, biri TV kategori sayfasını görüntülediğinde WordPress bu CSS sınıflarını gövde etiketine otomatik olarak ekler.

<body class="archive category category-tv category-4"> 

WordPress tarafından gövde etiketine tam olarak hangi CSS sınıflarının eklendiğini görmek için inceleme aracını kullanabilirsiniz.

Use inspect tool to see classes added by WordPress

Yalnızca bu kategori sayfasını farklı şekilde biçimlendirmek için category-tv veya category-4 CSS sınıfını kullanabilirsiniz.

Bir kategori arşiv sayfasına özel bir arka plan resmi ekleyelim. Bu özel CSS'yi temanıza eklemeniz gerekecek.

body.category-tv { 
background-image: url("http://example.com/wp-content/uploads/2017/03/your-background-image.jpg"); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed;
}

Arka plan resmi URL'sini ve kategori sınıfını kendi kategorinizle değiştirmeyi unutmayın.

Ayrıca, tek tek gönderilere ve sayfalara özel arka planlar da ekleyebilirsiniz. WordPress, gövde etiketinde yazı veya sayfa kimliğine sahip bir CSS sınıfı ekler. Aynı CSS kodunu kullanabilirsiniz, sadece .category-tv'yi postaya özel CSS sınıfıyla değiştirin.

Bu makalenin, WordPress'te nasıl arka plan resmi ekleyeceğinizi öğrenmenize yardımcı olacağını umuyoruz. Ayrıca, WordPress için en iyi sürükle ve bırak sayfa oluşturucu eklentilerini karşılaştırmamızı ve özel bir WordPress temasının (kodsuz) nasıl oluşturulacağına ilişkin eğitimimizi de görmek isteyebilirsiniz.

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

Copyright statement: Unless otherwise noted, this article is Collected from the Internet, please keep the source of the article when reprinting.

Check Also

Divi's Theme Builder ile Özel Global Başlık Nasıl Oluşturulur

Artık Tema Oluşturucu burada olduğuna göre, web sitenizi A'dan Z'ye kurmanıza yardımcı olacak yeni eğitimlere dalmak için sabırsızlanıyoruz. Buna Divi'nin yerleşik seçeneğini kullanarak özel başlıklar oluşturma da dahildir. Bu eğitimde Divi's Theme Builder'ı kullanarak global bir başlık oluşturmaya odaklanacağız. Bu sayfaya veya gönderiye farklı bir başlık atamadıysanız, web sitenizin her yerinde genel bir başlık görünecektir.

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir