- 1. WordPress Eğitimi: HTML’den WordPress Teması Oluşturma (Bölüm 1)
- 2. Şu Anda Okuma: WordPress Eğitimi: HTML’den WordPress Teması Oluşturma (Bölüm 2)
- 3. WordPress Temasının Anatomisine Giriş
Bu öğreticinin birinci bölümünde, bir HTML şablonunu WordPress temasına dönüştürmenin temellerini ele aldık. En küçük meraklıysanız, HTML şablonlarını PHP dosyalarına bölme, bir araya getirme, WordPress temalarını şekillendirme ve adlandırma hakkında birkaç şey öğrendik. Gerçekten, çok şey öğrendik ve bu ikinci sunumun tadını çıkarmak için ilk öğreticimizde ele aldığımız kavramları tanımak isteyeceksiniz. Bugünkü gönderide, işleri bir adım daha ileri götüreceğiz. Tamamen işlevsel bir WordPress teması oluşturabilmeniz için birkaç alanı daha ele alacağız. Yani, daha fazla uzatmadan, başlıyoruz.
Contents
Görüntüleri ve JavaScript Dosyalarını Yapılandırma
Orijinal HTML şablonunuzda görüntüler varsa (index.html), muhtemelen şablonu PHP dosyalarına böldükten sonra göstermeyi bıraktıklarını fark ettiniz. Endişelenme, PHP’nin tam da böyle olduğu gibi. Örneğin, başlık bölümünüzde böyle bir logo varsa…
… kodla biraz oynamanız gerekecek. Bir anda açıklayacağım kod, tarayıcıların logonuzu (veya başka bir resmi) Görüntüler temanızın ana dizininin bir alt klasörü olan (veya olması gereken) klasö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:
Get_template_directory_uri () işlevi, tema dizininizin URL’sini döndürür. Yani logonuzu bir resim klasörüne eklerseniz, kod bu logoyu alır.
Fark var mı? Açıkçası, bu kod parçası sadece logonuzu düzeltir. Diğer görüntüleri düzeltmek için kodlarını benzer şekilde yeniden yazmanız gerekir. Kolay peasy şeyler.
JavaScript’e geçelim. HTML web siteniz JavaScript kullanıyorsa, adlı bir klasör oluşturun js ve senaryolarınızı oraya yerleştirin. Bunları header.php dosyasında aşağıdaki kodu kullanarak çağırabilirsiniz:
Yukarıdaki kod kullanır example.js örnek olarak. Bu bölümü JavaScript dosyanızın adıyla değiştirmeyi unutmayın.
Tabii başka biri için bir tema oluşturuyorsanız, js dosyalarınızı wp_enqueue_scripts ile yüklemelisiniz. Daha fazla bilgi ve ipucu için AJ’nin WordPress temalarına JavaScript ekleme hakkındaki yayınlarını inceleyin.
Şablon Dosyaları
Bu öğreticinin birinci bölümünde, dört temel şablon dosyasından bahsettik: index.php, header.php, sidebar.php ve footer.php. Şablon dosyaları, web sitenizin web’de nasıl görüntüleneceğini denetler. Şablonlar WordPress’in MySQL veritabanınızdan bilgi alır ve bunları 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, şu şekilde bilinen bir kavramı ele alalım: şablon hiyerarşi.
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 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 category-2.php adlı bir şablon dosyasını arar
- Category-2.php kullanılamıyorsa, WordPress, category.php gibi genel bir kategori şablonu dosyası arar.
- Bu şablon dosyası da kullanılamıyorsa, 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 bu dosyaları WordPress temanızı ihtiyaçlarınıza göre özelleştirmek için 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-page.php||Ön sayfa ekranlarında ayarlanan statik sayfaları veya en son yayınları oluşturmak için kullanılır|
|single.php||Tek bir gönderi sayfası oluşturmak için kullanılır|
|tek {post tipi} php||Özel yayın türlerini oluşturmak için kullanılır; ör. post-type bir ürün olsaydı, WordPress single-product.php kullanırdı|
|page.php||Statik sayfalar oluşturmak için kullanılır|
|category.php veya archive.php||Kategori Arşivi dizinini oluşturmak için kullanılır|
|author.php||Yazarı oluşturmak için kullanılır|
|date.php||Tarihi oluşturmak için kullanılır|
|search.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 şey var WordPress Şablonları. Şablonların konusu büyüktür ve şablon dosyalarıyla nasıl oynandığını öğrenmenin en iyi yolu kapsamlı Tema Geliştirme WordPress kütüphanesinde. Alternatif olarak, daha kısa WordPress Codex’ta Şablonlar Bölümü.
Şablon Etiketleri
Şablon Dosyalarını yeni tanıttığımızı görünce, şablon etiketleri ve WordPress temasında oynadıkları rol hakkında bir veya iki şeyden bahsetmek adil olur. WordPress.org’a göre, “… blogunuzun şablonunda bilgileri dinamik olarak görüntülemek veya blogunuzu başka bir şekilde özelleştirmek için şablon etiketleri kullanılır.
Önceki eğitimimizde, aşağıdaki gibi birkaç şablon etiketiyle tanıştınız get_header, get_sidebar, get_footer ve bloginfo. Aşağıdaki bölümde, yeni oluşturulan WordPress temamıza birkaç şablon etiketi ekleyeceğiz. DOCTYPE bildirimini header.php dosyanıza eklediğinizi varsayıyorum. Eğer yapmadıysanız, kod aşağıdadır:
DOCTYPE bildirimi HTML kodunuza anlam katar. Bu şekilde, açılış HTML etiketini değiştirelim. Kullanarak bir lang özelliği ekleyeceğiz language_attributes etiketi şöyle:
Yukarıdaki kod aşağıdakileri oluşturur:
DOCTYPE bildirimi ve language_attribute etiketi yerleştirildiğinde, temanızın yapısı yasaldır ve tarayıcılar kodunuzu anlar. Bir blog için tema oluşturuyorsanız, pingback URL’nize ve RSS feed’inize bağlantılar yerleştirmeniz önemlidir. Header.php dosyasına aşağıdaki kodu ekleyin:
Nasıl kullandığımızı fark ettiniz mi? bloginfo etiketi RSS beslemesi (‘rss2_url’) ve pingback (ing pingback_url ’) Header.php dosyanızı kaydetmeden önce aşağıdaki kodu da ekleyin:
Yukarıdaki wp_head etiketi, eklentileriniz için gereken stil sayfalarını ve JavaScript dosyalarını çekecektir. Bu küçük kod parçasını dışarıda bırakırsanız, eklentileriniz istendiği gibi çalışmayabilir. Bu şekilde, bloginfo etiketini kullanarak bir kez daha WordPress temamıza sayfa başlıkları ekleyelim. Header.php dosyanıza aşağıdaki kodu ekleyin:
İlk etiket wp_title sayfanızın veya yayınınızın başlığını ekleyecek ve ikinci etiket bloginfo (“ad”) blog adınızı ekleyecektir. 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 dinlenmeye ne dersiniz??
Temanız İçin Ekran Görüntüsü Oluşturma
Test temanızı ilk kez yüklediğinizde, WordPress Tema Panelinde bir ekran görüntüsü 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 görüntü düzenleyicisini (örn. Adobe Photoshop) kullanarak bir görüntü oluşturun veya temanızın bir ekran görüntüsünü alın. Görüntünüzün 600 piksel genişliğinde ve 450 piksel yüksekliğinde olduğundan emin olun. Görüntüyü farklı kaydet screenshot.png tema klasörünüzde. Tüm değişiklikleri kaydedin, tema klasörünüzü bir ZIP arşivine sıkıştırın. Temayı yükleyin ve yeni değişikliklerinizi görmek için etkinleştirin
Sonuç
Bu ikinci eğitimin statik HTML’den bir WordPress teması oluşturma konusunda daha derin bir fikir sunduğuna inanmak istiyorum. Yakın gelecekte, WordPress temasının diğer yönlerini tanıtacağım, ancak bu arada, sadece sizin için aşağıdaki kaynakları hazırladım:
- Şablonları – WordPress Codex
- Şablon Etiketleri – WordPress Kodeksi
- HTML Şablonundan Kendi WordPress Temanızı Oluşturma – SitePoint
- Kendi Özel WordPress Temanızı Oluşturma – Line25
- Statik HTML’den WordPress Teması Oluşturma – WPtuts+
Mutlu yaratım!