WordPress Eğitimi: HTML’den WordPress Teması Oluşturma (Bölüm 1)

  1. 1. Şu Anda Okuma: WordPress Eğitimi: HTML’den WordPress Teması Oluşturma (Bölüm 1)
  2. 2. WordPress Eğitimi: HTML’den WordPress Teması Oluşturma (Bölüm 2)
  3. 3. WordPress Temasının Anatomisine Giriş

Bir HTML (+ CSS) web sitesiyle başladıysanız, WordPress’e taşınırken hepsini atmanız gerekmez. HTML’nizi WordPress’e dönüştürebilir ve (şimdi daha güçlü) web sitenizi dinamik WordPress platformunda çalıştırabilirsiniz.


Ya da belki de durum böyle değildir. Belki de bir müşterinin HTML tasarımını tam teşekküllü bir WordPress temasına nasıl dönüştüreceğinizi merak ediyorsunuz. Veya belki daha tanıdık HTML tarafından temel WordPress (+ PHP) programlamasını öğrenmek istersiniz.

Bugün burada olmanızın nedeni ne olursa olsun, bu WordPress öğreticisi size HTML’den bir WordPress teması oluşturmanın temellerini tanıtacaktır. Temanızı sıfırdan oluşturmak için bu kılavuzu izleyebilir veya Github’a gidip temanızı başlatmak için gerekli tüm şablon dosyaları ve kodlarla “boş bir tuval” sağlayan WPExplorer başlangıç ​​temasını indirebilirsiniz. Bu yüzden, kodu okuyarak öğrenenlerden biriyseniz, başlangıç ​​temasını indirin, kılavuzu atlayın ve işlerin nasıl çalıştığını görün… Aksi takdirde, bir kod düzenleyici alın (Kullanıyorum ve tavsiye ederim Not Defteri++, veya Yüce metin) ve tarayıcı hazırsa, sonuna kadar bu basit kılavuzu izleyin.

WordPress Temanızı Adlandırma

Öncelikle, temanıza benzersiz bir ad vermemiz gerekiyor; bu, yalnızca web siteniz için bir tema oluşturuyorsanız gerekli değildir. Ne olursa olsun, kurulumdan sonra kolayca tanımlanabilmesi için temanızı adlandırmamız gerekir.

Bu noktada genel varsayımlar:

  • İndex.html ve CSS stil sayfanız hazır.
  • En az bir tema içeren çalışan bir WordPress kurulumunuz var; Yirmi on dört
  • Yeni WordPress temanızı kaydedeceğiniz bir tema klasörü zaten oluşturdunuz ��

WordPress temanızı adlandırmaya geri dönelim. Kod düzenleyicinizi açın ve stil sayfanızın içeriğini yeni bir dosyaya kopyalayıp yapıştırın. style.css tema klasörünüzde. Aşağıdaki bilgileri sayfanın en üstüne ekleyin. yeni oluşturulan style.css:

/ *
Tema Adı: Temanızın adı
Tema URI'si: Temanızın URL'si
Açıklama: Temanızın kısa bir açıklaması
Sürüm: 1.0 veya istediğiniz başka bir sürüm
Yazar: Adınız veya WordPress.org'un kullanıcı adı
Yazar URI'si: Web adresiniz
Etiketler: WordPress tema havuzunda temanızı bulmak için etiketler
* /

(/ *… * /) Yorum etiketlerini dışarıda bırakmayın. Değişiklikleri kaydedin. Bu bilgi WordPress’e temanızın adını, yazarını ve bunun gibi ücretsiz şeyleri söyler. Önemli olan, temanızı WP panosu üzerinden seçmenize ve etkinleştirmenize izin veren temanın adıdır..

HTML Şablonunuzu PHP Dosyalarına Ayırma

Bu eğiticide ayrıca HTML şablonunuzun soldan sağa düzenlenmiş olduğu varsayılmaktadır: üstbilgi, içerik, kenar çubuğu, altbilgi. Farklı bir tasarımınız varsa, kodla biraz oynamanız gerekebilir. Eğlenceli ve süper kolay.

Bir sonraki adım dört PHP dosyası oluşturmayı içerir. Kod düzenleyicinizi kullanarak index.php, header.php, sidebar.php ve footer.php’yi oluşturun ve tema klasörünüze kaydedin. Bu noktada tüm dosyalar boş olduğundan, hiçbir şey yapmalarını beklemeyin. Örnekleme amacıyla, aşağıdaki index.html ve CSS stil sayfası dosyalarını kullanıyorum:

index.html




HTML Şablonu WordPress Temasına Dönüştürme - WPExplorer



Bu başlık bölümü. Logonuzu ve diğer ayrıntıları buraya koyun.

Bu ana içerik alanı.

Ve bu altbilgi.

CSS TARZI

#wrap {kenar boşluğu: 0 otomatik; en: 95%; kenar üstü: -10px; Yükseklik: 100%;}
.başlık {genişliği:% 99.8; kenarlık: 1 piksel katı # 999; yükseklik: 135 piksel;}
.İçerik {genişliği: 70%; kenarlık: 1 piksel katı # 999; kenar boşluğu: 5 piksel;}
.Kenar çubuğu {float: right; kenar üstü: -54px; genişliği: 29%; kenarlık: 1 piksel katı # 999;}
.altbilgi {genişlik:% 99,8; kenarlık: 1 piksel katı # 999; kenar boşluğu: 10 piksel;}

Çalışacak bir şeyiniz yoksa her iki kodu da alabilirsiniz. Sadece bunları kod düzenleyicinize kopyalayıp yapıştırın, kaydedin, az önce bahsettiğimiz dört PHP dosyasını oluşturun ve bir sonraki bölüm için hazır olun. Yeni oluşturulan (ve boş) öğelerinizi açın header.php. Mevcut WordPress kurulumunuza giriş yapın, Görünüm – >> Editör ve aç header.php. Tüm kodu etiketler ve header.php dosyanıza yapıştırın. Yirmi Ondört tema header.php dosyasından aldım kodu:




<?php wp_title( '|', true, 'right' ); ?>




Sonra açın index.html başlık kodunu (ör.

bölümünü) başlık sayfanıza ekleyin. php aşağıda gösterildiği gibi etiketler:




<?php wp_title( '|', true, 'right' ); ?>







Bu başlık bölümü. Logonuzu ve diğer ayrıntıları buraya koyun.

Sonra Ekle…

… Arasında herhangi bir yerde stil sayfanızı bağlamak için header.php dosyasındaki etiketleri. Ayrıca ve yukarıda gösterildiği gibi header.php dosyasında etiketleri açma. Tüm değişiklikleri kaydet.

İkinci bölümü kopyalayın (ör..

index.html dosyasından yeni oluşturulan index.php , ve Ekle…

… En tepede ve…


… Mutlak tabana. Bu üç satır, header.php, sidebar.php ve footer.php dosyasını (bu sırayla) alır ve kodunuzu bir araya getiren index.php içinde görüntüler. Tüm değişiklikleri kaydedin. Bu noktada, index.php dosyanızın şöyle görünmesi gerekir:



Ardından içeriği index.html dosyanızdaki kenar çubuğu ve altbilgi bölümlerinden sırasıyla sidebar.php ve footer.php’ye kopyalayın.

Mesaj Ekleme

HTML şablonunuz bir WordPress temasına dönüşmek üzere. Sadece yazılarınızı eklememiz gerekiyor. Blogunuzda yayınlarınız varsa, bunları özel olarak hazırlanmış “HTML-to-WordPress” temanızda nasıl görüntülersiniz? Olarak bilinen özel bir PHP işlevi türü kullanırsınız. döngü. Döngü, yayınlarınızı ve yorumlarınızı yerleştirdiğiniz her yerde görüntüleyen özel bir kod parçasıdır.

Şimdi, yayınlarınızı içerik bölümü index.php şablonundan aşağıdaki kodu kopyalayıp yapıştırın.

ve

aşağıda gösterildiği gibi etiketler:

>

Bu mesajlarınızı halledecek. ABC kadar kolay. Bu noktada (ve bu öğreticide sağlanan örnek dosyaları kullanarak), header.php dosyanız aşağıdaki gibi görünmelidir:




<?php wp_title( '|', true, 'right' ); ?>




Sidebar.php dosyanızın şöyle görünmesi gerekir:

Footer.php dosyanızın şöyle görünmesi gerekir:

Ve bu altbilgi

Kapanışı fark ettin mi ve altbilgideki etiketler? Bunları da dahil etmeyi unutmayın.

Style.css dosyanız aşağıdaki gibi görünmelidir:

/ *
Tema Adı: HTML'den WordPress Teması Oluşturma
Tema URI'si: http://wpexplorer.com
Açıklama: Bu tema HTML'den WordPress temalarının nasıl oluşturulacağını gösterir
Sürüm: 1.0
Eser sahibi: Freddy for @WPExplorer
Yazar URI'si: http://WPExplorer.com/create-wordpress-theme-html-1/
Etiketler: wpexplorer, özel tema, WordPress HTML, WordPress teması oluşturma
* /
vücut {
yazı tipi ailesi: arial, helvetica, verdana;
yazı tipi boyutu: 0.8em;
genişlik:% 100;
yükseklik: 100%;
}

.başlık {
arka plan rengi: # 1be;
sol kenar boşluğu:% 14;
üst: 0;
sınır genişliği: 0.1em;
kenarlık rengi: # 999;
sınır tarzı: katı;
genişlik:% 72;
yükseklik: 250 piksel;
}

.içerik {
arka plan rengi: # 999;
sol kenar boşluğu:% 14;
kenar boşluğu: 5 piksel;
şamandıra: sol;
genişlik:% 46;
sınır genişliği: 0.1em;
kenarlık rengi: # 999;
sınır tarzı: katı;
}

.kenar çubuğu {
arka plan rengi: # 1d5;
marj-right:% 14;
kenar boşluğu: 5 piksel;
Sağa çık;
sınır genişliği: 0.1em;
kenarlık rengi: # 999;
sınır tarzı: katı;
üstte: 180 piksel;
genişlik:% 23;
}

.altbilgi {
arka plan rengi: kırmızı;
sol kenar boşluğu:% 14;
şamandıra: sol;
kenar boşluğu: 5 piksel;
genişlik:% 72;
yükseklik: 50 piksel;
sınır genişliği: 0.1em;
kenarlık rengi: # 999;
sınır tarzı: katı;
}

Ve index.php’niz aşağıdakine benzer olmalıdır:





Yine – bu, başlık, içerik, kenar çubuğu, altbilgi düzenine sahip soldan sağa bir web sitesine dayanmaktadır. Takip ediyor musun? Beş dosyanın tümü tema klasörünüze kaydedilmelidir. Klasörü istediğiniz gibi adlandırın ve WinRar veya eşdeğeri bir program kullanarak ZIP arşivine sıkıştırın. Yeni temanızı WordPress kurulumunuza yükleyin, etkinleştirin ve dönüştürülmüş temanızı çalışırken görün!

Kolaydı, değil mi? Temanızı istediğiniz gibi şekillendirebilirsiniz, ancak WordPress’te sevdiğimiz özelliklerin çoğu hala etkin değildir, çünkü … Bir sonraki derste, işleri bir adım daha ileri götüreceğiz ve WordPress programlamasının diğer yönleriyle (örneğin Şablon Dosyaları ve Şablon Etiketleri) HTML şablonlarınızı istediğiniz gibi döndürmenize olanak tanır. Bizi izlemeye devam edin!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map