WordPress Çocuk Temalarına Başlarken

Yazan makale:
  • WordPress
  • Güncelleme: Temmuz 27, 2013

Demek ki, WordPress dünyasındaki tweaks'ınızı başlattığınızı ve birçok harika tema bulduğunuzu hayal ediyorsunuz. Hatta pek çok premium temalar buluyorsunuz ve bunların çoğu gerçekten de buna değiyor (profesyonel bir görünüm ve kod için birkaç kitap). Ve bulduğunuz temaların çoğu çok yakınama hiçbiri tam olarak istediğin şey değil. Yeni bir metin bloğu eklemek için, yazı çubuğunu değiştirmek için menü çubuğunu biraz hareket ettirmek iyi olur.

Bu tanıdık geliyorsa, bu kılavuz tam size göre. Burada, satın aldığın harika temayı bozmadan veya gelecekteki güncellemelerini kaybetmeden istediğin her şeyi yapabileceğin çocuk temaları dünyasına dalacağız, çünkü yaptığın her şey geri çekilecek.

Tema dosyalarını değiştirmeden görünüm düzenleme

Kısacası, Çocuk temasının ne olduğu: Orijinal dosyaları değiştirmeden özelleştirme. Başka türlü açık bir şekilde belirtilmedikçe, bir çocuk teması temelde aynı işlevselliklere ve ana temanıza (ana) bakacaktır.

En az 2 dosyası, style.css ve functions.php dosyasını içerecek, diğer tüm dosyalar ana temadan yakalanacaktır, bu nedenle çocuk tema dizininizde yeni bir dosya oluşturmazsanız, ana dosyaları kullanacaksınız.

Burada çok fazla seçeneğimiz var, ancak asıl avantajı orijinal temasa kolayca geri dönebilmeniz ve böylece tamamen farklı bir klasörde yapıldığından ana temanızı herhangi bir düzenleme yapmadan da güncelleyebilmeniz.

Ellerimizi kirletelim

Yani, ilk adım, / wp-content / themes / folder altında yeni bir çocuk tema dizini oluşturuyor. “Yirmi Çocuk” diyelim ve temel styles.css dosyamızı oluşturalım:

/ * Tema Adı: Yirmi Çocuk Tema URI: http://www.webrevenue.co Açıklama: Çocuk temaları şu anda öğrenme Yazar: Rochester Oliveira Yazar URI: http://www.webrevenue.co/author/rochester/ Template: twentytwelve * / / * Ana tema CSS dosyasını çağırmak * / @import ("../ twentytwelve / style.css"); / * Aşağıda istediğiniz herhangi bir şey ekleyin * /

Parametreler (diğer isteğe bağlı parametreler arasında):

  • Tema Adı: Temalar seçim ekranının altında göreceğiniz isim
  • Tema URI'si: Orada gösterilecek bağlantı
  • Açıklama: Kısa bir açıklama, bunun hakkında ne olduğunu hatırlayacaksınız
  • Yazar: Çocuk temasını kim oluşturdu
  • Yazar URI: Yazarın sitesine bağlanmak istiyorsanız
  • Şablon: Ana tema klasörü (böylece ana olarak farklı bir tema kullanmak isterseniz, bu parametreyi değiştirin)

Bu kodu ekledikten sonra WP admin> Görünüm> Temalar altındaki Çocuk Temasını göreceksiniz. Şimdi seçebilir ve yapılan tüm değişiklikler sitenizde görünecektir.

101 Çocuk Tema Düzenlemeleri

Sıfır CSS bilginiz varsa bu işe yaramaz, değil mi? Yanlış! CSS aslında oldukça kolay ve orada size yardımcı olmak için bir çok parçacığı bulabilirsiniz. Özelleştirmelerinizde size yardımcı olacak birkaç basit ipucu.

#1 Firebug'u Yükle

Bir çok insan sadece Chrome ve Safari'yi seviyor (ben de öyle!), Fakat benim için FireFox geliştirme için çok daha iyi. Yani, eğer kullanmak isterseniz, o anda aktif elemanın aktif olan tüm seçicilerini anlamak için harika bir araç olan firebug'u da kurmanızı tavsiye ederim.

Yükledikten sonra, F12 düğmesine basabilir veya sayfada bir yere sağ tıklayıp “Elementi Kontrol Et” öğesini seçebilirsiniz. Geçerli sayfa HTML'si ve CSS ile yeni bir pencere göreceksiniz (ve yararlı olan diğer pek çok sekme, belki daha sonra onlar hakkında konuşabiliriz).

CSS kutusunda, mevcut öğeye uygulanan tüm CSS kurallarını yukarıdan aşağıya ve üst kısımda daha "belirli" kurallara bakacaksınız. Bu harika, ama bu bilgi ile neler yapabileceğinizi görelim

#2 CSS özgüllüğünü (veya seçici kilidini) düşünün

Her CSS kuralı, seçicisine, özelliklerine ve değerlerine sahiptir. Ancak, tarayıcı 2'i veya aynı elemanı etkileyecek daha fazla kural bulduğunda, hangisinin daha uygun olduğunu seçmek zorundadır. Neyin dikkate alınacağını anlamak için genellikle bu “kural” a sahibiz:

  • ! önemli bir beyan başka bir şeyin üzerine yazacak
  • Satır içi CSS, ancak bir şey üzerine yazacak! önemli kurallar
  • 100 puanı olan ID (#header, #footer, # container…)
  • 10 puanları olan sınıflar (.main, .nav, .box)
  • Etiketler (gövde, div, p, a) 1 noktasına değer
  • 0 değerine sahip evrensel seçici ve sözde sınıflar (*,: hover,: sonra) ancak bir “kravat” varsa uygulanacaklar

Tamam, daha iyi anlamak için bir örnek görelim. Yirmi on ikiyi kullanarak site başlığınızı sağ tıklayın ve görünen ilk CSS'nin şunu göreceksiniz:

.site-başlık {padding: 1.71429em 0; makale, kenara, ayrıntılar, figcaption, şekil, altbilgi, üstbilgi, hgroup, nav, bölüm {display: block; }

İlk seçicinin 10 puanı vardır (bir sınıf olduğu için) ve ikincisinin her biri 1 noktasına sahiptir (çünkü virgüller sadece farklı seçicilerin ayrılmasıdır). Eğer #header div gibi bir şeyiniz varsa, selector kesinlikle ilk ortaya çıkacak.

Bu neden bu kadar önemli?

Çünkü ana temayı CSS dosyalarını düzenlemeden düzenlemek için, HER ZAMAN ana temada tanımlanan kurallardan daha fazla noktaya sahip kuralları kullanmanız gerekir. Ve bunun için akıllı olabilir ve basit bir kod kullanabilirsiniz. Örneğin, bu mülkün üzerine yazmak için:

.site-başlık {padding: 1.71429em 0; }

Bunu çocuk temanızın CSS'sine ekleyebilirsiniz, ancak şunları yapmamalısınız:

.site-başlık {padding 15px 0! önemli; }

Bu, kötü bir kod olduğundan ve örneğin tek bir sayfada değiştirmeniz gerekirse, yeniden yazmanın yolu daha da zorlaşır. Yani bunu basitçe kullanabilirsiniz:

vücut .site-başlık {padding: 15px 0; }

Bu seçicinin 11 noktaları orijinal 10'ten büyüktür ve bu kod uygulanacaktır.

#3 İşlevlerin iyi kullanılmasını sağlayın

Child functions.php dosyası, ADDITION IN orijinal dosyaya yüklenecek tek dosyadır. Bu WP ekibi tarafından yapılan akıllı bir çözümdür, böylece orijinal işlevleri koruyabilir ve kendi işlevlerinizi ekleyebilirsiniz. Yakalama ise, çocuk tema işlevleri ilk önce yüklenecek ve tema geliştirici işlevleri bildirirken çakışmalardan kaçınmak için böyle bir şey yapması ZORUNLUDUR:

if (! function_exists ('top_menu')) {function top_menu () {// cool kod here} add_action ('wp_head', 'top_menu'); }

Bunun nedeni, alt tema dosyanızda bir işlev tanımladığınızda, asıl işlevinin üzerine yazabilir. Tema geliştiricisi bu şekilde yapmazsa, çirkin bir PHP hatasıyla karşılaşırsınız (çünkü aynı fonksiyon iki kez yaratılır).

#4 Bazı CSS özelliklerini öğrenin

CSS kullanarak bir şeyler saklayıp ekleyebileceğinizi biliyor muydunuz? Doğru seçiciyi bulmak için firebug'u yüklemeniz gerekir, ancak bu kodu ekleyerek bir öğeyi gizleyebilirsiniz:

vücut bir {display: none}

Bunu daha karmaşık hale getirmek için, sadece küçük metinler ekleyebildiğiniz için, bir fiyat etiketinden sonra “Satışta!” Metni istiyorsanız, örneğin bu kodu kullanabilirsiniz:

.price del: sonra {color: kırmızı; içerik: "Satışta!"; }

Ne düşünüyorsunuz?

Bu rehber hakkında ne düşünüyorsunuz? Çocuk temalarını kullanmayı düşünür müsünüz? Bunu zaten kullanıyor musunuz? Aşağıdaki yorumlar bölümünü kullanarak bize bildirin!

Rochester Oliveira hakkında

Brasil, Itajubá (MG) 'dan bir web tasarımcısı ve girişimcisiyim. Karanlık konular hakkında yazmayı ve güzel şeyler yapmayı seviyorum.