Herkesin web geliştiricisi olma yolu biraz farklı görünüyor. Birçok insan gibi benim için de tasarımcı olarak başladım. WordPress, harika görünen bir siteyi herhangi bir kod bilmeden çalıştırmayı kolaylaştırır. Bir tasarımcı olarak temaları değiştirebilir, ayarları düzenleyebilir, eklentiler ekleyebilir ve sitenin görünümünü kontrol etmek için çok şey yapabilirsiniz. Ancak günün sonunda, birçok tasarımcı bir adım daha ileri gitmek ve sitenin nasıl göründüğünü piksel piksel dikte etmek istiyor.

Bunu başarmanın iki yolu vardır: tasarımınızı uygulamak için bir geliştirici kiralayın veya kendiniz bazı geliştirme becerileri edinin. Bir geliştirici kiralasanız bile, bazı geliştirmelerin nasıl yapıldığını bilmenin harika bir varlık olduğu zamanlar olacaktır. Ayrıca, müşterilerinizin geliştirme ihtiyaçlarını karşılayabildiğinizde, onlar için daha da değerli hale gelir ve oranınızı buna göre artırabilirsiniz.

Tasarımcıdan geliştiriciye geçiş yapmak büyük bir girişimdir. Site tasarımlarını oluşturan birinden, bu tasarımları oluşturup uygulayabilen birine geçiş yapmaya başlayabilmeniz için atmanız gereken bazı basit adımlar önereceğim.

İyi haber, doğru yerdesin

Burada The Layout'u okuyorsanız, WordPress'e en azından biraz aşinasınız demektir. WordPress, birisinin tasarımcıdan geliştiriciye web'deki diğer platformlardan daha iyi geçmesi için kapıyı açar. Bunu başarmanın bir yolu, WordPress panosunda Görünüm > Düzenleyici altında bulunan Düzenleyici'dir.

Temanın tüm kodunu, herhangi bir özel araç veya sunucu erişimi olmadan WordPress Kontrol Panelinde görüntüleyebilirsiniz. Kodu düzenlemek için de yetenekler sağlar, ancak bunu burada yapmanızı önermem (bunu yapmanın daha iyi yolları hakkında daha sonra konuşacağız). Bu, bir göz atmak ve neler olup bittiğini görmek için harika bir yer. Öyleyse devam edin ve temanızın başlığının altına bakın ve orada ne olduğunu anlamaya başlayıp başlayamayacağınıza bakın.

Burada genellikle üç farklı türde dosya göreceksiniz. İşleri basitleştirmek için bu dosyaları web sitenizin "gövdesi" gibi düşünün. PHP dosyaları (.php), HTML (kemikler) ve PHP (her şeyi beyne, veritabanına bağlayan sinirler) içerir. Stil sayfaları (.css), sitenizin nasıl görüneceğini belirleyen dış görünümüdür. JavaScript (.js), sitenin kasları olarak düşünülebilir, tipik olarak hareketli parçaları kontrol eder ve sitenin nasıl kullanıldığına ve etkileşime girdiğine tepki verir ve bunlara yanıt verir. Devam edin ve biraz keşfedin. Kodun sitenin hangi bölümü için olduğunu gösteren açıklayıcı kelimeler görüyor musunuz? Veya sitenin bazı görsel yönlerini tanımlayan kelimeler mi?

WordPress'in tasarımcı ve geliştirici arasındaki boşluğu kapatmasının bir başka harika yolu da, her şeyi parçalara ayırarak düzenlemek istediğiniz bölümü kolayca belirlemenize ve sitenin yalnızca bir bölümünde değişiklik yapmanıza olanak sağlamasıdır. WordPress, içeriği şablonlardan web sitesinin işlevlerinden ayırır. Ayrıca dosyalar arasında tutarlı bir yapı kullanır, böylece siteler arasında geçiş yapabilir ve düzenlemek istediğiniz dosyaları kolayca bulabilirsiniz.

korkma

Başkalarını eğitirken en sık kullandığım ifadelerden biri, “korkma, bunu benim çözemeyeceğim şekilde bozamazsın”. Dünyada geri alınamayacak çok az şey var. Elbette, düzenlemelerinizin planlandığı gibi gitmemesi durumunda geri almanızı kolaylaştıracak araçlardan yararlanmak isteyeceksiniz. Flywheel'in sağladığı iki harika araç, Aşamalandırma özelliği ve ondan kolayca yedekleme ve geri yükleme yapabilme yetenekleridir. Koda atlamaya karar verdiğinizde, düzenlemeler yapmak için bir hazırlama sitesi kullanın. Bu şekilde canlı sitenizi riske atmazsınız ve gerekirse hazırlama ortamınızı kolayca sıfırlayabilirsiniz. Canlı sitenizde istemeden bir değişiklik yaparsanız, korkmayın, sadece en son yedeklemenizi geri yükleyin ve beş dakikadan kısa bir süre içinde işinize geri dönersiniz. Bu araçlar, bazı kodları düzenlerken bazı küçük adımlar atmaya başlamanız için size güven vermelidir!

Profesyonel ipucu: Kod konusunda biraz daha rahat olduğunuzda, üçüncü bir güvenlik katmanı olarak Git veya SVN sürüm kontrolünü keşfetmenizi ve kodunuz yayınlanmadan önce değişiklikleri izlemenin ve aksaklıkları yakalamanın ön safını keşfetmenizi tavsiye ederim.

Nereden başlamalı?

Şimdi, başlangıçtaki bazı zihinsel engelleri ele aldığımıza göre, nereden başlamalısınız? Tasarımcıysanız, kodla çalışmaya başlamak için en doğal yer CSS olacaktır. Daha önce de belirttiğimiz gibi, bu sitemizin dış görünümüdür; sitenin nasıl göründüğünü ve nasıl düzenlendiğini kontrol eder. CSS'yi incelemeden önce, HTML ile nasıl çalıştığını anlamamız gerekir. HTML, içindeki içeriği ayırt etmek için çeşitli etiketlere sahiptir. Bu etiketlerin, etiket ve içeriği hakkında bazı ek bilgiler sağlayan birçok farklı özelliği olabilir. Bakacağımız iki öznitelik id ve class . İşte üç farklı HTML etiketine sahip bir kod parçacığı. Her etiketin bir kimliği veya sınıfı olmadığını fark edeceksiniz. Gerekli değildirler, ancak aynı sayfadaki etiketleri birbirinden ayırmaya yardımcı olurlar. Kimlikler bir sayfada yalnızca bir kez kullanılmalıdır, sınıflar ise birden çok kez tekrarlanabilir ve kullanılabilir.

<article id="post-1" class="inset">
	<p class="highlight">Hello, <span>world!</span></p>
</article>

Böylece <article> , <p> ve <span> etiketlerine sahibiz. Makale, post-1 kimliğine ve bir iç metin sınıfına sahiptir. p etiketinin bir vurgu sınıfı vardır ve yayılma etiketinin bir kimliği veya sınıfı yoktur.

Yukarıdaki HTML ile birlikte kullanılacak CSS şöyle görünebilir:

/* This is a comment, it doesn't affect the code. We can use it to make notes or write instructions */
article { /* These styles will apply to every <article> tag on the page */

background: #eaeaea;  /* This makes the background gray using a HEX color code */

padding: 20px; /* give the article 20 pixels of space around the inside */

margin: 10px; /* give the article 10 pixels of space around the outside */

}

#post-1 { /* These styles will apply to only the tag with id of post-1 */

border: 1px solid green; /* green solid line around the container */

}

.highlight { /* These styles will apply to anything with a class of highlight */

background: yellow; /* give this text a yellow background */

}

span { /* These styles will apply to every <span> tag on the page */

font-weight: bold; /* bold this text */

text-transform: uppercase; /* make this text ALL CAPS */

}

CSS'yi ve nasıl çalıştığını daha fazla araştırmak için birçok harika kaynak var. Başlamak için bazı harika yerler A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com ve wpbeginner.com'dur. Bu kaynakların her biri biraz farklıdır; bazıları genel bir yaklaşım sunar, temel yaklaşımları öğrenir ve diğerleri kullanım örneklerine odaklanır ve belirli bir görevle ilgili belirli kod parçacıkları veya öğreticiler verir. Herkes farklı şekillerde öğrenir, bu yüzden sizin için doğru olanı bulun.

“Vahşi Doğada” koduna bakın

Daha önce "kaputun altına bakmanın" bir yolundan bahsetmiştik, ancak başka bir yol da tarayıcınızda yerleşik olan geliştirme araçlarını kullanmaktır. Çoğu tarayıcı, bir web sayfasındaki kodda gezinmenize izin verir. Devam edin ve bu metne sağ tıklayın veya ctrl tıklayın ve “İncele” veya “Öğeyi İncele”yi seçin. Size HTML etiketini ve ilgili CSS'yi göstermesi gereken bir pencere açılacaktır. Hatta özellikleri düzenleyebilir ve değiştirildiğinde nasıl göründüklerini görebilirsiniz.

Google Senin Arkadaşın

Şüphe duyduğunuzda, Google! Cidden, kod hakkında yazan o kadar çok insan var ki, birileri yapmaya çalıştığınız şey hakkında yazmış olabilir. Yani Google ve ne bulduğunuzu görün. Hedefinizi gerçekleştirmenin birkaç yolu bile olabilir ve kendi tarzınız ve koşullarınıza göre en iyi yolu bulabilirsiniz.

Uygulamaya koymak

Bu yeni bulunan geliştirici becerilerinden bazılarını kullanmak için sıfırdan bir tema oluşturmanız gerekmez. Küçükten başlamanızı tavsiye ederim. Bazı renkleri değiştirmek veya farklı bir yazı tipi kullanmak gibi mevcut bir temada bazı değişiklikler yapmayı deneyin. Daha önce de belirttiğim gibi, bir temanın kodunu düzenlemenin Düzenleyiciyi kullanmaktan daha iyi yolları vardır. Temalar güncellemeler sunar ve tema dosyalarını doğrudan düzenlediyseniz, bir tema güncellemesi değişikliklerinizi geçersiz kılar. Mevcut bir temaya özel kod eklemenin en kolay yollarından biri eklenti kullanmaktır. Ve CSS için mükemmel eklenti, John Regan ve Danny van Kooten'in Basit Özel CSS'sidir. Bu, tema dosyalarını karıştırmadan kendi CSS'nizin bir kısmını sitenize eklemenizi sağlar ve WordPress sitenizde küçük görsel değişiklikler yapmak için harikadır.

İş akışınızı resmileştirin

Kontrol Paneli aracılığıyla bazı küçük kod parçacıklarıyla daha rahat çalışmaya başladığınızda, geliştirme görevleriniz için daha resmi bir iş akışı isteyeceksiniz. Geliştiricinin iş akışları, çok basitten son derece karmaşığa kadar değişebilir. Bazı daha karmaşık iş akışları için iyi nedenler var, ancak temel bilgilerle başlayacağız. Kontrol Paneli dışında kodu düzenlemek istiyorsanız sahip olmanız gereken iki şey, bir kod düzenleyici ve sunucunuzdan dosya koymanıza ve almanıza izin verecek bir FTP programıdır. Elegant Themes, kod editörlerini karşılaştıran harika bir gönderiye sahiptir. Hangi düzenleyicinin sizin için doğru olduğunu belirlemeye çalışırken mükemmel bir kaynaktır. Bazı kod düzenleyicilerin yerleşik FTP'si vardır, ancak aynı zamanda birçok ücretsiz veya düşük maliyetli seçenek de vardır.

Uzman ipucu: Bir WordPress geliştiricisinin iş akışı için başka bir harika araç, ServerPress'in DesktopServer'ıdır. Bu, yalnızca birkaç tıklamayla bilgisayarınızda yerel olarak bir WordPress sitesi kurmanıza ve oluşturmanıza olanak tanır.

Bir alt tema oluşturmayı deneyin

Artık daha resmi bir düzenleme ortamına sahip olduğunuza göre, bir alt tema oluşturmayı deneyin. Bu, başka bir temaya dayanan özel bir temadır. Çalışması için sitenizde her iki temanın da yüklü olması ve alt temanın etkinleştirilmiş olması gerekir. Bir alt tema için gerekli olan iki şey, style.css ve functions.php dosyalarıdır. Genesis çerçevesi bu işlevi son derece iyi bir şekilde kullanır ve atlamak ve bazı geliştirme becerilerinizi oluşturmaya başlamak için harika bir yerdir. Carrie Dils, Genesis ile alt temaları kullanma konusunda birkaç lynda.com kursu gerçekleştirdi. Tasarımcıdan geliştiriciye yolculuğunuzda harika bir sonraki adım.

cesaretini kırma

Kod öğrenmeye başladığınızda, bir noktada cesaretinizin kırılması doğaldır, ancak olmayın. Herkes oradaydı. Deneyimli geliştiricilerin bile hiçbir şey bilmiyormuş gibi hissettikleri günleri olur. Bu tümsekleri aşmanın en iyi yollarından bazıları, aynı yolculuğunuzda başkalarıyla bağlantıda kalmaktır. Twitter, Slack ve WordPress.org forumlarına katılmak, bağlantıda kalmanın harika yollarıdır. Düzen gibi bazı blogları takip edin ve bu arada ilişkileri geliştirebilir ve öğrenebilirsiniz. Geliştirme yolculuğumda bana yardımcı olan, takip etmeyi en sevdiğim kişilerden bazıları Carrie Dils, Tom McFarlin ve John Regan.

Buradan nereye gitmeliyim?

HTML ve CSS üzerinde iyi bir hakimiyetiniz olduğunu hissettiğinizde, bir sonraki mantıklı adım JavaScript'tir veya bir adım daha ileri gidebilir ve WordPress içeriğinin parçalarını kodunuza nasıl çekeceğinizi öğrenmek için WordPress Kodeksini inceleyebilirsiniz. Mutlu kodlama!