WordPress'te Arka Plan Görseli Nasıl Eklenir (6 Kolay Yol)

Arka plan resimleri, WordPress sitenizin görünümünü ve hissini tamamen değiştirebilir. Ancak gerilmiş resimler, yanlış hizalama veya dosya boyutu sorunları engel olabilir. Özellikle hangi yöntemi kullanacağınızdan emin değilseniz.

Onlarca WordPress sitesini yönetme deneyimimizden, çoğu insanın bu süreci gereğinden fazla zorlaştırdığını öğrendik.

İyi haber şu ki, WordPress arka plan görüntüleri eklemek için çeşitli yerleşik seçenekler sunuyor ve ayrıca işleri daha da kolaylaştıran mükemmel eklentiler de var. Doğru yöntemleri bildiğinizde, yalnızca birkaç tıklamayla tüm sitenize, bireysel sayfalara veya belirli bölümlere güzel arka planlar ekleyebilirsiniz.

Bu kılavuzda, her beceri seviyesine uygun 5 güvenilir WordPress arka plan görüntüsü ekleme yöntemini göstereceğiz. 🎨

Neden Bir WordPress Arka Plan Resmi Eklemelisiniz?

WordPress web sitenize bir resim eklemek, onu ziyaretçiler için daha çekici hale getirebilir. Kullanıcıların dikkatini hızla çekebilir ve içeriğinizle etkileşim kurmalarını sağlayabilirsiniz.

Ayrıca web sitenizin tasarımını markanıza göre kişiselleştirmenize olanak tanır. Örneğin, arka plana ürünlerinizin veya marka maskotunuzun ince fotoğraflarını yükleyebilirsiniz.

Ek olarak, tam ekran arka plan olarak bir YouTube videosu veya içeriğinizi canlandıracak bir resim slayt gösterisi ekleyebilirsiniz.

Ancak, dikkat dağıtıcı olmayan veya WordPress blogunuzdaki içeriğin okunmasını zorlaştırmayan arka plan resimleri seçmenizi öneririz. Bir arka plan, kullanıcı deneyimini geliştirmeli ve mesajınızı ziyaretçilere iletmeye yardımcı olmalıdır.

Ayrıca, mobil uyumlu ve web sitenizin hızını etkilemeyecek bir arka plan resmi seçmek önemlidir. Aksi takdirde, WordPress SEO'nuzu olumsuz etkileyecektir.

Bu makalede, bir WordPress arka plan resmi ekleyebileceğiniz farklı yolları paylaşacağız.

WordPress tema özelleştirici, tam site düzenleyici, eklenti, tema oluşturucu ve daha fazlası dahil olmak üzere birden çok yöntemi ele alacağız. Tercih ettiğiniz bölüme atlamak için aşağıdaki bağlantıya tıklamanız yeterlidir:

• Yöntem 1. WordPress Tema Özelleştiriciyi Kullanarak Arka Plan Görüntüsü Ekleme
• Yöntem 2. Tam Site Düzenleyiciyi Kullanarak Özel Arka Plan Görüntüsü Ekleme
• Yöntem 3. WordPress Tema Oluşturucu Kullanarak Arka Plan Resmi Ekleme
• Yöntem 4. CSS Hero Kullanarak Arka Plan Resmi Ekleme
• Yöntem 5. CSS Kodu Kullanarak WordPress'te Her Yere Özel Arka Plan Görüntüleri Ekleme
• Ek Kaynaklar: WordPress Sitesi Kullanıcı Deneyimini İyileştirmek İçin Resim ve Medya Dosyaları Kılavuzları

Hazır mısınız? Başlayalım.

Yöntem 1. WordPress Tema Özelleştiriciyi Kullanarak Arka Plan Görüntüsü Ekleme

En popüler WordPress temaları özel arka plan desteği ile birlikte gelir. Bu özellik, kolayca bir arka plan resmi ayarlamanıza olanak tanır. Temanız destekliyorsa bu yöntemi öneririz.

Ancak, özelleştirici menü seçeneğiniz eksikse, temanız tam site düzenlemeyi etkinleştirmiş olabilir. Bir sonraki bölümde, arka plan resminizi değiştirmek için tam site düzenleyicisini nasıl kullanacağımızı ele alacağız.

Bu arada, 'Özelleştirici'yi kullanmak için WordPress yöneticinizdeki Görünüm » Özelleştir sayfasını ziyaret etmeniz gerekir.

Bu, web sitenizin canlı önizlemesini görüntülerken farklı tema ayarlarını değiştirmenize olanak tanıyan WordPress tema özelleştiricisini başlatacaktır.

Gördüğünüz seçeneklerin kullandığınız WordPress temasına göre değişeceğini unutmayın. Bu eğitimde Sydney temasını kullanıyoruz.

Farklı bir tema kullanıyorsanız, o temanın belgelerine bakmanız gerekebilir. Özelleştiricide bir arka plan resmi bulamazsanız, bir tane eklemeyi öğrenmek için tema geliştiricisiyle de iletişime geçebilirsiniz.

Sydney temasının özelleştirici seçeneklerinde, soldaki panelde 'Genel'e tıklamanız gerekir.

Bunu yaptıktan sonra, Sydney temanızı özelleştirmek için farklı 'Genel' seçeneklerini göreceksiniz.

Bu noktada, 'Arka Plan Resmi' bölümüne tıklamanız gerekecektir.

Bir sonraki ekranda, arka plan resminizi ekleme seçeneğini göreceksiniz.

‘Görüntüyü seç’ düğmesine tıklayın.

Bu, WordPress medya kütüphanesini açacaktır.

Buradan bilgisayarınızdan bir resim yükleyebilir veya daha önce yüklediğiniz bir resmi seçebilirsiniz.

Arka planınız için resmi seçtikten sonra 'Seç' düğmesine tıklamanız gerekecektir.

Bu, medya açılır penceresini kapatacak ve tema özelleştiricisinde seçtiğiniz arka plan resminin bir önizlemesini göreceksiniz.

Sol panelde, resmin arka planda nasıl görüneceğini kontrol etmek için resmin konumunu (üst, orta, alt, sol, sağ) ayarlayabilirsiniz. Ayrıca, alanı sığdırmak, doldurmak veya kaplamak için 'Resim Boyutu' açılır menüsünü kullanarak yeniden boyutlandırabilirsiniz.

Resmin arka planda tekrarlamasını istiyorsanız, 'Arka Plan Resmini Tekrarla' yazan kutuyu işaretleyin. 'Sayfa ile Kaydır' kutusunu işaretleyerek resmin sayfa içeriğiyle birlikte kaymasını da sağlayabilirsiniz.

Görünümünden memnun kaldığınızda, ayarlarınızı kaydetmek için üstteki 'Yayınla' düğmesine tıklayın.

Hepsi bu kadar. WordPress sitenize başarıyla bir arka plan resmi eklediniz. Devam edin ve sitenizi çalışırken görmek için web sitenizi ziyaret edin.

Yöntem 2. Tam Site Düzenleyiciyi Kullanarak Özel Arka Plan Görüntüsü Ekleme

Eğer blok tabanlı bir WordPress teması kullanıyorsanız, tam site düzenleyiciyi (FSE) kullanarak özel bir arka plan resmi ekleyebilirsiniz.

Tam site düzenleyicisi, web sitenizin tasarımını blokları kullanarak düzenlemenize olanak tanır. Bu, blog gönderisini veya sayfasını WordPress blok düzenleyicisini kullanarak düzenlemek gibidir.

Bu eğitim için varsayılan ‘Twenty Twenty-Two’ temasını kullanacağız. Tam site düzenleyicisini başlatmak için WordPress yönetici alanınızdan Görünüm » Düzenleyici yolunu izlemeniz yeterlidir.

Tam site düzenleyicisine girdikten sonra, bir arka plan resmi yüklemek için şablonunuza bir 'Kapak' bloğu eklemeniz gerekecektir.

Üstteki '+' işaretine tıklayın ve 'Kapak' bloğu ekleyin.

'Kapak' bloğuna bir arka plan resmi eklemek için 'Yükle' veya 'Medya Kütüphanesi' düğmesine tıklayın.

Bu, WordPress medya yükleyici açılır penceresini açacaktır.

Bir sonraki adım, web sitesi arka planı olarak kullanmak istediğiniz bir resim seçmektir.

Görüntüyü seçtikten sonra 'Seç' düğmesine tıklamanız yeterlidir.

Resim 'Kapak' bloğuna eklendikten sonra, onu sayfanın arka planı olarak ayarlamanız gerekecektir.

Bunu yapmak için, üstteki ‘Liste Görünümü’ simgesine (3 çizgi simgesi) tıklamanız yeterlidir. Bu, site başlığı ve alt bilgi gibi tema öğelerinin bir taslağını açacaktır.

Ardından, liste görünümündeki ‘Kapak’ bloğunun altına tüm şablon öğelerini sürükleyip bırakın.

Hepsi oradayken, 'Kapak' bloğunun resmi sitenin arka planı olarak görünecektir.

Bundan sonra, 'Kapak' bloğuna tıklayarak ve ekranın sağ üst köşesindeki dişli simgesini seçerek arka plan resmini ayarlayabilirsiniz. Bu, 'Blok' ayarları panelini açacaktır.

Burada, resmi sabit bir arka plan yapma, kaplamasını ayarlama, rengi düzenleme ve daha fazlası için seçenekler bulacaksınız.

İşiniz bittiğinde, 'Kaydet' düğmesine tıklamayı unutmayın.

Ve bu kadar! Tam site düzenleyiciyi kullanarak başarıyla bir arka plan görüntüsü eklediniz.

Yöntem 3. WordPress Tema Oluşturucu Kullanarak Arka Plan Resmi Ekleme

Web sitenize özel arka plan resimleri eklemenin bir başka yolu da SeedProd gibi bir WordPress tema oluşturucu kullanmaktır. Kodun tek bir satırına dokunmadan web sitenizin tasarımını kolayca özelleştirmenizi sağlayan sürükle-bırak işlevselliğine sahip en iyi WordPress açılış sayfası eklentisidir.

Ayrıca bazı marka sitelerimizde SeedProd kullanıyoruz ve gerçekten iyi çalışıyor. Deneyimimiz hakkında daha fazla bilgi için kapsamlı SeedProd incelememize göz atabilirsiniz.

Bu eğitim için tema oluşturucuyu içerdiği için SeedProd Pro sürümünü kullanacağız. Ücretsiz olarak deneyebileceğiniz bir SeedProd Lite sürümü de bulunmaktadır.

Öncelikle SeedProd eklentisini kurmanız ve etkinleştirmeniz gerekecektir. Yardım almanız gerekirse, lütfen bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinizde SeedProd karşılama ekranını göreceksiniz.

Ardından, lisans anahtarınızı girmeniz ve eklentinin pro sürümünü etkinleştirmek için 'Anahtarı Doğrula' düğmesine tıklamanız gerekecektir. Lisans anahtarınızı SeedProd hesap alanınızda bulabilirsiniz.

Her şey ayarlandıktan sonra, WordPress yönetici panelinizde SeedProd » Tema Oluşturucu'ya gitmeniz gerekecek.

Üstteki 'Temalar' düğmesine tıklayın.

SeedProd şimdi aralarından seçim yapabileceğiniz birden fazla tema şablonu sunacak.

Kullanmak istediğiniz herhangi bir şablonun üzerine gelip tıklayabilirsiniz. Bu eğitimde, 'Başlangıç' tema şablonunu kullanacağız.

Buradan SeedProd, ana sayfa, tek gönderi, tek sayfa, kenar çubuğu, başlık ve daha fazlası gibi farklı şablonlar oluşturacaktır.

Tüm web sitesinde ve tüm tema şablonlarında görünen bir arka plan resmi eklemek için, Küresel CSS altındaki 'Tasarıma Düzenle' seçeneğine tıklayın.

Bir sonraki ekranda, değiştirebileceğiniz genel CSS ayarlarını göreceksiniz.

Özelleştirmeye başlamak için ‘Arka Plan’ seçeneğine tıklamanız yeterlidir.

Bundan sonra, 'Arka Plan Resmi' seçeneklerini göreceksiniz.

Resminizi yüklemek için ‘Kendi Resminizi Kullanın’ seçeneğine tıklayın. Alternatif olarak, web sitenizin arka planı olarak kullanmak üzere bir stok görsel aramak için ‘Stok Görsel Kullan’ düğmesine tıklayabilirsiniz.

Bir arka plan resmi ekledikten sonra, SeedProd oluşturucusu canlı bir önizleme gösterecektir.

Gerekirse arka plan konumunu ayarlayabilirsiniz. Ayrıca diğer seçeneklerin yanı sıra tam ekran kaplama kullanıp kullanmayacağınıza veya tekrara koyup koymayacağınıza karar verebilirsiniz.

Ayrıca, 'Arka Planı Kıs' kaydırıcısını hareket ettirerek arka plan resminizin koyuluk seviyesini düzenleyebilirsiniz. Skor ne kadar yüksek olursa, resim o kadar koyu olur.

Arka plan resmi düzenlemesini bitirdikten sonra, üstteki 'Kaydet' düğmesine tıklayın ve Global CSS ayarlarını kapatın.

Web sitenizin farklı bölümleri için özel bir arka plan resmi eklemek istiyorsanız, SeedProd'daki bu bireysel tema şablonlarını düzenleyebilirsiniz. Daha fazla ayrıntı için kolayca özel bir WordPress teması oluşturma rehberimize bakmaktan çekinmeyin.

Yöntem 4. CSS Hero Kullanarak Arka Plan Resmi Ekleme

CSS Hero, temanızda kodlama yapmadan herhangi bir değişiklik yapmanıza olanak tanıyan bir WordPress eklentisidir.

Arka plan görüntülerini birkaç basit adımda hızlı bir şekilde ekleyebilirsiniz. Ancak öncelikle CSS Hero'yu yükleyip etkinleştirmeniz gerekecektir. Daha fazla ayrıntı için lütfen WordPress eklentisinin nasıl kurulacağına ilişkin kılavuzumuza bakın.

Bunu yaptıktan sonra web sitenizi özelleştirmeye başlayabilirsiniz.

Yapmanız gereken ilk şey, ana sayfanızı tarayıcınızda açmaktır. Orada, yönetici çubuğunuzda 'CSS Hero ile Özelleştir' bağlantısını göreceksiniz.

Bağlantıya tıklamanız yeterlidir ve CSS Hero seçeneklerinin açıldığını göreceksiniz.

İçeri girdikten sonra, resim eklemek istediğiniz alanın üzerine gelmeniz gerekecektir. Ardından, sol kenar çubuğundaki ‘Arka Plan’ seçeneğine erişmek için alana tıklayın.

Görüntü ekleme ayarlarını görmek için 'Arka Plan'a tıklayın.

Oradan, sadece 'Resim'e tıklayın.

Ardından, Unsplash'ten bir resim seçebilir veya kendi resminizi yükleyerek arka planınızı oluşturabilirsiniz.

İstediğiniz görsele tıkladığınızda, ‘Görseli Uygula’ düğmesini göreceksiniz.

Ardından, resminizin ne kadar büyük olmasını istediğinizi seçmek isteyebilirsiniz. Sayfayı kaplaması için büyük sürümü seçmenizi öneririz.

Son olarak, arka plan resmini siteniz için kaydetmek üzere alttaki 'Kaydet ve Yayınla' düğmesine basabilirsiniz.

Yöntem 5. CSS Kodu Kullanarak WordPress'te Her Yere Özel Arka Plan Görüntüleri Ekleme

Varsayılan olarak WordPress, WordPress sitenizdeki farklı HTML öğelerine çeşitli CSS sınıfları ekler. Bu nedenle, bu WordPress tarafından oluşturulan CSS sınıflarını kullanarak bireysel gönderilere, kategorilere, yazarlara ve diğer sayfalara kolayca özel arka plan görüntüleri ekleyebilirsiniz.

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

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

WordPress'in gövde etiketine hangi CSS sınıflarını eklediğini görmek için inceleme aracını kullanabilirsiniz. İşte bir örnek:

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

Örneğin, kategori arşiv sayfasına özel bir arka plan resmi ekleyelim.

Bir temanın functions.php dosyasını CSS kodu eklemek için değiştirmek yaygın bir uygulama olsa da, bu güvensizdir ve yeni başlayanlar için pek uygun değildir. Küçük bir hata bile web sitenizi bozma riskini taşır.

Bu yüzden her zaman WPCode kullanmanızı öneririz. Özel kod parçacıkları eklemek için en iyi eklentidir ve çok fazla zahmet gerektirmez.

Markalarımızda kod parçacıklarını eklemek ve yönetmek için WPCode'u kullanıyoruz. Organize kalmak ve işleri sorunsuz yürütmek için basit ve etkili bir yol oldu. Daha fazla bilgi edinmek isterseniz, detaylı WPCode incelememize göz atın.

Bunu yapmak için WPCode eklentisini yükleyip etkinleştirelim. Yardıma ihtiyacınız olursa, WordPress eklentisi nasıl kurulur hakkındaki rehberimize göz atabilirsiniz.

Etkinleştirdikten sonra, WordPress yönetici alanınızdan Kod Parçacıkları » + Yeni Ekle'ye gidin.

Bir sonraki ekranda, ‘Özel Kod Ekle (Yeni Parça)’ seçeneğinin üzerine gelin ve göründüğünde ‘Parçayı kullan’ düğmesine tıklayın.

Bir sonraki ekranda, özel CSS parçacığınız için bir başlık ekleyerek başlayabilirsiniz. Kodu daha sonra tanımanıza yardımcı olacağı için basit ve ilgili bir şey seçmek isteyebilirsiniz.

Bundan sonra, aşağıdaki özel CSS'yi ‘Kod Önizleme’ kutusuna yazabilir veya yapıştırabilirsiniz.

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;
}

Kendi sitenizden arka plan resmi URL'sini ve kategori sınıfını değiştirmeyi unutmayın.

WPCode düzenleyicisinde nasıl görünebileceği aşağıdadır:

Ardından, açılır menüden 'CSS Parçacığı'nı seçerek 'Kod Türü'nü ayarlamanız gerekecektir.

Her şey iyi göründüğünde, kod parçasını etkinleştirmek için geçişi değiştirebilir ve 'Kod Parçasını Kaydet'e tıklayabilirsiniz.

Ayrıca, bireysel yazılara ve sayfalara özel arka planlar ekleyebilirsiniz.

WordPress'in gövde etiketinde gönderi veya sayfa kimliğini içeren bir CSS sınıfı vardır. Aynı CSS kodunu kullanabilir ve yalnızca .category-tv yerine gönderiye özel CSS sınıfını değiştirebilirsiniz.

Daha fazla ayrıntı için, WordPress'e özel CSS nasıl eklenir konusundaki eğitimimize bakın.

Ek Kaynaklar: WordPress Sitesi Kullanıcı Deneyimini İyileştirmek İçin Resim ve Medya Dosyaları Kılavuzları

Bu makalenin WordPress'te nasıl arka plan resmi ekleyeceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca aşağıdaki kılavuzumuza da bakmak isteyebilirsiniz:

• WordPress'e Düzgün Bir Şekilde Görüntü Ekleme
• WordPress'te Resim Galerisi Nasıl Oluşturulur
• WordPress Video ve Resim Kaydırıcısı Nasıl Oluşturulur
• WordPress'te Önceki ve Sonraki Yazı Bağlantılarına Küçük Resim Ekleme
• Spotify'ı WordPress'e Gömme
• Apple Podcast'leri WordPress'e Gömme
• En İyi Web Sitesi Tasarım Yazılımı
• Kaliteyi Kaybetmeden Web Performansı İçin Resimleri Nasıl Optimize Edersiniz

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.