WordPress Temalarını CSS ile Özelleştirme

Temalar, WordPress'in en büyük satış noktalarından biridir. Doğru tema, web sitenizi gerçekten öne çıkarabilir. Ancak, her şeyi doğru yapmak için genellikle kullandığınız temada en az birkaç özel değişiklik yapmak isteyeceksiniz.

Çoğu durumda, temanızın stilini özelleştirmek için Basamaklı Stil Sayfalarını (CSS) kullanmanız gerekir. WordPress ile bunu yapmanın birkaç yolu vardır. Kodla ilgili herhangi bir deneyiminiz olmasa bile, WordPress temasına kendi CSS ince ayarlarınızı kolayca ekleyebilirsiniz.

Bu kılavuzda, WordPress'te özel CSS eklemek ve düzenlemek için kullanabileceğiniz üç yönteme göz atacağız. Tüm süreç boyunca size yol göstereceğiz ve her bir tekniği kullanmanın ne zaman mantıklı olacağı hakkında konuşacağız. Başlayalım!

Tema Özelleştirici ile Özel CSS Ekleme

Deneyim Düzeyi: Başlangıç

WordPress Özelleştirici, web sitenizin tasarımında değişiklikler yapmanızı ve bunları gerçek zamanlı olarak önizlemenizi sağlar. Erişmek için, WordPress panonuza giriş yapın ve Görünüm > Özelleştir sekmesine gidin:

Burada oynayabileceğiniz birçok ayar var. Ancak, şu anda Ek CSS sekmesine bakın. Üzerine tıkladığınızda, özel CSS ekleyebileceğiniz bir alanla birlikte yeni bir bölüm açılır:

CSS'de yeniyseniz, resmi Codex'te WordPress ile nasıl kullanılacağı hakkında daha fazla bilgi edinebilirsiniz. CSS'nin temelleri hakkında başka birçok mükemmel kaynak da var ve bunlardan birkaçına göz atmanızı öneririz.

CSS biraz karmaşıklaşabilir, ancak yalnızca temel bilgileri bilerek başarabileceğiniz çok şey var. WordPress Özelleştirici'yi kullanmanın harika yanı, CSS kullanarak yaptığınız değişiklikleri anında önizlemenizi sağlamasıdır. Bu, bu yaklaşımın CSS'nin nasıl çalıştığını öğrenmek için mükemmel olduğu anlamına gelir.

Not : Özelleştiriciyi kullanarak yaptığınız değişiklikler, temaları değiştirirseniz kalıcı olmaz. Ayrıca, mevcut temanızı güncellemek, özel CSS'nizi silebilir. Bu nedenle, çok fazla değişiklik yapmayı veya temalar arasında geçiş yapmayı düşünüyorsanız bu yaklaşımı önermiyoruz.

Eklenti ile Özel CSS Ekleme

Deneyim Düzeyi: Başlangıçtan Ortaya

Yukarıdaki yöntem iyi çalışıyor, ancak eklentileri kullanarak seçeneklerinizi genişletebilirsiniz. Aşağıdaki bölümlerde, WordPress temanızı özelleştirmenizi sağlayan üç eklentiyi keşfedeceğiz.

Not : Eklentileri kullanarak WordPress CSS düzenleme deneyimi düzeyi, kullandığınız araca bağlı olacaktır. Hepsini test etmenizi ve hangisinin en rahat hissettirdiğini görmenizi öneririz.

Gelişmiş CSS Düzenleyici

WordPress Özelleştirici'yi kullanmayı seviyorsanız, ancak daha fazla seçenek sunmasını istiyorsanız, bu eklenti bir göz atmaya değer. Advanced CSS Editor ile masaüstü bilgisayarlar, telefonlar ve tabletler için özel CSS ekleyebileceksiniz. Bu şekilde, web sitenizin her tür cihazda nasıl göründüğüne ince ayar yapabilirsiniz.

WordPress eklentisini yükledikten sonra, kontrol panelinizdeki Görünüm > Özelleştirici sekmesine gidin. Her cihaz türü için birden çok düzenleyiciye erişmenizi sağlayan yeni bir Gelişmiş CSS Düzenleyici seçeneği görmelisiniz:

Tek yapmanız gereken, istediğiniz özel CSS'yi eklemek, doğru çalıştığından emin olmak için test etmek ve temanızdaki değişiklikleri kaydetmek.

Artıları:

• Web sitenizin tüm cihazlarda nasıl göründüğü konusunda tam kontrol sahibi olursunuz.
• Yine de Özelleştirici aracılığıyla temanızı düzenleyebilirsiniz.

Eksileri:

• Birden çok cihaz türü için özel CSS eklemek çok zahmetli olabilir.

Ortalama Puan: 4,5/5

Not: Bu eklenti, sitenizin yükleme sürelerini azaltmaya yardımcı olabilecek CSS'nizi küçültme seçeneği de içerir.

Modüler Özel CSS

Modüler Özel CSS, WordPress Özelleştirici aracılığıyla temanıza CSS eklemenizi sağlar. Bununla birlikte, varsayılan CSS düzenleyicisine çok hoş gelen birkaç özellik de ekler. Daha spesifik olmak gerekirse, bu eklenti, bireysel temalar için özel CSS oluşturmanıza ve kurduğunuz herhangi bir temada kalıcı olan genel değişiklikler yapmanıza olanak tanır:

Bu alanlara erişmek için Görünüm > Özelleştirici > Ek CSS bölümüne geri dönmeniz gerekir. Oradayken, değişiklik yapmaya başlayabilirsiniz.

Artıları:

• Yalnızca belirli temalar için özel CSS ekleyebilir ve tema değiştirseniz bile devam edecek değişiklikler yapabilirsiniz.

Eksileri:

• 'Global' CSS her temayla iyi çalışmayabilir, bu nedenle yeni bir temaya geçerken dikkatli olmanız gerekir.

Ortalama Puan: 5/5

SiteOrigin CSS

SiteOrigin CSS, şimdiye kadar bahsettiğimiz eklentilerden farklıdır. Özelleştiriciye yeni özellikler eklemek yerine, bağımsız bir WordPress CSS düzenleyici sunar. Eklentiyi yükledikten sonra Görünüm > Özel CSS sekmesine giderek bu yeni düzenleyiciye erişebilirsiniz:

İlk bakışta, bu CSS editörü pek bir şeye benzemiyor. Ancak, göz simgesine tıklarsanız görsel düzenleyiciyi başlatırsınız. Burada, temanızın herhangi bir öğesine tıklayabilir ve CSS kullanarak kolayca düzenleyebilirsiniz:

SiteOrigin CSS eklentisi ilk başta biraz bunaltıcı olabilir. Ancak, doğru seçicileri aramak zorunda kalmayacağınız için size çok zaman kazandırabilir. Tek yapmanız gereken, değiştirmek istediğiniz öğeye tıklamak ve ardından istediğiniz CSS kodunu eklemek.

Artıları:

• Web sitenizde istediğiniz herhangi bir öğeyi üzerine tıklayarak düzenleyebilirsiniz.
• Bu eklenti, yazı tipleri gibi CSS kullanmak zorunda kalmadan temanızın bazı basit yönlerini değiştirmenize olanak tanır.

Eksileri:

• Birden çok öğeyi değiştirirseniz, temanıza eklediğiniz tüm özel CSS'leri takip etmek zor olabilir.

Ortalama Puan: 4.9/5

Alt Tema Stil Sayfası ile CSS'yi Düzenleyin

Deneyim Düzeyi: Gelişmiş

Alt tema, mevcut bir temanın kopyasıdır ("ana" olarak bilinir). Alt temalar, WordPress web sitenizde güvenle değişiklik yapmanızı sağlar. Bunun nedeni, özel CSS ayarlarınızı kaybetmeden ana temayı güncelleyebilmenizdir. Ayrıca, sitenizi olumsuz etkileyen herhangi bir CSS eklerseniz, alt temayı kolayca devre dışı bırakabilirsiniz.

Bir alt temaya eklediğiniz herhangi bir özel CSS, üst temanın stillerini geçersiz kılar. Ancak, bunun işe yaraması için öncelikle bir alt temanın nasıl oluşturulacağını bilmeniz gerekir. 'Çocuğunuz' hazır olduğunda, FileZilla gibi bir FTP istemcisi kullanarak dosyalarına erişebilirsiniz.

Web sitenize FTP aracılığıyla bağlandıktan sonra, genellikle public_html veya www olarak adlandırılan veya web sitenizin adını taşıyan kök klasörünüzü bulmak isteyeceksiniz:

Ardından, wp-content/themes dizinine gidin. Orada, kurduğunuz alt öğe de dahil olmak üzere tüm temalarınız için ayrı klasörler bulacaksınız. Alt temanın klasörünü açın ve içinde style.css dosyasını arayın:

Tema dosyasına sağ tıklayın ve Görüntüle/Düzenle seçeneğini seçin. Bu, varsayılan metin düzenleyicinizi kullanarak dosyayı açar ve üzerinde değişiklik yapmanızı sağlar. Bu, temanıza özel CSS ekleyebileceğiniz anlamına gelir, yalnızca şimdi WordPress Özelleştirici yerine bir tam metin düzenleyici kullanıyorsunuz.

İşiniz bittiğinde, dosyadaki değişiklikleri kaydedin ve düzenleyiciyi kapatın. Ardından, yaptığınız değişikliklerin istendiği gibi çalışıp çalışmadığını görmek için web sitenizi ziyaret edebilirsiniz. Olmadıysa, style.css dosyanıza dönebilir ve CSS'sini değiştirmeye devam edebilirsiniz.

Not: Bu, üst düzey bir genel bakıştır ve bir alt temanın ayarlanması ve kullanılmasıyla ilgili çok daha fazla şey vardır. Bu süreçte yeniyseniz, dikkatli bir şekilde ilerlemenizi öneririz.

Tema Özelleştiricili Özel CSS, CSS Eklentileri ve Alt Tema Stil Sayfası

Gördüğünüz gibi, WordPress'e özel CSS eklemek söz konusu olduğunda birçok seçeneğiniz var. Ancak, doğru yaklaşımı seçmek zor olabilir. Platform ve genel olarak CSS ile ilgili deneyim seviyenize göre seçenekleri inceleyelim:

• WordPress'te yenisiniz ve CSS kullanmaya alışkın değilsiniz. Bu senaryoda, yapabileceğiniz en iyi şey WordPress Özelleştirici'ye bağlı kalmaktır. Bununla, değişiklikleri anında önizleyebilecek ve CSS kullanmaya alışabileceksiniz.
• WordPress ve CSS ile biraz deneyiminiz var. Bu aşamada, varsayılan Özelleştiricinin sağladığından daha fazla seçenek isteyeceksiniz. Bu nedenle, WordPress'te özel CSS'yi düzenlemek için işlevselliğini artıran eklentiler kullanmanızı öneririz.
• CSS kullanmakta rahat olan bir WordPress ustasısınız. CSS ve kod parçacıkları gözünüzü korkutmuyorsa, muhtemelen bir alt tema oluşturmak ve stil sayfasını manuel olarak düzenlemek isteyeceksiniz.

Bunların sadece yönergeler olduğunu ve size en rahat gelen yaklaşımı kullanmakta özgürsünüz.

Harika Bir Tasarım ve Birinci Sınıf Barındırma ile Dijital Deneyimi Geliştirin

Web sitenizin tasarımı, ziyaretçilerin web siteniz hakkında ne düşündüğü konusunda önemli bir rol oynar. WordPress ile binlerce temaya erişim elde edersiniz ve bunlardan herhangi birini özel CSS kullanarak düzenleyebilirsiniz.

Ancak, başarılı bir web sitesi çalıştırmak sadece görünüşle ilgili değildir. Ayrıca mükemmel performans, güvenlik ve destek sağlayan WordPress web barındırma hizmetine ihtiyacınız olacak. WP Engine ile planlarımızın her biri ile tüm bu özelliklere erişebileceksiniz!