Wp Tema Yapımı Ders 3 {HTML Yapısını Oluşturma}

tema yapmak Ders 3

Giriş dersinin ve Tema/Şablon yapısının anlatımının ardından artık ete kemiğe bürünmüş bir wordpress temasını oluşturmaya başlayabiliriz. Öncelikle eğer hiç HTML bilginiz yok ise biraz edinin derim. Basit HTML yapısını bilmek çok işinize yarayacaktır.

 

Derse başlamadan önce küçük bir öneri vereyim; class ve ID atamaları yaparken sürekli kullanılan ve artık neredeyse her temada aynı olan classları kullanmak yerine kendi classlarınızı oluşturun. Örneğin class=”sidebar” şeklinde yazmak yerine class=”widget-area” şeklinde yazarsanız eğer temanızın özgünlüğünü sağlamış olursunuz. Ayrıca gereksiz yere span ve div gibi etiketleri kullanmak yerine, span class=”heading” ve span class=”content” gibi, h1 ve p etiketlerini kullanmaya özen gösterin. Gereksiz yere kullanılan span ve div etiketleri kod kalabalığına sebep olur ve SEO açısından hiç de iyi değildir.

HTML Yapısı

<html>
<head>
</head>

<body>
<div id="wrapper" class="hfeed">
    <div id="header">
        <div id="masthead">

            <div id="branding">
            </div><!-- #branding -->

            <div id="access">
            </div><!-- #access -->

        </div><!-- #masthead -->
    </div><!-- #header -->

    <div id="main">
        <div id="container">

            <div id="content">
            </div><!-- #content -->

        </div><!-- #container -->

        <div id="primary" class="widget-area">
        </div><!-- #primary .widget-area -->

        <div id="secondary" class="widget-area">
        </div><!-- #secondary -->
    </div><!-- #main -->

    <div id="footer">
        <div id="colophon">

            <div id="site-info">
            </div><!-- #site-info -->

        </div><!-- #colophon -->
    </div><!-- #footer -->
</div><!-- #wrapper -->
</body>
</html>

Bu html yapısını kaydetmek isteyebilirsiniz çünkü ileride çok kullanacağız.

HMTL Kodunda Bir Tur

HTML kodunu gördüğümüze göre artık hangi kodu nerede kullanacağımıza bir göz atalım.  Sayfanın en başında html ve ardından da head etiketlerini kullandık. HTML etiketi bu sayfanın HTML olarak okunması gerektiğini ifade eder. HEAD etiketi ise, tarayıcıya ve arama motorlarına site başlığı, site açıklaması, etiketler, java kodları, jquery kodları, css dosyasının konumu gibi bir çok bilgiyi sunar. HEAD etiketi olmadan sitenizdeki hiçbir tassarım kullanıcıya ulaşamaz.

İkinci olarak wrapper etiketi kullandık. Bu etiket sayfayı nereye kadar kısıtlayacağımızı gösterir. Biz bu etiketimize hfeed özelliği ekledik ki bu da sayfamıza giren makinelere bizim bir “syndicated content” yayınladığımızı gösterir (blog sayfaları gibi). hfeed microformat şemasının bir parçasıdır.

Seoya uygun kodlama yapabilmek istiyorsanız eğer microformat şemasına göz gezdirmenizde yarar var.
Div yapısına bakıldığında fazla ve gereksiz divlerden kaçınıldı. Böylece anlamlı ve sade bir html yapısı oluşturuldu. Bu yapının içerisini sonraki bölümlerde doldurmaya başlayacağız.

Widget bölümlerine baktığınızda 2 adet widget bölümü gözüküyor. Bu widgetlar container divinin içerisinde fakat içerikten sonra gelmekte. Bu şekilde bizim içeriğimiz arama motorlarına widgetlardan önce gözükecektir. 2 adet widget bölümünün olması bize 3 kolonlu bir tasarım oluşturabilmemiz için gerekli bir adım. Css dosyasına 2-3 satırlık bir kod ekleme işlemiyle bunu başarabileceğiz.

Facebook Profile photo

#r00tadmin #Basit Bir kuL #Allah (c.c) Bir kuLu işte bazen bir adem bazen bir aLem !

1 thought on “Wp Tema Yapımı Ders 3 {HTML Yapısını Oluşturma}

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir