AnaSayfa / WordPress / WordPress Teması Nasıl Yapılır [ 2016 ]

WordPress Teması Nasıl Yapılır [ 2016 ]

WordPress teması nasıl yapılır konusunda uzun zamandan beri araştırmalar yapıyorum, bizler öğrenmeye çalıştıkça wordpress’te kendisini sürekli geliştirdiği için her zaman bir adım geride kalıyoruz, Araştırmalarım sonucunda derlediğim ve sizler içinde yararlı olabileceğini düşündüğüm içerikleri tek bir ortamda paylaşma kararı aldım çünki bir çok sitede bu konu ile ilgili paylaşımlar var bazıları normal bazıları ise videolu olarak anlatılmış ben ise bu bölümde sizlere wordpress teması nasıl yapılır konusunu hem yazılı hemde videolu anlatan arkadaşlardan derleyerek daha iyi kavramanız için her ikisinide tek bir makalede paylaştım umarım işinize yarar.

Tasarımını çizmiş olduğunuz ve HTML/CSS’ye dökmüş olduğunuz bir dosyayı wordpress’e aktarmak o kadarda anlatıldığı kadar zor değil, bu hususta bir çok sitede anlatımları bulabilirsiniz.Eliniz’de hazır olan veya tasarladığınız bu dosyaları WordPress’e aktarmak için aşağıdaki yolları takip edebilirsiniz.

WordPress Teması Nasıl Yapılır;

1-Header.php Dosyasını oluşturma;

Bu dosya sitemizin üst kısmını oluşturmaktadır, title, meta keywords, meta description, logo ve bannerler’in yer alacağı bölümdür, bu bölüm sitenizin her kısmında yer alacaktır bu nedenle tasarımlarda dikkat edilmesi gereken en önemli yerlerden birisidir.Header.php dosyasının standart kodları aşağıdaki gibidir.

Yani index.html dosyanızın en başından sitenizin üst kısmının bittiği yere kadar. index.html dosyanızdan bu kısımları alıp header.php dosyası olarak kaydediyoruz. Şimdi sıra bu dosyayı PHP kodları aracılığıyla WordPress’e entegre etmeye geldi.

İlk olarak title etiketinden başlıyoruz. Sitenizin başlığı sayfaya ve WordPress kurulumunda siz ne yazdıysanız ona göre değişeceğinden ötürü title etiketleri arasına şu kodu ekliyoruz:

Bu kod otomatik olarka WordPress sitenizin başlığını çekiyor ve eğer herhangi bir yazıdaysanız da Site Başlığı – Yazı Başlğı şeklinde gösterilmesini sağlıyor. Tabii siz dilerseniz çeşitli SEO eklentileri (All in SEO Pack ya da Yoast) aracılığıyla bu görünümü daha sonra değiştirebilirsiniz. Ancak şimdilik böyle kalması iyi olacaktır.

title etiketinden sonra sıra CSS dosyasının yolunu düzeltmeye geliyor. Eğer CSS dosyanızın adını style.css yaptıysanız WordPress’te bunun için oldukça kullanışlı bir kod yer alıyor. Aşağıdaki kod değişikliğini yaparsanız ve header.php dosyasının bulunduğu dizine style.css dosyasını koyarsanız WordPress otomatik olarak style.css dosyanızı yükleyecektir.

Stil dosyasını da tanımladıktan sonra sıra JavaScript dosyalarının yolunu tanımlamaya geliyor. Eğer başka bir siteden (yukarıda kaba haliyle Google’dan) JavaScript dosyası çağırdıysanız bunda herhangi bir değişiklik yapmanıza gerek yok. Ancak kendiniz js adında bir klasör oluşturup buraya da kendi yazdığınız ya da başka kaynaklardan edindiğiniz JavaScript dosyasını çağırdıysanız bunun için şu değişikliği yapmanız gerekiyor.

Burada yer alan get_bloginfo(‘template_directory’) fonksiyonu temanızın bulunduğu klasöre erişiyor. Yani site-adi.com/wp-content/themes/tema-adi/ yolunu çağırıyor. Eğer bu dizin altında yer alan başka dosyalarınızı da çağırmak istiyorsanız bu PHP kodunu kullanabilirsiniz.

Bu işlemi de tamamladıktan sonra head etiketi arasında son bir işlem daha yapacağız. Bu işlem WordPress’e head etiketinin nerede olduğunu gösterecek. Aşağıdaki kodu head etiketleri arasına eklediğinizde WordPress olur da bir CSS dosyası ya da JavaScript dosyası çağırması gerekirse sizin bu kodu eklediğiniz yerde gerekli kodları otomatik olarak ekleyerek bu dosyaları çağıracaktır. Örneğin bir eklenti yüklediniz ve o eklenti bazı dosyaları çağırması gerekiyor. Siz head etiketinin nerede olduğunu bu kod aracılığıyla gösterdiğiniz için eklenti otomatik olarak çağırması gereken dosyaları bu kodun olduğu yerde çağıracaktır. head etiketleri arasına ekleyeceğiniz kod:

Şimdi head etiketini kapatıyor ve body etiketinin içerisine geçiş yapıyoruz. Burada yapacağımız değişiklik ise menü kısmında olacak. Bu değişilik ile WordPress’te oluşturduğunuz sayfalar otomatik olarak sizin oluşturduğunuz menü alanında gözükecek. (Bu arada sizin de menüdeki sayfaları unorder list yani ul etiketi aracılığıyla eklediğinizi varsayıyorum) Öncelikle Anasayfa’dan başlıyoruz. Çünkü anasayfa birazdan kullanacağımız sayfaları çekecek olan PHP kodunda yer almıyor. O kod sadece sayfaları çekiyor bu nedenle Anasayfa’yı farklı bir kodla ekleyeceğiz:

Burada a etiketinin href kısmına eklediğimiz PHP kodu sizin anasayfanıza işaret ediyor. Eğer anasayfanızın linkini başka yerde çağırmak isterseniz (arama formunun action kısmı gibi) yine bu PHP kodunu kullanabilirsiniz.

Şimdi sıra sayfalara geldi, bunun için yapmanız gereken şey bu anasayfa kodunun hemen altına ve ul etiketi arasına aşağıdaki kodu eklemek:

Bu kodu biraz açıklayacak olursam; wp_list_pages fonksiyonun aldığı verilerden ilki title_li. Bu veri sayesinde sayfalar li etiketleri arasında çağrılıyor. Bu yüzden kodu ul etiketleri arasına ekledik. orderby kısmı ise çağrılan sayfaların ne şekilde sıralanacağını söylüyor. Eğer siz de buradaki gibi ID yaparsanız sayfaların ID değerlerine göre sayfalar küçükten büyüğe şeklinde sıralanacaktır. Bu değeri değiştirerek dilerseniz sayfaları alfabetik olarak ya da yaratılış tarihine göre sıralayabilirsiniz. exlude değeri ise hangi sayfaların gösterilmeyeceğini belirtiyor. Eğer bir sayfa oluşturduysanız ve o sayfanın menüde gözükmesini istemiyorsanız bu değerin karşısına o sayfanın ID’sini yazarsanız o sayfa menüde gözükmez. (Bu örnekte 10 ve 11 ID’sine sahip sayfalar gösterilmiyor.) Diğer verilere şu adresten ulaşabilirsiniz.

Bu arada ben menüde oluşturduğunuz sayfaları göstereceğinizi varsayarak bu kodu kullandım. Eğer siz menüde kategorileri göstermek istiyorsanız kodda wp_list_pages yazan kısmı wp_list_categories şeklinde değiştirseniz kategorileriniz gösterilecektir. (Bu arada kategoriler hemen gözükmez kodu ekledikten sonra kategorilerim neden gözükmüyor diye düşünmeyin. Kategorilerin gözükmesi için o kategoride bir yazı olması gerekiyor. Test etmek amaçı bir yazı oluşturup tüm kategorileri seçebilirsiniz.)

Bu adımı da yaptıktan sonra header.php‘deki işimiz tamamlanıyor. Tabii sizin başka verileriniz varsa onları da WordPress’e entegre etmeniz gerekiyor. Çünkü ben burada temayı en basit haliyle ele alıyorum. Entegre işleminden sonra header.php şu şekilde görünüyor;

Buradaki önemli kısım body etiketini kapatmıyor olmamız. body ve html etiketlerini en sonda yani footer.php dosyasında kapatacağız.

2-sidebar.php oluşturma;

Şimdi sırada sidebar.php dosyası var. Eğer siteniz iki sütündan oluşuyorsa sidebar.php dosyasına ihtiyacınız var. Sadece tek bir sütundan oluşuyorsa (bu site gibi) sidebar.php dosyasını oluşturmasanız da olur. Sidebar dediğimiz şey yan menü olduğundan ve WordPress de bize bu yan menüyü çok kolay bir şekilde düzenleyebilmemiz için bileşen özelliğini sunduğundan yan menüde bulunan her şeyi çeşitli eklentiler ve bileşenler özelliğiyle ekleyebiliriz. Bunun için sidebar.php dosyasına sadece bileşen özelliğini eklesek aslında yeter. Ancak ben biraz daha farklı olması açısından sidebar.php‘ye “Teknoloji kategorisinden son yazılar” şeklinde bir alan da eklemek istiyorum. Bu dosyanın WordPress’e uyarlanmamış hali şu şekilde oluyor:

İstediğimiz kategoriden son yazıları çekmek için yapmamız gereken tek şey ul etiketi arasındaki her şeyi silip aşağıdaki kodu eklemek.

Bu kodda dikkat çekmek istediğim kısım query fonksiyonun aldığı veriler. Bunlardan ilki olan showposts o kategoriden kaç tane yazının çekileceğini belirtiyor. cat kısmı ise hangi kategoriden yazıların çekileceğini belirtiyor. Bu örnekte Teknoloji kategorisinden yazıları çektiğimiz için Teknoloji kategorisinin ID‘sini yazıyoruz.

Sidebar’da yer alacak diğer kısımları bileşenler aracılığıyla ekleyeceğimiz için sidebar.php‘yi bileşenleri destekleyecek hale getiriyoruz. Bunun için de aşağıdaki kodu ekliyoruz:

Bu kodu ekledikten sonra işimiz bitmiyor. Sidebar.php‘yi bileşenleri destekleyecek hale gelmesi için bir de functions.php isimli bir dosya oluşturuyor ve aşağıdaki kodu ekliyoruz:

Bu koddaki oge class’ı aracılığıyla eklenecek her bileşen için varsayılan bir şablon oluşturabilir, ogebaslik aracılığıyla da o bileşenin başlık stillerini dilediğiniz gibi CSS dosyasınızdan belirleyebiliriz. (isterseniz bu isimleri değiştirebilirsiniz) Bu kodu ekledikten sonra functions.php dosyasını kaydediyoruz ve header.php, sidebar.php dosyalarının bulunduğu dizine atıyoruz. Yaptığımız değişiklikler sonucunda sidebar.php dosyası şu şekilde görünüyor:

3- index.php oluşturma;

Sırada index.php var. Bu kısım sitemizin ana kısmını oluşturuyor. Burada blogumuza eklediğimiz yazılar yer alıyor. index dosyasını en basit haliyle şu şekilde gösterebiliriz:

WordPress tüm yazıları döngü halinde kendisi çağırdığı için bizim sadece bir yazı şablonunu WordPress’e uygun hale getirip diğer yazıları da bu şablon aracılığıyla çağırmamız gerekiyor. Bunun için öncelikle uygun hale getireceğimiz yazi şablonunun üstüne döngünün burada başladığını belirmek için şu kodları ekliyoruz:

Şimdi ise sırayla yazi şablonun içerisindeki bilgileri WordPress’e uygun hale getireceğiz. İlk olarak h1 etiketini içerisindekilerle birlikte silip aşağıdaki kodu ekliyoruz:

Bu kod hem yazının başlığını hem de linkini çekiyor. Bu sayede başlığa tıklayan ziyaretçiler yazının detayına inebiliyor. Bu işlemden sonra yazar kısmında yazar adını, tarih kısmında tarih kısmını, etiketler kısmında etiketleri, kategori kısmında kategoriyi silip aşağıdaki kodları ekliyoruz:

Bu işlemi de yaptıktan sonra yazi-icerik içerisinde yer alan yazıları silip aşağıdaki kodu ekliyoruz. Buradaki “devamını oku…” kısmı siz yazıyı yazarken tamamının anasayfada görünmesini istemediğiniz zaman kullandığınız more etiketi kullanıldığında yazının bölünen kısmında çıkacak yazıyı temsil ediyor. Burayı “tamamını oku…” ve benzeri şekilde dilediğiniz gibi değiştirebilirsiniz.

Bu kodu da ekledikten sonra yazi div’ini kapadığımız yere aşağıdaki kodu ekliyoruz. Böylece WordPress döngünün nerede bittiğini anlıyor.

Bu işlemden sonra anasayfanın alt kısmına sayfalar arasında geçiş yapmak için navigasyon kısmını ekleyeceğiz. Bu sayede örneğin anasayfanızda 5 yazı varsa bu navigasyon aracılığıyla kullanıcılar 2. sayfaya geçip diğer yazılarınıza ulaşabilecek. Bu navigasyon için eklememiz gereken kod:

Tüm bu işlemleri yaptıktan sonra yapmamız gereken bir diğer şey ise header.php, sidebar.php ve footer.php dosyalarını index.php dosyası içerisinde çağırmak. Çünkü anasayfada sitenin üst kısmı, yan menü ve alt kısım yer alıyor. (footer.php dosyasını henüz oluşturmadık ama şu aşamada önemli değil) Bu çağırma işlemleri için header.php‘yi çağıracak kodu en üste, sidebar.php‘yi çağıracak kodu onun altına (tasarımınızda neredeye uygun düşüyorsa oraya) ve son olarak footer.php‘yi çağıracak olan kodu en alta ekliyoruz. Kodlar:

Tüm bu işlemleri yaptıktan sonra index.php dosyamız şu şekilde görünüyor:

Şuana kadar sitemizin header.php, sidebar.php, functions.php ve index.php dosyalarını oluşturduk. Sırada single.php, page.php, search.php, 404.php ve footer.php dosyaları var. Aslında footer.php hariç diğer kalan dosyaların içerikleri neredeyse birbirine benzer olacaklarından bu sayfaları oluşturmak daha kolay olacaktır. (Tabii siz page ve search için özel tasarım yaptıysanız farklı olacaktır. Ancak genel olarak düşündüğümüzde bu sayfalardaki içerikler benzerdir)

4- single.php oluşturma;

single.php dosyasından başlayalım. Öncelikle şunu söyleyeyim ki son zamanlarda Disqus eklentisinin kullanımı arttığından ve Disqus aracılığıyla yorum yazmak kolaylaştığından yorum alanını es geçeceğim. Çünkü Disqus aracılığıyla gerçekten kullanışlı bir yorum sistemini sitenize kolaylıkla entegre edebilirsiniz. Bu yüzden single.php sayfası index.php‘ye oldukça benzeyecek. (Tabii siz index.php‘ye farklı şeyler eklemişseniz çok fazla benzerlik olmayacaktır. Ancak benim yukarıda anlattığım şekilde bir index.php dosyanız varsa neredeyse birebir aynısı olacaktır. detay.html dosyasınızda yer alan ve index.html‘de yer almayan elementleri bu kısma ekleyeceksiniz)

single.php dosyasımızı oluşturuyorken index.php dosyasındakileri aynen kopyalıyoruz. Daha sonra the_content fonksiyonu içerisinde yer alan ‘devamını oku…’ kısmını siliyoruz. Çünkü single.php sayfası zaten yazının tamamının gösterileceği sayfa olduğundan devamını oku gibi bir şeye ihtiyacımız kalmıyor. Daha sonra eklediğimiz navigasyon kodunu da siliyoruz. Disqus eklentisini kullanacağımız için eklentiye yorum alanını belirtmek için son olarak aşağıdaki kodu ekliyoruz:

Tüm bu işlemlerin sonunda single.php dosyamız şu şekilde görünüyor:

5- page.php oluşturma;

page.php kısmen single.php‘ye benziyor. Sadece single.php’de bulunan bir takım şeyler burada bulunmuyor. Örneğin tarih, kategori, etiketler, yazar bilgisi genel olarak sayfa şablonlarında yer almıyor. Bununla birlikte yorum kısmı da sayfalarda yer almayan bir diğer elemanlardan. Tüm bu bilgileri silip page.php dosyamızı oluşturduğumuzda karşımıza şu şekilde bir kod yığını çıkıyor:

6- search.php Oluşturma;

search.php ise daha çok index.php‘ye benziyor. Farkı ise aranılan kelimeyi ve arama sonucunda bir şey bulunamadıysa bunu bildiren mesajı içermesi. Bunun için öncelikle aşağıdaki kodu if( have_posts() ) fonksiyonun bulunduğu PHP kodunun hemen altına ekliyoruz:

Daha sonra döngüyü bitiren endwhile ile başlayan kodun içerisinde yer alan endif; kısmını siliyoruz. Bunu yapma nedenimiz eğer aradığımız kelime bulunamadıysa başka bir şey göstermek için else ifadesi tanımlayarak else ifadesinde mesajımızı göstermek. Bunun için de endwhile içeren PHP kodunun altına aşağıdaki kodu ekliyoruz:

Bu kodu ekledikten sonra search.php dosyamızın son hali şu şekilde oluyor:

7- footer.php Oluşturma;

Sizin tasarımınızda footer kısmı var mı bilmiyorum ama yeni yapılan tarımlarda infite-scroll olayı olduğundan dolayı footer kısmı bulunmuyor. (tasarımsal anlamda element içermiyor) Ben de yaptığım tasarımlarda genelde footer kısmını tasarlamıyorum. Zaten WordPress’e entegre etme işleminde footer’a özgü pek bir şey bulunmuyor. Yapmamız gereken tek şey aslında WordPress’e tıpkı header.php dosyasında yaptığımız gibi footer’ın nerede olduğunu belirtmek. Bunun için footer.php dosyamızın en üstüne aşağıdaki kodu ekliyoruz:

Daha sonra header.php‘de açmış olduğumuz body ve html etiketlerini kapatıyoruz. footer.php‘nin son hali şu şekilde oluyor:

8- 404.php oluşturma;

404.php dosyası hata sayfasıdır. Eğer sitenizde olmayan bir linke ziyaretçi girerse, örneğin http://sohbetgen.com/deneme gibi, ziyaretçi bu sayfayla karşılaşır. Onu da aşağıdaki kodla en basit haliyle oluşturabiliriz:

404.php’yi de tamamladığımıza göre artık bir adet WordPress temasına sahibiz demektir. Bu arada yukarıdaki dosyaların bulunduğu tema klasörünün içerisine screenshoot.png isimli temanın görüntüsünü içeren bir dosya atarsanız WordPress panelinin Görünüm kısmında temanızın görselini de görebilirsiniz. Ayrıca style.css dosyanızın en üstüne aşağıdaki bilgileri girerseniz yine WordPress panelinin Görünüm kısmında temanızın detaylarının yer aldığı kısımda bu bilgilerin görünmesini sağlayabilsiniz:

Eminim bazıları archieve.php dosyasını neden oluşturmadığımı merak edecektir. Şöyle ki; archive.php dosyasında sitede yer alan tüm yazılar yer alıyor. Onu oluşturmak yerine Clean My Archives isimli eklentinin kullanılmasını tavsiye ediyorum. Eklentiyi yükleyip WordPress panelinden sayfa oluştur dedikten sonra oluşturduğunuz sayfaya aşağıdaki kodu eklerseniz arşiv sayfanız hazır olur:

Yazının başında da söylediğim gibi ben burada anlattığım tüm bilgilere farklı farklı yabancı kaynaklardan ulaştım. Bu yazıyı yazma nedenim ise benim gibi WordPress teması yapmak isteyen kişilere olabildiğince basit haliyle bunu anlatmak. Çünkü internetteki yazılar çok karışık ve göz korkutucu. Nereden başlamanız gerektiğinizi anlayamıyorsunuz. (En azından ben anlayamadım) Ben WordPress ya da PHP uzmanı değilim. Yukarıdaki yöntemler aracılığıyla sorunsuz bir şekilde çalışan ve ihtiyaçlarımı karşılayan 2 WordPress teması (bir tanesi applefanatigi.com‘da kullandığım tema) yaptım. Üzerlerinde çalışmaya devam da ediyorum. Umarım yukarıdaki anlatım sizin de kolay bir şekilde HTML/CSS’e dökülmüş olan tasarımınızı WordPress teması haline getirmenizde yardımcı olur.

Hakkında SohbetGen

1979 Malatya Doğumlu, Web tasarım, Arama motoru optimizasyonu ( SEO ), Logo ve Grafik tasarım alanlarında uzman, 2010 yılı itibariyle Antalya/Kemer ilçesinde ikamet etmekte.

Bunada Göz Atmak İstermisiniz !

WordPress 4.6 Güncelleme Hatası

WordPress 4.6 Güncelleme Hatası [ Çözüm ]

WordPress 4.6 güncellemesi geldi ve bu güncelleme ile birde hata geldi, WordPress sitelerini 4.6’ya yükseltenler …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir