WordPress Tasarımı Hazırlamanın Başlangıcı ve Yolu

Neden WordPress Tasarımı?

WordPress php desteklemesi ve birçok işi basit bir şekilde sizlere sunduğu için kullanması kolay olması bir yana sizlere zengin içerik sunuyor. Bu kadar zengin içerik sunan bir yazılımı kullanmayı elbette bir çok kişimin tercihlerinde ilk sıraya yükseltmektedir.

WordPress Tasarımı Hazırlamadan Önce İlk Ne Yapılmalı?

Öncelikle ne sitesi oluşturacağımızı bilmemiz gerekmektedir. Bir kağıt ve bir kalem alın elinize. Şu soruların yanıtlarını not tutunuz.

1. Ne için kullanılacak? / Türü ne olacak? (Örneğin; Blog, mağaza,sosyal medya yada haber )
2. Tasarım için istediğiniz fikriniz nedir?(Tasarım bilmiyorsanız hazır tasarım seçimi yapabilirsiniz. Biliyorsanız Örneğin; 3 bloklu sağ ve solda sidebar merkezde content gibi basit bir çizim gerçekleştirin.)
3. Nasıl bir menü seçerdiniz? (Yatay menü yada Dikey menü)
4. Sitenizin tema renkleri ne olmasını isterdiniz? (Örneğin; Koyu Kırmızı, Beyaz ve Siyah. soldan sağa doğru öncelikli renk olarak seçerek sıralayınız.)
5. Site tasarımı için içeriğiniz hazır mı?

Bu soruların yanıtlarını düşündükten sonra yanıtları not alın.

WordPress Tasarımı İçin HTML ve CSS Hazırlığı

Evet. Cevapları hazırladık ve bir sonraki adıma geçtiğinize sevindim. Şimdi not aldığımız temayı herhangi bir editör ile bir klasörde şekillendirmelisiniz.

Tavsiye Editörler: Rapid Html/CSS, Sublime text, Microsoft Virsual Code, Notepad++

WordPress Destek Kodlarını Öğrenmek/Bulmak/Kullanmak/Hazırlamak

WordPress tasarımı için alınan notlarla ve zorlu tasarım seçimlerini atlatıp iyi bir şekilde buradaysanız. İyi iş çıkardınız demektir. Lakin işlerimiz buradan sonra WordPress destek kodlarını öğrenmeye geliyor.

WordPress destek kodlarını hepsini olmasa da işinize yarayacak olan çoğunu yazılımcı bir arkadaş web sitesinde paylaşmıştır.

Buradan ulaşabilirsiniz yada araştırıp tercihlerinizle de öğrenebilirsiniz.

WordPress İçin HTML ve CSS'i PHP Yapmak

Html ve Css işini hallettikten sonra WordPress destek kodlarını da öğrendiniz. Destek kodlarını öğrenirken hafiften PHP kodlarına göz gezdirmiş oldunuz.

Şimdi yapmamız gereken index.html tasarımını index.php yapmak.

İndex.html nasıl index.php yapabilirim?

Yine internete web tasarım yazarlarının yazdığı yazılara bakabilirsiniz.

Yinede kısaca sizlere anlatacağım. index.html'de alt alta bulunan head, body ve footerı ortadan ikiye bölmemiz gerekecektir.

İndex.php İçin İndex.html Nasıl Bölmeliyiz? Nereden bölmeliyiz?

Kişiden kişiye göre değişse de birçok kişi buna bende dahilim. İçeriği ekleyeceğimiz div arasından bölüyor. Bu div genelde body etiketi arasında olur. Orada olması da gereklidir.

İndex.html Bölümünden Sonraki İşlem

Seçtiğiniz editör aracılığıyla yeni bir Header.php formatlı dosya oluşturuyoruz. Bu oluşturduğumuz dosyanın içine index.html den böldüğümüz içerisinde body açılışı etiketi olan tarafı ekleyip kaydediyoruz.

Alt tarafta kalan body etiketinin kapatılışının bulunduğu kodları ise yine editör aracılığıyla bir dosya oluşturun. Bunun adını Footer.php olacak.

WordPress Destek Kodlarını İndex.php'ye Eklemek / Uygulamak / Kullanmak

Php tasarımı kodları dışında işimizi kolaylaştıracak ve başında söylediğim gibi zenginleştirecek WordPress destek kodlarını eklemeniz gerekmektedir. Bunun için funtions.php dosyası oluşturunuz

WordPress Teması Oluşturmak

Oluşturduğunuz index.php tasarımını WordPress klasöründe bulunan WordPress/htdoc/wp-content/themes/(tasarım klasörünüz burada)/index.php olacak şekilde atınız.

WordPress tasarımınız hayırlı olsun.

Ramazan Barut (@RBarut33)