nagradzam tutoriale

  • Oryginalny blog na Wordpressie? Zrób go sam! cz.1

    dodano 05.12.2007 / komentarzy: 0 / autor: agressiva

    Artykuł ten został stworzony dla tych osób, które posiadają już jakąś wiedzę z zakresu konstrukcji stron www, wiedzą co to jest (x)html / CSS i potrafią się nim biegle posługiwać. Dodatkowym atutem przy projektowaniu theme do WP jest umiejetność tworzenia grafiki w programach specjalistycznych, np. Adobe Photoshop, dzięki temu nasz blog przybierze oryginalnego i unikalnego wygladu, który odzwierciedlać może naturę autora bloga.

    Opracowując każdy opisany krok zobaczysz jakie tak naprawdę Wordpress ma możliwości i własciwie w prostu sposób samemu dodawać i modyfikować poszczególne elementy bloga czy też strony. Samodzielnie tworząc skórę do Wordpressa jesteśmy w stanie dopasować jej funkcjonalność do naszych potrzeb, nie korzystając przy tym z gotowych projektów.

    Najważniejsze informacje dotyczące cms Wordpress

    Wiele osób słysząc pojęcie Wordpress od razu kojarzy je z blogami, banalnymi pod względem wyglądu i funkcjonalności stronami prowadzonymi przez osoby, które chcą powiedzieć coś światu. Tego typu poglady o cms Wordpress są wg mnie błędne. Bliżej poznając ten system, bardzo szybko można zmienić zdanie. Aby jednak tak się stało trzeba się przekonać na własnej skórze (poza tym , że blogowej to też cielesnej) jak działąją poszczególne elementy i do ilu funkcji mogą służyć.

    Pierwsza oficjalna wersja Wordpressa powstała w 2003, od tego czasu współzałożyciele projektu, czyli Ryan Boren, Matt Mullenweg oraz Mike Little na bieżąco aktualizują system wypuszczając do użytku publicznego coraz to nowe wersje posiadające bardziej zaawansowane funkcje. Ciekawostką jest to, że nazwy kolejnych pełnych wersji WP pochodzą od nazwisk muzyków jazzowych, np. Duke, Ronan, Ella, Getz, itd.

    Istnieje również WP MU, który umozliwia obsługę większej ilości webblogów na tej samej bazie SQL.

    Jak to działa?

    System skórek do Wordpressa oparty jest na szablonach oraz stylach CSS.
    W skład każdej skóry wchodzi kilka podstawowych plików, które decydują o strukturze podstron na blogu, stronie głównej oraz wyglądzie wpisów (o tych plikach bliżej powiem w dalszej części).

    W systemie Wordpress rozróżniamy coś takiego jak strony, wpisy i listę wpisów.

    Krok po kroku, czyli jak od zera zaprojektować własną skórę do Wordpressa

    Pierwszym ważnym krokiem jest zaprojektowanie szaty graficznej. Należy dokładnie zaplanować jakie elementy w jakim miejscu mają być wyświetlane, pamiętając przy tym, że na standardowym blogu mogą pojawić się kategorie wpisów, archiwum, do tego za pomocą różnych wtyczek (plugins) można dodać pozycję ostatnich komentarzy, ostatnich wpisów itd. W związku z tym najlepiej przygotować się na ewentualność dodawania czegoś z czasem bez potrzeby modyfikowania szaty graficznej.

    Kiedy grafika już jest precyzyjnie dopracowana i przemyślana przechodzimy do cięcia oraz kodowania szablonu (xhtml/css). Opierając się o własne doświadczenie mogę polecić zakodowanie strony głównej w jednym pliku na sam początek, bo później i tak będziemy dokonywali na podstawie tego pliku kilka operacji.

    Więcej o kodowaniu stron www dowiecie się czytając tutorial temu poświęcony.

    Żeby zobrazować jak powinno wyglądać wstępne kodowanie zaprojektowanej strony głównej zapraszam na stronę demo,

    Jest to bardzo prosty i standardowy szablon autorski, który posłuży nam jako przykład tworzenia theme do Wordpressa. Wstępnie kodowanie zostało zapisane w zupełnie niezależym pliku html, aby później mieć ułatwiony do niego dostęp.

    Kod mojego autorstwa wyglada następująco:

    * {
            padding:0;
            margin:0;
            }
    img {
            border:0;
            }
    body {
            text-align:center;
            background:#FDFDFD;
            }
    #page {
            width:100%;
            font:11px Verdana, Arial, Helvetica, sans-serif;
            color:#333333;
            margin:0 auto;
            }
    #head {
            background:url(images/head.jpg) no-repeat;
            width:721px;
            height:343px;
            margin:0 auto;
            }
    #main {
            width:721px;
            margin:0 auto;
            text-align:justify;
            padding:20px 0 0 0;
            }
    #lewo {
            float:left;
            width:250px;
            margin:0 0 20px 0;
            }
    #box {
            width:233px;
            }

    #box_top {
            background:url(images/box_top.jpg) no-repeat;
            width:233px;
            height:14px;
            }
    #box_text {
            background:url(images/box_bg.jpg) repeat-y;
            width:190px;
            padding:10px 25px 5px 20px;
            }
    #box_text h2 {
            font:14px Arial, Helvetica, sans-serif;
            color:#DD0000;
            font-weight:bold;
            margin:0 0 5px 0;
            letter-spacing:1px;
            }
    #box_text ul {
            list-style-type:none;
            margin:0 0 5px 5px;
            }
    #box_text ul li a {
            line-height:16px;
            color:#333333;
            text-decoration:none;
            }
    #box_text ul li a:hover {
            line-height:16px;
            color:#DD0000;
            text-decoration:none;
            }

    #box_bottom {
            background:url(images/box_bottom.jpg) no-repeat;
            width:233px;
            height:41px;
            }
    #prawo {
            float:right;
            width:460px;
            line-height:16px;
            margin:0 0 20px 0;
            }
    .tresc {
            margin:0 0 20px 0;
            }
    .tytul {
            color:#DD0000;
            font:16px Arial, Helvetica, sans-serif;
            font-weight:bold;
            margin:0 0 6px 0;
            border-bottom:2px solid #CCCCCC;
            border-top:1px solid #CCCCCC;
            padding:5px 0 5px 10px;
            }
    .dane {
            font-size:10px;
            margin:0 0 10px 0;
            padding:0 0 0 10px;
            }
    p {
            margin:0 0 8px 0;
            }
    #footer {
            width:100%;
            min-height:50px;
            border-top:solid 2px #333333;
            clear:both;
            }
    .footer {
            padding:10px 0 0 0;
            }
    .red {
            color:#DD0000;
            }
    #footer img {
            margin:5px 0 0 0;
            }

    oraz xHTML

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>vivee - skóra do wp</title>
    </head>

    <body>
    <div id="page">

    <!– nagłówek – header.php –>
    <div id="head"></div>

    <!– zawartość strony, część lewa i prawa –>
    <div id="main">

    <!– lewa kolumna strony – sidebar.php –>
    <div id="lewo">

    <!– box a’la polaroid - menu –>
    <div id="box">
    <div id="box_top"></div>
    <div id="box_text">
    <h2>Kategorie</h2>
    <ul>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    </ul>
    <h2>Archiwum</h2>
    <ul>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    </ul>
    <h2>Blogroll</h2>
    <ul>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    </ul>
    <h2>Inne</h2>
    <ul>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    <li><a href="#">Lorem ipsum dolor sit amet</a></li>
    </ul>

    </div>
    <div id="box_bottom"></div>
    </div>

    </div>

    <!– prawa część strony z wpisami –>
    <div id="prawo">

    <!– div w którym znajduje się treść i pozostałe elementy pojedynczego wpisu – index.php, archive.php, single.php –>
    <div class="tresc">
    <!– tytuł wpisu –>
    <h1 class="tytul">Jakiś› tytuł‚ wpisu</h1>
    <!– dane o publikacji, kategorii i komentarzach –>
    <div class="dane"><span class="red">Opublikowany:</span> 02.02.02 | <span class="red">Kategoria:</span> Ciekawostki | 2 <span class="red">komentarze</span></div>
    <p>Zawartość wpisu</p>
    Curabitur sollicitudin leo non neque. Fusce neque diam, porta non, hendrerit vitae, pharetra eget, enim. Phasellus tellus felis, consectetuer vel, sollicitudin ut, tincidunt tincidunt, orci. Curabitur volutpat nisi euismod enim. Mauris rutrum semper metus. Quisque neque nisi, tincidunt a, dictum sit amet, eleifend vitae, risus. In sapien turpis, condimentum a, fringilla in, pulvinar at, turpis. Maecenas vitae leo at nisl pellentesque gravida. Mauris viverra felis vitae felis. Proin porta tortor id diam. Nulla tempor quam non elit. Maecenas id tortor. Ut dictum fringilla quam. Proin sollicitudin. Quisque convallis lacus nec elit. Sed dapibus augue eget nisl. Fusce luctus. Donec tortor odio, malesuada non, tincidunt nec, pharetra sed, felis. Nunc eu dolor. Integer vel sem ut nisl consectetuer congue.

    In vehicula. Pellentesque lectus. Donec sollicitudin mauris eu dolor. Phasellus eu turpis nec augue varius aliquam. Sed sit amet orci id mauris consectetuer gravida. Nullam in lacus sit amet metus ornare hendrerit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut tincidunt blandit dolor. Praesent lacus. Integer tortor dui, posuere sit amet, venenatis nec, tristique non, metus.
    </div>
    </div>
    <!– koniec main – koniec części decydującej o wyświetlaniu zawartości wpisów –>
    </div>

    <!– stopka strony – footer.php –>
    <div id="footer">
    <div class="footer">Page created by <strong>Water Design</strong> special for <strong>viv<span class="red">ee</span>.info</strong></div>
    <a href="http://wordpress.org"><img src="http://wordpress.org/about/images/wp-button-4.gif" alt="wordpress" /></a>
    </div>

    </div>
    </body>
    </html>

    Pamietajcie, że nawet ten wstępny szablon strony głównej musi poprawnie wyświetlać się w każdej przeglądarce (Opera, Firefox, IE, Safari), jeżeli na samym początku zostanie wszystko dobrze przygotowane to uniknie się dodatkowych problemów w późniejszych etapach.

    Napisz komentarz