HTML’ye WordPress Tema Eğitimi: Adım 1 – HTML’nizi PHP’ye dönüştürün
Birçoğumuz için, WordPress için ilk kodlama deneyimi, ilk temamızı yazdığımız zamandır. Sonuçta, her WordPress sitesi bir tema gerektirir ve önce sipariş edilen bir şey istiyorsanız, kendi kodunuzu yapmak mantıklıdır. WordPress’i 2010 yılında kullanmaya başladığımda, önceki içerik yönetim sistemi (CMS) ile hiç çalışmamıştım. Ancak, her ikisi de CMS’nin bir parçası olarak içerik için HTML kullanan büyük sitelerde hem de başlangıçtan itibaren yaptığım küçük istemci sitesi için çok sayıda HTML ve CSS kodladım. Müşteri sitesi için kullanabileceğim çeşitli CM’lerin artılarını ve eksilerini tartmak için haftalar geçirdim (unutmayın, bu WordPress’in şu anda olduğu gibi baskın bir güç haline gelmesinden önce) ve iki nedenden dolayı WordPress’e karar verdim. Birincisi, hepimizin bir parçası olduğumuz olağanüstü bir kullanıcı ve geliştirici topluluğudur. İkincisi, bazı HTML deneyimleriyle, bir WordPress teması oluşturmak zor değildir.
Bu üç yazıda, HTML Static’ten kendi WordPress temanızı oluşturma sürecinde size rehberlik edeceğim. Bir HTML ve stil sayfası CSS dosyasıyla başlayacağız ve eşlik eden tüm özelliklere sahip bir WordPress temasına dönüştüreceğiz. Mesajlar süreçte sırayla çalışacaktır:
INdex.php dosyanızı oluşturun, şablon ekleyin ve döngü etiketleri.
Başlık dosyaları, kenar çubuğu ve altbilgi gibi ek şablon dosyaları ve şablon bölümleri oluşturma.
Widget’lar ve navigasyon menüleri dahil olmak üzere işlevsellik ekleyin ve işlev dosyalarınızı hazırlayın.
Bu yazıda bir dosya oluşturacağım – index.php. Statik sitemden index.html dosyasına dayanacak, ancak içeriği sileceğim ve bir şablon ve döngü etiketi ile değiştireceğim. Öyleyse başlayalım! Bu diziyi takip etmek için neye ihtiyacınız var, bazı araçlara ihtiyacınız var:
WordPress geliştirme kurulumu, tercihen yerel makinenizde.
Bir kod editörü.
Statik Site – Çalıştığınız bir siteniz 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. Başlangıç Kodu Başlangıç sitesinde yalnızca iki dosya vardır – index.html ve style.css. Her şeyi kasıtlı olarak basit tutuyorum ve sitemin soyulmuş sürümünü kullanıyorum. Aşağıdaki görünüm:
GitHub’da içerik dizin.html ve style.css içeriğini bulabilirsiniz – burada kodu göstermeyeceğim çünkü çok şey var! Not: Bu, kendi temanızı oluşturmanıza yardımcı olmak için tasarlanmış temel kodların bir koleksiyonudur. Doğrudan siteler için kullanmak istiyorsanız, ekstra stil vb. Eklemeniz gerekebilir. bunun içine. Tema dizini gereksinimlerini geçmez. Lütfen sadece öğrenmek için kullanın, siteyi doğrudan açmak için kullanın. Temanızı hazırlayın Temanızı oluşturmak için, WordPress kurulumunuzda bir klasöre ihtiyacınız var. Kod düzenleyicinizi veya dosya yöneticinizi kullanın, wp-concent/temaları açın ve yeni bir klasör oluşturun. İstediğiniz adı ver. Ben wpmudev-theme-part1 mine diyeceğim.
Bu, WordPress’e bunun bir tema tarzı sayfası olduğunu bilmek için gereken bilgileri verir. Ayrıntıları düzenlemek, kendi adınızı ve URL’nizi eklemekten çekinmeyin ve isterseniz temanın adını değiştirin. Yapılacak bir sonraki şey dizin.html dosyanızın dosya adını dizin.php olarak değiştirmektir. Artık temanızın çalışmasını sağlayacak iki dosyanız var. Ama henüz PHP eklemediniz. Bunu yapmak için bazı şablon ve döngü etiketleri eklememiz gerekir. Hadi bunu yapalım. Şablon Etiket Etiket Etiketi Ekle Şablonu, tema şablonu dosyasında kullandığınız özel bir WordPress işlevidir. Çeşitli şeylerden birini yapabilir – sunulan şablon etiketlerinin aralığını görmek için kodeksine bakın.
Burada iki şey için bir şablon etiketi ekleyeceğiz:
Stil Sayfası Arayın
CSS için otomatik olarak yapılan sınıflar ve kimlikler
Stylesajı Arama Şu anda sitenizi yeni temanız etkinleştirilmiş olarak açarsanız, yayınladığınız hiçbir stilin olmadığını göreceksiniz. Bu benim görünüşüm:
Panik yapma! Yalnızca dizin dosyanızın kafa dosyasına bir stil sayfası çağrısı eklemeniz gerekir. Not: Bu serinin üçüncü bölümünde, en iyi uygulama olan tema işlev dosyasına nasıl taşıyacağınızı göstereceğim. Şimdilik yalnızca iki dosya ile çalışıyoruz: Styles sayfası ve index.php dosyaları, bu yüzden yine de kullanacağız.) INDEX.PHP dosyanızı açın. Bu satırı bulun:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir Düzenle, statik dosyaları aramak yerine, tema stili sayfasını yüklemek için PHP kullanır:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Bu, web siteniz hakkında her türlü bilgiyi veritabanından alan kullanışlı bir etiket olan blogInfo () şablon tag () kullanır. Bu durumda tema URL’sini alın ve ardından style.css adlı bir klasörde dosyalara erişin. Şimdi ana sayfanızı yenileyin. Kuvvetin yüklendiğini göreceksiniz. Bu benim sayfam şimdi:
Tam olarak eski statik sitenize benzediğini göreceksiniz. Bu bittiğimiz anlamına gelmez – hiçbir şey yakın değildir! İçerik, döngü ekleyerek düzelteceğimiz index.php dosyasındaki statik içerikten alınır. Ama önce birkaç şablon etiketi daha ekleyelim.
Sınıfı ve kimliğin otomatik olarak üretilmesi, WordPress’in yazınız ve öğeleriniz için otomatik olarak sınıflar ve CSS kimlikleri üretmesini sağlamak için çok kullanışlıdır. Bu, daha sonra belirli yayın türlerini, kategorileri ve diğerlerini hedefleyerek stili düzenlemek için sınıfı kullanabileceğiniz anlamına gelir. Dizin.php dosyanızı açın. açılış bulun. kapanış etiketinden sonra kendi sırasında oturacak. Kulağa benzeyecek şekilde düzenleyin:
Core 2B693721668DBA8BCC578B8DE9824642ini içerir, Body_Class () şablon etiketini kullanarak, web sitenizin ziyaretçilerinin ziyaret ettiği sayfaların türünü tespit edecek ve buna dayanarak CSS sınıfı üretir.
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Bu, sitenizde açtığınız sayfaya ve görüntülediği içerik türüne göre değişecektir. Bunu, CSS’nizi tek bir gönderi, belirli kategoriler veya istediğiniz her şey gibi belirli içerik türlerine hedeflemek için kullanabilirsiniz.
Şimdi bunu kişisel yazınız için yapalım. Bu satırı index.php dosyanızda bulun:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Hattı şöyle görünecek şekilde düzenleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Bu iki şablon etiketi kullanır:
The_id () Post kimliğini alın ve gönderiye benzersiz bir kimlik vermek için kullanın.
Post_class (), body_class () etiketine benzer bir şekilde çalışır ve makalenin bu tür yayınlarla eşleşen öğelerine bir sınıf listesi ekler. Şu anda bunun düzgün çalışmayacağını unutmayın, çünkü veritabanından bir gönderi almadığınız – ancak bir sonraki döngüyü eklediğimizde işe yarayacaktır.
Zevk için şimdi döngü ekleyin. Şu anda, sayfa içeriğiniz haard-kod olmuştur. Doğru içeriğin herhangi bir sayfada görüntülenmesi için veritabanını aramaktan doldurulmasını istiyorsunuz. INdex.php dosyanızda, kodu bulun (kimlik eklediğiniz ve şablon etiketiyle kapattığınız). Kodu şöyle görünecek şekilde düzenleyin: Çekirdek 2B693721668DBA8BCC578B8DE9824642
Orada birçok kod var – ne olduğunu anlamak istiyorsanız, döngüyü açıklayan yazımıza bakın. Şimdi ana sayfanızı yenilerseniz, çok farklı bir içerik yazınız göreceksiniz. Bu yeni bir WordPress kurulumuysa, WordPress’i yüklediğinizde varsayılan gönderiyi göreceksiniz:
Bu serinin ilk bölümünde son adımı eklemek, kodumuza bazı önemli kancalar eklemektir. Bu, kafaya ve altbilgiye yerleştirilir ve birçok eklentinin çalışması önemlidir. Kafanıza, bunu önce ekle kapak :
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Şimdi index.php dosyanızın sonuna geçin. kapanmadan önce , wp_footer () kancaları ekleyin:
Çekirdek 2B693721668dba8bcc578b8de9824642 içerir
Sitenizdeki her sayfanın üstüne ve altına özel bir kanca ekler – bu, temalarınızın ve sitelerinizin iyi çalışması için önemlidir, bu yüzden kaçırmayın. Şimdi dosyanızı kaydedin.Sırada ne oldu?Artık WordPress temasının başlangıcına sahipsiniz.Ama hala yapacak iş var.Bu serinin bir sonraki bölümünde, temanızı birkaç şablon dosyasına ayırma sürecinde size rehberlik edeceğim.Üstbilgi, kenar çubuğu ve altbilgi için ayrı dosyalar oluşturacaksınız, dosyalar her sayfa ve arşiv için döngüler ve ayrı dosyalar içerir. WordPress temalarının geliştirilmesini hangi aşamada inceliyorsunuz?Bize yorumlarda söyleyin!
Etiket:
HTML
PHP
WordPress teması
