WordPress Kullanıcıları İçin Zaman Kazandıran 17 CSS İpucu
Yayınlanan: 2023-03-13WordPress, web sitenizi tasarlamak ve özelleştirmek için sonsuz olanaklar sunar. Bu makalede, başlığınızı şekillendirmekten yazı tiplerinizi değiştirmeye kadar, özellikle WordPress kullanıcıları için bazı pratik CSS ipuçlarını paylaşacağız.
WordPress çok sayıda önceden hazırlanmış tema ve şablon sunarken, bazen meseleleri kendi elinize almanız ve CSS ile özelleştirmeler yapmanız gerekir.
WordPress sitenizde çalışırken bu sorulardan herhangi birini sorduysanız:
- "'Daha fazlasını oku' düğmesini nasıl kaldırırım?"
- “Bu bağlantının rengini nasıl değiştirebilirim?”
- "Bu bağlantıyı nasıl tıklanamaz hale getirirken metnin sayfada kalmasını sağlarım?"
…sonra web siteniz için bazı değerli CSS püf noktalarını öğrenmek için okumaya devam edin.
Bu eğitimde şunları ele alacağız:
- WordPress CSS İpuçları
- Bir öğeyi yatay ve dikey olarak ortalayın
- Bağlantı rengini değiştir
- Bağlantıyı kaldır
- Bir bağlantıyı devre dışı bırakın (bağlantı görünür durumda kalır ancak kullanıcılar üzerine tıklayamaz)
- Fareyle üzerine gelindiğinde bağlantıların rengini değiştirme
- Stil bağlantıları
- Düğmeye stil ver
- Bir bölümün yazı tipini değiştirme
- Yapışkan bir başlık oluşturun
- Gölge efektli yapışkan bir başlık oluşturun
- Bir bölüme arka plan rengi ekleme
- Vücudun arka plan rengini değiştirme
- Belirli bir kelimenin veya ifadenin rengini değiştirme
- Bir görüntünün etrafında kenarlık oluşturma
- Bir görüntü üzerinde fareyle üzerine gelme efekti oluşturma
- Bir formun stilini belirleyin
- Duyarlı bir düzen oluşturun
- CSS Becerilerinizi Bir Sonraki Seviyeye Taşıyın
WordPress CSS İpuçları
Bu ipuçlarını uygulamak için bilmeniz gereken iki şey:
- CSS nasıl çalışır?
- WordPress'e CSS nasıl eklenir?
Not: CSS riskli değildir, bu nedenle bir hata yaparsanız kodunuzu silebilir veya değiştirebilirsiniz… hiçbir şeyi bozmaz :)
Bunu da geride bıraktıktan sonra, kendi WordPress sitenizde deneyebilmeniz için doğrudan örneklerle bazı pratik CSS ipuçlarına geçelim:
Bir öğeyi yatay ve dikey olarak ortalayın
Bir öğeyi (resim, metin veya div gibi) hem yatay hem de dikey olarak ortalamak için aşağıdaki CSS kodunu kullanın:
.element {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Bu kodda, position: relative özelliği, öğeyi en yakın konumlandırılmış atasına göre konumlandırmak için kullanılır. top: 50% ve left: 50% özellikleri, öğeyi kabının merkezine taşır. Son olarak, transform: translate(-50%, -50%) özelliği, öğeyi kendi genişliğinin ve yüksekliğinin %50'si kadar geriye taşıyarak hem yatay hem de dikey olarak ortalar.
Bağlantı rengini değiştir
.item-class{
color : blue;
}
Beyaz, siyah, mavi, kırmızı gibi renkleri kullanabilirsiniz ama belirli renkleri kullanmak isteyebilirsiniz.
Bu durumda, bunu şu şekilde yapabilirsiniz:
.item-class{
color : #F7F7F7;
}
Web sitenizin tasarımı için bir renk paleti oluşturmak istiyorsanız, Paletton aracını kullanmayı deneyin. Çok yardımcı oldu!
Not: Öğeleri birleştirmek istiyorsanız, bu oldukça kolaydır.
Örneğin, tıklamayı devre dışı bırakmak ve bağlantıyı tekrar siyah yapmak istediğinizi varsayalım.
Bu kodu kullanabilirsiniz:
.item-class{
pointer-events : none;
color : black;
}
Bağlantıyı kaldır
.item-class{
display : none;
}
Not: Bazen, çalışmasını sağlamak için sınıfınızdan sonra bir a koymanız gerekebilir, şöyle:
.item-class a{
display : none;
}
Kodunuzun çalışıp çalışmadığını görmek için a eklemeyi veya onsuz denemeler yapmayı deneyin. Sadece CSS'nizi ekleyin, kaydedin ve ön ucunuzu kontrol edin.
Bir bağlantıyı devre dışı bırakın (bağlantı görünür durumda kalır ancak kullanıcılar üzerine tıklayamaz)
Not: Bunu yapmak için HTML'yi değiştirmek her zaman daha iyidir, ancak CSS daha kolay veya mümkün olan tek çözüm olabilirse, şu kodu kullanın:
.item-class{
pointer-events: none;
}
Fareyle üzerine gelindiğinde bağlantıların rengini değiştirme
Aşağıdaki CSS kodunu kullanarak, bir kullanıcı fareyle üzerine geldiğinde bağlantıların renk değiştirmesini sağlayabilirsiniz:
a:hover {
color: red;
}
Bu kodda, a:hover seçici, kullanıcının o anda üzerine geldiği sayfadaki tüm bağlantıları hedefler. color: red özelliği, metnin rengini kırmızı olarak değiştirir.
Stil bağlantıları
Web sitenizdeki bağlantılara stil vermek için aşağıdaki CSS kodunu kullanın:
a {
color: #0077cc;
text-decoration: none;
border-bottom: 1px solid #0077cc;
transition: all 0.2s ease-in-out;
}
a:hover {
color: #005299;
border-bottom: 1px solid #005299;
}
Bu kodda, a seçici sayfadaki tüm bağlantıların stilini belirlemek için kullanılır. color özelliği, bağlantıların rengini ayarlar ve text-decoration özelliği, varsayılan alt çizgiyi kaldırır. border-bottom özelliği, ince bir alt çizgi efekti ekler. transition özelliği, kullanıcı fareyle bağlantının üzerine geldiğinde yumuşak bir geçiş efekti oluşturur. a:hover seçicisi, kullanıcı fareyle üzerine geldiğinde bağlantıyı biçimlendirmek için kullanılır.
Düğmeye stil ver
Bir düğmeye stil vermek için aşağıdaki kodu kullanın:
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
Bu kodda, düğmenin görünümü için background-color ve color özellikleri, düğmenin boyutu için padding özelliği ve düğmenin üzerine gelindiğinde fare işaretçisini değiştirmek için cursor özelliği dahil olmak üzere çeşitli özellikler bir düğmeyi biçimlendirmek için kullanılır.
Bir bölümün yazı tipini değiştirme
Aşağıdaki CSS kodunu kullanarak web sitenizin bir bölümünün yazı tipini değiştirin:
.section {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
Bu kodda, font-family özelliği, yazı tipini Arial veya benzer bir sans-serif yazı tipine, font-size özelliği yazı tipi boyutunu 16 piksele ve line-height özelliği metin satırları arasındaki aralığı 1,5 olarak ayarlar. Yazı tipi boyutunun katı.
Yapışkan bir başlık oluşturun
Kullanıcı kaydırdıkça sayfanın üst kısmında sabit kalan bir başlık oluşturmak istiyorsanız, aşağıdaki CSS kodunu kullanabilirsiniz:
.header {
position: fixed;
top: 0;
left:0;
width: 100%;
background-color: #333;
color: #fff;
z-index: 9999;
}
Bu kodda, position: fixed özelliği, başlığı görünümün en üstüne sabitler ve top: 0 özelliği, başlığı sayfanın en üstüne yerleştirir. width: 100% özelliği, başlığın görünümün tüm genişliğini kapsamasını sağlar. background-color , color başlığı biçimlendirmek için kullanılır ve z-index: 9999 özelliği, başlığın sayfadaki diğer tüm öğelerin üstünde görünmesini sağlar.
Gölge efektli yapışkan bir başlık oluşturun
Kullanıcı sayfayı kaydırdıkça sayfanın üst kısmında sabit kalan, gölge efektli yapışkan bir başlık oluşturmak için şu CSS kodunu kullanın:
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.content {
padding-top: 100px;
}
Bu kodda, başlığı sayfanın en üstüne sabitlemek için position: fixed özelliği kullanılır. top: 0 ve left: 0 özellikleri, başlığı sayfanın sol üst köşesine yerleştirir. width: 100% özelliği, başlığın genişliğini sayfanın tam genişliği olarak ayarlar. background-color özelliği, başlığın arka plan rengini ayarlar ve z-index özelliği, başlığın sayfadaki diğer öğelerin üstünde görünmesini sağlar. Son olarak, box-shadow özelliği başlığa ince bir gölge efekti ekler. .content seçici, içeriğin sabit başlık tarafından kapsanmaması için sayfanın üst kısmına dolgu eklemek için kullanılır.
Bir bölüme arka plan rengi ekleme
Web sitenizin bir bölümüne arka plan rengi eklemek ister misiniz? Ardından aşağıdaki CSS kodunu kullanın:
.section {
background-color: #f2f2f2;
padding: 20px;
}
Bu kodda, background-color: #f2f2f2 özelliği, arka plan rengini açık gri olarak ayarlar ve padding: 20px özelliği, bölüm içindeki içeriğin etrafına 20 piksel boşluk ekler.
Vücudun arka plan rengini değiştirme
Web sitenizin gövdesinin arka plan rengini değiştirmek için bu kodu ekleyin:
body {
background-color: #f5f5f5;
}
Bu kodda, background-color özelliği, arka plan rengini açık gri olarak ayarlar.
Belirli bir kelimenin veya ifadenin rengini değiştirme
Bir metin bloğundaki belirli bir kelimenin veya ifadenin rengini değiştirmek için aşağıdaki CSS kodunu kullanabilirsiniz:
p span {
color: red;
}
Bu kodda, p span seçicisi, bir p öğesi içinde görünen herhangi bir span öğesini hedefler. Ardından, hedeflemek istediğiniz kelimeyi veya kelime öbeğini HTML'nizdeki bir span öğesiyle sarmalayabilirsiniz, bunun gibi:
<p>Lorem ipsum dolor sit amet, <span>consectetur adipiscing elit</span>. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Bu, "consectetur adipiscing elit" ifadesinin kırmızı renkte görünmesini sağlar.
Bir görüntünün etrafında kenarlık oluşturma
Bir resmin çevresine nasıl kenarlık ekleyeceğiniz aşağıda açıklanmıştır:
img {
border: 2px solid #ccc;
}
Bu kodda border özelliği, kenarlığın genişliğini, stilini ve rengini ayarlar. 2px değeri, kenarlığın genişliğini 2 piksel olarak ayarlar, solid , stili düz bir çizgi olarak ayarlar ve #ccc , rengi açık gri olarak ayarlar.
Bir görüntü üzerinde fareyle üzerine gelme efekti oluşturma
Bir görüntü üzerinde fareyle üzerine gelme efekti oluşturmak için bu kod parçacığını kullanın:
img:hover {
opacity: 0.8;
}
Bu kodda, img:hover seçicisi, kullanıcı fareyi resmin üzerine getirdiğinde resmi hedefler. opacity özelliği görüntünün şeffaflığını ayarlar. Bu durumda, değer 0,8 olarak ayarlanır ve kullanıcı fareyi üzerine getirdiğinde görüntüyü biraz şeffaf hale getirir.
Bir formun stilini belirleyin
Aşağıdaki CSS koduyla web sitenizdeki bir forma stil verin:
form {
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
}
form label {
display: block;
margin-bottom: 10px;
}
form input[type="text"], form input[type="email"], form textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px #ccc;
}
form input[type="submit"] {
background-color: #4CAF50;
border: none;
color: #fff;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
Bu kodda, formun genel görünümü için background-color , padding ve border-radius özellikleri dahil olmak üzere çeşitli özellikler bir forma stil vermek için kullanılır. form label seçici, her form alanıyla ilişkili etiketlerin stilini belirlemek için kullanılır. form input[type="text"], form input[type="email"], form textarea seçicisi, formdaki çeşitli giriş alanlarını biçimlendirmek için kullanılır. form input[type="submit"] seçici, gönder düğmesine stil vermek için kullanılır.
Duyarlı bir düzen oluşturun
Farklı ekran boyutlarına uyum sağlayan duyarlı bir düzen oluşturmak istiyorsanız aşağıdaki CSS kodunu kullanın:
@media (max-width: 768px) {
/* Styles for screens smaller than 768px */
.container {
width: 100%;
}
.menu {
display: none;
}
.mobile-menu {
display: block;
}
}
@media (min-width: 769px) {
/* Styles for screens larger than 768px */
.container {
width: 768px;
margin: 0 auto;
}
.menu {
display: block;
}
.mobile-menu {
display: none;
}
}
Bu kodda, farklı ekran boyutları için farklı stiller belirtmek için @media kuralı kullanılır. İlk @media kuralı, maksimum genişliği 768 piksel olan ekranları hedefler ve ikinci @media kuralı, minimum genişliği 769 piksel olan ekranları hedefler. Her @media kuralındaki çeşitli seçiciler, ekran boyutuna göre sayfanın düzenini ve görünümünü ayarlamak için kullanılır.
Bir CSS ipucu daha…
Her şeyi doğru yapmanıza rağmen kodunuzun çalışmadığını görebilirsiniz. Bunun nedeni, sizin kodunuzdan farklı bir şey söyleyen bir CSS kodunun zaten olması olabilir.
Bunu geçersiz kılmak için şunun gibi !important ekleyin:
.item-class{
pointer-events: none !important;
}
Bunlar, WordPress web sitenizi geliştirmek için CSS'yi kullanabileceğiniz pratik yollardan sadece birkaçı.
CSS ile web sitenizin görünümünü özelleştirme olanakları neredeyse sonsuzdur. Bu ipuçlarını öğrenip uygulayarak, yalnızca görsel olarak çekici olmakla kalmayıp aynı zamanda daha iyi bir kullanıcı deneyimi için optimize edilmiş bir web sitesi oluşturabilirsiniz.
CSS Becerilerinizi Bir Sonraki Seviyeye Taşıyın
İster yeni başlayan, ister deneyimli bir profesyonel web geliştiricisi veya web tasarımcısı olun, WordPress ile CSS kullanımına daha derinden dalmak istiyorsanız, bu ek CSS eğitimleri bilgi ve becerilerinizi genişletmenize yardımcı olacaktır:
- WordPress İçin CSS Öğrenmek İçin 10 Basit İpucu – Özellikle WordPress ile kullanmak için CSS öğrenmek isteyen yeni başlayanlar için pratik ipuçları. CSS sözdizimini anlamaktan CSS çerçevelerini kullanmaya kadar her şeyi kapsar.
- WordPress için CSS'yi Öğrenmek ve Referans Vermek - Özellikle WordPress ile kullanım için CSS'yi öğrenmek ve referans vermek için kapsamlı bir kılavuz. WordPress Özelleştiriciyi kullanma, CSS seçicileri anlama ve alt temalarla çalışma gibi konuları kapsar.
- CSS Parçacıkları ve İlham Bulmak İçin En İyi 7 Site – CSS kodunuz için ilham mı arıyorsunuz? Bu makale, kendi WordPress web sitenizde kullanabileceğiniz CSS parçacıkları ve örnekler sunan yedi web sitesini listeler.
- CSS ile WordPress Web Sitenizdeki Görsellere Nasıl Stil Verilir – Görüntüler, herhangi bir web sitesinin önemli bir parçasıdır ve bu makale, CSS kullanarak bunları nasıl stillendireceğinize dair ipuçları sunar. Kenarlık eklemeyi, görüntü boyutunu ve hizalamayı değiştirmeyi ve daha fazlasını öğreneceksiniz.
- WordPress Sitenize Özel CSS Nasıl Eklenir – Bu makale, hem yerleşik Özelleştiriciyi hem de eklentileri kullanarak WordPress web sitenize özel CSS ekleme sürecinde size yol gösterir.
- WordPress Sitenizi Canlı Düzenlemek İçin Ücretsiz CSS Eklentileri – Bu makale, WordPress web sitenizi canlı olarak düzenlemenize izin veren ve CSS değişikliklerinizin etkilerini gerçek zamanlı olarak görmeyi kolaylaştıran bazı ücretsiz CSS eklentilerini listeler.
- WordPress İçin 14 Harika CSS Animasyon Araçları – WordPress web sitenize CSS kullanarak bazı animasyonlar eklemek istiyorsanız, bu makale bunu yapmak için kullanabileceğiniz bazı harika araçları listeler.
- CSS Kullanarak WordPress Sitenize Duvar ve Izgara Düzenleri Ekleyin – Bu makale, WordPress web sitenize duvar ve ızgara düzenleri eklemek için CSS'yi nasıl kullanacağınızı açıklayarak görsel olarak daha çekici bir tasarım oluşturur.
- WordPress için Daha Temiz CSS Kodlaması için 25 Uzman İpucu – CSS kodunuzun temizliğini ve okunabilirliğini artırmak istiyorsanız, bu makale tam da bunu yapmak için 25 uzman ipucu sunuyor.
- CSS İş Akışınızı Geliştirmek İçin 25 Profesyonel İpucu – CSS ön işlemcilerini kullanmaktan kodunuzda hata ayıklamak için tarayıcı geliştirici araçlarını kullanmaya kadar, CSS iş akışınızı iyileştirmeye yönelik ipuçları.
Daha fazla bilgi edinmek ve WordPress web sitenizi bugün geliştirmeye başlamak için bağlantılara tıklayın.
katkıda bulunanlar
Incensy'den WPMU DEV üyesi Antoine'a bu gönderi fikrine ve yukarıda kullanılan birkaç CSS örneğine katkıda bulunduğu için teşekkür ederiz. Daha fazla ayrıntı için Incensy'nin Ajans iş ortağı profiline göz atın.
***
Not: Dış kaynaklardan makale kabul etmiyoruz. Bununla birlikte, WPMU DEV üyeleri, Blog XChange aracılığıyla blogumuzdaki öğreticiler ve makaleler için fikir ve önerilerde bulunabilirler.