HTML’den WordPress teması nasıl yapılır

LMONK72 aracılığıyla
Belki sorun bu değil. Belki müşterilerinizden biri HTML web sitelerini WordPress’e dönüştürmenizi istiyor ve bunu nasıl kolayca yapacağınızı merak ediyorsunuz. Ya da belki sadece WordPress tema geliştirme deponuz için yeni beceriler öğrenmek istersiniz.
Burada nedenleriniz ne olursa olsun, bitirdiğimizde, HTML’den mükemmel WordPress temasını yapmaya başlamak için ihtiyacınız olan arka plana sahip olacaksınız. Her şeyi birleştirmek için burada ve orada bazı PHP kodları ödünç alacağız, ancak temel olarak, HTML ile çalışmayı ve en önemlisi eğlenmeyi dört gözle beklemelisiniz. Daha fazla zaman kaybetmeden yapalım. Neye ihtiyacın var
HTML şablonu CSS stil sayfasıyla tamamlandı (yapacak hiçbir şeyiniz yoksa benimkini indirip kullanabilirsiniz)
En az bir WordPress temasıyla çalışan WordPress kurulumu. Yirmi on beş temadan bazı PHP kodu ödünç alacağız
Kod Düzenleyicisi (Notepad ++ kullanıyorum ve öneriyorum, ancak yüce metin de iyi bir seçenek olsa da)
Verdiğiniz veya aldığınız zamandan 15 dakika
İlk ilk şey …
Buat folder di desktop Anda tempat Anda akan menyimpan tema WordPress Anda. Buna bir şey deyin. Saya akan memberi nama WPKubee milik saya. Semua file yang kita buat akan tinggal di folder ini. Ini adalah folder yang sama yang akan kita kompres, dan kemudian diunggah ke instalasi WordPress kita sebagai tema baru kita. Juga, ini adalah template HTML yang kami gunakan untuk tutorial ini: Index.html

This is header section. Put your logo and other details here.

This is the main content area. We will replace this with blog posts.

This is the side bar

Style.css#wrap{margin: 0 auto; width:95%; margin-top:-10px; height:100%;}
.header{width:99.8%; border:1px solid #999;height:135px;background-color: #1be;}
.content{width:70%; border:1px solid #999;margin-top:5px;background-color: #999;}
.sidebar{float:right; margin-top:-54px;width:29%; border:1px solid #999;background-color: #1d5;}
.footer {genişlik:%99.8; sınır: 1px katı #999; marj-üst: 10px; arka plan rengi: kırmızı;} WordPress temanızı verin WordPress kurulumdan sonra temanızı tanıması gerekir. Bu nedenle, temanızı doğru bir şekilde adlandırmamız gerekiyor, yoksa asla etkinleştirmeyeceğiz. Kod düzenleyicinizi kullanın, yeni bir style.css dosyası oluşturun ve tema klasörünüze kaydedin. Mevcut Style.css içeriğini (HTML şablonunuzda dahildir) yeni stilinize yapıştırın.
Tema Adı: Temanızın Adı Örn. Wpkubee
Tema Uri: Temanızın URL’si ör. http://yoursite.com
Açıklama: Temanızın kısa bir açıklaması
Sürüm: 1.0 veya süslediğiniz başka bir sürüm
Yazar: Adınız veya WordPress.org kullanıcı adınız
Yazar URI: Web adresiniz ör. http://eyusite.com
Etiketler: Temanızı WordPress tema deposunda bulmak için etiketler ör. wpkubee, html, tema vb.
Lisans: GNU Genel Kamu Lisansı v2.0
*/
Bu bilgiler, WordPress’e yeni WordPress temanızı tanımlamak için gereken her şeyi anlatır. Bu bilgiler olmadan, temanızı WordPress kontrol panelinden seçemez ve etkinleştiremezsiniz.
Önemli kısım temanın adıdır, ancak diğer tüm ayrıntıları girmek için her zaman iyi bir uygulamadır. Index.html’yi geçerli PHP dosyasına kırmak WordPress temasıyla, ana HTML şablonunu (index.html) birkaç PHP dosyasında paylaşalım. İhtiyacınız olan tek şey, tam bir WordPress temasına sahip olmak için index.php ve style.css olsa da, temanızı her biri özel bir işlevle farklı bir şablon dosyasına ayırmak ve daha sonra bir olarak bilinen iyi bir PHP kodu kullanarak yeniden bir araya getirmektir. Çağrı işlevi. . HTML şablonlarımızı index.php, header.php, sidebar.php ve footer.php gibi dört şablon dosyasına ayıracağız. Bu PHP dosyası, yeni temamızın uygun kısımlarını, yani ana içerik, üstbilgi, kenar çubuğu ve altbilgi bu sırayla barındırır. Kod düzenleyicinizi kullanın, yeni bir dosya oluşturun ve header.php adını verin. Her zaman bir uzantı aldığınızdan emin olun (örneğin .php, .css vb.) Doğru! Değilse, yalnızca işe yaramaz metin dosyaları oluşturacaksınız. Dosyanızı kaydederken Type E Box olarak Kaydet’den uzantıyı seçin. Ardından, bu dosyayı güvenilir WordPress temasının ilgili bir kodu ile doldurmamız gerekiyor. Ödünç alacağımız kod çoğu temada benzer, ancak yirmi on beş kullanacağız. İşleyen WordPress kurulumunuzu girin ve görünüm -> editöre gidin. Bu, tema düzenleme ekranını açacaktır. Mevcut aktif temanızdan style.css göreceksiniz. Yirmi on beş aktif temanız değilse, endişelenmeyin. Tema düzenleme ekranının sağ tarafında, düzenlenecek temayı seçtiğini göreceksiniz:
Sizi Style.css yirmi on beş olarak götürecek yirmi on beş seçmek için açığa tıklayın. Bu dosyayla ilgilenmiyoruz. Şablonların altında Header.php (başlık olarak görüntülenir) ile aşağı kaydırın ve bu dosya düzenleyiciye yüklendikten sonra kodu ‘dan <body <? Php body_class () olarak kopyalayın; açılış > İşaret. Açılış etiketi, kullandığınız temaya bağlı olarak farklı görünebilir, ancak sizinki gibi yirmi on beş kullanıyorsanız, yukarıdaki kodu almanız gerekir. İşte sadece zamanınızı kaydetmek için yirmi on beşte başlık dosyasından aldığım tam kod:
<html class = “no-js”>

<meta charset = "”>

<link rel = "pingback" href = "<? php bloginfo ('pingback_url');

<script src = "<? php echo esc_url (get_template_directory_uri ());

<body >
Bu kodu başlığınıza yapıştırın. Sonra Ekle:
<link ral = "Stylesheet" href = "” type = “metin /css” />
… Style Düzenlemesi için Style.css Styles sayfası dosyasını almak için etiketinde herhangi bir yerde. Ayrıca, ekle:
… Sitenizin başlığını korumak için önceki kodun altında. Bu, siteniz yüklendiğinde tarayıcı sekmesinde veya penceresinde görünen başlıktır. Tüm bunlar garip ve kafa karıştırıcı geliyorsa, en ufak bir endişelenmeyin, söz veriyorum, her şeyin kısa sürede mantıklı olacağına söz veriyorum.
Tüm değişiklikleri kaydedin. Header.php şimdi şöyle görünecek:

<html class = “no-js”>

<meta charset = "”>

<link rel = "pingback" href = "<? php bloginfo ('pingback_url');
<link ral = "Stylesheet" href = "” type = “metin /css” />

<script src = "<? php echo esc_url (get_template_directory_uri ());

<body >
Header.php şimdi hazırız. Bir sonraki dosyayı oluşturmanın zamanı geldi, index.php. index.php, temelde diğer PHP dosyalarını birleştiren bir dosya olan bir dosya olan ana şablon dosyasını, dizin.php’i oluşturalım. Index.html şablonumuzdan, üstte başlık, ana içerik alanı hemen altında, sağdaki kenar çubuğu ve alttaki altbilgi kesinlikle olduğunu göreceksiniz. Temamız aynı yapıya sahip olacak ve daha sonra blog yayınlarımızı ana içerik alanına ekleyeceğiz. Ama önce, index.php’nin ana yapısını oluşturalım. Kod Düzenleyicinize Dizin.php’i açın ve şu üç satırı ekleyin:

İlk iki satır arasında bazı kodlar ekleyeceğiz, ancak önce bu üç satırın ne anlama geldiğini öğrenelim. Birincisi yaptığımız header.php’yi alacak, ikincisi sidebar.php’yi alacak ve üçüncüsü footer.php. Bu, şablon dosyamızı yeniden birleştirecek, tam bir sayfa oluşturacaktır. İlk iki satır arasında ekleyeceğimiz kod, diğer şablon dosyalarında hesaplanmayan blog yayınını işleyecektir.
Mesajları görüntülemek için yayınlar nasıl eklenir, Loop olarak bilinen özel bir PHP işlevi kullanacağız. Büyük bir sorun değil, yalnızca WordPress veritabanınızı göndermek için tarayan bir özel kod parçası ve ardından blogunuza koyun. ve Daha net olmak gerekirse. Aşağıdaki kodu yapıştırın:

<div id = "post- ” >

<a href=" “rel =” Bookmark “title =” PHP the_title_attribute ();?>