it-swarm.asia

CSS ve tema geliştirme öğrenmeye nasıl başlanır?

CSS ve WordPress tema geliştirmeyi öğrenmek için önerileriniz neler olurdu?

4 yıldan fazla bir süredir WordPress kullanıyorum, ancak CSS veya tema tasarımı ile hiç rahat olmadım (burada ve orada Tweak yapabilirdim, ama bu pek bir şey yapmıyor). Bunları yapabilmeyi çok isterdim ama nereden başlayacağımı bilmiyorum. Karşılaştığım rehberlerin çoğu WP spesifik değil ve gereksiz materyallerden geçeceğimden korkuyorum.

Teşekkürler

1
Tal Galili

Her şeyden önce şeyler arasında farklı. WP CSS değildir ve CSS WP değildir. Ancak WP temaları CSS'den yararlanır. Bu nedenle, eğer CSS'yi öğrenirseniz temelde yanlış yapmazsınız (CSS ile iyi bir şeydir, tüm web siteleri arasında yaygındır). Diğer kısım HTML. Ve sonra PHP var.

Yani bunlar birbirleriyle kullanılan üç bilgisayar dilidir:

  • bir programlama dili: PHP
  • yapısal bir dil: HTML
  • etki alanına özgü bir dil: CSS

Ardından çok katmanlı bir ağ mimarisine sahip olursunuz: PHP sunucuda yürütülür ve HTML ve CSS sunucu tarafından sağlanır, ancak istemci bilgisayardaki Tarayıcı tarafından okunur/işlenir.

Öyleyse, temalar basit görünse bile, WP ile bunlar birbiriyle değiştirilebilir karışıklaşır ve kendiniz bir şeyler ayırmanız gerekir.

PHP "Tema" (PHP) Dosyalarında, HTML bu Tema dosyalarında (ve aynı zamanda) üretilir, CSS ise CSS dosyasındadır.

Yani temelde ne öğrenmek istediğinize kendiniz karar vermelisiniz. Çoğu kaynak PHP ve HTML/CSS arasında değişir.

Sorunuza dayanarak, yalnızca CSS öğrenmenizi önerebilirim. Cascade'i tamamen anladıktan sonra çok güçlü. HTML forehand bilmek gerekir (PHP değil, sadece HTML). Sonunda CSS, bir web sitesinin görsel olarak gösterilmesi için kesinlikle önemlidir, herhangi bir web sitesini dekore etmek için güçlü bir araçtır. Böylece her şeyi, hatta wordpress temalarını bile kullanabilirsiniz;)

Göreyim seni. 4 yıl sonra şimdiye kadar anlamadıysanız, biraz eğitim harcayın. Kendi kendine eğitim için mükemmel olan (alıştırmaların yanında) http://oreilly.com/catalog/9780596101978 gibi bir kitap öneririm.

CSS, HTML olduğu kadar W3C tarafından da çok iyi tanımlanmıştır. Buradaki tanım çok kullanıcı dostu değildir, ancak doğrudur, bu yüzden bazılarıyla orada da çok şey öğrenebilirsiniz. w3schools da güzel yapılır (ve bu site bir şekilde yıllar geçtikten sonra, en azından bir beynin arkasındadır). HTML/CSS, yani WWW, kaynağınızı alın: D

PHP için php.net var. WordPress için, her zaman değişiyor ve kişisel kariyerinizin kaynaklarını tüketiyor, bu yüzden ona çok fazla odaklanmayın. Zaten iyi geliştirilmiş haliyle, sadece sizin için neyin iyi olduğunu görün, çok fazla kelimeye odaklanmayın.

5
hakre

CSS'e gelince, bu alanda pek çok WordPress'e özgü şey yok. w3schools 'a gidin ve eğitimlerini inceleyin. Bir temanın nasıl oluşturulacağını öğrendiğim sürece, önerebileceğim en iyi iki kaynak kodeksin tema geliştirici bölümü ve varsayılan temadır (şu andan itibaren, Yirmi on). İyi bir sonuç almak için Tema Geliştirme sayfasını ve Şablonları sayfasını okuyun. temel anlayış. Ardından, geliştirici belgelerini (özellikle Şablon Etiketlerini ve kullanarak varsayılan temanın kaynak kodunu okuyun. Referans olarak İşlev Referansı sayfaları).

Umarım bu yardımcı oldu!

3
John P Bloch

Yapabileceğiniz en önemli şey, oynayabileceğiniz yerel bir WordPress kurulumu oluşturmaktır. (Talimatlar: Mac | Windows | Linux ) Bu, dünyanın geri kalanını izlemeden deney yapmanıza ve hata yapmanıza olanak sağlar.

Öğrenmenin en hızlı yolu, mevcut temaları değiştirerek ve çeşitli çerçeveler için alt temalar oluşturarak . Bunlardan benim kişisel favorim Tematik . Sıfırdan başlamak çok zor, bu yüzden bu kaynaklar zeminde koşmana yardımcı olabilir.

CSS'yi öğrenmek için w3schools.com kaynağıdır. Birçok tasarımcı için, Firebug vazgeçilmez bir araçtır. Onsuz evden ayrılma!

2
kylan

Adım 1: İyi bir sağlam ana temanın alt temasını oluşturun. A. Tematik temayı yükleyin. B. Çocuk teması yapmak için talimatlarını izleyin. (Tematik-örnek-alt tema teması klasörünü wp-content/themes altındaki tematik klasörün dışına taşıyın. Şimdi/wp-content/themes/thematic ve/wp-content/themes/thematic-sample- child-theme C. İkinci dizini yeni tercih ettiğiniz tema adınızla yeniden adlandırın D. Görünüm ekranına gidin ve yeni temanızı etkinleştirin.

Adım 2: styles.css dosyasını düzenleyin ve CSS ile deneme yapın. A. Örneğin, şunu ekleyin:

#primary, #secondary {
   background-color: #e8e8d6;   
   margin-right: 10px;
   -moz-border-radius: 8px;
   -webkit-border-radius: 8px;
   padding:18px 0 0;
}

#branding {
    background: url(http://example.com/wp-content/uploads/2010/09/example.jpg) top left no-repeat;
}

Sadece renkleri ve yazı tiplerini değiştirerek başlamak en kolayıdır, daha sonra yuvarlatılmış köşeler, kayan div'ler vb. Gibi meraklı şeylere girebilirsiniz.

Adım 3: Orijinal style.css dosyasını/wp-content/themes/thematic dizininde rehberiniz olarak kullanın. Gerçekten bu style.css inceleyin. Her kuralı anlamaya yardımcı olmak için http://reference.sitepoint.com/css gibi bir referans kullanın.

Bir çocuk teması ile istediğiniz kadar az ya da çok değiştirebilirsiniz. Örneğin, bazıları yalnızca yukarıda gösterildiği gibi #brand logosunu değiştirir. Ne kadar çok denersen, o kadar çok öğrenirsin.

2
Marjorie Roswell

bu adamlar bana çok yardımcı oldular (ve hala yapıyorlar) http://digwp.com/ Kitapları gerçekten ustaca ve anlaşılması kolay. onların blogu!

0
user3401

Kylan, Firebug'dan firefox için bahsetti.

Başkalarının temalarını nasıl oluşturduğunu görmek için gerçekten harika bir araçtır.

Birkaç harika görünen tema indirin ve ardından keşfetmek için Firebug kullanın. Bu başladığımda bana çok yardımcı oldu.

0
Nohl