• Word'de şablonlar nasıl oluşturulur. HTML düzeninden wordpress şablon düzeni

    Diyelim ki Powerpoint'te yeni ve şimdiye kadar boş bir sunum açtık. Ve ne görüyoruz?

    Ve her seferinde yeniden yapılandırılması gereken kurumsal renkleriniz ve yazı tipleriniz var. Şablon, bunu bir kez ve ömür boyu yapmanıza izin verecektir.

    Ve sunumunuzdaki 1. slayt, daha fazla çaba harcamadan otomatik olarak HER ZAMAN böyle görünecektir.


    Şablon şunları içerir:

    • Renkler
    • yazı tipleri
    • Yer tutucular (metin, resim, grafik vb. eklediğimiz bölümler)

    Aşağıda, Powerpoint'te kendi şablonunuzu oluşturmak için adım adım talimatlar bulacaksınız.

    1. Oluştur yeni dosya PowerPoint'te.

    2. İçinde seçin üst menü Asıl Slayt Görünümü sekmesinde.


    Solda standart bir asıl slayt görünecektir.

    Çalışacağımız şey bu. Ve standarttan standart dışı yapacağız.

    3. İstediğiniz yazı tipi temasını seçin veya yeni bir tema oluşturun.

    Yazı tipi teması, sununuzda kullandığınız yazı tipleridir. İnan bana, Calibri'den başkaları da var. iyi yazı tipleri. Bunları yalnızca 1 kez belirtin ve tüm sunumda veya şablonda otomatik olarak değiştirilecektir.


    4. İstediğiniz arka planı seçin (renk veya desen). Aynı anda tüm slaytlar için veya özel bir slayt için aynı arka planı seçebilirsiniz.

    5. Gördüğümüz gibi solda metin konumu, başlık vb. için birçok seçenek var. Ama ya var olmayan birine ihtiyacımız olursa? Örneğin, altyazılı 3 fotoğrafa sahip olmak.


    O zaman Insert Layout + Insert Placeholder fonksiyonu bize yardımcı olacaktır.

    "Düzen Ekle" ye tıkladıktan sonra boş bir slayt oluşturulur. Ve istediğimiz gibi doldurabiliriz.


    7. Şimdi yeni bir slayt oluşturacaksak şablonumuzdan seçenekleri görüyoruz.

    8. Oluştur yeni sunum ve deseninizi "kaybettiniz" mi? Tasarım sekmesine gidin ve orada arayın.

    WordPress'in stil sayfasında bulunması gereken bazı sınıflar oluşturduğunu unutmayın. Örneğin sınıflar hizalamamerkez, hizalamaleft ve hizalamasağ görüntüleri hizalamak için kullanılır ve blok elemanları ve stil sayfanıza dahil edilmeleri gerekir (varsayılan temanın stil sayfasından kopyalanabilir):


    .Merkezi hizalama,
    div.aligncenter(
    Ekran bloğu;
    sol kenar boşluğu: otomatik;
    sağ kenar boşluğu: otomatik;
    }
    .sola hizalamak(
    kayan nokta: sol;
    }
    .hizalama(
    Sağa çık;
    }

    Aşağıdaki sınıflar, alt yazıları olan görüntüleri hizalamak için kullanılır (varsayılan temadan kopyalanabilir, gerekirse daha sonra düzeltilebilir):


    .wp başlığı(
    kenarlık: 1 piksel katı #ddd;
    metin hizalama: merkez;
    arka plan rengi: #f3f3f3;
    dolgu üst: 4 piksel
    kenar boşluğu: 10 piksel
    /* yapacak isteğe bağlı parametreler yuvarlatılmış köşeler desteklenen tarayıcılarda*/
    -moz-sınır yarıçapı: 3px;
    -khtml-sınır yarıçapı: 3 piksel;
    -webkit-sınır yarıçapı: 3 piksel;
    sınır yarıçapı: 3 piksel
    }
    .wp-altyazı img (
    kenar boşluğu: 0;
    dolgu: 0;
    kenarlık: 0
    }
    .wp-caption p.wp-caption-text (
    yazı tipi boyutu: 11 piksel;
    satır yüksekliği: 17px;
    dolgu: 0 4 piksel 5 piksel;
    kenar boşluğu: 0;
    }

    Ek olarak, stil sayfasında açıklanması gerekmeyen birkaç WordPress sınıfı daha vardır. WordPress bunları kullanarak sayfalar oluşturur, siz de bunları şekillendirebilirsiniz:


    .kategoriler(...)
    .cat-item /* Bu sınıf tüm kategorilere atanmıştır */)
    .current-cat (/* geçerli kategori stili */)
    .current-cat-parent (/* geçerli kategorinin ebeveyn(ler)i için stil */)
    .children (/* çocuk için sınıf */)
    .pagenav (/* sayfada gezinme */)
    .page_item (/* herhangi bir liste öğesi */)
    .current_page_item (/* bu sınıf, sayfa listesinde geçerli etkin sayfaya atanır */)
    .current_page_parent (/* geçerli sayfanın üst sayfası için sınıf */)
    .current_page_ancestor (/* herhangi bir sayfa üst seviyeler bununla ilgili olarak */)
    .widget (/* tüm widget'lar bu sınıfa sarılmıştır */)

    Düzen sürecinde, makalenin başındaki ekran görüntülerinde tanımlandığı gibi, onlar için bloklar ve stiller kullanın. Bu gerekli değildir, ancak oldukça arzu edilir.

    Örneğin, gelecekte arama formunu siteye özel olarak bağlayacağız. wordpress etiketi , wordpress'in aşağıdaki formu oluşturmasına neden oluyor:

    Bu nedenle, temayı düzenlerken bunu dikkate alıyoruz.

    Ve style.css dosyasına eklemeniz gereken son şey, kendiniz ve oluşturulan tema hakkında bilgilerdir. Bilgiler dosyanın başına yorumlarda yerleştirilmiştir:

    /*
    Tema Adı: Benzersiz bir tema adı bulun
    Tema URI'si: http://theme-home-page-link
    Açıklama: Temanın açıklaması
    Yazar: Konu yazarı
    Yazar URI'si: http://link-to-writer-page
    Şablon: ata-tema-adı
    Etiketler: tema etiketleri - yalnızca wordpress.org tarafından sunulan listeden
    sürüm: sürüm
    Peki, işte lisansın metni
    */

    yapmayı da unutma ekran görüntüsü.png ve şablonun bulunduğu klasöre (kökte) koyun. Stil sayfasına bu şekilde yerleştirilen bilgiler, yönetici panelindeki bölümde görüntülenecektir. "temaları" yönet. Oluşturulan şablonu tarayıcılarda test ediyoruz, her şey yolundaysa daha ileri gidebilirsiniz.

    Oluşturulan şablonun sayfalarının kodlarını vermeyeceğim çünkü yeterince büyük, sadece indirin, sonra onunla çalışacağız.

    wp teması nasıl çalışır:

    Varsayılan tema klasörünü (wp-content/themes/default) açarsanız, birçok PHP dosyası (tema dosyası) ve bir style.css dosyası göreceksiniz. Bir blog görüntülediğimizde, WP tema dosyalarını içerir (index.php<

    Bu, ön hazırlığı tamamlar ve mevcut kaynak materyalden bir tema oluşturmaya geçebiliriz.

    Aşama 1:
    İlk olarak, WordPress tema dizininde (wp-content/themes), temamızın adıyla bir klasör oluşturun. Bırak olsun ruseller_lessons. Ardından varsayılan tema klasöründen (wp-content/themes/default) dosyaları kopyalayın yorumlar.php, arama.php Ve 404.php tema klasörümüze. Bu dosyalar blogdaki yorumlardan ve aramalardan sorumludur. Daha sonra ruseller_lessons stil sayfasını kopyala stil.css bizim şablonumuz ekran görüntüsü.png (300x225) ve klasör Görüntüler.

    Şimdi şablonumuzun dosyalarının "kesilmesi" gerekiyor, yani. altbilgi, kenar çubuğu ve üstbilgiyi ayrı dosyalara çıkarın. Diyagram, dosyanın basitleştirilmiş bir görünümünü gösterir index.php keseceğimiz işaretlerle:

    Adım 2 - Başlık.php
    Açığız index.html ve yorumdan önce her şeyi kesin, yeni bir dosya oluştur başlık.php ve kesme kodunu içine yapıştırın, temamızın dizinine kaydedin ruseller_lessons:






    index.html






    Şimdi varsayılan temaya sahip klasöre gidin, açın başlık.php ve etiketleri oradan kopyalayın , <link>, <h1>, Ve <div class=description> </b> ve onları karşılık gelen satırlarla değiştirin. <b>başlık.php</b>.</p> <p>Sonra tüm etiketler <li>bulunan <b>kimlik = "nav"</b>(blogun üst kısmındaki sayfaların listesi) bir wordpress işlevi ile değiştirildi</p> <p><b> <?php wp_list_pages("sort_column=menu_order&depth=1&title_li=");?> </b></p> <p>Sonuç olarak, şunu elde ederiz:</p><p> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br> <html xmlns="http://www.w3.org/1999/xhtml"><br> <head><br> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br> <title><?php wp_title("«", true, "right"); ?> <?php bloginfo("name"); ?>
    "type="text/css" ortam="ekran" />
    " />





    Adım 3 - Sidebar.php
    index.htm dosyasına geri dönelim. Her şeyden önce, arama formunun tamamını sileriz, ardından ondan her şeyi keseriz.

    Devamını oku: