HTML – WordPress Tema Eğitimi: Adım 2 – Tema Şablon Dosyaları Oluşturma
HTML Static’ten ilk WordPress temanızı nasıl oluşturacağınızı gösteren bu diziye tekrar hoş geldiniz. Bu serinin ilk bölümünde, statik index.html dosyasını alırsınız ve bunları PHP dosyalarına dönüştürürsünüz. Birkaç şablon ve döngü etiketi eklediniz. Bu ikinci bölümde dosyanız daha çok doğru temaya benzemeye başlayacaktır – bunu birkaç dosyaya böler ve çeşitli içerik türleri için bir şablon dosyası oluşturmaya başlayacaksınız. Özellikle şunları yapacağız:
Idex.php dosyamızı birkaç dosyaya ayırın, üstbilgiler, kenar çubuğu ve altbilgi için ayrı dosyalar oluşturun.
Döngü için bir dosya oluşturun.
Statik sayfalar, arşiv sayfaları ve tek gönderim için yeni bir şablon dosyası oluşturun.
Haydi başlayalım!
Bu gönderiyi takip etmeniz gereken şeylere ihtiyacınız var, bazı araçlara ihtiyacınız var:
WordPress geliştirme kurulumu, tercihen yerel makinenizde.
Bir kod editörü.
Bu serinin ilk bölümünde oluşturduğunuz kod – yoksa, kullandığım dosyayı indirebilirsiniz.
Bu işi geliştirme sitesinde yaptığınızdan emin olun, doğrudan bir sitede değil – dünyanın temalarınızı hazır görmesini istemezsiniz. İlk dizin.php dosyasını ayırma Birinci bölümde oluşturduğumuz dosyayı böleriz, üstbilgiler, kenar çubuğu ve altbilgi için yeni bir dosya oluştururuz. Bir başlık dosyası oluşturun, yapmadıysanız tema klasörünüzü açın. Üç yeni boş dosya oluşturarak başlayın:
header.php
Sidebar.php
Footer.php
Şimdi index.php dosyanızı açın. Dosyanın başından Navigasyon menüsünü kapatmaya kadar tüm kodları bulun:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Kodu kopyalayın ve yeni header.php dosyanıza yapıştırın. Ardından index.php’den silin. Bunun yerine, dosyanın ne olduğunu hatırlatmak için her bir şablon dosyasının üstüne birkaç yorum eklemek istiyorum. Bu index.php için benim.
Bunun altında, başlık dosyasına bir arama eklemeniz gerekir. Bunu her şeyden önce dizin.php dosyanıza ekleyin (bu yorum dışında):
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Şimdi index.php dosyanızı ve header.php’nizi kaydedin. Yan çubuk için geçerli yan dosyayı oluşturun. Kenar çubuğu için index.php dosyanızdaki tüm kodu bulun:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Boş sidebar.php dosyanıza kopyalayın ve index.php adresinden silin. Not: Bu serinin bir sonraki bölümünde, buradaki statik içeriği widget alanıyla değiştireceksiniz. Yine, yan çubuğa bir arama eklemeniz gerekir. Yan bıçak kodunu sildiğiniz yerde, bunu index.php dosyanıza ekleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Son altbilgi dosyasını oluşturma, bir altbilgi dosyası oluşturacağız. Altbilgi için index.php’deki tüm kodları bulun:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Bunun sadece altbilgi öğesini değil, aynı zamanda DIV, gövde kapağı ve HTML etiketlerinin ve WP_Footer kancalarının kapağını da kapsadığını unutmayın – hepsi dosyanın sonuna kadar. Bunu index.php adresinden yeni ve silinen footer.php dosyasına kopyalayın. Ardından index.php’nin hemen sonunda altbilgiye bir arama ekleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Dosyalarımız artık ana şablon dosyasına (index.php) ayrılmıştır ve üç dosyayı içerir. Bu, temanızı kodlamanın daha verimli bir yoludur, çünkü bu yeni bir şablon dosyası eklediğimizde, her seferinde başlıklar, kenar çubuğu ve altbilgi için tüm kodları eklemeniz gerekmediği ve değiştirmeniz gerekirse, Sadece bir kez yaparsınız. Döngü dosyaları kodun birçok dosyada görünen diğer kısımları döngüdür. Dosyanın kendisine ayıralım. Indogh adlı yeni bir klasör oluşturun ve içinde loop.php adlı boş bir dosya oluşturun. Dizin.php dosyanızda, Loop için kod bulun:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Yeni boş dosyanıza kopyalayın ve bununla index.php’de değiştirin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Bu döngü çağırır. Her şeyi düzenli tutmaya yardımcı olduğu için döngü dosyanızı bir alt klasöre koymanın iyi bir fikir olduğunu unutmayın. Zamanla, tüm klasörde daha fazla döngü dosyası yapacağız.
Dizin dosyalarımız artık çok daha küçük. Şöyle görünmeli:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Bunun oldukça garip görünebileceğini unutmayın, çünkü bir dosyada açık ve başka bir dosyada kapalı birkaç öğeniz (örneğin gövde ve div Main) var. Bunun için endişelenmeyin – bir süre tema dosyasıyla çalıştıktan sonra alışacaksınız!
Daha fazla şablon dosyası oluşturma bugün temamızda yalnızca bir şablon dosyası var – index.php. İşlevsellik temamız için yeterli olsa da, daha fazlası varsa daha iyi çalışacaktır. Öyleyse ekleyelim.
INDEX.PHP Dosyasını ve Ad Page.php’inizi kopyalamak için statik bir sayfa için bir şablon dosyası oluşturun. Bu artık WordPress tarafından statik bir sayfa görüntülemek için kullanılan bir şablon dosyası olacaktır. Ama şimdi aynı. Yapmak istediğimiz değişiklikler döngüde, bu yüzden yeni bir versiyonunu da yapmamız gerekiyor. Loop.php dosyanızı (klasör dahil) çoğaltın ve Loop-page.php adını adlandırın. Şimdi sayfanızı açın.
Kulağa benzeyecek şekilde düzenleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Bu, loop-page.php dosyasını almak için get_template_part () işlevini kullanır. Bu yoksa, Loop.php içerecektir.
Bu aynı zamanda sayfanızın üst kısmındaki yorumları düzenlemek için iyi bir fikirdir.
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Şimdi sayfayı kapatın. Giriş-Meta Div’i Sil:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Şimdi, sayfa başlığında, sayfanın bağlantısını silin – buna ihtiyacınız yok çünkü bu dosyanın içerik çıktısını gören herkes bağlı olduğu sayfada. Başlık kodunu şöyle görünecek şekilde düzenleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Şimdi Loop-Page.php dosyanızı kaydedin. Arşiv sayfası için bir şablon dosyası oluşturun Şimdi index.php dosyanızın bir kopyasını oluşturun ve ad arşiv.php. Bu, ana blog sayfanız ve herhangi bir kategori veya etiket arşivi ve tarih arşivi dahil olmak üzere herhangi bir arşiv sayfasını görüntüler.
Başlık vermek için archive.php dosyasını açın. Döngü dosyası için düzenlenmiş çağrının üzerine ekleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Eğer takip ettiyseniz, bunun Loop-Lundive.php adlı yeni bir Loop.php sürümünü oluşturmamız gerektiğini bileceksiniz. Şimdi oluşturun, H2 etiket etiketi H3’ü değiştirmek için açın ve düzenleyin. Yorumlar sütununu da çıkarın. Loop-scive.php dosyanız şöyle görünecektir: Çekirdek 2B693721668DBA8BCC578B8DE9824642
HTML’deki başlığınız için ve arşiv sayfasında istemediğiniz yorumlar olmadan doğru hiyerarşiyi kullanarak arşiv sayfasında yayınınızı görüntüleyecektir.
Son tek yazı için bir şablon dosyası oluşturun, tek bir yazı için bir şablon dosyası oluşturalım. Double Index.php ve Adı Single.php. Çift Loop.php ve Name Loop-Single.php. Yeni single.php dosyanızı şuna benzer şekilde düzenleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Ardından Loop-Single.php dosyasında, bağlantıyı silmek için yalnızca başlığı düzenleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Şimdi tüm dosyalarınızı kaydedin. Artık temamızda tema şablonu dosyalarımızda bir dizi dosya şablonu ve dosyası var ve doğru şekilde yapılandırıldı. İsterseniz, WordPress şablonu hiyerarşisine göre ek bir şablon dosyası ekleyebilirsiniz. Şimdi ihtiyacınız olan tüm döngü dosyalarına sahip olduğunuzu göreceksiniz, bu nedenle yeni bir şablon dosyası eklerseniz, döngü dosyasını kullanabilirsiniz. Örneğin, bir dosya kategorisi.php eklerseniz, loop-usis.php çağırabilirsiniz. Bir sonraki bölümde bir gezinme menüsü ve widget alanı eklemeye devam edeceğiz ve işlev dosyasının doğru çalışmasını sağlayacağız.
Template dosyasını temanızda nasıl kullanıyorsunuz? Bize yorumlarda söyleyin!
Etiket:
HTML
WordPress teması
öğretici
