WordPress için kendiniz, ücretsiz ve programlama olmadan bir şablon nasıl yapılır. Bir saat içinde kendi elinizle wordpress için benzersiz bir şablon nasıl yapılır

  • 07.07.2019

Şimdi bu makaledeki tasarım örneğini kullanarak basit bir HTML şablonundan bir WordPress temasının nasıl yapıldığını anlatacağım.

Birçok nedenden dolayı tasarımı WordPress'e uyarlamanız gerekebilir, örneğin bir zamanlar statik olan sitenizi bir CMS'ye aktarıyorsunuz veya henüz WordPress koleksiyonunda olmayan bir tasarımı beğeniyorsunuz veya sadece temaların nasıl olduğunu anlamak istiyorsunuz. Bu CMS'nin içeriği içeriden düzenlenmiştir.

O halde başlayalım.

Dosyalar arasında kod dağıtın

1. Şablonu indirin ve WordPress temaları klasörünüze açın (adres gibi blog_url_wordpress/wp-içerik/temalar/). İsterseniz tema klasörünü beğeninize göre yeniden adlandırın. Örneğin, şablonum şurada bulunur: wordpress_blog_url/wp-content/themes/MyTheme/.

2. Dosyayı yeniden adlandırın stiller.css içinde stil.css.

3. Aç stil.css bir kod düzenleyicide (örneğin Notepad++) ve en başta aşağıdaki satırları yapıştırın:

/* Tema Adı: MyTheme Tema URI'si: http://test1.ru Yazar: İsimsiz Yazar URI'sı: http://test1.ru Açıklama: Test örneği Sürüm: 1.0.0 Lisans: GNU Genel Kamu Lisansı v2 veya üstü Lisans URI'si : http://www.gnu.org/licenses/gpl-2.0.html */

Tahmin edebileceğiniz gibi, bu temayla ilgili hizmet bilgileridir: başlık, yazar, açıklama, lisans, sürüm vb. Satırların doğru kısımlarını kendinizle değiştirebilirsiniz, yani yazarlığınızı, sürümünüzü, açıklamanızı ve diğer veri.

4. Dosyalar oluşturun başlık.php, index.php, kenar çubuğu.php, altbilgi.php ve kodu üzerlerine dağıtın index.html.

4.1. AT başlık.php kodu satır satır kopyalayın , çünkü bu dosya sitenin en üstünden sorumludur. stiller.css ile kodda değiştirin stil.css- yeni geçerli dosya adı.

4.2. AT index.php ana blok kodunu yapıştırın (satırdan satır satır ).

4.3. AT kenar çubuğu.php yan menü kodunu kopyalayın ( üzerinde ).

4.4. AT altbilgi.php kalan satırları yapıştırın (ile belgenin sonuna index.html).

5. Kaldır index.html.

6. Yönetici paneline gidin ve MyTheme şablonunun bölümde göründüğünden emin olun. Görünüm -> Temalar. Onu görüntülemeyi veya etkinleştirmeyi bile deneyebilirsiniz, ancak şablonu henüz WordPress ile entegre etmediğimiz için bundan henüz iyi bir şey çıkmayacak.

Başlığı uyarla

Şimdi, WordPress verilerinin ve ayarlarının yükleneceği dinamik bir tema oluşturmak için statik bir şablondan başlayacağız.

Şablon PHP eklerini içerecektir. Bu kod ile başlar. Aralarında, çoğunlukla CMS işlevlerini çağıran PHP kodu bulunur.

1. header.php dosyasını açın ve içerdiği kodu bloğa kadar değiştirin

bir sonrakine:

> "> "> "type="text/css" media="ekran" /> <?php bloginfo("name"); ?>

Bloğu dinamik hale getirdik

Kod, dil özniteliklerini kapsayıcıya döndüren bir işlevi çağırır.

">

Kodlamayı sabit olarak ayarlamak yerine CMS ayarlarından bir değer alıp kodun içine otomatik olarak koyan yani kodlamayı değiştirmek için artık tema dosyasını düzenlemenize gerek olmayan bir fonksiyon çağırdık.

Stiller, eklentiler ve komut dosyaları sayfasında çalışmayı sağlayan önemli bir işlev.

2. index.php dosyasını düzenlemeye devam edin. En baştan yaz

,

Hatlar üstbilgi, kenar çubuğu ve altbilgi dosyalarını çağırır.

Artık MyTheme'i görüntüleyebilir ve hatta etkinleştirebilirsiniz. Sonuç olarak, tarayıcı, statik bir menü ve tek bir sayfa ile tanıdık bir şablon görüntüler. Menünün dinamik ve özelleştirilebilir hale gelmesi ve sitede yer alan tüm materyalleri tek bir sayfada görüntülemek yerine şablonu daha da dönüştürmeniz gerekiyor.

Üst menüyü dinamik hale getirme

Şimdiye kadar, aynı yatay üst menüye sahip bir tema da dahil olmak üzere tamamen statik bir temamız var. Yönetici panelinden yapılandırılamasa da ve kodu mevcut haliyle bırakırsanız, öğe eklemek / silmek / taşımak için her seferinde dosyayı düzenlemeniz gerekecektir. başlık.php ki bu son derece sakıncalıdır.

Sinsi felsefe yapmamak ve büyüleyici programlama dünyasının uçurumlarına dalmamak için dinamik menüye statik bir isim vereceğiz. Yatay menü tablosu yerine kodu yapıştırın

şöyle görünmesi için:

Bilgisayar yardım web sitesi

© Telif hakkı 2022,
rzdoro.ru - Bilgisayar yardım sitesi

  • Kategoriler
  • Ütü
  • Windows 10
  • Tarama
  • Windows 7
  • Ütü
  • Windows 10
  • Tarama
  • Windows 7