CSS ile WordPress Web Sitenizdeki Görsellere Nasıl Stil Verilir?

Yayınlanan: 2014-11-22

Görsellerin web sitenizin başarısı için ne kadar önemli olduğu konusunda zaten bir fikriniz olduğundan eminim.

Ancak, etkileşimi (ve nihayetinde kârlılığınızı) artırma söz konusu olduğunda, mesele yalnızca sitenize resim eklemek değil, hangi resimleri eklediğiniz ve bunları nasıl sunduğunuzdur.

Bu yazıda bu bulmacanın önemli bir parçasını ele almak istiyorum: sunum.

WordPress, görüntüleri CSS ile şekillendirmek için basit araçlarla önceden paketlenmiş olarak gelir. WordPress'in sitenizdeki resimlere otomatik olarak atadığı çeşitli CSS sınıfları için farklı efektler oluşturma gücüne sahipsiniz. (Yabancı dilde konuşmaya başladım gibi görünüyorsa merak etmeyin yazının devamında her şeyi ayrıntılı olarak anlatacağım.)

Görsellerin siteniz için neden bu kadar önemli olduğunu araştırarak başlayacağım, ardından WordPress'in görsellere uyguladığı varsayılan CSS sınıflarını ele alacağım ve son olarak görsellerinize özel stiller uygulamak için CSS'yi nasıl kullanabileceğinizi göstereceğim. .

  • Görseller Web Siteleri İçin Neden Bu Kadar Önemlidir?
  • Bir WordPress CSS Hızlandırılmış Kursu
  • WordPress'e Özel CSS Nasıl Eklenir
  • WordPress Varsayılan CSS Görüntü Sınıfları
  • WordPress ile Basit Görüntü Şekillendirme
  • WordPress'te Image CSS ile Yapabileceklerinize Daha Fazla Örnek
  • Ya Mevcut Stiller?
  • Gökyüzü Sınırdır

Görseller Web Siteleri İçin Neden Bu Kadar Önemlidir?

Görsellerin bloglar için ne kadar faydalı olduğunu açıklamanın bir görselle kanıtlamaktan daha iyi bir yolu var mı?

Görüntüler Infographic
MDG Reklamının İzniyle

Bilgileri nasıl işlediğimizin biyolojisine indiğinizde işler daha da ilginçleşiyor. Örneğin, beyne iletilen bilgilerin yüzde 90'ının görsel olduğunu ve insanların yüzde 40'ının düz metin olan görsel bilgilere daha iyi yanıt verdiğini düşünün (kaynak: Zabisco).

Ama dürüst olalım: Demek istediğimi belirtmek için sana istatistikler atmama gerek yok. Görsel olarak çekici web sitelerinin ve blogların, bir yığın metinden çok daha fazla dikkatinizi çekeceğini kendi alışkanlıklarınızdan biliyorsunuz. Görüntüler renk, çekicilik ve entrika ekler. Daha biz okumaya başlama fırsatı bulamadan beynimizde bir dizi tepkiyi ateşliyorlar.

Basitçe söylemek gerekirse, blog gönderilerinize ilgi çekici, alakalı görüntüler eklemiyorsanız, içeriğinizden en iyi şekilde yararlanmaya yakın değilsiniz. Blog gönderilerinize görsel eklemek ve bunları iyi sunmak söz konusu olduğunda ekstra yol kat etmek, etkileşim, trafik ve satış açısından tüm farkı yaratabilir.

Bir WordPress CSS Hızlandırılmış Kursu

WordPress çekirdek geliştiricileri, web siteleri için görsellerin öneminin fazlasıyla farkındadır, bu nedenle tema geliştiricilere (ve tema ince ayar yapanlara) görsellerin nasıl sunulacağını belirlemede büyük bir güç ve esneklik sağlarlar.

Bu güç ve esneklik, bir dizi CSS sınıfı şeklinde sunulmaktadır. Ancak daha ileri gitmeden önce, size CSS'nin ne olduğunu ve onu nasıl kullanabileceğinizi anlamak için biraz zaman ayıralım.

CSS, Basamaklı Stil Sayfaları anlamına gelir: web sayfalarının nasıl görüneceğini belirlemek için kullanılan bir biçimlendirme dili. CSS, bir web sitesinin anlamsal yapısını tanımlamak için kullanılan biçimlendirme dili olan HTML (Hyper Text Markup Language) ile birleştirilir. Bu size pek mantıklı gelmiyorsa, acele etmeyin – gereğinden fazla ek bilgidir.

CSS basit bir dildir, bir kez onu kavrarsanız. Görüntülerin görünümünü ve yerleşimini değiştirebilmek açısından, bu makaleye eklediğim kodu kolayca alıp çalışabileceksiniz.

WordPress'te belirli bir görüntü türünün görünümüyle ilgili bir CSS kod parçacığı örneği:

 .alignright {
	kenarlık: 1 piksel katı #c5c5c5;
	Sağa çık;
	kenar boşluğu: 0 0 10px 10px;
	dolgu: 3 piksel;
}

.alignright metni bir CSS sınıfıdır (adından önceki nokta ile bir sınıf olarak tanımlanabilir). Bu durumda, .alignright , WordPress'in içeriğin sağına hizalanacak şekilde WordPress arka ucunda seçilen herhangi bir görüntüye atadığı bir sınıftır:

Görüntü Hizalama

Bir CSS sınıfına çeşitli bildirimler ( border ve padding gibi) uygulanabilir ve bunlar nihai olarak söz konusu sınıfın atandığı herhangi bir HTML öğesine uygulanır.

Yukarıdaki örnekte, WordPress'te sağa hizalanmış herhangi bir görüntü (metin düzenleyici aracılığıyla) kendisine atanan .alignright sınıfına sahip olacak ve bu nedenle, o sınıfa uygulanan stili devralacaktır. Görüntü sağa 'kayar', metnin içine girmesini önlemek için küçük bir kenar boşluğuna, çevresinde gri bir kenarlığa ve kenarlığı görüntü kenarından ayırmak için biraz dolguya sahip olacaktır.

Bunların hepsi görsel bir temsille çok daha anlamlı olacaktır:

Resim sağa hizalanmış

Bir CSS sınıfına eklenebilecek daha pek çok bildirim vardır; Birazdan onlarla biraz eğleneceğiz.

WordPress'e Özel CSS Nasıl Eklenir

WordPress temaları, yukarıdaki örnekte olduğu gibi CSS işaretlemesi ile doldurulmuş dosyalar olan kendi CSS 'stil sayfaları' ile birlikte gelir. Web sitenize kendi özel CSS'nizi eklemenin birçok yolu olsa da, mevcut bir temanın CSS stil sayfasını düzenlemenin yolu bu değildir . Temanın bir sonraki güncellenmesinde sıkı çalışmanızın üzerine yazılabilir.

En temiz ve geleceğe yönelik yöntem, kendi CSS stil sayfasıyla kendi basit WordPress “alt temanızı” oluşturmaktır. Alt temanızın dizini içindeki CSS stil sayfası, "ana" temanın stil sayfasındaki eşleşen stilleri geçersiz kılar.

Bir alt tema oluşturmak biraz göz korkutucu bir alıştırma gibi gelebilir, ancak FTP'ye aşina iseniz yeterince kolaydır. Bu yolda ilerlemek istiyorsanız, WordPress Kodeksindeki öğreticiye göz atın.

Daha basit bir şey arıyorsanız, iki eklenti önerim var:

  1. Jetpack içindeki Özel CSS modülü: Sitenizde zaten Jetpack kullanıyorsanız idealdir.
  2. Basit Özel CSS: Jetpack'i zaten kullanmıyorsanız (ve çeşitli işlevlerine ihtiyacınız yoksa), bu daha hafif bir seçenektir.

Hangi seçeneği seçerseniz seçin, WordPress'e özel CSS eklemek, oluşturulan özel CSS dosyasını (sizin veya eklentilerden biri tarafından) düzenlemek kadar basit olacaktır.

WordPress Varsayılan CSS Görüntü Sınıfları

Bunların hepsini aradan çıkardıktan sonra, en ilginç şeylere geçelim: WordPress'in varsayılan görüntü CSS sınıfları.

WordPress'te görüntülerin görünümünü değiştirmek için kullanabileceğiniz dört varsayılan sınıf vardır:

  • .aligncenter
  • .alignleft
  • .alignright
  • .alignnone

Bu sınıfların ne tür resimlere atandığını anlayabileceğinizden eminim.

Yazı/sayfa ekranlarında TinyMCE metin düzenleyicisi aracılığıyla web sitenize eklediğiniz her bir görsele bu sınıflardan biri atanmış olacaktır, bu da tüm bu görselleri istediğiniz gibi şekillendirme gücüne sahip olduğunuz anlamına gelir.

Belirli bir görüntü tipine stil vermek için tek yapmanız gereken yukarıdaki örnekte gördüğünüz formatı takip etmektir:

 .sınıf adı {
	mülk değeri;
	mülk değeri;
	mülk değeri;
}

Önemli: Bir görüntünün başlığı olduğunda, WordPress yukarıdaki sınıflardan birini görüntünün kendisi yerine görüntüyü çevreleyen bir div'e atar. Bu özel sorunu ele almak bu yazının kapsamı dışındadır, ancak deney yaparken aklınızda bulundurmanız gereken bir şeydir. İşlerin nasıl göründüğünü görmek için seçtiğiniz efektleri altyazılı resimlerle test etmenizi öneririm.

Bununla birlikte, eğlenceli kısma geçelim: resimlerinizi şekillendirme!

WordPress ile Basit Görüntü Şekillendirme

WordPress'teki resimlerinize basit stilistik efektler eklemek söz konusu olduğunda, beş ortak CSS özelliği vardır:

  1. background
  2. border
  3. float
  4. margin
  5. padding

Bu özelliklerin bir görüntünün görünümünü (veya daha doğrusu, görüntünün yerleştirildiği 'çerçevenin' görünümünü nasıl etkilediğini) tam olarak anlamak için, CSS 'kutu modelini' dikkate almamız gerekir:

W3.org'un izniyle
W3.org'un izniyle

Görüntüleri şekillendirme söz konusu olduğunda, görüntünün kendisi "içerik"tir. Bu görüntü daha sonra dolgu, kenarlıklar ve kenar boşlukları ile çevrelenir; bunların hepsini tanımlayabilirsiniz. Görüntüler aynı zamanda 'kayan' olabilir, bu eğitimin amaçları doğrultusunda basitçe hizalanmış anlamına gelir. 'Kayan' seçenekleriniz sol, sağ ve hiçbiri. (Görüntüyü ortalamak biraz daha karmaşıktır; buna birazdan değineceğiz.)

Bu özelliklerin nasıl kullanılabileceğini göstermek için basit bir örnek düşünelim. İlk olarak, herhangi bir CSS işaretlemesi olmadan kendisine atanan .alignright sınıfına sahip bir resim:

WordPress'te Resim (CSS Yok)

Şimdi basit bir CSS işaretlemesi ekleyelim:

 .alignright {
	arka plan: gri;
	kenarlık: 3 piksel düz siyah;
	Sağa çık;
	kenar boşluğu: 10 piksel;
	dolgu: 3 piksel;
}

İşte son etki:

CSS ile Resim

Muhtemelen burada ne yaptığımızı deşifre edebilirsiniz. Görüntü şimdi sağa doğru "kayan" (yani hizalanmıştır), böylece metin onun etrafına sarılmıştır. Gri bir arka plan verilen biraz dolgu ekledik. Dolgunun etrafına görünen kalın siyah bir kenarlık uyguladık. Son olarak, 10 piksellik bir kenar boşluğu, resim ve metin arasında biraz boşluk yaratır.

Yalnızca yukarıdaki beş seçiciyle yapabileceğiniz çok şey var. Bunları daha fazla keşfetmek istiyorsanız, işte her biri için kapsamlı bir kaynak:

  • background
  • border
  • float
  • margin
  • padding

Görüntüleri ortalamak için de bir çözüm sözü verdim. Bu öğreticinin kapsamı dışında kalan nedenlerle, CSS yalnızca float: center; (yani değer mevcut değil). Bunun yerine, görüntüyü bir blok öğesi olarak tanımlamanız gerekir, margin: 0 auto; ve görüntü için bir genişlik tanımlayın. Bu teknik hakkında daha fazla bilgiyi buradan okuyabilirsiniz. (Ayrıca aşağıda ortalanmış bir görüntü oluşturmak için kullanılan işaretlemenin bir örneğini vereceğim.)

WordPress'te Image CSS ile Yapabileceklerinize Daha Fazla Örnek

Artık kullanabileceğiniz en yaygın CSS özelliklerini daha iyi anladınız, işte size biraz ilham verecek birkaç örnek.

Resimlerimize bir çerçeve vermek için biraz dolgu ve gri bir arka plan ile başlayalım:

 .sola hizalamak {
	arka plan: #dbdbdb;
	yüzer: sol;
	kenar boşluğu: 0 10px 5px 0;
	dolgu: 5 piksel;
}

Bu işaretleme şununla sonuçlanır:

CSS sola hizala

Burada neler olduğunu keşfedelim:

  • Arka plan için bir HTML altıgen rengi kullandım. Bu renk kodları, web siteniz için renk seçiminde size neredeyse sınırsız esneklik sağlar.
  • Kullandığım görüntü şeffaf bir PNG olduğundan, background rengi görüntü dosyasında kullanılmayan tüm kullanılabilir alanı doldurdu.
  • Resmin her bir tarafı için farklı kenar boşlukları ayarlamak için margin özelliği içinde dört değer kullandım.

Başka bir şey deneyelim. Resimlerimize arka plan rengi vermek yerine, onları içerikten ayırmak için basit bir kenarlık içine yerleştirelim. İşte işaretleme:

 .alignright {
	kenarlık: 1 piksel katı #000099;
	Sağa çık;
	kenar boşluğu: 0 0 10px 10px;
	dolgu: 3 piksel;
}

Gördüğünüz gibi, görüntü hizalamasını hesaba katmak için margin özelliği değerleriyle oynadık, dolguyu azalttık ve 1 piksel düz kenarlık ekledik. İşte sonuç:

CSS sağa hizala

Son olarak ortalanmış bir görüntü oluşturalım ve ona kalın gri bir kenarlık verelim. İşte işaretleme:

 .Merkezi hizalama {
	kenarlık: 5 piksel katı #dbdbdb;
	Ekran bloğu;
	kenar boşluğu: 0 otomatik;
	genişlik: 300 piksel;
}

Ve sonuç:

CSS hizalama merkezi

Gördüğünüz gibi, yalnızca CSS kullanarak WordPress'te bir görüntünün yerleşimini ve görünümünü tamamen değiştirmek mümkündür.

Gerçekte burada sadece yüzeyi çizdik; yapabileceğiniz daha çok şey var. (Daha fazlasını keşfetmekle ilgileniyorsanız, aşağıda daha fazla öğrenme için bazı yararlı kaynaklar sağladım.)

Ya Mevcut Stiller?

Herhangi bir gerçek kalitede bir WordPress teması kullanıyorsanız, geliştirici varsayılan WordPress resim sınıflarının her birine zaten stiller eklemiş olacaktır. En azından her görüntü sınıfını uygun şekilde hizalamış olacak.

Bunun ötesinde, seçimleri tamamen öznel olacak ve artık onların stil efektlerini geçersiz kılma gücüne sahipsiniz. Alt temanızın stil sayfasında veya bir eklenti aracılığıyla girdiğiniz herhangi bir CSS işaretlemesi, temanın varsayılan CSS'sine göre öncelikli olacaktır. Kontrol sende.

Gökyüzü Sınırdır

Bu makaleyi okurken, kendi özel CSS stillerinizi denemek için ilham aldığınızı da umuyorum. Bu eğitimde daha gelişmiş seçicileri çok derinlemesine araştırmak istemedim, ancak CSS ile burada ele aldığımdan çok daha fazlasını yapabilirsiniz.

Daha gelişmiş efektleri (gölgeler, yuvarlama ve döndürme gibi) keşfetmeye hevesliyseniz, size CSS hakkında daha fazla şey öğretebilecek çok sayıda ücretsiz çevrimiçi kaynak var. Kişisel önerilerim şunlardır:

  • Mozilla Geliştirici Ağı: Web geliştirici topluluğu arasında sevilen.
  • W3 Okulları: Pek çok "ciddi" web geliştiricisi tarafından nefret edilir, ancak bilgi derinliğini ve genişliğini reddetmek mümkün değildir. Her zaman %100 doğru ve/veya güncel olmayabileceğini unutmayın.
  • WordPress Codex: WordPress ve CSS'nin nasıl bir araya geldiği hakkında daha fazla bilgi edinin.

Herhangi bir sorunuz varsa, lütfen aşağıdaki yorumlar bölümünde ateş etmekten çekinmeyin!

Fotoğraf Kredisi: Simon Pow, PicJumbo.

Etiketler:
  • CSS
  • Görüntüler