WordPress Eğitimi: HTML'den Bir WordPress Teması Nasıl Oluşturulur (Bölüm 2)

Bu öğreticinin birinci bölümünde, bir HTML şablonunu bir WordPress temasına dönüştürmenin temellerini ele aldık. En ufak bir merakınız varsa, HTML şablonlarını PHP dosyalarına bölme, onları tekrar bir araya getirme, WordPress temalarını şekillendirme ve adlandırma hakkında birkaç şey öğrendik. Gerçekten, çok şey öğrendik ve bu ikinci porsiyonun tadını çıkarmak için ilk öğreticimizde ele aldığımız kavramları tanımak isteyeceksiniz. Bugünün gönderisinde, işleri bir çentik daha yükseğe alacağız. Tamamen işlevsel bir WordPress teması oluşturabilmeniz için birkaç alanı daha ele alacağız. Yani, daha fazla uzatmadan, işte başlıyoruz.

Görüntüleri ve JavaScript Dosyalarını Yapılandırma

Orijinal HTML şablonunuzda ( index.html ) resimleriniz varsa, muhtemelen şablonu PHP dosyalarına böldükten sonra gösterilmelerinin durduğunu fark etmişsinizdir. Endişelenmeyin, PHP böyledir. Örneğin, başlık bölümünüzde şöyle bir logonuz olsaydı…

 <img alt="your_logo_alt_text" src="images/logo.jpg" />

…kodla biraz oynamanız gerekecek. Birazdan açıklayacağım kod, tarayıcıların temanızın ana dizininin bir alt klasörü olan (veya olması gereken) resimler klasörünüzde logonuzu (veya başka bir resmi) bulmasına yardımcı olacaktır. Bu nedenle, logonuzu başlık bölümünde görüntülemek için header.php dosyasını açın ve yukarıdaki kodu aşağıdakiyle değiştirin:

 <img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />

get_template_directory_uri() işlevi, tema dizininizin url'sini döndürür. SO, logonuzu bir görseller klasörüne eklerseniz, kod o logoyu alır.

Herhangi bir fark gördünüz mü? Açıkçası, bu kod parçası yalnızca logonuzu düzeltecektir. Diğer görüntüleri düzeltmek için kodlarını benzer şekilde yeniden yazmanız gerekecektir. Kolay peasy şeyler .

JavaScript'e geçelim. HTML web siteniz JavaScript kullanıyorsa, js adlı bir klasör oluşturun ve komut dosyalarınızı buraya yerleştirin. Aşağıdaki kodu kullanarak bunları header.php dosyasında arayabilirsiniz:

 <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

Yukarıdaki kod, örnek olarak example.js'yi kullanır. Bu kısmı JavaScript dosyanızın adıyla değiştirmeyi unutmayın.

Tabii ki başka biri için tema oluşturuyorsanız, js dosyalarınızı wp_enqueue_scripts ile gerçekten yüklemelisiniz. Daha fazla bilgi ve ipucu için AJ'nin WordPress temalarına JavaScript ekleme hakkındaki gönderilerine göz atın.

Şablon Dosyaları

Bu öğreticinin birinci bölümünde, index.php, header.php, sidebar.php ve footer.php olmak üzere dört temel şablon dosyasından bahsettik. Şablon dosyaları, web sitenizin web'de nasıl görüntüleneceğini kontrol eder. Şablonlar, WordPress'in MySQL veritabanından bilgi alır ve aynısını web tarayıcılarında görüntülenen HTML koduna çevirir. Başka bir deyişle, şablon dosyaları WordPress temalarının yapı taşlarıdır. Şablonları daha iyi anlamak için şablon hiyerarşisi olarak bilinen bir kavramı inceleyelim.

Bir benzetme kullanacağız. Bir ziyaretçi http://www.yoursite.com/blog/category/your-category/ gibi bir kategori bağlantısını (yani bir kategoriye bağlantı) tıklarsa, WordPress aşağıdaki gibi doğru dosyayı (ve içeriği) oluşturmak için şablon hiyerarşisini kullanır. aşağıda açıklanmıştır:

• İlk olarak, WordPress kategori kimliğiyle eşleşen bir şablon dosyası arayacaktır.
• Kategorinin kimliği, örneğin 2 ise, WordPress, kategori-2.php adlı bir şablon dosyası arayacaktır.
• Kategori-2.php kullanılamıyorsa, WordPress, kategori.php gibi genel bir kategori şablon dosyasına gidecektir.
• Bu şablon dosyası da mevcut değilse, WordPress,archive.php gibi genel bir arşiv şablonu arayacaktır.
• Genel arşiv şablonu yoksa, WordPress ana şablon dosyası olan index.php'ye geri döner.

WordPress şablonları bu şekilde çalışır ve WordPress temanızı ihtiyaçlarınıza göre özelleştirmek için bu dosyaları kullanabilirsiniz. Diğer şablon dosyaları şunları içerir:

home.php veya index.php	Blog gönderileri dizinini oluşturmak için kullanılır
ön sayfa.php	Statik sayfaları veya en son gönderileri ön sayfa ekranlarında ayarlandığı şekilde işlemek için kullanılır
tek.php	Tek bir gönderi sayfası oluşturmak için kullanılır
tek-{post-type}.php	Özel gönderi türlerini oluşturmak için kullanılır, örneğin post-type bir ürün olsaydı, WordPress single-product.php kullanırdı
sayfa.php	Statik sayfalar oluşturmak için kullanılır
kategori.php veya arşiv.php	Kategori Arşivi dizini oluşturmak için kullanılır
yazar.php	Yazarı oluşturmak için kullanılır
tarih.php	Tarih oluşturmak için kullanılır
arama.php	Arama sonuçlarını oluşturmak için kullanılır
404.php	Sunucu 404 hata sayfasını oluşturmak için kullanılır

Bu sadece kısa bir liste, başka birçok WordPress şablonu var. Şablonlar konusu büyük bir konudur ve şablon dosyalarıyla nasıl oynanacağını öğrenmenin en iyi yolu WordPress'teki kapsamlı Tema Geliştirme kitaplığını okumaktır. Alternatif olarak, WordPress Codex'teki daha kısa Şablonlar Bölümünü okuyabilirsiniz.

Şablon Etiketleri

Şablon Dosyalarını yeni tanıttığımıza göre, şablon etiketleri ve WordPress temasında oynadıkları rol hakkında bir veya iki şeyden bahsetmek doğru olur. WordPress.org'a göre, “…şablon etiketleri, bilgileri dinamik olarak görüntülemek veya blogunuzu başka bir şekilde özelleştirmek için blogunuzun şablonunda kullanılır ve onu sizin kadar bireysel ve ilginç hale getirmek için araçlar sağlar.”

Önceki öğreticimizde get_header, get_sidebar, get_footer ve bloginfo gibi birkaç şablon etiketiyle tanıştınız . Aşağıdaki bölümde, yeni oluşturduğumuz WordPress temamıza birkaç şablon etiketi ekleyeceğiz. Başlık.php dosyanıza DOCTYPE bildirimini zaten eklediğinizi varsayıyorum. Eğer yapmadıysanız, işte kod:

 <!DOCTYPE HTML>

DOCTYPE bildirimi, HTML kodunuza anlam verir. Bu arada, açılış HTML etiketini değiştirelim. Language_attributes etiketini aşağıdaki gibi kullanarak bir lang özniteliği ekleyeceğiz:

 <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

Yukarıdaki kod aşağıdakileri üretecektir:

 <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

DOCTYPE bildirimi ve dil_attribute etiketi yerindeyken, temanızın yapısı yasaldır ve tarayıcılar kodunuzu anlayacaktır. Bir blog için bir tema oluşturuyorsanız, kafanıza pingback URL'nize ve RSS beslemenize bağlantılar yerleştirmek önemlidir. header.php dosyanıza aşağıdaki kodu ekleyin:

 <link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />

RSS beslemesini ('rss2_url') ve pingback'i ('pingback_url') dahil etmek için bloginfo etiketini nasıl kullandığımızı fark ettiniz mi? Header.php dosyanızı kaydetmeden önce aşağıdaki kodu da ekleyin:

 <?php wp_head(); ?>

Yukarıdaki wp_head etiketi, eklentilerinizin gerektirdiği stil sayfalarını ve JavaScript dosyalarını çeker. Bu küçük kod parçasını dışarıda bırakırsanız, eklentileriniz istediğiniz gibi çalışmayabilir. Bunun dışında, bir kez daha bloginfo etiketini kullanarak WordPress temamıza sayfa başlıkları ekleyelim. header.php dosyanıza aşağıdaki kodu ekleyin:

 <title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>

İlk etiket wp_title , sayfanızın veya gönderinizin başlığını ekler ve ikinci etiket bloginfo('name' ) blogunuzun adını ekler. Artık WordPress temanızın sayfa başlıkları olduğuna göre, temamız için bir ekran görüntüsü oluşturmaya, temayı yeniden paketlemeye ve biraz dinlenmeye ne dersiniz?

Temanız İçin Ekran Görüntüsü Oluşturma

Test temanızı ilk kez yüklediğinizde, WordPress Tema Panelinde ekran görüntüsünün olmadığını fark etmiş olmalısınız. Özellikle renkli ekran görüntülerine sahip başka temalarınız varsa, sıkıcı görünüyordu. Ancak endişelenmeyin, temanız için bir ekran görüntüsü oluşturmak çok kolaydır. En sevdiğiniz resim düzenleyiciyi (örneğin Adobe Photoshop) kullanarak bir resim oluşturun veya temanızın ekran görüntüsünü alın. Resminizin 600 piksel genişliğinde ve 450 piksel yüksekliğinde olduğundan emin olun. Resmi, tema klasörünüze screen.png olarak kaydedin. Tüm değişiklikleri kaydedin, tema klasörünüzü bir ZIP arşivine sıkıştırın. Yeni değişikliklerinizi görmek için temayı yükleyin ve etkinleştirin

Çözüm

Bu ikinci öğreticinin size statik HTML'den bir WordPress teması oluşturma konusunda daha derin bilgiler sunduğuna inanmak istiyorum. Yakın gelecekte sizi WordPress temasının diğer yönleriyle tanıştıracağım, ancak bu arada aşağıdaki kaynakları sizin için hazırladım:

• Şablonlar – WordPress Kodeksi
• Şablon Etiketleri – WordPress Codex
• Bir HTML Şablonundan Kendi WordPress Temanızı Yaratın – SitePoint
• Statik HTML'den WordPress Teması Oluşturma – WPtuts+

Mutlu yaratma!