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 ayarlamaya kadar, özellikle WordPress kullanıcılarına yönelik bazı pratik CSS ipuçlarını paylaşacağız.
WordPress çok sayıda önceden hazırlanmış tema ve şablon sunsa da bazen işleri 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ı tıklanamaz hale getirirken metni sayfada nasıl tutabilirim?"
…daha 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 ortalama
- Bağlantı rengini değiştirme
- Bağlantıyı kaldırma
- Bağlantıyı devre dışı bırakın (bağlantı görünür kalır ancak kullanıcılar onu tıklayamaz)
- Fareyle üzerine gelindiğinde bağlantıların rengini değiştirme
- Stil bağlantıları
- Bir düğmeye stil verin
- 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
- Gövdenin arka plan rengini değiştirme
- Belirli bir kelimenin veya ifadenin rengini değiştirme
- Resmin çevresinde kenarlık oluşturma
- Görüntü üzerinde fareyle üzerine gelme efekti oluşturma
- Formun stilini oluşturma
- 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 yalnızca iki şey:
- CSS nasıl çalışır?
- WordPress'e CSS nasıl eklenir
Not: CSS riskli değildir, dolayısıyla bir hata yaparsanız kodunuzu silebilir veya değiştirebilirsiniz… hiçbir şeyi bozmaz :)
Bunu bir kenara bırakarak, kendi WordPress sitenizde deneyebilmeniz için doğrudan örneklerle bazı pratik CSS ipuçlarına geçelim:
Bir öğeyi yatay ve dikey olarak ortalama
Bir öğeyi (görüntü, 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, öğeyi en yakın konumlandırılmış atasına göre konumlandırmak için position: relative özelliği 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 hareket ettirerek hem yatay hem de dikey olarak ortalar.
Bağlantı rengini değiştirme
.item-class{
color : blue;
}
Beyaz, siyah, mavi, kırmızı gibi renkleri kullanabilirsiniz ama belirli renkleri de 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 faydalı!
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ırma
.item-class{
display : none;
}
Not: Bazen dersinizin işe yaraması için dersten sonra aşağıdaki gibi bir a koymanız gerekebilir:
.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.
Bağlantıyı devre dışı bırakın (bağlantı görünür kalır ancak kullanıcılar onu tıklayamaz)
Not: Bunu yapmak için HTML'yi değiştirmek her zaman daha iyidir, ancak CSS daha kolaysa veya mümkün olan tek çözümse ş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, 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 üzerinde gezindiği sayfadaki tüm bağlantıları hedefler. color: red özelliği metnin rengini kırmızıya dönüştürür.
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ğ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ı bağlantının üzerine geldiğinde yumuşak bir geçiş efekti oluşturur. a:hover seçici, kullanıcı fareyle üzerine geldiğinde bağlantıya stil vermek için kullanılır.
Bir düğmeye stil verin
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, bir düğmeye stil vermek için çeşitli özellikler kullanılır; bunlar arasında 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 bulunur.
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 ayarlar, font-size özelliği yazı tipi boyutunu 16 piksele ayarlar ve line-height özelliği metnin satırları arasındaki aralığı 1,5 olarak ayarlar. yazı tipi boyutunun katıdır.
Yapışkan bir başlık oluşturun
Kullanıcı sayfayı kaydırırken 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 onu sayfanın en üstüne konumlandırır. width: 100% özelliği, başlığın görünüm alanının tüm genişliğine yayılmasını sağlar. background-color ve color , başlığa stil vermek 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ı 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 üst kısmına 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ğine 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 hafif 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.
ÜCRETSİZ E-KİTAP
Kârlı bir web geliştirme işine giden adım adım yol haritanız. Daha fazla müşteri kazanmaktan deli gibi ölçeklenmeye kadar.
ÜCRETSİZ E-KİTAP
Bir sonraki WP sitenizi sorunsuz bir şekilde planlayın, oluşturun ve başlatın. Kontrol listemiz süreci kolay ve tekrarlanabilir hale getirir.
Bir bölüme arka plan rengi ekleme
Web sitenizin bir bölümüne arka plan rengi eklemek ister misiniz? Daha sonra 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 griye ayarlar ve padding: 20px özelliği, bölüm içindeki içeriğin çevresine 20 piksellik boşluk ekler.
Gövdenin 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. Daha sonra hedeflemek istediğiniz kelimeyi veya kelime öbeğini HTML'nizde bir span öğesiyle şu şekilde sarabilirsiniz:
<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ünmesine neden olacaktır.
Resmin çevresinde kenarlık oluşturma
Bir görüntünün ç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 piksele, solid stili düz çizgiye, #ccc ise rengi açık griye ayarlar.
Görüntü üzerinde fareyle üzerine gelme efekti oluşturma
Bir görsel üzerinde fareyle üzerine gelme efekti oluşturmak için bu kod pasajını kullanın:
img:hover {
opacity: 0.8;
}
Bu kodda img:hover seçici, kullanıcı görselin üzerine geldiğinde görseli hedefler. opacity özelliği görüntünün şeffaflığını ayarlar. Bu durumda değer 0,8 olarak ayarlanır ve kullanıcı görüntünün üzerine geldiğinde görüntüyü biraz şeffaf hale getirir.
Formun stilini oluşturma
Aşağıdaki CSS kodunu kullanarak 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 de dahil olmak üzere bir forma stil vermek için çeşitli özellikler 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ına stil vermek için kullanılır. form input[type="submit"] seçicisi, gönder düğmesinin stilini belirlemek 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 @media kuralı, farklı ekran boyutları için farklı stiller belirtmek amacıyla kullanılır. İlk @media kuralı maksimum 768 piksel genişliğe sahip ekranları hedefler, ikinci @media kuralı ise minimum 769 piksel genişliğe sahip ekranları hedefler. Her @media kuralındaki çeşitli seçiciler, sayfanın düzenini ve görünümünü ekran boyutuna göre 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, kodunuzdan farklı bir şey söyleyen bir CSS kodunun zaten mevcut olması olabilir.
Bunu geçersiz kılmak için !important şu şekilde eklemeniz yeterlidir:
.item-class{
pointer-events: none !important;
}
Bunlar, WordPress web sitenizi geliştirmek için CSS'yi kullanabileceğiniz pratik yollardan sadece birkaç örnektir.
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 değil 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, CSS'yi WordPress ile kullanmaya daha derinlemesine dalmak istiyorsanız, bu ek CSS eğitimleri bilgi ve becerilerinizi genişletmenize yardımcı olacaktır:
- WordPress için CSS Öğrenmek İçin 10 Basit İpucu – Özellikle WordPress ile kullanmak üzere CSS öğrenmek isteyen yeni başlayanlar için pratik ipuçları. CSS söz dizimini anlamaktan CSS çerçevelerini kullanmaya kadar her şeyi kapsar.
- WordPress için CSS'yi Öğrenme ve Referans Verme - Özellikle WordPress ile kullanım için CSS'yi öğrenmeye ve referans vermeye yönelik kapsamlı bir kılavuz. WordPress Özelleştiriciyi kullanma, CSS seçicileri anlama ve alt temalarla çalışma gibi konuları kapsar.
- CSS Parçacıklarını ve İlham Bulmak İçin En İyi 7 Site – CSS kodunuz için ilham mı arıyorsunuz? Bu makalede, CSS parçacıkları sunan yedi web sitesi ve kendi WordPress web sitenizde kullanabileceğiniz örnekler listelenmektedir.
- CSS ile WordPress Web Sitenizdeki Görsellere Nasıl Stil Verilir – Görseller 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 olanak tanıyan ve CSS değişikliklerinizin etkilerini gerçek zamanlı olarak görmenizi kolaylaştıran bazı ücretsiz CSS eklentilerini listeler.
- WordPress İçin 14 Harika CSS Animasyon Aracı – CSS kullanarak WordPress web sitenize 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 Ekleme – Bu makale, görsel olarak daha çekici bir tasarım oluşturmak için WordPress web sitenize duvar ve ızgara düzenleri eklemek için CSS'yi nasıl kullanacağınızı açıklamaktadır.
- WordPress için Daha Temiz CSS Kodlaması İç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ı İyileştirmek iç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
Bu yazının fikrine ve yukarıda kullanılan birkaç CSS örneğine katkıda bulunduğu için Incensy'den WPMU DEV üyesi Antoine'a teşekkür ederiz. Daha fazla ayrıntı için Incensy'nin Ajans iş ortağı profiline göz atın.