Bir WordPress temasının anatomisi

Bu, 16 Haziran'da piyasaya sürülen WordPress geliştirmeye yönelik bir multimedya kılavuzu olan “Up and Running: A Practical Guide to WordPress Development”dan bir bölümdür. Tam paket, tam uzunlukta bir e-kitap, 50'den fazla tema ve eklenti geliştirme eğitim videoları içerir, ve dünyanın en iyi 13 WordPress geliştiricisiyle kod adımlı röportajlar. Şimdi upandrunningwp.com'da %20 indirim için ön sipariş verin!

Anahtar çıkarımlar:

• Bir WordPress teması, bir dizi tutarlı parçadan oluşur. Alt tema olmayan bir temanın önemli kısımları arasında style.css , functions.php ve çeşitli PHP şablon dosyası türleri ( header.php , footer.php ve index.php gibi) bulunur.
• Temanın ana CSS stili kaynağı olan style.css , temanın görsel görünümünü belirler. style.css üst kısmındaki bir yorum bölümü de tema adı, yazar vb.'nin kaydedildiği yerdir.
• functions.php , temanıza sunum işlevselliği eklediğiniz yerdir. functions.php aracılığıyla CSS stil sayfaları, JavaScript dosyaları, gezinme menüleri, widget alanları ve diğer işlevleri ekleyeceksiniz.
• Şablon dosyaları gayri resmi olarak şu şekilde ayrılabilir: “her zaman kullanılan” şablon dosyaları ( header.php ve footer.php ve varsa sidebar.php ); WordPress şablon hiyerarşisindeki dosyalar ( index.php , single.php ve page.php gibi); ve "şablon parçaları" (tekrarlamayı azaltmak için diğer şablon dosyalarından alınan tamamlanmamış snippet'ler).
• Temalar keyfi olarak büyük ve karmaşık olabilir; ama bunlar en önemli ve tahmin edilebileceği gibi oradaki parçalar.

Bu kısa bölüm büyük bir diyagram etrafında dönüyor. Neden beklemek? İşte burada:

Panik yapma! Bunu çok yakında anlayacaksın. Bu bölümün geri kalanında, diyagramın her bir bölümünü daha derinlemesine açıklayacağız.

Bir isimde ne var?

WordPress, tema dosyalarının adlarına göre nasıl ele alınacağına karar verir.

Dikkat edilmesi gereken ilk şey, diyagramdaki her dosyanın özel bir adı olmasıdır. functions.php , style.css , index.php —bu dosyaların hiçbiri tesadüfen adlandırılmamıştır ve adlarının hiçbiri rastgele değildir.

WordPress, tema dosyalarının adlarına göre nasıl ele alınacağına karar verir. functionz.php için yazılmış özel bir işleme sahiptir, ancak functions.php için hiç yoktur. Bu nedenle, functions.php olarak bir dizi talimat yüklerseniz, WordPress bunları yorumlar; ancak functionz.php ile aynı talimatları yüklerseniz, WordPress varsayılan olarak bu dosyayı ve talimatlarını tamamen yok sayar.

stil.css

style.css , temanın görsel görünümünün ana kaynağıdır.

style.css , temanın ana CSS stili kaynağıdır. Bu nedenle, yazı tipi ve renk seçiminden temanın duyarlı bir ızgara üzerinde çalışıp çalışmamasına kadar her şey temanın görsel görünümünün ana kaynağıdır.

Örneğin, temanızın style.css aşağıdaki CSS'yi girerseniz:

p {
color: blue;
}

…bu durumda, temanızı çalıştırırken sitenizin herhangi bir yerinde bir paragrafta yer alan her şey maviye dönecektir. Gerçekten harika, değil mi?

style.css , temalarınızın istediğiniz gibi görünmesini sağlamak için işinizin büyük kısmını yapacağınız yerdir.

Bu tür bir görsel kontrol, style.css yapılacak çok iş olduğu anlamına gelir; temalarınızın istediğiniz gibi görünmesini sağlamak için işinizin büyük kısmını burada yapacaksınız.

style.css ayrıca temanızı nasıl kaydettiğinizdir.

style.css ayrıca başlığında tema verilerinin (tema adı, yazar, varsa ana tema vb.) kaydedildiği bir yorum bölümü barındırır. Bu aşağıdaki gibi görünüyor:

/*
Theme Name: Pretend Theme
Author: WPShout
Author URI: http://wpshout.com/
Version: 0.1
Description: A very pretend theme for WordPress learners
[Other comment-block information goes here, too]
*/

WordPress, temanız hakkında bilgi almak için bu yorumları okur. Bu nedenle, yukarıdaki küçük yorum bloğu - ve daha süslü veya daha teknik bir şey değil - temanızın sitenizin WordPress yönetici alanındaki Görünüm > Temalar bölümündeki temalar listesinde görünmesine neden olan şeydir:

Anatomy of a WordPress Theme adlı büyük grafikte style.css 1'den 6'ya kadar olan satırlarında bir temanın gerçek kayıt verilerinin bir örneğini görebilirsiniz.

işlevler.php

functions.php , temanıza özel işlevler eklediğiniz yerdir. Bu, aşağıdakiler de dahil olmak üzere çok fazla olabilir:

• CSS stil sayfaları ( style.css kendisi dahil) ve JavaScript dosyaları ekleme
• Gezinti menüsü alanlarını ve widget alanlarını kaydetme
• Sitenizde bulunmasını istediğiniz özel görsel boyutlarının tanımlanması
• Sayfa içeriğinizi filtreleme

functions.php , WordPress'in geri kalanıyla öncelikle WordPress kancaları (eylem ve filtre kancaları olarak da adlandırılır) aracılığıyla "konuşur", bu da tam olarak doğru yerlere işlevsellik eklemesine izin verir. WordPress Temalarının Temel Kavramları'nda functions.php işleyişine daha derinden iniyoruz: 3. Functions.php ile functions.php Ekleme ve WordPress Kancalarında (Eylemler ve Filtreler): Ne Yaparlar ve Nasıl Çalışırlar?

PHP şablon dosyaları

Bir WordPress sitesinin şablon dosyaları, sitenin işaretlemesini belirler. Onlar olmadan, sayfada kelimenin tam anlamıyla hiçbir şey yoktur.

Bir temanın dosyalarının ana yığını, onun PHP şablon dosyalarıdır. functions.php bir temanın beyniyse, style.css onun kıyafetleridir ve şablon dosyaları onun asıl gövdesidir.

Şablon dosyaları, HTML işaretlemesi ve PHP kodunun bir karışımını içeren ,code>.php dosyalarıdır. (Şu grafiği kontrol edin ve nasıl göründüklerini göreceksiniz.)

Şablon dosyaları işaretlemeyi iki şekilde oluşturur

Bu dosyalar birlikte sitenin işaretlemesini belirler: sitenizi ziyaret ettiğinde tarayıcının görüntülediği gerçek HTML. Bunu iki şekilde yapıyorlar.

1. HTML

İlk olarak, şablon dosyaları, tıpkı normal bir .html dosyasının yapacağı gibi, HTML'yi doğrudan tarayıcıya yazdırır. <!--?php?--> içinde olmayan herhangi bir şey PHP değildir: doğrudan sayfaya giden düz HTML'dir. Bu nedenle, bir temanın header.php aşağıdaki gibi bir miktar HTML içeriyorsa:

<body class="site-body">

Bu tam olarak bir tarayıcının header.php içeren her WordPress web sayfasında göreceği şeydir ve bunların tümü olmalıdır.

2. PHP

Şablon dosyaları, HTML'yi derleyen veya HTML'ye dönüştüren PHP'yi kullanarak gerçekten sihirlerini gerçekleştirir. Basit bir örnek olarak, aynı header.php dosyamız bunun yerine aşağıdaki kodu içerebilir:

<body class="<?php echo 'site-body'; ?>">

Eklenen PHP, site-body dizesini doğrudan sayfaya yansıtır (yazdırır). Böylece sunucu, sonunda fazladan PHP işlemi yaptı, ancak tarayıcı hala aynı eski HTML'yi görüyor.

Tahmin edebileceğiniz gibi, bir temanın şablon dosyaları son derece önemlidir: onlar olmadan sayfada kelimenin tam anlamıyla hiçbir şey yoktur.

"Her zaman kullanılan" şablon dosyaları

header.php ve footer.php genellikle bir temanın her yerinde kullanılır, çünkü çoğu site farklı sayfalarda tutarlı bir üstbilgi ve altbilgi ister.

Bazı şablon dosyaları, bir sitedeki her web sayfasında kullanılır. Başlıca örnekler header.php ve footer.php .

Bu dosyalar o kadar sık ​​kullanılır ki, WordPress'in bunları diğer şablon dosyalarına dahil etmek için özel işlevleri vardır: get_header() ve get_footer() . Bu şekilde çağrılan, parametreler olmadan, bu işlevler basitçe header.php ve footer.php alır ve bunları işlevin çağrıldığı yere bırakır.

Bu dosyalar neden her yerde kullanılıyor? Bunun nedeni, çoğu sitenin farklı sayfalarda tutarlı bir üst bilgi ve alt bilgi istemesidir. Bir sayfada şirketinizin logosu ve birincil gezinme menüsü varsa, diğer sayfaların da aynı şeyi yapmasını isteyeceksiniz. Aynısı, sayfanın altındaki altbilginiz için de geçerlidir.

Not olarak, sidebar.php de bu tür bir dosyadır, çünkü bir sitedeki çoğu web sayfası türünün tek bir kenar çubuğunu paylaşacağı durumdur - belki de Sayfa türünü görüntülemeye ayrılmış tam genişlikteki sayfalar hariç. gönderiler. sidebar.php kendi işlevi de vardır, get_sidebar() .

WordPress şablon hiyerarşisindeki dosyalar

Gerçek heyecan index.php , single.php ve page.php gibi dosyalarda olur. Bu dosyalar, farklı türdeki gönderi verileri için hangi işaretlemenin görüneceğini belirler.

Bunu yeniden ifade etmek için WordPress, hangi tür gönderi verileri için hangi sayfanın kullanılacağını bilir . Örneğin:

• İstenen web sayfası Sayfa türünde bir gönderi içeriyorsa (örneğin, Hakkında sayfanız), WordPress bu web sayfasını oluşturmak için büyük olasılıkla page.php kullanır.
• İstenen web sayfası ayrı bir Post-type gönderisiyse (örneğin, belirli bir blog gönderisini görüntülüyorsanız), WordPress onu oluşturmak için büyük olasılıkla single.php kullanacaktır.
• 2014'te yazdığınız tüm Post-type gönderilerine bakıyorsanız, WordPress bu web sayfasını oluşturmak için büyük olasılıkla archive.php kullanacaktır.

Bu, WordPress Temalarının Temel Kavramları'nda derinlemesine ele aldığımız WordPress şablon hiyerarşisinin büyüsüdür: 1. Şablon Hiyerarşisi.

Bu şablon dosyaları döngüye dayalıdır

Bu "şablon içi hiyerarşi" şablon dosyalarının tümü çok önemli bir şeyi paylaşır: WordPress geliştirmenin mutlak temel ilkelerinden biri olan The Loop etrafında oluşturulurlar.

WordPress Temalarının Temel Kavramlarında The Loop'un derinliklerine iniyoruz: 2. The Loop ile Gönderilerin İşlenmesi. The Loop gerçekten harika, bu yüzden bu işte yeniyseniz, The Loop onları havaya uçurmasın diye çoraplarınıza tutunun!

Şablon parçaları

Diyelim ki hem index.php hem de page.php tamamen aynı olan bir bölümü var. Bu kodu her iki dosyada da tekrarlamalı mıyız?

Aslında DRY—”Don't Repeat Yourself!”—iyi programcılar için bir savaş narasıdır. Tekrarlama her türlü soruna neden olur. Tekrarlanan bölümle ilgili bir şeyi değiştirmek isterseniz ne olur? Şimdi iki yerde değiştirmeniz gerekiyor. Ya bir yerde değiştirmeyi unutursanız veya bir dosyada hata yapıp başka bir dosyada hata yapmazsanız? Artık kodunuz senkronize değil ve siteniz hatalı. (Şimdi: aynı kodu yirmi kez tekrarlarsanız ne olur? Yaptığınız her değişikliği yirmi kez tekrarlamanız gerekir ve “hepsini yakaladığınızı” umarsınız.)

Şablon parçaları, bir şablon dosyasının tekrarlanması muhtemel bir bölümünü alır ve bunları yeni bir dosyaya taşır. Bu şekilde, hem index.php hem de page.php , tek tek iki kez yazmak yerine, aynı şablon parçasına başvurabilir; ve o bölümü değiştirmek isterseniz sadece bir kez değiştirirsiniz.

Artık tema anatominizi biliyorsunuz

Bunlar bir WordPress teması hakkında gerçekten anlaşılması gereken şeylerdir. Çok büyük bir ThemeForest teması bile bu çekirdek iskeletin etrafında inşa edilecek, bu yüzden bu parçaların nasıl birbirine kenetlendiğini anlayın ve WordPress temalarını anlamak için çok fazla gücünüz olacak.

Bu anatomi dersi sona erdiğinde, sonraki üç bölüm, bir temanın nasıl çalıştığını açıklayan dört önemli programlama ilkesine dalıyor:

1. WordPress şablon hiyerarşisi
2. Döngü
3. işlevler.php
4. WordPress kancaları

İleri!