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 !

One Reply to “Wp Tema Yap─▒m─▒ Ders 3 {HTML Yap─▒s─▒n─▒ Olu┼čturma}”

Leave a Comment

E-posta hesab─▒n─▒z yay─▒mlanmayacak. Gerekli alanlar * ile i┼čaretlenmi┼člerdir