Ş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" />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:
Menünün görüntülenmesi için site kontrol panelinde Görünüm -> Özelleştir -> Menü ve önceden oluşturulmuş menüyü menü olarak yeniden adlandırın veya bir menü oluşturun ve beğeninize göre özelleştirin, ancak menü olarak adlandırdığınızdan emin olun.
Eylemin özü, dosyanın başlık.php işlev wp_nav_menu("menü=menü"); WordPress yönetici panelinde görüntülenmesi için uygun şekilde adlandırılması ve yapılandırılması gereken menü adlı bir menü açar. İsim Menü başka biriyle değiştirebilirsiniz, asıl mesele, adın hem site ayarlarında hem de kodda eşleşmesidir. başlık.php.
Navigasyon, güzel bir merdiven olmasına rağmen, açıkça bir yere taşınıyor. Bunun nedeni, şablonumuzun menüsünün tablonun içine tedbirsizce uygulanmasıydı, ancak onu bir liste olarak biçimlendirmek gerekiyordu. Dosyaya ekleyerek durumu kısmen düzeltebilirsiniz. stil.css aşağıdaki kod:
#menu ul ( kenar boşluğu: 0; /* Doldurma değerini sıfıra ayarla */ padding: 4px; /* Kenar boşluğu değeri */ font-size: 18px; ) #menu ul li ( display: satır içi; /* Satır içi öğe olarak görüntüle * / kenar boşluğu -sağ: 5px; /* Sol dolgu */ padding: 3px; /* Metnin etrafındaki dolgu */ )
Yorum yapıldığı için başka bir açıklamaya gerek yoktur. Sayfayı yenilemek ve listenin sonunda yatay hale geldiğini görmek için kalır.
Menü elbette daha akıcı ve güzel hale getirilebilir ancak bu eylemin şablonun uyarlanmasıyla hiçbir ilgisi yoktur, ancak ayrıntılı olarak çalışabileceğiniz CSS ile yakından ilgilidir.
Başlığı bitirmek
Dosyanın tek öğeleri başlık.php, kalan statik - sitenin adı ve açıklaması. Bunları yönetici panelinde belirtilen ayarlardan almak için, başlıktaki metni görüntülemekten sorumlu kodu aşağıdaki satırlarla değiştirin:
Sayfayı yenileyin - sonuç çok uzun sürmedi.
Bir dosyayla çalışmak başlık.php bu tamamlandı, sonunda aşağıdaki koda sahip:
>
"> "> "type="text/css" media="ekran" />gönderiler gösteriliyor
Sayfanın ana içeriğini içeren bölüme gidin - dosya düzenlenecektir index.php.
Bloğun içeriğini silin Sağ ve gönderileri dinamik olarak görüntülemek için kodla değiştirin. Alternatif olarak, tüm kodu dosyadan kaldırın ve bunun yerine aşağıdakini yapıştırın:
">
/ /Ve burada hiçbir şey yok :(404
Sayfanın gönderileri bitene kadar göstereceği bir döngünün başlangıcı.
">
Yazının başlığını görüntüler.
/ /
Gün, ay (kısaltılmış), yıl biçiminde tarih. Etiketler, yorumlar.
Sonuç yaz.
Kayıtların olması şartıyla döngünün sonu.
Malzeme yoksa, bununla ilgili uygun yazıyı görüntüleyin ve döngüden çıkın.
Birine sığmamak şartıyla çıktı sayfalandırması.
Basit görünen bir kod, sayfayı küresel olarak değiştirdi - blog gerçekten dinamik hale geldi. Her gönderi görüntülenebilir, bağlantılar çalışır.
Öğelerin daha fazla tasarımı ve yerleştirilmesi yalnızca hayal gücünüze ve yerleşim becerilerinize bağlıdır - verilerin görüntülenmesiyle her şeyi yapabilirsiniz, ancak şablon üzerinde çalışma henüz tamamlanmamıştır.
Widget Ekleme
Şablondaki ana içeriğin solunda Bilgi bloğu (bir tür widget) ve üzerinde bir yan menü bulunan bir panel vardır. Bilgi bloğu statik olmamalıdır ve bir widget'a çok benzer olduğu için onu bir widget yapmanızı öneririm. Bunun için ihtiyacınız olan:
- bir widget bloğu kaydedin;
- doğru yere götürün.
Şimdi Dahası.
1. Tema dizininde bir functions.php dosyası oluşturun. Şablonun çalışmasını sağlayan işlevleri saklar. Ayrıca diğer kullanıcı tanımlı prosedürleri içerebilir.
2. Aşağıdaki kodu girin:
"MySidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
", "after_title" => "
",)); ?>Bu kod, bir widget bloğu kaydeder. MySidebar yerine başka bir ad girebilirsiniz. Bu dosyadaki yaklaşık olarak aynı işlev de menüyü kaydedebilir, ancak PHP ile minimal temas kurmak için biraz kanla ve bunu yapmamaya karar verdim ve aynı zamanda bir sorunu çözmek için iki farklı yaklaşım gösterdim.
3. Dosyada kenar çubuğu.php satırları silin:
Bilgi
Daha ileri...
ve bunun yerine şunu yazın:
Bilgi bloğu beklendiği gibi kayboldu, yanda sadece hareketsiz bir menü kaldı.
4. Ancak yönetici panelinde daha iyiye yönelik değişiklikler meydana geldi - bölüm Görünüm alt paragraflar var Widget'lar ve Menü. İlkine git. Açın ve bakın: dosyada kayıtlı görünen içeride işlevler.php blok (MySidebar'ım var).
5. Bilgi bloğunu yeniden oluşturmak için pencere öğesini kenar çubuğuna sürükleyin Metin, tarlada başlık giriş Bilgi, tarlada Metin- kod
Size tatil indirimleri sunuyoruz. Daha ileri...
6. Blog sayfasını yenileyin - bloğu neredeyse bire bir yeniden oluşturmayı başardık (dosyada küçük nüanslar değişir) stil.css ve onlara odaklanmayacağım.
Menüyü uyarlıyoruz
Kenar çubuğunun ikinci kısmı dikey menüdür. Ayrıca doğrudan yönetici panelinden düzenlemek için statikten dinamiğe dönüştürülmesi gerekir.
1. Dosyadaki büyük iç içe menü listesini kaldırın kenar çubuğu.php ve bunun yerine kodu girin:
2. WordPress kontrol panelinizde Görünüm -> Özelleştir -> Menü, Ekle menü düğmesini tıklayın, yönetici panelindeki ad sayfa kodundaki adla eşleşecek şekilde adlandırın kenar çubuğu.php(Bu bende var left_menu) ve gerekli tüm öğeleri ekleyin.
3. Değişiklikleri kaydedin, sayfayı yenileyin ve sitenin sol tarafında bulunan dinamik menünün doğru çalıştığından ve görüntülendiğinden emin olun.
sayfa kodu kenar çubuğu.php orijinaline kıyasla büyük ölçüde azaldı ve sonunda şu oldu:
Menü
Aslında, sadece yazıt statik kaldı Menü. Ve bunun nedeni, örneğin, bu bloğu başka bir widget alanı biçiminde uygulayarak ve Özel Menü bloğunu ekleyerek kolayca “canlandırılabilse”, ancak değişmesi olası değildir, ancak bu, makaleyi dikkatlice okursanız, artık kolayca kendiniz yapabilirsiniz.
footer.php dosyasıyla çalışma
Sık sık MS Word'de çalışıyorsanız, bir belgeyi şablon olarak kaydetmek kesinlikle ilginizi çekecektir. Bu nedenle, biçimlendirme, alanlar ve sizin tarafınızdan ayarlanan diğer parametrelere sahip bir şablon dosyasına sahip olmak, iş akışını büyük ölçüde basitleştirebilir ve hızlandırabilir.
Word'de oluşturulan şablon DOT, DOTX veya DOTM formatlarında kaydedilir. İkincisi, makrolarla çalışmanıza izin verir.
Örneklem- Bu özel bir belge türüdür; açıldığında ve ardından değiştirildiğinde dosyanın bir kopyası oluşturulur. Orijinal (şablon) belge ve diskteki konumu değişmeden kalır.
Bir belge şablonunun ne olabileceğine ve neden gerekli olduğuna dair bir örnek, bir iş planıdır. Bu tür belgeler Word'de oldukça sık oluşturulur, bu nedenle oldukça sık kullanılırlar.
Bu nedenle, her seferinde belgenin yapısını yeniden oluşturmak, uygun yazı tiplerini, stilleri seçmek, kenar boşluklarını ayarlamak yerine, standart mizanpajlı bir şablon kullanabilirsiniz. Katılıyorum, çalışmak için bu yaklaşım çok daha rasyonel.
Şablon olarak kaydedilen bir belge açılabilir ve gerekli verilerle, metinle doldurulabilir. Aynı zamanda, Word için standart DOC ve DOCX formatlarında kaydedildiğinde, orijinal belge (oluşturulan şablon) yukarıda belirtildiği gibi değişmeden kalacaktır.
Word'deki belgelerle çalışmanız gerekebilecek şablonların çoğu resmi web sitesinde () bulunabilir. Ayrıca, program kendi şablonlarınızı oluşturmanıza ve mevcut olanları değiştirmenize izin verir.
Not:Şablonların bazıları programda zaten yerleşiktir, ancak bazıları listede görünseler de aslında Office.com web sitesinde bulunur. Böyle bir şablona tıkladıktan sonra, siteden anında indirilecek ve çalışmaya hazır olacaktır.
Kendi şablonunuzu oluşturun
Şablon oluşturmaya başlamanın en kolay yolu, yalnızca Word başlatılarak açılabilen boş bir belgedir.
MS Word'ün en son sürümlerinden birini kullanıyorsanız, programı açtığınızda, mevcut şablonlardan birini seçebileceğiniz bir başlangıç sayfası ile karşılaşacaksınız. Hepsinin uygun bir şekilde tematik kategorilere ayrılmış olması özellikle sevindirici.
Ancak, kendiniz bir şablon oluşturmak istiyorsanız, "Yeni belge". İçinde varsayılan seçenekler ayarlanmış standart bir belge açılacaktır. Bu parametreler programatik olabilir (geliştiriciler tarafından belirlenir) veya sizin tarafınızdan oluşturulabilir (belirli değerleri varsayılan olarak kullanıldığı gibi önceden kaydettiyseniz).
Derslerimizi kullanarak, daha sonra şablon olarak kullanılacak olan belgede gerekli değişiklikleri yapın.
Şablon olarak kullanılacak belge için varsayılan ayarlar olarak yukarıdaki adımları kullanmaya ek olarak, filigran, filigran veya herhangi bir grafik de ekleyebilirsiniz. Gelecekte değiştirdiğiniz, eklediğiniz ve kaydettiğiniz her şey, şablonunuza dayalı olarak oluşturulan her belgede bulunacaktır.
Kelime dersleri:
Gerekli değişiklikleri yaptıktan sonra, gelecekteki şablonda varsayılan parametreleri ayarlayın, kaydetmeniz gerekir.
1. düğmesine basın "Dosya"(veya "MS Office" Word'ün eski bir sürümünü kullanıyorsanız).
3. Açılır menü "Dosya tipi" uygun şablon türünü seçin:
- Word şablonu (*.dotx): Word'ün 2003'ten eski tüm sürümleriyle uyumlu normal şablon;
- Makro etkin Word şablonu (*.dotm): adından da anlaşılacağı gibi, bu şablon türü makroları destekler;
- Şablon Word 97 - 2003 (*.dot): Word 1997 - 2003'ün eski sürümleriyle uyumludur.
4. Dosya için bir ad belirleyin, kaydedileceği yolu belirtin ve "Kaydetmek".
5. Oluşturduğunuz ve yapılandırdığınız dosya, belirttiğiniz biçimde bir şablon olarak kaydedilecektir. Şimdi kapatılabilir.
Mevcut bir belgeye veya standart bir şablona dayalı bir şablon oluşturun
1. Boş bir MS Word belgesi açın, sekmeye gidin "Dosya" ve öğeyi seçin "Oluşturmak".
Not: Word'ün en son sürümlerinde, boş bir belgeyi açarken, kullanıcıya hemen gelecekteki bir belgenin oluşturulabileceği bir şablon düzenleri listesi sunulur. Tüm şablonlara erişmek istiyorsanız, açarken seçin "Yeni belge" ve ardından 1. maddede açıklanan adımları izleyin.
2. Bölümde uygun şablonu seçin "Kullanılabilir Şablonlar".
Not: Word'ün en son sürümlerinde, hiçbir şey seçmenize gerek yoktur, düğmeyi tıkladıktan hemen sonra mevcut şablonların listesi görünür. "Oluşturmak", şablonların hemen üzerinde mevcut kategorilerin bir listesi bulunur.
3. Makalenin önceki bölümünde (Kendi şablonunuzu oluşturma) sunulan ipuçlarımızı ve talimatlarımızı kullanarak belgede gerekli değişiklikleri yapın.
Not: Farklı şablonlar için, varsayılan olarak kullanılabilen ve sekmede sunulan metin stilleri "Ev" grup içinde "Tarzlar", standart bir belgede görmeye alışık olduğunuzdan farklı ve belirgin şekilde farklı olabilir.
- Tavsiye: Gelecekteki şablonunuzu diğer belgelerin aksine gerçekten benzersiz kılmak için mevcut stilleri kullanın. Tabii ki, bunu yalnızca belgenin tasarımına ilişkin gereksinimlerle sınırlı değilseniz yapın.
4. Belgede gerekli değişiklikleri yaptıktan sonra uygun gördüğünüz ayarlamaları yapın, dosyayı kaydedin. Bunu yapmak için sekmeye tıklayın "Dosya" ve seçin "Farklı kaydet".
5. Bölüm "Dosya tipi" uygun şablon türünü seçin.
6. Şablon için bir ad belirleyin, şununla belirtin: "Kondüktör" ("Gözden geçirmek") yolu kaydetmek için düğmesine tıklayın "Kaydetmek".
7. Mevcut şablona dayalı olarak oluşturduğunuz şablon, yaptığınız değişikliklerle birlikte kaydedilecektir. Artık bu dosya kapatılabilir.
Bir Şablona Yapı Taşları Ekleme
Yapı taşları, bir belgede bulunan yeniden kullanılabilir öğelerin yanı sıra bir koleksiyonda depolanan ve herhangi bir zamanda kullanıma hazır olan belge bileşenleridir. Yapı taşları, şablonlar kullanılarak saklanabilir ve dağıtılabilir.
Bu nedenle, yapı taşlarını kullanarak iki veya daha fazla türde kapak mektubu içerecek bir rapor şablonu oluşturabilirsiniz. Aynı zamanda, bu şablona dayalı olarak yeni bir rapor oluştururken, diğer kullanıcılar mevcut türlerden herhangi birini seçebilecektir.
1. Oluşturduğunuz şablonu tüm gereksinimleri göz önünde bulundurarak oluşturun, kaydedin ve kapatın. Bu dosyada, daha sonra oluşturduğunuz şablonun diğer kullanıcıları tarafından kullanılabilecek olan standart bloklar eklenecektir.
2. Yapı taşları eklemek istediğiniz şablon belgesini açın.
3. Daha sonra diğer kullanıcıların kullanımına sunulacak olan gerekli yapı taşlarını oluşturun.
Not: Bir iletişim kutusuna bilgi girme “Yeni Bir Yapı Taşı Yaratmak” satıra yaz "Şuraya kaydet" eklenmeleri gereken şablonun adı (bu, makalenin bu bölümünün ilk paragrafına göre oluşturduğunuz, kaydettiğiniz ve kapattığınız dosyadır).
Artık yapı taşlarını içeren oluşturduğunuz şablon diğer kullanıcılarla paylaşılabilir. Bununla birlikte kaydedilen blokların kendileri, belirtilen koleksiyonlarda mevcut olacaktır.
Bir Şablona İçerik Kontrolleri Ekleme
Bazı durumlarda, tüm içeriğiyle birlikte şablona biraz esneklik vermek istersiniz. Örneğin, bir şablon, yazar tarafından oluşturulan bir açılır liste içerebilir. Bir nedenden dolayı bu liste, onunla çalışan başka bir kullanıcıya uymayabilir.
Böyle bir şablonda içerik kontrolleri varsa, ikinci kullanıcı listeyi kendisi için düzeltebilir ve şablonun kendisinde değiştirmeden bırakabilir. Bir şablona içerik kontrolleri eklemek için bir sekme eklemelisiniz "Geliştirici" MS Word'de.
1. Menüyü açın "Dosya"(veya "MS Office" programın önceki sürümlerinde).
2. Bölümü açın "Seçenekler" ve oradaki öğeyi seçin “Şerit Kurulumu”.
3. Bölüm “Ana Sekmeler” yanındaki kutuyu işaretleyin "Geliştirici". Pencereyi kapatmak için tıklayın "TAMAM".
4. Sekme "Geliştirici" kontrol panelinde görünecektir.
İçerik kontrolleri ekleme
1. Sekme "Geliştirici" düğmeye tıklayın "Tasarım Modu" grupta yer alır “Kontroller”.
Aynı adlı grupta sunulanlardan seçerek gerekli kontrolleri belgeye ekleyin:
- Biçimlendirilmiş metin;
- Düz metin;
- Resim;
- Yapı taşlarının toplanması;
- açılan kutu;
- Açılır liste;
- Tarih seçimi;
- onay kutusu;
- Yinelenen bölüm.
Bir şablona açıklayıcı metin ekleme
Şablonun kullanımını kolaylaştırmak için belgeye eklenen açıklayıcı metni kullanabilirsiniz. Gerekirse, içerik kontrolünde varsayılan açıklayıcı metni her zaman değiştirebilirsiniz. Şablonu kullanacak kullanıcılar için varsayılan açıklayıcı metni ayarlamak için şu adımları izleyin:
1. Aç "Tasarım Modu"(sekme "Geliştirici", Grup "Kontroller").
2. Açıklayıcı metin eklemek veya düzenlemek istediğiniz içerik kontrolüne tıklayın.
Not: Açıklayıcı metin varsayılan olarak küçük bloklar halindedir. Eğer bir "Tasarım Modu" devre dışı bırakılırsa, bu bloklar görüntülenmez.
3. Değiştirin, alternatif metni biçimlendirin.
4. Devre Dışı Bırak "Tasarım Modu" kontrol panelinde bu düğmeye tekrar basarak.
5. Mevcut şablon için açıklayıcı metin kaydedilecektir.
Bu makaleden, Microsoft Word'de hangi şablonların olduğunu, bunların nasıl oluşturulacağını ve değiştirileceğini ve ayrıca bunlarla yapabileceğiniz her şeyi öğrendiniz. Bu, özellikle büyük şirketlerden bahsetmeden, özellikle bir değil birkaç kullanıcı aynı anda belgeler üzerinde çalışıyorsa, onunla çalışmayı büyük ölçüde basitleştiren programın gerçekten kullanışlı bir özelliğidir.
Bir WordPress şablonu oluşturmak düşündüğünüzden daha kolaydır. Bunu yapmak için, web siteleri tasarlama veya programlama konusunda geniş deneyime sahip olmanız gerekmez. Bu yazıda, kendi WordPress temalarınızı sıfırdan oluşturmanın temelleri konusunda size yol göstereceğiz.
Veritabanında bulunan şablonları kullanabiliyorken neden kendi WordPress şablonunuzu oluşturmanız gerekiyor? İşte buna yol açabilecek bazı nedenler:
- Rakiplerden farklı benzersiz bir web sitesi veya açılış sayfası elde edebilirsiniz. Bu CMS'ye dayanan milyonlarca blogla, her bir genel tasarım en az yüz kez kullanılır.
- Geliştirme aşamasında tam hareket özgürlüğü. İhtiyacınız olan iş öğeleriyle kendi işlevselliğinizi ekleyebilirsiniz.
- Sitenin farklı bölümleri için farklı tasarımlar uygulayabilirsiniz ki bu hazır şablon kullanıldığında mümkün değildir.
- Birkaç görüntüleme yapabilir ve ziyaretçilere web kaynağına olan ilgiyi ve bağlılığı artıracak farklı konular arasında geçiş yapma olanağı sağlayabilirsiniz.
- WordPress üzerinde çalışmanın basitliği, onu birçok kişi için erişilebilir kılar (İnternette yardımcı olacak video eğitimleri olacaktır). Bu, ana temanın el yazısıyla geliştirilmesinin veya bir alt temanın oluşturulmasının, üçüncü taraf tasarımcıları ve programcıları cezbetmekten tasarruf edeceği anlamına gelir.
- Alt tema olasılığından yararlanabilirsiniz - ana dosyaya dokunulmadan style.css kopyalarında ayarlamalar yapıldığında. Bu, başarısız olmaları durumunda değişiklikleri hızlı bir şekilde geri almanızı ve ana temayı güncellerken deneyim kaybetmemenizi sağlar.
Kısa talimat
Tabii ki, sadece bir makale ile bir sayfa şablonunun nasıl oluşturulacağına dair tam bir eğitim alamayacaksınız. Başlamak için, temelleri anlamak önemlidir - en basit konuların nasıl yapıldığı. Onlara dayanarak, zaten “yaratıcılık” yapabilir ve arzularınıza göre bir açılış sayfası veya web sitesi oluşturabilirsiniz. Şimdi size adım adım talimatlar içeren kısa bir hile sayfası vereceğiz - sitenin nasıl oluşturulduğunu anlamanıza yardımcı olacak.
Birinci adım: hazırlık çalışması
Çalışmaya başlamadan önce, bir metin düzenleyiciniz olduğundan emin olmanız gerekir (en basitleri Not Defteri veya Nodepad ++, özellikle de ücretsiz olarak indirebileceğiniz için). Bir sonraki adım, WordPress motorunu ve Denwer paketini yerel makinenize kurmaktır. Denver, programcılar için temel araçlardan oluşan bir pakettir. Bunların yardımıyla, sitelerde geliştirme ve değişiklik yapma süreci büyük ölçüde kolaylaştırılır ve hızlandırılır. Nasıl kurulur, bu video size şunları söyleyecektir:
İkinci Adım: Yeni Bir Tema Klasörü Oluşturun
Gerekli dizine geçiyoruz. Çoğu zaman aşağıdaki yolu kullanır: . Tüm temalar burada saklanır - hem standart hem de keyfi. İçine girip yeni bir klasör oluşturuyoruz. Buna örneğin "MyFirstTheme" diyoruz.
Şimdi yeni bir klasöre gidin ve Nodepad ++ veya başka bir düzenleyici aracılığıyla yapılmış iki dosya eklediğinizden emin olun. Bunlar index.php ve style.css'dir. Şimdilik bu evraklar boş kalsın, sonra doldurmaya devam edeceğiz. Ayrıca resimler klasörünü burada "MyFirstTheme" klasörüne ekleyin. şablonu tasarlamak için resim ekleyebileceğiniz yer.
Ardından, "MyFirstTheme"de sitenin ayrı bölümleri için şablonlar ekleyebilirsiniz: kenar çubuğu (sidebar.php), site (header.php), sayfa girişleri (single.php), yorumlar (yorumlar.php), vb. ek dosyaların sayısı, web kaynağınız için planladığınız yapıya bağlıdır.
Üçüncü adım: index.php'yi doldurma
Yapılacak ilk şey indeks dosyasını (index.php) doldurmaktır. İşte sitenin dört alana sahip olacağı en basit kod örneği: üstbilgi, ana, kenar çubuğu ve altbilgi.
Site Başlığı
Dosya içerisinde sitenizde görmek istediğiniz herhangi bir öğeyi kaydedebilirsiniz. WordPress temaları oluşturmak için index.php kodunu yazma hakkında daha fazla bilgi için videoya bakın:
Dördüncü Adım: Style.css'yi doldurun
Şimdi style.css dosyasını açmanız, aşağıdaki alanları eklemeniz ve doldurmanız gerekiyor (*** yerine site ve sahibi hakkında kendi bilgilerinizi girin). Girilen veriler yönetici panelinde görüntülenecektir.
/*Tema Adı: ***
Tema URI'si: http:// ***
Yazar URI'si: http:// ***
Tanım: ***
Daha sonra sayfaların görünümünü belirleyen çeşitli veri ve kuralları bu dosyaya girmek mümkün olacaktır. Örneğin:
(/**/ içindeki bilgiler kodun parçaları değil, yorumlardır)
Bu aşamada, katı stil parametreleri ayarlamak için henüz çok erken, ancak bu eğitim videosu dosya ile daha fazla çalışma için kullanışlı olacaktır:
Beşinci Adım: Dosyaları Bölün
index.php içinde belirtilen tüm öğeler ayrı dosyalarda çoğaltılmalıdır. İlk adımda, örnekte, ana bölümün ana bölümüne ek olarak, üstbilgi, kenar çubuğu ve altbilgi belirtildi - bu nedenle belgelerimizi onlar için .php formatında oluşturuyoruz.
Örneğin bir header.php dosyası oluşturuyoruz, index.php dosyasını açıyoruz. ilgili kod parçasını bulun ve yeni bir dosyaya yapıştırın. Bu irade:
Site Başlığı
Aynısı diğer parçalar için de yapılır. Bu, daha kolay gezinme için yapılmalıdır. Gelecekteki sitenin birçok öğesi olduğunda, ayrı dosyalar kontrol etmek veya değişiklik yapmak için daha iyi gezinmenize yardımcı olacaktır.
Ana dizin dosyasının ek dosyalarla tutarlı olması için, index.php'de her parçanın bloklarının altına aşağıdakileri yazmanız gerekir:
Aşağıda, WordPress tarafından kullanılan standart şablon dosyalarının bir listesi bulunmaktadır. Bunları kullanamaz veya kendi bölümlerinizi ekleyemezsiniz:
- Başlık - sitenizin başlığının stili.
- Yorumlar - yorum oluşturmak için bir şablon.
- Ana sayfanın teması ana sayfadır.
- Sayfa - sitede ayrı sayfalar oluşturursanız temayı tanımlar
- Kategori - kategorizasyon şablonu
- Tarih - tarih-saat çıktısının stilini belirler.
- Arşiv - eski malzemeler içeren bir arşiv bölümü şablonu.
- Arama - sitede arama yapmak için parametreleri belirten bir dosya.
- 404, 404 Bulunamadı hatası bildiren bir sayfa şablonudur.
- Altbilgi - sitenizin altbilgisinin stilini tanımlar.
Daha sonra her bir öğeyi iyileştirdiğinizde, görsel bir eğitim videosuna ihtiyacınız olacak. İşte size yardımcı olabilecek birkaç seçim:
header.php içindeki başlık:
İçerik ekleme:
Stil yorumları:
Bodrum sitesi:
Korkusuzca değişiklik nasıl yapılır?
Sitenin sayfalarında değişiklik yapmanız gerektiğinde, yanlış bir şey yazma ve “geri alamama” riski vardır. Ana tema güncellendiğinde stil sayfası girişlerinin kaybolması da olabilir.
Bunun olmasını önlemek için bir WordPress alt teması (alt tema) oluşturabilirsiniz - bu, ana dosyayı etkilemeyen yinelenen bir style.css dosyasıdır (birindeki değişiklikler diğerindeki güncellemeleri iptal etmez).
Bir WordPress alt teması oluşturmak kolaydır. Ana dizinde yeni bir klasör oluşturmanız gerekiyor C:\WebServers\home\localhost\www\INSTALLATION_NAME\wp-content\themes. Yeni klasörde, aşağıdaki içeriğe sahip kendi style.css dosyamızı oluşturuyoruz:
Tema Adı: TEMA ADI
Şablon: ÇOCUK TEMAINDA KLASÖR ADI
Tema URI'si: DOLDUR
Açıklama: DOLDUR
Yazar URI'si: FILL
/* ana tema stillerini içe aktar */
@import url("../TITLE/style.css");
/* Özel ek stiller */
Foo(renk:kırmızı;)
Artık yönetici panelindeki "Görünüm › Temalar" bölümüne gidebilir ve alt şablonu etkinleştirebilirsiniz. Gelecekte, yeni bir dosyada çalışabilirsiniz. Ayrıca, çocuk şablonları konusunda küçük bir video sunumu:
Selam arkadaşlar.
Bugün birçokları için çok ilginç bir konuya değineceğiz. Blogumun tasarımını yakın zamanda güncellediğimi fark etmişsinizdir, sizi bilmem ama ben çok beğendim. Bu şablonu sadece birkaç on dakikada oluşturdum ve HTML, CSS ve PHP bilgisine ya da şablon oluşturma bilgisine ihtiyacım yoktu.
Peki, herhangi bir bilginiz olmadan wordpress için bir şablon nasıl yapılır?
Başlamadan önce, resmin olabildiğince eksiksiz olması için şablon oluşturmanın farklı yollarından bahsetmeden edemeyeceğim.
Yöntem numarası 1- HTML çalışıyorsunuz, şablonların yapısını çalışıyorsunuz. Tabii ki, bu yaklaşımın avantajları vardır, eğer zamanınız ve arzunuz varsa, onunla başlayın. HTML bilmek henüz kimseye zarar vermedi.
Yöntem numarası 2– bir serbest çalışandan bir şablon sipariş edin. Bedava paranız varsa, emin olun, bu yöntemi seçin. Yüksek kaliteli bir şablon oluşturmanın maliyeti 15.000 ila 70.000 ruble arasındadır.
Yöntem numarası 3– şablonlar oluşturmak için özel yazılım kullanın. Bunun aynı tür şablonların oluşturulması olmadığını hemen açıklayacağım, programda benzersiz, güzel bir şablon oluşturmak oldukça mümkün. Bir örnek bu blog. Her şey hayal gücünüze bağlı.
Muhtemelen konuşmayı zaten anladığınız için, bu yazıda 3 numaralı yöntemden bahsedeceğiz.
Buluşuyoruz, şablon oluşturmak için bir program - (sürüm önemli değil, ikincisini kullanıyorum, bence dördüncüsü çıktı). Program ücretlidir, ancak biz Rus insanlarıyız (ne demek istediğimi anlıyorsunuz). İnternette bu programla ilgili çok ders olduğunu biliyorum ama abonelerimin aynı sorusuna cevap vermekten bıktım artık.
Programı indirin, çalıştırın.
1. Programın ana penceresinde “WordPress”i seçin.
2. Önizleme penceresinde, elbette tüm eğride boş bir şablon belirir, ancak çalışma sürecinde bunun izi olmayacaktır.
3. “Renkler ve Yazı Tipleri” sekmesine gidin, bir renk şeması seçin (biraz sonra düzelteceğiz), açık gri renk şemasını seviyorum. “Yazı Tipleri” düğmesine tıklayın, yazı tiplerini seçin (Verdana'yı her yerde kullanıyorum).
4. “Düzen” sekmesine gidin, burada sütunların sayısını ve düzenini ve ayrıca başlığın konumunu (basit bir başlık ile) seçmemiz isteniyor. Ben her zaman "İki Sütun->Sağ Orta Taraf" seçeneğini seçiyorum.
5. Bir sonraki sekmede, gelecek şablonun arka planını seçmemiz isteniyor. Bu sekmeyi kullanarak kendi arka planınızı oluşturabilir veya mevcut bir arka planı seçebilirsiniz.
6. Sonraki sekme, şablon sayfasını özelleştirmemizi ister.
Sayfanın genişliğini (tercihen en az 1000 piksel), gölgesini ve kenarlığını ayarlayın.
7. Bir sonraki sekmede, üstbilgiyi (başlık veya üstbilgi) ayarlamamız isteniyor. Ayarları kullanarak alt bilgiyi özelleştirin.
1. Başlığın genişliğini ve yüksekliğini ayarlama.
2. Bu menüyü kullanarak önceden hazırlanmış bir başlığı programa yükleyebilir ve ona efektler ekleyebilirsiniz.
3. Bu menüyü kullanarak başlığa üçüncü taraf bir resim ekleyebilirsiniz.
4. Sitenizin adı ve sloganı.
5. Adın ve sloganın yeri.
8. Bir sonraki sekmede menüyü kurmamız isteniyor (genellikle başlığın altında bulunur). Bir menü stili seçin ve doldurun.
9. Bir sonraki sekmede - "Makaleler", içerik konumu alanının (metin, video, resimler, tablolar) görünümünü özelleştirmeye davet ediyoruz. Verilen ayarlarla özelleştirin.
1. Makalenin görüntüsü (bu parametre hiçbir şeyi etkilemez, olduğu gibi bırakılabilir).
2.Bu menüyü kullanarak içerik alanının stilini (çizgili veya çizgisiz) ayarlayabilirsiniz.
3. Makalenin içindeki metnin görüntüsünü ayarlama.
4. İçerik alanının çeşitli parametrelerini düzenleme.
5. Başlığı özelleştirin.
6. Altbilgiyi özelleştirin.
10. Sonraki sekme olan "Bloklar"ı kullanarak yan blokların (kenar çubuğu) görünümünü özelleştirebilirsiniz.
AYARLAR VE ŞABLONU DIŞA AKTARMA
1. “Dosya” düğmesine tıklayın (program penceresinin sol üst köşesinde bulunur).
2. “Dışa Aktar->Ayarları Dışa Aktar”ı seçin. "Özellikler" sekmesine gidin ve gerekli bilgileri girin. "Dipnot" sekmesine gidin ve tüm kutuların işaretini kaldırın.
3. Birinci adımı tekrarlayın. “Dışa Aktar-> WordPress Teması”nı seçin.
4. Şablonu bir ZIP klasörü olarak dışa aktarın.
Herşey. Artık kendi WordPress şablonunuzu nasıl oluşturacağınızı biliyorsunuz. İyi şanslar yaratma.
Yazıya yorum yapmayı unutmayın. En iyinin yazarı, bence, yorum (haftanın sonuçlarına göre) ücretli kitabımı “İnternette bağlı kuruluş ürünleri nasıl satılır ve% 200 kar elde edilir” ücretsiz olarak alacak.
VİDEO DERS “HTML bilgisi olmadan WordPress için şablon nasıl yapılır?
Wordpress sitenizin umut verici olmasını istiyorsanız, başlangıç için benzersiz bir tema oluşturmayı düşünmelisiniz. Bu işlem, çeşitli kodlamalar ve betiklerle doğrudan ilgili olduğu için oldukça zahmetlidir. Sıfırdan parçalayalım.
Hemen hemen her wordpress teması wp-content/themes dizinine kurulur ve 3 dosya kategorisinden oluşur:
- stil sayfası dosyaları;
- ek işlevsellik dosyaları;
- şablon dosyaları.
Stil sayfası dosyaları style.css'dir. Site öğelerinin renginden, boyutundan, yazı tipinden ve diğer parametrelerinden sorumludurlar. Her sitenin yalnızca 1 style.css dosyası vardır. Bu dosyayı açarsanız, en üstte başlık, yazar ve konunun kısa bir açıklaması hakkında bilgi görebilirsiniz. Kendi temanızı oluştururken style.css'e kendinizle ilgili bilgileri girebilirsiniz.
Sonraki kategori, ek işlevsellik dosyalarıdır. Bunlar, prensibi bir eklenti gibi görünmesini sağlayan function.php'yi içerir. Bu dosya sayesinde temayı doğrudan yönetici panelinden görsel olarak özelleştirebilirsiniz. Genellikle ayarlar listesi çok geniş değildir (site adı, gezinme rengi ve sitenin kenar çubukları vb.). Tema çok işlevliyse, ayarlar listesi çok daha geniş olacaktır.
Şimdi şablon dosyalarına geçelim. Ana işlevleri, site ziyaretçileri tarafından istenen sayfaları oluşturmaktır. Şablon dosyaları bir ".php" uzantısına sahiptir. Çoğu temel tema, index.php adlı yalnızca bir şablon dosyası içerebilir. Bu durumda, sitenin tüm sayfaları aynı olacaktır. Böyle bir tasarım, tasarımın önemli bir rol oynamadığı durumlarda, çoğunlukla veritabanlarıyla çevrimiçi kaynaklar oluşturmak için kullanılır.
Daha önce hiç tasarım yapmadıysanız, önce basit bir tema oluşturmayı denemelisiniz. Normal çalışması için şu dosyalardan en az 2'sine ihtiyacınız olacak: style.css ve index.php.
Bu durumda ek işlevsellik dosyaları, anladığınız gibi kullanılamaz. Şablon dosyaları arasında index.php en esnek olanlardan biridir. Sitenin başlıklarını, çeşitli bloklarını, altını (altbilgisini), içeriğini ve diğer öğelerini bağımsız olarak oluşturabilir.
index.php dosyası tarafından üretilmeyen bu parametrelerin standart dosyalar tarafından oluşturulacağını belirtmekte fayda var. Örneğin, temanız yalnızca yukarıda listelenen 2 dosyadan oluşuyorsa, ancak kullanıcının yorum eklemek için bir form oluşturması gerekiyorsa, bu durumda bu durumda standart comment.php bu işlevi gerçekleştirir. Bu nedenle, temanızın daha benzersiz olmasını istiyorsanız, ek şablon dosyaları oluşturmaya değer. Ana olanları düşünelim.
- Yorum eklemek için, tahmin ettiniz, yorumlar.php şablonu kullanılır.
- Eğer yorumlar içeren bir açılır pencere yapmak istiyorsanız, o zaman bu amaçlar için comment-popup.php'ye ihtiyacınız olacaktır.
- Ana sayfayı oluşturmak için home.php kullanılır.
- Single.php dosyası sitenin makalelerini görüntülemekten sorumludur. Eğer böyle bir dosyanız yoksa index.php işlevini yerine getirecektir.
- page.php dosyası ayrıca sitenin ayrı sayfalarını oluşturur.
- Yazar hakkında bilgi görüntülemek için Author.php'ye ihtiyacınız olacak.
- Kategoriler için Category.php sorumludur.
- Arşivlerin gösterimi, tarih ve arama sırasıyla arşiv.php, date.php ve search.php dosyaları ile yapılır.
- Sitenizin benzersiz bir 404 hata sayfası göstermesi için 404.php'nizi eklemeniz gerekecek.
- Sitenin üst ve alt kısımları sırasıyla header.php ve footer.php dosyaları tarafından oluşturulur.
Sıfırdan manuel olarak benzersiz bir tema oluşturma
İlk önce uygun şablonu yüklemeniz gerekir. Hem wordpress.org resmi sitesinde hem de başka herhangi bir yerde bulunabilir. Resmi siteyi kullanmanız önerilir, çünkü herhangi bir üçüncü taraf sitesi kötü amaçlı dosyalar ve bozuk bağlantılar içerebilir.
Seçiminizi yaptıktan sonra arşivi indirmeye başlayabilirsiniz. İşlemin sonunda, paketi açmanız ve dosyaları belirli site klasörlerine yüklemeniz gerekecektir (arşiv genellikle küçük bir talimat içerir). İndirme, FileZilla programı kullanılarak veya bu seçeneği destekliyorsa doğrudan barındırmadan yapılabilir. Şimdi "Temalar" bölümüne gitmeniz, indirdiğinizi seçmeniz ve "Etkinleştir" düğmesini tıklamanız yeterlidir.
Ayrıca doğrudan WordPress yönetici panelinden de seçebilirsiniz. Bu durumda, indirmenize gerek yoktur. Yalnızca "Yükle" düğmesini ve ardından "Etkinleştir" düğmesini tıklamanız gerekir. Kurulumdan önce bir önizleme yapılması önerilir.
Artık tema etkinleştirildiğine göre, benzersizliğine geçebilirsiniz. İlk adım, sitenin üstünü (başlık) düşünmektir. Bu, ziyaretçilerinizin dikkatini çekecek ilk şeydir, bu yüzden onu sorumlu bir şekilde almalısınız. Tipik olarak başlık, site adı, logosu ve içerikle ilgili kısa bilgilerden oluşur. Başlık herhangi bir grafik düzenleyicide oluşturulabilir. Standart Paint'te bile. Daha ileri düzey tasarımcılar Adobe Photoshop kullanır.
Site adı kısa ve akılda kalıcı olmalıdır. Adobe Photoshop'ta bunun için birçok farklı stil seçebilirsiniz. Logo oluştururken farklı şekillere ihtiyacınız olabilir. Adobe Photoshop'un resmi web sitesinden indirilebilirler.
Bir grafik düzenleyicide başlık çizimi yaptıktan sonra sitenize yüklemeniz gerekecektir. İndirme işlemi tamamlandığında, resmin sağ tarafında kopyalamanız gereken bir URL belirecektir. Ardından "Editör" bölümüne gitmeniz ve başlığı (header.php) oluşturmaktan sorumlu dosyayı seçmeniz gerekecektir. İçinde, mevcut resmin URL'sini bulmanız ve başlık resmini yüklerken aldığınız URL ile değiştirmeniz gerekecektir. Bundan sonra dosyayı güncellemeniz gerekecek. Şimdi başlığın görüntüsünü kontrol etmeye geçebiliriz.
Başlığınız standart olanla aynı parametrelere sahip değilse, bunlar header.php içinde ayarlanabilir. Genişlik, genişlik özniteliği tarafından kontrol edilir ve yükseklik, yükseklik özniteliği tarafından kontrol edilir. Ayar piksel ve yüzde olarak yapılabilir. Bu nedenle, yalnızca başlığı uzatmak istiyorsanız, %100'e ayarlayın.
İstenirse wordpress sitesinin sayfalarına başlıkta aktif linkler ekleyebilirsiniz. Bu, çeşitli hizmetler kullanılarak yapılabilir. İnternette onlardan bolca var. Çoğu aynı prensipte çalışır. Bağlantı için ayrılacak olan başlığın istediğiniz alanını daire içine alın ve servis size istediğiniz kodu verecektir. Daha sonra bu kodu header.php dosyasına eklemeniz gerekecek. Eklerken dikkatli olun. Her nokta önemlidir. Kodu yanlış yere eklerseniz, başlıkta aktif bağlantılar görünmez.
Standart üstbilgiyi değiştirdikten sonra, standart wordpress site arka planı, widget'lar, gezinme, alt (altbilgi) ve wordpress sitesinin diğer bileşenlerini değiştirmeye başlayabilirsiniz. Ayrıca herhangi bir grafik düzenleyicide çizilebilir ve siteye resim olarak yüklenebilirler.
Ne zaman parlak olmaması gerektiğini düşünmelisin. Çoğu web yöneticisi beyaz bir arka plan kullanmayı tercih eder. Göze zarar vermez ve ana içerikten uzaklaşmaz.
Sıfırdan kaliteli bir gezinme oluşturmak için etiketler hakkında biraz bilgi sahibi olmanız gerekir.
Altın Numaralar Güzel bir telefon numarası nasıl satılır
Kripto para madenciliği: basit kelimelerle nedir
En iyi dizüstü bilgisayar işletim sistemi: Eksiksiz inceleme
Sınıf arkadaşlarından müzik indirmek için programlar Sosyal ağ sınıf arkadaşlarından üzücü bir şarkı indirin
Yandex tarayıcısının mobil versiyonu