WordPress Teması Anatomisine Giriş
Bir süre önce, sizi HTML’den bir WordPress teması yapma konseptiyle tanıştırdık. Öğreticiyi iki bölüme ayırıyoruz ve bugün hepimiz iki öğreticiyi mükemmelleştirmekle ilgili, bu yüzden bu yazıyı post serisinin üçüncü kısmı olarak düşünmekten çekinmeyin. Amacım, size nasıl çalıştığına dair net bir resim sunmak için WordPress temasını sökmek. Bu yazı, HTML ve CSS hakkında bilgiye sahip olduğunuzu varsayar. Devam edeceğim ve HTML ve CSS becerilerine sahip olmanın WordPress temalarını tasarlamak için bir ön koşul olduğunu belirteceğim. Bir şey daha, bu yazı büyük kelimelerden ve zor kavramlardan kaçınacak-bu anlaşılması kolay olacak, bu yüzden eğlenmeye ve öğrenmeye hazırlanın.
Küçük bir astarlama html Her HTML web sayfası
etiketi kullanılarak birkaç bölüme ayrılır. Örneğin, web sitenizi navigasyon, başlıklar, ana içerik, kenar çubuğu ve altbilgi gibi birkaç parça haline getirebilirsiniz. Web sayfanız birkaç parça haline geldikten sonra, CSS kullanmak istediğiniz gibi bu parçaları sipariş edebilir (veya ayarlayabilirsiniz). Bu işlem kuvvet düzenlemesi olarak bilinir ve renk, boyut, sınır, özel efektler vb. Gibi diğer stil öğelerinin eklenmesini içerir. Basamaklı stil sayfaları için daha kısa olan CSS’nin gücü. HTML ve CSS dosyalarını birleştirip bazı resimler girdiğinizde, tam bir web sitesi alacaksınız.
WordPress temasından çok farklı olmayan şeyler. Bölüm 1’de HTML’den bir WordPress teması nasıl oluşturulacağı gördüğümüz gibi, WordPress teması farklı dosyalara ayrılmıştır. Şu anda benzerlik bulamazsanız, açıklayayım. Statik HTML Web sayfaları,
etiketi (veya gerçekten yaşlıysanız tablo) kullanılarak birkaç bölüme (önceki bölümü aradık) ayrılır. Öte yandan, WordPress teması farklı bir PHP dosyasına ayrılır ve daha sonra şablon etiketi kullanılarak tekrar bir araya getirilir. Bu nedenle, bir dosyada (ve HTML statik) yaşayan tüm vücut öğelerine (kanopi, ana içerik, yan bıçaklar, altbilgi, vb.) Sahip olmak yerine, her gövde öğesi (WordPress temasında) ayrı dosyada yaşar . Altbilgi footer.php vb. Takip ediyor musun? Aşağıdaki illüstrasyona dikkat edin:
Yukarıdaki çizimimizden , ve Şablon etiketi olarak adlandırılır. İşleri, tema dizininizden bu sırayla başlıklar.php, sidebar.php ve footer.php almak ve dizin.php’nizdeki içeriği görüntülemek, böylece web sayfalarını tamamlamaktır.
İndex.php
header.php
Sidebar.php
Footer.php
Bu sihirli dosyaların her birine neyin dahil olduğunu görelim: bu dizin.php şablon dosyası, işleyen WordPress temanız olmayan ana dosyadır. Bu, WordPress web sitesini ziyaret ettiğinizde yüklenen ilk dosyadır (veya varsayılan). İndex.html’ye eşdeğer olduğunu düşünün. WordPress temasındaki tipik index.php şuna benzeyecektir: ve Aşağıda gösterildiği gibi ana sayfadaki (index.php) blog yayınlarını görüntülemek için:
<div id = "Post- ” >
<a href="
Dosya şablonu header.php Bu şablon dosyası başlık kodunu, gezinmeyi ve html kafa kodunuzu içerir. Temel olarak, Header.php, web sitenizin en üstünde görüntülemek istediğiniz her şeyi saklar. Bilirsiniz, web sitenizin başlığı ve bunun gibi şeyler gibi şeyler. Ayrıca header.php adresindeki stil sayfanıza CSS ile bağlantı kurarsınız. İşte header.php: <meta charset = "”> <link ral = "pingback" href = " “> <link ral =" Stylesheet "href =" “type =” text /css ” /> <script src =" /Js/html5.js “>
Bu başlık bölümüdür. Logonuzu ve diğer ayrıntılarınızı buraya koyun. Yan bıçaklar ek menüler, widget’lar, kategoriler, sosyal medya simgeleri, özel içerik, reklamlar gibi HTML kodları vb.
Sidebar.php, ihtiyaçlarınıza bağlı olarak saf HTML işaretlemesi veya PHP işlev çağrısı içerebilir. Böylece, temel kenar çubuğu.php şöyle görünebilir:
Özel içeriğinizi veya html kodunuzu buraya koyun.
dosya şablonu footer.php footer.php giren ne düşünüyorsunuz? Telif hakkı bilgilerinizi buraya, ek menüler, bağlantılar, sosyal medya simgeleri – ne istersen koyabilirsiniz! Footer.php’nin temel görünümünün nasıl olduğunu görmek ister misiniz? Burada: PHP işlev çağrıları dahil (farklı şablon dosyaları almak için örneğin search.php) dahil olmak üzere altbilgi içeriğinizi buraya koyun. Kapak etiketlerine dikkat edin ve footer.php? Footter.php’ye neden dahil edilmeleri gerektiğini tahmin edebilir misiniz? Benzer şekilde, açılış etiketinin neden ve header.php’ye dahil edildiğini tahmin edebilir misiniz? Bu yazının sonundaki yorumlar bölümünde tahmininizi bize söyleyin, yukarıda tartıştığımız şablon dosyasının yerini çok temel bir WordPress temasıdır. Başka birçok şablon dosyası var; WordPress temasında gördüğünüz her öğe için bir şablon dosyası vardır, ister yorumlar, arama sonuçları ve hata sayfa 404. WordPress temasının anatomisini tam olarak anlamak için farklı şablon dosyalarına alışmanız gerekir. WordPress’te kullanılabilecek tüm şablon karolarını izleyebilirsiniz. Ardından, WordPress’in şablon dosyasını tema dizininden almak için kullandığı bir şablon etiketimiz var. Şablon etiketi ve WordPress’te oynadığı rol hakkında daha fazla bilgi edinebilirsiniz.
WordPress tema özeti aşağıdaki anatomi öğelerinden oluşur: index.php, header.php, search.php, category.php vb.
, vb.
CSS
Görüntüler ve diğer medya dosyaları
javascript dosyası
Ve işte WordPress temasının anatomisini özetleyen çizimler:
Çalışmaya devam etmek ister misiniz?Codex WordPress’te ayrıntılı tema anatomi kılavuzuna bakın.Sonuç Web’de gördüğünüz her WordPress teması, ihtiyaçlarınızı karşılamak için ayarlayabileceğiniz aynı anatomi yapısını (hatta popüler toplam WordPress temamız) kullanır.WordPress temalarını geliştirmenin temellerini anladıktan sonra, WordPress temasıyla/WordPress temasıyla neler yapabileceğiniz için bir sınır yoktur.
