• Ogłoszenie:

Wordpress - własny szablon na bloga

Poradniki związane z tworzeniem i prowadzeniem stron www.

Wordpress - własny szablon na bloga

Postprzez muraju 03 Sty 2011, 17:08

reklama
------------------------------------------------------------------------------------------------------------------------------
Wordpress - własny szablon na bloga
------------------------------------------------------------------------------------------------------------------------------
Image
Zdjęcie pochodzi z seojeff.com

Wstęp

W dzisiejszych czasach blog nie kojarzy się już tylko z nastolatkami i ich problemami. Od jakiegoś czasu, skupia grono ekspertów z konkretnych dziedzin. Na blogi jest prawdziwy boom, jest to hobby, sposób na życie i zarobki. Jeżeli jesteś w czymś dobry możesz otworzyć bloga o swojej specjalizacji. W internecie możemy znaleźć wiele wyspecjalizowanych blogów, czasami są tak rozbudowane, że nawet nie wiemy, że to blog. A wszystko kręci się wokół jednej platformy - WORDPRESS. Ogromne wsparcie, fancluby, masa wtyczek i oczywiście THEMÓW.

Czym jest theme dla wordpress ? To po prostu skórka, motyw graficzny na bloga. Możesz użyć tych dostępnych w sieci, możesz zmodyfikować domyślny styl ale możesz też ... stworzyć własny motyw dla wordpress. Chcesz aby twój blog się wyróżniał ? Nie znalazłeś żadnego fajnego motywu, który by ci się spodobał ? Cóż może czas zadbać o to i stworzyć własny !

Dobrze będzie dla ciebie jeżeli znasz się trochę na grafice, możesz też zlecić wykonanie grafiki, komuś, kto jest większym artystą niż ty. Konieczna jest znajomość html/css, który jest banalny i możesz się nauczyć za darmo na http://www.kurshtml.boo.pl/ oraz http://kurs.browsehappy.pl/. Dobra wiadomość jest taka, że nie musisz znać PHP.

Poradnik ten jest oparty na moim ponad 2 letnim doświadczeniu webmastera. Wszystkie screeny są mojego autorstwa. Jeżeli chciałbyś go skopiować, koniecznie umieść link zwrotny do tego poradnika wraz z nazwą autora.

Zobacz już teraz DEMO szablonu na żywo !

Do dzieła !


Faza I - wszystko zaczyna się od projektu graficznego
Faza II - tniemy i kodujemy layout do html/css
Faza III - podpinamy szablon pod wordpressa

Pochwały przyznane za posta: 6
Awatar użytkownika
muraju
~user
 
Posty: 447
Dołączenie: 26 Gru 2005, 20:55
Pochwały: 20



Wordpress - własny szablon na bloga

Postprzez muraju 19 Sty 2011, 00:08

Faza I - wszystko zaczyna się od projektu graficznego

Nie będę zagłębiał się tu w szczegóły, nie będziemy rozmawiać też tu o tworzeniu grafiki. Chciałbym jednak przekazać ci kilka cennych uwag.
Projektując layout na bloga, musimy wziąć pod uwagę jak będzie wyglądała strona główna bloga, oraz strona z pojedynczym wpisem i komentarzami (przy czym można się też pokusić o odmienny wygląd stron statycznych, strony z wynikami wyszukiwania ... ale zazwyczaj chodzi tu o te 2 strony).

Jak to wygląda u mnie ?

ImageImage

Nie ma szału ale prostota przede wszystkim. To co charakteryzuje ten motyw to czytelność. Każdy motyw powinien być czytelny, czytelnik intuicyjnie powinien wiedzieć gdzie co jest.

Motyw ten rzeczywiście jest prosty, jednak miły dla oka. Dlaczego ? Otóż wybrałem dominujące kolory z programosów niebieski i zielony, jak widzisz przeplatają się przez całą stronę. Jedną z podstawowych rzeczy jest wybranie określonych kolorów jakie będą używane na stronie, zazwyczaj są to 2-3 kolory główne i kilka pomocniczych. Wszystko jednak musi ze sobą współgrać. Dlatego tutaj wchodzi kolejne pojęcie - paleta kolorów. Na stronie http://kuler.adobe.com/ możesz znaleźć gotową paletę, możesz też stworzyć ją sam (Create w menu).

Jeżeli nie znasz ciekawych efektów w swoim programie graficznym, nie martw się. Dzięki samemu CSS możesz zrobić fajny motyw. Mój jest praktycznie w całości zbudowany w CSS. Z grafiki wyciąłem tutaj tylko logo, ikony i markery listy. Poza tym, w sieci jest mnóstwo tutorialów, dzięki którym możesz się nauczyć jak zbudować fajny theme.

Następną rzeczą są fonty. Dobieraj je rozważnie. W treści postów zawsze używaj standardowych fontów jak arial, verdana czy tahoma. Jest to bezpieczny zestaw, który ma każdy internauta. Poza tym, niestandardowe fonty trochę spowalniają stronę, dlatego wyświetlanie nimi każdego tekstu mogło by spoooowooolniiić czas ładowania twojego bloga. Możesz za to używać w nagłówkach, w logo i innych statycznych miejscach, jak najbardziej. Ja użyłem niestandardowej czcionki dla tytułów widgetów, nie musiałem ich jednak wycinać jako statyczne obrazki z projektu, fonty zakodowałem w projekcie dzięki wspaniałemu dodatkowi cufon, ale o tym później. Gdzie znaleźć fajne fonty ? Polecam http://www.dafont.com/

Inspiracji do zaprojektowania motywu możesz poszukać w sieci, polecam http://www.deviantart.com/ (szukaj: wordpress). W kwestii projektowania jest jeszcze jedna ważna rzecz. Musisz wiedzieć, gdzie każdy element ma być położony. Możesz wykonać na kartce szkic swojej strony, na pewno ułatwi ci później jego wypełnianie 'efektami' w photoshopie/gimpie.

Pamiętaj, że im więcej czasu spędzisz w programie graficznym na dopieszczaniu szczegółów layoutu, tym mniej czasu spędzisz później na jego kodowaniu.

Podsumowanie:
1. Zacznij od ołówka i kartki papieru, tam zaprojektuj jak będzie wyglądał twój szablon, gdzie będą ustawione bloki, widgety itp.
2. Czytelność jest ważna, zadbaj o to aby użytkownik nie zamyślał się "gdzie co jest" oraz "co to jest"
3. Nie przesadzaj ze zbyt dużą ilością różnych kolorów. Możesz skorzystać z gotowych palet lub stworzyć własną - http://kuler.adobe.com/
4. Nie musisz być super grafikiem aby stworzyć niesamowity motyw. W sieci jest mnóstwo tutoriali, większość znanych blogów stosuje minimalizm
5. Dobieraj fonty rozważnie, niestandardowych używaj tylko w nagłówkach itp. Strona z fontami: http://www.dafont.com/
6. Szukaj inspiracji w sieci. Polecam http://www.deviantart.com/ oraz strony z tutorialami takie jak http://www.pixel2life.com czy http://www.tutorialized.com
"Wczoraj do ciebie nie należy. Jutro niepewne... Tylko dziś jest twoje."
Awatar użytkownika
muraju
~user
 
Posty: 447
Dołączenie: 26 Gru 2005, 20:55
Pochwały: 20



Wordpress - własny szablon na bloga

Postprzez muraju 19 Sty 2011, 00:10

Faza II - tniemy i kodujemy layout do html/css

CZĘŚĆ I - pocięcie potrzebnej grafiki w programie graficznym

W moim przykładzie do zbudowania projektu graficznego użyłem photoshopa. Aby móc pociąć layout, musi być on zbudowany na warstwach, jeżeli ktoś je scali, pocięcie takiej grafiki będzie bardzo trudne albo nie możliwe.
Z projektu wytnę tylko niezbędne elementy, które przydadzą mi się do zakodowania, reszta to CSS i trochę magii :)

Zaczynam od góry, od logo.
Wybieram narzędzie do cięcia na plasterki (slice tool) i zaznaczam logo.

Image

Zazwyczaj od razu zmieniam nazwę plasterka, który będzie zapisany jako nazwa_plasterka.png.
Kliknij w zaznaczony punkt na screenie aby zmienić nazwę.

Image

Aby zapisać nasz plasterek jako grafikę wybierz Plik -> Zapisz dla Internetu i urządzeń .... Pojawi się okno zapisu. Interesuje nas prawy panel, w którym możemy wybrać rodzaj kompresji. Standardem jest już zapis grafiki projektu w PNG.
Do normalnej, nieprzezroczystej grafiki, używam PNG8 aby zaoszczędzić na wadze plików. W przypadku elementów przezroczystych i szczegółowych zdjęć, wybieram PNG24, zwłaszcza dla tych elementów z przezroczystym tłem a to dlatego, że IE kiepsko obsługuje przezroczystość w PNG8.

Image

Następną rzeczą jaką będę potrzebował są ikony z prawej strony.
Moje ikony mają cień, dlatego uważam aby znalazł się w całości wewnątrz zaznaczenia. W innym wypadku po zakodowaniu na stronie nie wyglądałoby to ładnie kiedy zamiast łagodnego przejścia, cień urywa się w połowie. Kiedy plasterek zostanie zaznaczony, wyłączam widoczność warstw znajdujących się pod ikonami, tak aby zostało przezroczyste tło (szaro biała kratka). Po zapisaniu, ikona będzie miała przezroczyste tło, o to nam chodzi, znacznie ułatwi to kodowanie.

Image

Jak mówiłem już wcześniej, dobrze jest użyć PNG24 do zapisu przezroczystości.

Image

Teraz zajmiemy się specyficznym tłem, które znajduje się za ikonami. Nie widziałeś go ? Diabeł tkwi w szczegółach, sprawdź na demo. Za ikonami znajduje się biała mgiełka, wykonana białym pędzlem ze zmienioną przezroczystością.
Najłatwiej zaznaczyć cały element wraz z tłem. Przy kodowaniu, całość nałoży się na tło nagłówka i menu, dlatego nie będzie też śladu.

Image

Pozostały nam już tylko zielony i niebieski marker, zaznaczyłem trochę więcej tła aby przy kodowaniu był bardziej wyśrodkowany.

Image

Podsumowanie części I
1. Wybierz Narzędzie Cięcie na plasterki (Slice tool) i zacznij zaznaczać potrzebne elementy layoutu.
2. Nie wycinaj elementów jednokolorowych, takich, których wygląd możesz uzyskać w CSS ustawiając kolorowe tło.
3. Obrazki zapisuj w PNG, PNG8 dla wszystkich prócz przezroczystych, dla tych zastosuj PNG24

CZĘŚĆ II - kodowanie do html/css

Kodując stronę, musimy mieć na uwadze tylko przeglądarki Firefox, Opera, Google Chrome, Safari, Internet explorer 7 i wyżej. Przy czym wystarczy, że sprawdzisz w Firefoxie, Operze, IE7 i 8, w pozostałych będzie podobnie, gdyż radzą sobie tak dobrze ze standardami jak ff,opera.
Pamiętaj też, że przenosząc stronę z projektu graficznego na realia przeglądarek, nigdy nie będzie ona wyglądać w każdej identycznie. Nie chodzi tu o dokładność pixel po pixelu. Jest to niemożliwe. Na szczęście nie rzuca się to w oczy i nie musisz się tym w ogóle martwić, aczkolwiek, występuje tu coś takiego jak "łagodna degradacja", która jest stosowana często w przeglądarkach IE. Pojawia się też w tym projekcie. Otóż w IE niemożliwe jest uzyskanie zaokrąglonych rogów elementu, tylko za pomocą CSS. Inne przeglądarki obsługują tą właściwość lub mają swoją. Dlatego ustawiając ją, w większości przeglądarek pola mojego formularza do wysyłania komentarzy, będą miały zaokrąglone rogi, w IE natomiast będą normalne. Ot cała filozofia, po prostu IE będzie pozbawiony tego efektu.

IE6 is DEAD
Nie wymieniłem IE6. Ups, dlaczego ? Ponieważ ta przeglądarka jest już martwa. Według ranking.pl używa jej mniej niż 3% internautów, głównie pracownicy w firmach, gdyż oprogramowanie, z którego korzystają zostało przystosowane do tej partykularnej przeglądarki i jak widać nikomu nie spieszy się o upgrade. Google, YouTube już dawno zaprzestały wspierania szóstki z racji wprowadzenia nowych funkcji.
Koszmar tej przeglądarki polegał na dość swobodnej interpretacji standardów, dlatego aby "zbliżyć" wyświetlanie do takiego jak np. w FF, trzeba było się nieźle napocić i przy okazji odkryć tajemną wiedzę na temat różnych hacków i obejść w CSS specjalnie dla IE. Siódemka też nie jest bez grzechów, jednak jest już znaczna poprawa i rzadko coś się posypie. W IE8 jest już wręcz oszałamiająco lepiej od poprzedników.
Wiem, że powinienem sobie odpuścić z IE6, być bardziej moralnym w celu ulepszenia świata i wywalenia tej przeglądarki na śmietnik. Znalazłem jednak ciekawe rozwiązanie, które nie wymaga ode mnie żadnego wysiłku i fixuje w CSS większość niedogodności, które produkują IE6 i 7. Co, gdzie, jak ? O tym dowiesz się w dalszej części.

Kodowania czas zacząć
Do pisania kodu, wykorzystuję darmowy program Notepad++, jest prosty w obsłudze, może nie ma od groma zbędnych funkcji jak w innych kombajnach, za to jest wygodny, szybki i posiada kilka ciekawych wtyczek (polecam QuickText).
Zaczynamy, nowy plik, index.html oraz style.css i do dzieła !

Struktura index.html i single.html

Kod: Zaznacz wszystko
<!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" xml:lang="pl" lang="pl">
<head>
   <title>Blog programosy.pl</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
    <meta name="description" content="Opis strony" />
   <link rel="Stylesheet" type="text/css" href="style.css" />
   <link rel="alternate" type="application/rss+xml"title="RSS" href="/>" />
   <link rel="alternate" type="application/atom+xml" title="Atom" href="/>" />
    <link rel="pingback" href="/" />
   <script type="text/javascript" src="js/cufon-yui.js"></script>
   <script type="text/javascript" src="js/Coolvetica_Rg_400.font.js"></script>
   <script type="text/javascript" src="js/cufon_replace.js"></script>
    <!--[if lt IE 8]><link rel="Stylesheet" type="text/css" href="ie.css" /><![endif]-->
</head>


1. Zaczynamy od struktury dokumentu. Na początek nagłówek naszego dokumentu html. Wybrałem deklaracje DOCTYPE XHTML 1.0 Strict, co znaczy, że będziemy się kurczowo trzymać standardów. Oddzielimy warstwę struktury (html) od warstwy prezentacji (css) i nie będzie tu takich kwiatków w kodzie jak align="left", które są zdeprecjonowane. Deklaracja ta jest kompatybilna z HTML 4.01 Strict, pomimo iż dokument wysyłany jest jako text/html )spójrz na znacznik meta z content-type) a nie application/xhtml+xml (Internet Explorer nie potrafi obsłużyć dokumentu wysyłanego jako xhtml), jest to dozwolone.

2. Ustawiłem kodowanie na UTF-8, uważam, jest on bardziej uniwersalny od ISO 8859-2, gdyż obejmuje wszystkie kodowania, poza tym jest to rozwiązanie przyszłościowe. Oczywiście wybór zależy do ciebie, chyba, że zamierzasz posługiwać się kilkoma językami na stronie, wtedy UTF.

3. Znaczniki meta description i keywords możesz wypełnić jeżeli chcesz. Aby jednak zwiększyć dostępność twojego bloga w wyszukiwarkach polecam zainstalować wtyczkę All in One SEO Pack, która automatycznie generuje meta tagi.

4. Wstawimy również szkielet relacji (<link rel=) do stron z rss/atom/pingback, które później dzięki funkcjom wordpress, zostaną odpowiednio wypełnione.

5. Między znacznikami <script> znajdują się skrypty javasript, które zostaną załączone do naszego dokumentu. W tym wypadku, są one odpowiedzialne za niestandardowe fonty, których użyjemy na naszej stronie w menu. Na razie nie musisz się nimi martwić, jeszcze bardziej cię uspokoję - znajomość javascript i tak nie będzie potrzebna, gdyż są to gotowce :)

4.Ostatnią rzeczą godną uwagi jest tutaj komentarz warunkowy, który widzi tylko Internet Explorer, zaczyna się od <!--[if lt IE 8]>, co oznacza, że zadziała dla IE mniejszych od wersji 8. W środku umieściłem link do alternatywnego arkusza css ie.css, który jest przeznaczony dla IE6/7, co w nim jest dowiesz się później, teraz to nieważne ;)

Kod: Zaznacz wszystko
<body>
   <div id="header">
      <h1><a href="/">Blog programosy.pl</a></h1>
      
      <ul id="nav">
         <li><a href="link1.html">home</a> | </li>
         <li><a href="link2.html">kontakt</a> | </li>
         <li><a href="http://www.programosy.pl">Programosy.pl</a></li>
      </ul>
      
      <ul id="social_media">
         <li><a id="rss" href="link1.html">rss</a></li>
         <li><a id="facebook" href="http://www.facebook.com">facebook</a></li>
         <li><a id="twitter" href="http://www.twitter.com">twitter</a></li>
         <li><a id="vimeo" href="http://www.vimeo.com">vimeo</a></li>
      </ul>
   </div>


1. Otwieramy główny kontener body i zaczynamy od bloku div id="header", który obejmuje nagłówek z logo, nawigacje i ikony z odnośnikami do RSS i naszych kont na portalach społecznościowych.

2. Menu budujemy na liście. ul id="social_media", czyli lista zawierająca nasz odnośniki do rss i portali społecznościowych, zwróć uwagę, że każdy link ma inny identyfikator. To dlatego, że każdy link reprezentuje inną ikonę, musimy przecież to jakoś ostylować później w CSS.

Kod: Zaznacz wszystko
<div id="content">
      <div class="post">
         <h2 class="title"><a href="/">XBOX360 - co powinien wiedzieć każdy właściciel</a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><a href="/">hardware</a>, <a href="/">php</a>, <a href="/">html</a><span class="break">|</span></li>
            <li><span>Tagi: </span> <a href="/">hardware, zasilacze</a>, <a href="/">php</a></li>            
         </ul>
         
         <img src="images/xbox.png" alt="Xbox360"/>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <a class="more_link">Czytaj więcej...</a>
         <ul class="post_info down">
            <li><span>Dodał: </span><a href="/">muraju</a><span class="break">|</span></li>   
            <li class="comments_number"><a href="/">26 komentarzy</a></li>      
            <li class="data">12 wrzesień 2010</li>         
         </ul>
      </div>


1. div id="content" będzie naszym pojemnikiem, zawierającym główną treść i nawigacje między postami.

2. div class="post" jest pojemnikiem, przechowującym pojedynczy post, będzie się powielał w zależności od liczby wyświetlanych postów na stronie.

3. ul class="post_info" zawiera informacje o poście takie jak kategoria, tagi, autor, data, liczba komentarzy. Zauważ, że dodałem pod nagłówkiem i na końcu posta, z tym, że zawiera różne informacje (klasa "down" dodaje inne style dla ostatniej listy)

4. a class="more-link" jest linkiem, który będzie nas przenosił do strony z pojedynczym postem. Klasa ta nie jest nazwana tak bez powodu, a to dlatego, ze wordpress domyślnie tak ją nazywa.


Kod: Zaznacz wszystko
<div id="post_nav">
         <div class="prev"><a href="/">&laquo; Starsze posty</a></div>
         <div class="next"><a href="/">Nowsze posty &raquo;</a></div>
      </div>
</div>


1. Ostatni pojemnik przed zamknięciem div id="content" (patrz drugi div zamykający na końcu), będzie zawierał linki nawigacyjne, które umożliwią nam przejście do starszych lub nowszych postów w zależności gdzie się znajdujemy. Wordpress umożliwia ustawienie liczby postów, które będą wyświetlane domyślnie na jednej stronie, po czym na końcu pojawia się link, który umożliwia przejście do starszych lub nowszych postów.

Kod: Zaznacz wszystko
<ul id="sidebar">
      <li class="widget_mysearch">
         <h2>Szukaj</h2>
            <form id="search_form" action="" method="get">
               <fieldset><legend><span class="auraltext">Formularz wyszukiwania</span></legend>
               <span id="input_left"><span id="input_right"><input type="text" value="Wpisz fraze do wyszukania..." name="search_input" id="search_input" onfocus="if(this.value=='Wpisz fraze do wyszukania...')this.value=''" onblur="if(this.value=='')this.value='Wpisz fraze do wyszukania...'" /></span></span>
               <input type="image" id="search_submit" src="images/submit.png" alt="Szukaj" />
               </fieldset>
            </form>
      </li>
         
      
      <li class="widget_mycategoryorder">
         <h2>Kategorie</h2>
            <ul>
               <li><a href="link1.html">software</a></li>
               <li><a href="link2.html">hardware</a></li>
               <li><a href="link1.html">windows</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
            </ul>
      </li>
      
      <li class="widget_tag_cloud">
         <h2>Tagi</h2>
            <ul id="tags">
               <li><a href="link1.html">windows 7</a></li>
               <li><a href="link2.html">hijackthis</a></li>
               <li><a href="link1.html">wordpress</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
               <li><a href="link2.html">xbox360</a></li>
               <li><a href="link2.html">programosy</a></li>
               <li><a href="link1.html">windows 7</a></li>
               <li><a href="link2.html">hijackthis</a></li>
               <li><a href="link1.html">wordpress</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
               <li><a href="link2.html">xbox360</a></li>
               <li><a href="link2.html">programosy</a></li>
            </ul>
      </li>
      
      <li class="widget_archive">
         <h2>Archiwum</h2>
            <ul>
               <li><a href="link1.html">Lipiec 2010</a></li>
               <li><a href="link1.html">Sierpień 2010</a></li>
               <li><a href="link2.html">Wrzesień 2010</a></li>
               <li><a href="link1.html">Październik 2010</a></li>
               <li><a href="link2.html">Listopad 2010</a></li>
               <li><a href="link1.html">Grudzień 2010</a></li>
               <li><a href="link2.html">Styczeń 2011</a></li>
            </ul>   
      </li>            
   </ul>


1. Teraz zajmiemy się sidebarem. Wewnątrz sidebara znajdują się widgety, które można dodawać, przesuwać w ustawieniach wordpressa. Aby było to możliwe, ważne jest abyś zachował tą strukturę, chodzi tu o to, że sidebar jest listą, a każdy element listy (<li>) zawiera jeden widget. Jest to konwencja na której budowane są wszystkie dynamiczne widgety.

2. Struktura widgetów jest taka, jaką wordpress "sam tworzy". Kodujemy ją po to aby nadać jej wygląd. Tylko wyszukiwarka nie będzie dynamiczna, gdyż do wykonania takiego pola wyszukiwania potrzebne są dodatkowe elementy, których wordpress domyślnie nie dodaje a nie będziemy się bawić i zmieniać wyświetlanie widgetów w plikach php z widgetami bo wyszukiwarkę umieszczam na samej górze i chcę aby cały czas tam była. Będzie statycznym widgetem, dlatego nie będę mógł jej przesuwać w ustawieniach WP.

3. Wracając do naszej wyszukiwarki, chcę wytłumaczyć jeszcze kilka rzeczy. Pola formularza (input) są objęte tagiem <fieldset> a to dlatego, że input musi znajdować się w elemencie blokowym, zaś fieldset służy do grupowania pól i nadaje się do tego doskonale z semantycznego punktu widzenia. Po drugie, element fieldset wymaga elementu <legend>, który wyświetla nazwę grupy pól formularza. Nie zostawię tego tagu pustego, nadałem mu nazwę "Formularz wyszukiwania", dzięki temu w przeglądarkach tekstowych będzie wiadomo o co chodzi oraz w programach dla niewidomych, czytających treść stron również. Klasa auraltext, służy mi do ukrywania tego tekstu w normalnych warunkach, gdyż po prostu, przeszkadza mi. Dzięki regułom CSS, które nadałem tej klasie, mogę ukryć ten tekst, nadal tam będzie, po prostu będzie niewidoczny. Jest to dozwolona technika, jeżeli chcesz, możesz poszukać więcej info na ten temat: image replacement.

Jak widzisz, pole wyszukiwania, objąłem 2 elementami <span> - <span id="input_left"><span id="input_right">, pomogą mi uzyskać efekt jaki wcześniej widziałeś w DEMO.

Właściwość onfocus (z javascript) pozwala na ukrywanie tekstu "Wpisz frazę do wyszukiwania..." kiedy na niego klikamy.

4. Tak więc wordpress ma już swoją strukturę widgetów, my tylko ją ostylujemy. Wykorzystałem tu klasy, które przypisuje wordpress. ich listę podam przy tłumaczeniu CSS, jest to bardzo przydatna rzecz. Oprócz tego warto znać strukturę każdego domyślnego widgetu, ją też podam :) Nie będziesz musiał już tworzyć jej od początku. Zawsze dobrze jest mieć domyślny theme wp i sprawdzić sobie co jest jak zakodowane (struktura, klasy, identyfikatory) bo na tym i tak będziemy bazować.

5. Pragnę zaznaczyć, że widget z kategoriami ma klasę widget_mycategoryorder. Nie jest to domyślna klasa wordpressowego widgetu z kategoriami. Jest to plugin o nazwie "my category order", który pobrałem z sieci. Dodaje on niestandardowy widget z kategoriami, który daje więcej możliwości ustawień niż domyślny wordpressowy, w którym nawet nie idzie przesunąć danej kategorii w górę lub w dół hierarchii, może kiedyś to naprawią.

Kod: Zaznacz wszystko
<div id="footer">
      <p>Copyright &copy; 2010-2011 by <a href="/">muraju</a> <br />Wszelkie prawa zastrzeżone</p>
   </div>
</body>

</html>


1. W ten sposób doszliśmy do końca naszej struktury. Ostatnim elementem jest stopka (footer)

Oto cały szkielet html pliku index.html

Kod: Zaznacz wszystko
<!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" xml:lang="pl" lang="pl">
<head>
   <title>Blog programosy.pl</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
    <meta name="description" content="Opis strony" />
   <link rel="Stylesheet" type="text/css" href="style.css" />
   <link rel="alternate" type="application/rss+xml"title="RSS" href="/>" />
   <link rel="alternate" type="application/atom+xml" title="Atom" href="/>" />
    <link rel="pingback" href="/" />
   <script type="text/javascript" src="js/cufon-yui.js"></script>
   <script type="text/javascript" src="js/Coolvetica_Rg_400.font.js"></script>
   <script type="text/javascript" src="js/cufon_replace.js"></script>
    <!--[if lt IE 8]><link rel="Stylesheet" type="text/css" href="ie.css" /><![endif]-->
</head>

<body>
   <!-- HEADER START -->
   <div id="header">
      <h1><a href="/">Blog programosy.pl</a></h1>
      
      <ul id="nav">
         <li><a href="link1.html">home</a> | </li>
         <li><a href="link2.html">kontakt</a> | </li>
         <li><a href="http://www.programosy.pl">Programosy.pl</a> |</li>
      </ul>
      
      <ul id="social_media">
         <li><a id="rss" href="link1.html">rss</a></li>
         <li><a id="facebook" href="http://www.facebook.com">facebook</a></li>
         <li><a id="twitter" href="http://www.twitter.com">twitter</a></li>
         <li><a id="vimeo" href="http://www.vimeo.com">vimeo</a></li>
      </ul>
   </div>
   <!-- HEADER END -->

    <div id="content">
      <!-- POST START -->
      <div class="post">
         <h2 class="title"><a href="/">XBOX360 - co powinien wiedzieć każdy właściciel</a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><a href="/">hardware</a>, <a href="/">php</a>, <a href="/">html</a><span class="break">|</span></li>
            <li><span>Tagi: </span> <a href="/">hardware, zasilacze</a>, <a href="/">php</a></li>            
         </ul>
         
         <img src="images/xbox.png" alt="Xbox360"/>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <a class="more_link">Czytaj więcej...</a>
         <ul class="post_info down">
            <li><span>Dodał: </span><a href="/">muraju</a><span class="break">|</span></li>   
            <li class="comments_number"><a href="/">26 komentarzy</a></li>      
            <li class="data">12 wrzesień 2010</li>         
         </ul>
      </div>
      <!-- POST END -->
      
      <!-- POST START -->
      <div class="post">
         <h2 class="title"><a href="/">Zasilacz spłanął, komputer też</a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><a href="/">hardware</a>, <a href="/">php</a>, <a href="/">html</a><span class="break">|</span></li>
            <li><span>Tagi: </span> <a href="/">hardware, zasilacze</a>, <a href="/">php</a></li>            
         </ul>
         
         <img src="images/codegen.png" alt="Najgorsze zasilacze na świecie - codegen"/>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <a class="more_link">Czytaj więcej...</a>
         <ul class="post_info down">
            <li><span>Dodał: </span><a href="/">muraju</a><span class="break">|</span></li>   
            <li class="comments_number"><a href="/">26 komentarzy</a></li>      
            <li class="data">12 wrzesień 2010</li>         
         </ul>
      </div>
      <!-- POST END -->
      
      <!-- POST START -->
      <div class="post last">
         <h2 class="title"><a href="/">Wystartował nowy blog !</a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><a href="/">hardware</a>, <a href="/">php</a>, <a href="/">html</a><span class="break">|</span></li>
            <li><span>Tagi: </span> <a href="/">hardware, zasilacze</a>, <a href="/">php</a></li>            
         </ul>
         
         <img src="images/wp.png" alt="Wordpress logo"/>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <a class="more_link">Czytaj więcej...</a>
         <ul class="post_info down">
            <li><span>Dodał: </span><a href="/">muraju</a><span class="break">|</span></li>   
            <li class="comments_number"><a href="/">26 komentarzy</a></li>      
            <li class="data">12 wrzesień 2010</li>         
         </ul>
      </div>
      <!-- POST END -->
      
      <div id="post_nav">
         <div class="prev"><a href="/">&laquo; Starsze posty</a></div>
         <div class="next"><a href="/">Nowsze posty &raquo;</a></div>
      </div>
   
   </div>

   <!-- SIDEBAR START -->
   <ul id="sidebar">
      <li>
         <h2>Szukaj</h2>
            <form id="search_form" action="" method="get">
               <fieldset><legend><span class="auraltext">Formularz wyszukiwania</span></legend>
               <span id="input_left"><span id="input_right"><input type="text" value="Wpisz fraze do wyszukania..." name="search_input" id="search_input" onfocus="if(this.value=='Wpisz fraze do wyszukania...')this.value=''" onblur="if(this.value=='')this.value='Wpisz fraze do wyszukania...'" /></span></span>
               <input type="image" id="search_submit" src="images/submit.png" alt="Szukaj" />
               </fieldset>
            </form>
      </li>
         
      
      <li class="widget_mycategoryorder">
         <h2>Kategorie</h2>
            <ul>
               <li><a href="link1.html">software</a></li>
               <li><a href="link2.html">hardware</a></li>
               <li><a href="link1.html">windows</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
            </ul>
      </li>
      
      <li class="widget_tag_cloud">
         <h2>Tagi</h2>
            <ul id="tags">
               <li><a href="link1.html">windows 7</a></li>
               <li><a href="link2.html">hijackthis</a></li>
               <li><a href="link1.html">wordpress</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
               <li><a href="link2.html">xbox360</a></li>
               <li><a href="link2.html">programosy</a></li>
               <li><a href="link1.html">windows 7</a></li>
               <li><a href="link2.html">hijackthis</a></li>
               <li><a href="link1.html">wordpress</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
               <li><a href="link2.html">xbox360</a></li>
               <li><a href="link2.html">programosy</a></li>
            </ul>
      </li>
      
      <li class="widget_archive">
         <h2>Archiwum</h2>
            <ul>
               <li><a href="link1.html">Lipiec 2010</a></li>
               <li><a href="link1.html">Sierpień 2010</a></li>
               <li><a href="link2.html">Wrzesień 2010</a></li>
               <li><a href="link1.html">Październik 2010</a></li>
               <li><a href="link2.html">Listopad 2010</a></li>
               <li><a href="link1.html">Grudzień 2010</a></li>
               <li><a href="link2.html">Styczeń 2011</a></li>
            </ul>   
      </li>            
   </ul>
   <!-- SIDEBAR END-->

   <!-- FOOTER START-->
    <div id="footer">
      <p>Copyright &copy; 2010-2011 by <a href="/">muraju</a> <br />Wszelkie prawa zastrzeżone</p>
   </div>
   <!-- FOOTER END-->
</body>

</html>


A tak wygląda single.html:

Kod: Zaznacz wszystko
<!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" xml:lang="pl" lang="pl">
<head>
   <title>Blog programosy.pl</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
    <meta name="description" content="Opis strony" />
   <link rel="Stylesheet" type="text/css" href="style.css" />
   <link rel="alternate" type="application/rss+xml"title="RSS" href="/>" />
   <link rel="alternate" type="application/atom+xml" title="Atom" href="/>" />
    <link rel="pingback" href="/" />
   <script type="text/javascript" src="js/cufon-yui.js"></script>
   <script type="text/javascript" src="js/Coolvetica_Rg_400.font.js"></script>
   <script type="text/javascript" src="js/cufon_replace.js"></script>
    <!--[if lt IE 8]><link rel="Stylesheet" type="text/css" href="ie.css" /><![endif]-->
</head>

<body>
   <!-- HEADER START -->
   <div id="header">
      <h1><a href="/">Blog programosy.pl</a></h1>
      
      <ul id="nav">
         <li><a href="link1.html">home</a> | </li>
         <li><a href="link2.html">kontakt</a> | </li>
         <li><a href="http://www.programosy.pl">Programosy.pl</a> |</li>
      </ul>
      
      <ul id="social_media">
         <li><a id="rss" href="link1.html">rss</a></li>
         <li><a id="facebook" href="http://www.facebook.com">facebook</a></li>
         <li><a id="twitter" href="http://www.twitter.com">twitter</a></li>
         <li><a id="vimeo" href="http://www.vimeo.com">vimeo</a></li>
      </ul>
   </div>
   <!-- HEADER END -->

    <div id="content">
      <!-- POST START -->
      <div class="post comment-page">
         <h2 class="title"><a href="/">XBOX360 - co powinien wiedzieć każdy właściciel</a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><a href="/">hardware</a>, <a href="/">php</a>, <a href="/">html</a><span class="break">|</span></li>
            <li><span>Tagi: </span> <a href="/">hardware, zasilacze</a>, <a href="/">php</a></li>            
         </ul>
         
         <img src="images/xbox.png" alt="Xbox360"/>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id arcu id eros vestibulum bibendum. In molestie condimentum pretium. Etiam sed ligula ipsum. Sed dui dui, dapibus vitae pulvinar in, ultrices eget dolor. Aenean consequat, tellus sit amet posuere porta, dolor mauris sodales dui, id pellentesque dolor est et lacus. Aenean ac nulla et nulla malesuada congue ut sed massa. Aenean sit amet metus vitae velit accumsan pretium sit amet non ipsum. Morbi et eros vitae ligula condimentum congue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam libero elit, mattis a varius nec, suscipit quis leo. Integer interdum ipsum vehicula lorem volutpat ultricies. Duis ut metus magna. </p>
         <ul class="post_info down">
            <li><span>Dodał: </span><a href="/">muraju</a><span class="break">|</span></li>   
            <li class="comments_number"><a href="/">26 komentarzy</a></li>      
            <li class="data">12 wrzesień 2010</li>         
         </ul>
      </div>
      <!-- POST END -->
   
   <!-- COMMENTS START -->
   <div id="comments">
      <h3 id="comments-title">Komentarze:</h3>

         <ol class="commentlist">
            <li class="comment even thread-even depth-1" id="comment-1">
               <div id="div-comment-1" class="comment-body">
                  <div class="comment-author vcard">
                  <img alt='' src='http://0.gravatar.com/avatar/ad516503a11cd5ca435acc9bb6523536?s=32' class='avatar avatar-32 photo avatar-default' height='32' width='32' />      <cite class="fn"><a href='http://wordpress.org/' rel='external nofollow' class='url'>Pan WordPress</a></cite> <span class="says">pisze:</span>      </div>
                  <div class="comment-meta commentmetadata"><a href="http://localhost/wordpress/?p=1#comment-1">28 grudnia 2010 o 10:34</a></div>
                  <p>Cześć, to jest komentarz.<br />Aby skasować komentarz po prostu zaloguj się i wyświetl komentarze do wpisu, gdzie znajdują się opcje ich edycji oraz usuwania.</p>

                  <div class="reply">
                  <a rel='nofollow' class='comment-reply-link' href='/wordpress/?p=1&#038;replytocom=1#respond' onclick='return addComment.moveForm("div-comment-1", "1", "respond", "1")'>Odpowiedz</a>      </div>
               </div>
            </li>
         </ol>

         <!-- ADD COMMENT START -->
         <div id="respond">
            <h3 id="reply-title">Dodaj komentarz <small><a rel="nofollow" id="cancel-comment-reply-link" href="/wordpress/?p=1#respond" style="display:none;">Anuluj pisanie odpowiedzi</a></small></h3>
               
               <form action="http://localhost/wordpress/wp-comments-post.php" method="post" id="commentform">
                  <p class="comment-notes">Twój adres e-mail nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem <span class="required">*</span></p>
                  <p class="comment-form-author"><label for="author">Nazwa</label> <span class="required">*</span><input id="author" name="author" type="text" value="" size="30"/></p>
                  <p class="comment-form-email"><label for="email">E-mail</label> <span class="required">*</span><input id="email" name="email" type="text" value="" size="30"/></p>
                  <p class="comment-form-url"><label for="url">Witryna internetowa</label><input id="url" name="url" type="text" value="" size="30" /></p>
                  <p class="comment-form-comment"><label for="comment">Komentarz</label><textarea id="comment" name="comment" cols="45" rows="8"></textarea></p>
                  <p class="form-submit">
                  <input name="submit" type="submit" id="submit" value="Opublikuj komentarz" />
                  <input type='hidden' name='comment_post_ID' value='1' id='comment_post_ID' />
                  <input type='hidden' name='comment_parent' id='comment_parent' value='0' />
                  </p>
               </form>
         </div>
         <!-- ADD COMENT END -->
                  
   </div>
   <!-- COMMENTS END -->   
   
   </div>

<!-- SIDEBAR START -->
   <ul id="sidebar">
      <li>
         <h2>Szukaj</h2>
            <form id="search_form" action="" method="get">
               <fieldset><legend><span class="auraltext">Formularz wyszukiwania</span></legend>
               <span id="input_left"><span id="input_right"><input type="text" value="Wpisz fraze do wyszukania..." name="search_input" id="search_input" onfocus="if(this.value=='Wpisz fraze do wyszukania...')this.value=''" onblur="if(this.value=='')this.value='Wpisz fraze do wyszukania...'" /></span></span>
               <input type="image" id="search_submit" src="images/submit.png" alt="Szukaj" />
               </fieldset>
            </form>
      </li>
         
      
      <li class="widget_mycategoryorder">
         <h2>Kategorie</h2>
            <ul>
               <li><a href="link1.html">software</a></li>
               <li><a href="link2.html">hardware</a></li>
               <li><a href="link1.html">windows</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
            </ul>
      </li>
      
      <li class="widget_tag_cloud">
         <h2>Tagi</h2>
            <ul id="tags">
               <li><a href="link1.html">windows 7</a></li>
               <li><a href="link2.html">hijackthis</a></li>
               <li><a href="link1.html">wordpress</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
               <li><a href="link2.html">xbox360</a></li>
               <li><a href="link2.html">programosy</a></li>
               <li><a href="link1.html">windows 7</a></li>
               <li><a href="link2.html">hijackthis</a></li>
               <li><a href="link1.html">wordpress</a></li>
               <li><a href="link2.html">linux</a></li>
               <li><a href="link1.html">bezpieczeństwo</a></li>
               <li><a href="link2.html">sieci</a></li>
               <li><a href="link2.html">www</a></li>
               <li><a href="link2.html">gry</a></li>
               <li><a href="link2.html">xbox360</a></li>
               <li><a href="link2.html">programosy</a></li>
            </ul>
      </li>
      
      <li class="widget_archive">
         <h2>Archiwum</h2>
            <ul>
               <li><a href="link1.html">Lipiec 2010</a></li>
               <li><a href="link1.html">Sierpień 2010</a></li>
               <li><a href="link2.html">Wrzesień 2010</a></li>
               <li><a href="link1.html">Październik 2010</a></li>
               <li><a href="link2.html">Listopad 2010</a></li>
               <li><a href="link1.html">Grudzień 2010</a></li>
               <li><a href="link2.html">Styczeń 2011</a></li>
            </ul>   
      </li>            
   </ul>
   <!-- SIDEBAR END-->

   <!-- FOOTER START-->
    <div id="footer">
      <p>Copyright &copy; 2010-2011 by <a href="/">muraju</a> <br />Wszelkie prawa zastrzeżone</p>
   </div>
   <!-- FOOTER END-->
</body>

</html>


Dodałem sekcje z komentarzami (zaczyna się od komentarza <!-- COMMENTS START) i formularz. Wykorzystałem szkielet z domyślnego szablonu wordpress Twenty Ten, nieznacznie modyfikując strukturę (poprzesuwałem niektóre elementy) i ostylowałem według tego jak sobie zaprojektowałem w photoshopie.

Style dla index.html i single.html

Kod: Zaznacz wszystko
* {margin: 0; padding: 0; border: 0; outline: 0; }

html {background: #efefef; }
body {
   width: 898px;
   
   margin: 0 auto;
   background: #fff;
   border-left: 1px solid #cacaca;
   border-right: 1px solid #cacaca;
   color: #1f1f1f;
   font: 12px/17px Arial, tahoma, sans-serif;
   }

a { color: #000; text-decoration: underline; }
a:hover { text-decoration: none; }

.auraltext {
   width: 1px;
   height:1px;
   position: absolute;
   left: -2000px;
   overflow:hidden;
   }


1. Każdy arkusz css zaczynam od zdjęcia domyślnych marginesów oraz obramowań. Wieloznacznik (*) oznacza, że ta reguła dotyczy wszystkich elementów. Każda przeglądarka ma swój własny zestaw stylów, który jest domyślnie aplikowany. Aby pozbyć się tego niechcianego formatowania, a chodzi tu głównie o margin i padding, resetujemy go na początku do zera.

2. Korzystając z wiedzy, że html i body to również pojemniki, które mogę ostylować, nadałem html kolor tła a body odpowiednią szrokość i wyśrodkowałem. Pamiętając o teorii box modelu (której uczyłeś się podczas poznawania css), całkowita szerokość danego elementu to width + padding + margin + border. Dlatego body ma całkowitą szerokość 900px (898px + 1px + 1px, to jest width + border)

3. Początek arkusza to dobre miejsce na ustalenie jak będą wyglądały takie podstawowe elementy na twoim blogu jak <a>,<b>,<strong>,<em>,<ul>,<ol>,<code> itp.

4. Magiczna klasa .auraltext, ukrywa tekst. Polega to na tym, że obejmujemy dany tekst tagiem <span> i nadajemy mu klasę aurltext, a on ukrywa go, w ten sposób tekst możemy zastąpić grafiką itp. Wszystko semantycznie, zgodnie ze standardami.

Kod: Zaznacz wszystko
/**************HEADER***************/
#header {position: relative;}
#header h1 {
   width: 100%;
   height: 69px;
   background: #2c97ca;
}

#header h1 a {
   display: block;
   width: 137px;
   height: 69px;
   margin-left: 39px;
   text-indent: -9999px;
   overflow: hidden;
   background: url("images/logo.png") no-repeat;
   }


1. #header to cały nasz top strony. Nadałem mu position:relative - po co ? Otóż blok z ikonami będę pozycjonował absolutnie względem bloku header. Aby to zrobić, header musi być pozycjonowany relatywnie (co nie zmienia jego miejsca), ta regułą sprawia, że elementy wewnątrz tego bloku, które chcę wypozycjonować absolutnie, nie będą pozycjonowane względem body (domyślnie), tylko względem bloku #header.

2. Moje logo jest linkiem do strony głównej. Poznałeś już jedną technikę chowania tekstu, poznasz teraz drugą. Auraltext wykorzystuję zazwyczaj do chowania tekstu wewnątrz elementu legend, gdyż ta technika tam nie działa. Najprostszym sposobem na wywalenie tekstu wewnątrz elementu blokowego, jest nadanie mu kosmicznego wcięcia -9999px i ukrycie przepełnienia czyli text-indent: -9999px i overflow: hidden; . Tekst jest, ale go nie ma. Nie stosujemy morderczej techniki display: none, ponieważ utrudniamy wtedy życie ludziom niepełnosprawnym oraz sprowadzamy na siebie nieszczęście od wujka google, który potrafi srogo potraktować takie osoby w rankingu (czytaj: dostaniesz filtr i twoja strona wyląduje na końcu rankingu) wszystko jednak zależy od kontekstu.

3. Wracając do naszego logo, które jest linkiem. Aby tak się stało, <a> musi stać się elementem blokowym - display: block, musimy nadać mu wymiary grafiki - width i height oraz oczywiście ustawić tło background: url("images/logo.png") no-repeat

Kod: Zaznacz wszystko
/*navigation**************/
#nav {
   height: 22px;
   padding: 6px 0 0 20px;
   background: #9bb800;
   list-style: none;
   color: #fff;
   }
   
#nav li {
   float: left;
   margin-right: 6px;
   font: bold 11px verdana, tahoma, sans-serif;
   }

#nav li a {
   font: bold 11px verdana, tahoma, sans-serif;
   color: #fff;
   text-decoration: none;
   }

#nav li a:hover {text-decoration: underline;}


1. #nav jest naszym górnym menu - listą. Aby pozbyć się markerów, dajemy list-style: none. Ustawiamy zielone tło - jak widzisz wycinanie tego elementu w photoshopie byłoby wielce nie rozważne, no bo po co ?

2. Aby ułożyć nasze menu w pozycji horyzontalnej, nadajemy elementom listy float:left , ułożą się obok siebie.

Kod: Zaznacz wszystko
/*social media**************/
#social_media {
   padding-top: 40px;
   width: 270px;
   height: 57px;
   position: absolute;
   top: 0; right: 20px;
   background: url("images/mist.png") no-repeat;
   list-style: none;
   }
   
#social_media li {float: left; margin-right: 10px;}
#social_media li a {
   display: block;
   width: 51px;
   height: 51px;
   text-indent: -9999px;
   overflow: hidden;
   }

#social_media li a#rss {margin-left: 20px; background: url("images/rss.png") no-repeat;}
#social_media li a#facebook {background: url("images/facebook.png") no-repeat;}
#social_media li a#twitter {background: url("images/twitter.png") no-repeat;}
#social_media li a#vimeo {background: url("images/vimeo.png") no-repeat;}


1. Teraz nasza lista z ikonami #social_media do rss, portali społecznościowych i vimeo, na którym dzielimy się kompromitującymi filmikami :) Nadamy jej wymiary obrazku mist.png 270x97 (pamiętaj o box modelu, height ma 57px ponieważ jest padding-top 40px).
Następnie dodajemy position: absolute i top:0 oraz right: 20px, co sprawi, że nasz blok będzie oddalony od prawej krawędzi #header o 20px. Pozycjonowanie absolutne przydaje się kiedy chcemy wypozycjonować szczegółowo jakieś elementy. Najlepsze jest to, że to co jest pozycjonowane absolutnie, nie jest widoczne dla innych elementów, dlatego nie musimy martwić się o to, że układ się nam rozsypie.

2. Elementy listy <li> ustawiam horyzontalnie dzięki float: left.

3. Każda ikona ma takie sam wymiary, dlatego wszystkim linkom wewnątrz li nadaje 51x51 oraz chowam tekst przez text-indent.

4. Ostatnią rzeczą jest wykorzystanie identyfikatorów, które wcześniej nadaliśmy każdemu linkowi. Odwołujemy się i ustawiamy różne tło, reprezentujące naszą ikonę.

Kod: Zaznacz wszystko
**************CONTENT**************/
#content {
   float: left;
   width: 608px;
   border-right: 1px dashed #9bb800;
   min-height: 800px;
}   

/*post**************/

.post {
   width: 599px;
   margin: 10px 10px;
   padding-bottom: 0px;
   overflow: hidden;
   border-bottom: 1px dashed #2d97ca;
}

h2.title a {text-decoration: none; color: #353535;}
h2.title a:hover {font-size: 24px;}
h2.title {
   padding: 5px 10px 0px;
   font: bold 23px arial, sans-serif;
   color: #4c4c4c;
}

.post p {
   margin-top: 10px;
   padding: 10px;
   }

.post img {
   float: left;
   margin: 25px 15px 10px;
}

.post .more-link {
   margin-left: 10px;
   font: bold 11px verdana, sans-serif;
   text-decoration: none;
}
   
.post .more-link:hover {text-decoration: underline;}

.post .post_info {
   clear: both;
   padding: 5px 10px;
   overflow: hidden;
   list-style: none;
}

.post .down {padding-top: 20px;}

.post .post_info li {float: left; padding: 1px 0; font: 11px tahoma, sans-serif; color: #373737;}
.post .post_info li a {color: #373737; text-decoration: underline;}
.post .post_info li a:hover {color: #8ba500; font-weight: bold;}
.post .post_info span {color: #727272;}
.post .post_info span.break {padding: 0px 7px;}
.post .post_info .comments_number {
   padding-left: 5px;
   font-size: 11px;
   font-size: 11px;
   }

.post .post_info .data {
   float: right;
   padding: 1px 0 2px 25px;
   font: italic 12px arial, sans-serif;
   color: #565656;
}


1. Wewnątrz body mamy 2 kolumny - szerszą content i węższy sidebar. Suma ich całkowitej szerokości nie może przekraczać 898px, czyli width body, w innym wypadku jedna kolumna zejdzie pod drugą. Nasz kontent ma 608px (width) + 1px(border-right) czyli 609px, pasek boczny zaś 250px(width) + 19px(padding-right) czyli 269px, to nam razem daje 878px - ojej, za mało - nie szkodzi. #content ma flot:left a #sidebar float right, pomiędzy nimi będzie po prostu odstęp, a to nam pasuje.

2. Reszta to już tylko proste style oraz rzeczy, które już poznaliśmy.

Kod: Zaznacz wszystko
/*post-navigation**************/

#post_nav {overflow: hidden; margin: 30px 0;}
#post_nav .next {float: right; padding-right: 20px;}
#post_nav .prev {float: left; padding-left: 20px;}
#post_nav a {font: bold 18px arial, sans-serif; color: #4c4c4c; text-decoration: none; }
#post_nav a:hover {text-decoration: underline;}


1. Na końcu #content umieściliśmy linki nawigacyjne. Są bardzo prosto skonstruowane, jeden puszczamy w prawo, drugi w lewo dzięki float i nadajemy ładny wygląd :)

Kod: Zaznacz wszystko
/**************SIDEBAR***************/
#sidebar {
   float: right;
   width: 250px;
   padding-right: 19px;
   list-style: none;
   }

#sidebar h2 {margin: 20px 0 10px 0; font-size: 20px; color: #353535;}

/*szukaj***************/
.search_input {
   width: 178px;
   height: 17px;
   float: left;
   padding: 8px 0 6px 0;
   background: url("images/sinput_center.png") repeat-x;
   font: 10px arial, sans-serif;
   color: #757575;
   }

#input_left { float: left; padding-left: 12px; background: url("images/sinput_left.png") no-repeat left;}
#input_right { float: left; padding-right: 8px; background: url("images/sinput_right.png") no-repeat right;}
#search_submit { width: 30px; height: 31px; float: left;}
#search_submit:hover {background: url("images/submit_hover.png") no-repeat;}

/*kategorie***************/

.widget_mycategoryorder ul { list-style: none;}

.widget_mycategoryorder li {padding: 5px 5px 5px 15px; border-bottom: 1px dotted #c9c9c9; background: url("images/marker.png") no-repeat left;}
.widget_mycategoryorder a {text-decoration: none;}
.widget_mycategoryorder a:hover {color: #2c97ca; font-weight: bold;}

/*tagi***************/


.widget_tag_cloud a {text-decoration: none; padding-right: 5px; color: #8b8b8b;}
.widget_tag_cloud a:hover {text-decoration: underline; color: #2c97ca;}

/*archiwum***************/

.widget_archive ul {list-style: none;}
.widget_archive li {padding: 5px 5px 5px 15px; border-bottom: 1px dotted #c9c9c9; background: url("images/marker2.png") no-repeat left;}
.widget_archive a {text-decoration: none;}
.widget_archive a:hover {color: #9bb800; font-weight: bold;}

/*text***************/
.widget_text a {display: block; text-align: center;}


1. Czas na nasz sidebar. Omówiliśmy już wcześniej kwestie jego szerokości. Nic ciekawego tu nie mamy. Należy pamiętać, że sidebar jest listą, dlatego zdejmiemy markery dzięki list-style: none aby nie wyświetlały się obok widgetów.

2. Przez #sidebar h2 ustalamy style dla tytułów wszystkich widgetów

3. Teraz nasz niestandardowy widget wyszukiwania. W html wyglądało to <span id="input_left"><span id="input_right"><input.
Dlatego nadajemy dla #input_left i #input_right odpowiednio odcięte części pola (jako background z odpowiednim atrybutem left/right co wskazuje, że grafika będzie umieszczona po lewej lub prawej stronie elementu oraz no-repeat) jak było to pokazane na screenie wyżej (patrz część I). Dla .search_input dajemy środkową część grafiki i powtarzamy ją horyzontalnie repeat-x. W dodatku wszystkie elementy wewnątrz fieldset ustawiamy przez float: left tak aby były obok siebie. Pamiętaj aby dla bloków span(tak, teraz już bloków, domyślnie span jest elementem liniowym ale float powoduje, że staje się elementem blokowym - ale o tym już wiesz, tak tylko przypominam) dać odpowiedni padding z lewej (#input_left) i z prawej(#input_right) strony o szerokości grafiki, którą ustawiłeś w tle, w innym wypadku, pole wyszukiwania będzie zasłaniało ich tło.

3. W dalszej części styluję widgety worspressa. Obiecałem, że podam ich strukturę oraz klasy, zrobię to na końcu omawiania css.

Kod: Zaznacz wszystko
/*comments**************/
#comments {
   clear: both;
   padding: 0 15px 5px;
   overflow: hidden;
}

#comments .navigation {
   padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
   font: bold 19px arial, sans-serif;
   color: #393939;
}

h3#reply-title {padding-bottom: 3px; border-bottom: 2px solid #393939; }
h3#comments-title {padding: 3px 0 15px 0; border-top: 2px solid #393939; }

.commentlist {
   list-style: none;
   margin: 0;
}
.commentlist li.comment {
   border-bottom: 1px dashed #dadada;
   line-height: 24px;
   margin: 0 0 24px 0;
   padding: 0 0 0 56px;
   position: relative;
}
.commentlist li:last-child {
   border-bottom: none;
   margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
   margin-bottom: 18px;
}
#comments .comment-body p:last-child {
   margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
   margin-bottom: 24px;
}

#comments .comment-body p {clear: both;}
.commentlist ol {
   list-style: decimal;
}
.commentlist .avatar {
   position: absolute;
   top: 4px;
   left: 0;
}
.comment-author {
float: left;
}
.comment-author cite {
   color: #f33c17;
   font: bold 15px arial, sans-serif;
}
.comment-author .says {
   display: none;
}
.comment-meta {
   font-size: 11px;
   margin: 0 0 7px 5px;
   float: left;
}
.comment-meta a:link,
.comment-meta a:visited {
   color: #888;
   text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
   color: #2c97ca;
}

.reply {
   font-size: 12px;
   padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
   color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
   color: #2c97ca;
}
.commentlist .children {
   list-style: none;
   margin: 0;
   padding-bottom: 10px;
}
.commentlist .children li {
   border: none;
   margin: 0;
}
.nopassword,
.nocomments {
   display: none;
}
#comments .pingback {
   border-bottom: 1px solid #e7e7e7;
   margin-bottom: 18px;
   padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
   margin-top: -6px;
}
#comments .pingback p {
   color: #888;
   display: block;
   font-size: 12px;
   line-height: 18px;
   margin: 0;
}
#comments .pingback .url {
   font-size: 13px;
   font-style: italic;
}

/* Comments form */

#respond {
   margin: 24px 0;
   overflow: hidden;
   position: relative;
}
#respond p {
   margin: 0;
}
#respond .comment-notes {
   margin-bottom: 25px;
   font-size: 11px;
}

#respond form {padding-left: 10px;}

.form-allowed-tags {
   line-height: 1em;
}
.children #respond {
   margin: 0 48px 0 0;
}
h3#reply-title {
   margin: 18px 0;
}

h3#reply-title a {
   color: #f33c17;
   font: bold 15px arial, sans-serif;
   text-decoration: none;
}


#comments-list #respond {
   margin: 0 0 18px 0;
}
#comments-list ul #respond {
   margin: 0;
}

.comment-reply-link {
   float: right;
   clear: both;
}
h3#reply-title a#cancel-comment-reply-link {
   font-size: 12px;
   color: #888;
   font-weight: normal;
   line-height: 18px;
   text-decoration: underline;
   float: right;
}
#respond .required {
   color: #fe2616;
   font-weight: bold;
}
#respond label {
   color: #4e4e4e;
   font: bold 13px arial,sans-serif;
}

#respond form input {
   display: block;
   padding: 5px;
   margin: 5px 10px 9px 0px;
   width: 190px;
   border: 2px solid #ddd;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
}

#respond form input:focus, #respond form textarea:focus {
border-color: #2c97ca;
}

#respond .comment-form-author, #respond .comment-form-email {
   float: left;
   overflow: hidden;
   margin-bottom: 12px;
}

#respond .comment-form-url , #respond .comment-form-comment {clear: both;}

#respond textarea {
   display: block;
   width: 520px;
   padding: 5px;
   margin-top: 5px;
   border: 2px solid #ddd;
   -moz-border-radius: 4px;
   border-radius: 4px;
    -webkit-border-radius: 4px;
}
#respond .form-allowed-tags {
   color: #888;
   font-size: 12px;
   line-height: 18px;
}
#respond .form-allowed-tags code {
   font-size: 11px;
}
#respond .form-submit {
   margin: 12px 0;
}
#respond .form-submit input {
   border: none;
   font: bold 11px verdana, sans-serif;
   color: #fff;
   width: auto;
   padding: 8px;
   background: #2c97ca;
   -moz-border-radius: 4px;
   border-radius: 4px;
    -webkit-border-radius: 4px;
   }

#respond .form-submit input:hover {
   background: #9bb800;
}

.comment-page {border: none;}


1. Jak już mówiłem wcześniej, strukturę komentarzy zapożyczyłem z domyślnego motywu wordpressa Twenty Ten. Style też :) Pozamieniałem tylko gdzieniegdzie kolor i miejsce itp. Chcę jednak przedstawić właściwości dzięki, którym uzyskałem zaokrąglone rogi:
-moz-border-radius: 4px, border-radius: 4px i -webkit-border-radius: 4px. Border-radius umożliwia zaokrąglanie rogów elementu i pochodzi z CSS3, dlatego też validator nie poznaje tego cuda. Border-radius z przedrostkiem -moz jest przeznaczony na firefoxa a -webkit dla safari/chrome. Zapisuje naraz 3, -moz i -webkit dla przeglądarek, które implementują własną właściwość oraz border-radius dla pozostałych, które radzą już sobie z css3 np. opera.


Kod: Zaznacz wszystko
/********FOOTER**************/
#footer {margin-top: 20px; width: 100%; height: 35px; border-top: 10px solid #2c97ca; background: #9bb800; clear: both; }
#footer p {padding-top: 5px; font: bold 11px tahoma, sans-serif; color: #fff; text-align: center;}
#footer p a {color: #3f4b00;}


1. Ostatnim, głównym elementem jest stopka. Zaznaczam, że znajduje się wewnątrz body, pod blokami content i sidebar, które mają nadane float. Domyślnie elementy blokowe układają się jeden pod drugim. Float sprawia, że wypadają one z normalnego obiegu dokumentu i są przesuwane jak najdalej w prawo lub w lewo. Kontener, który zawiera bloki z float, nie widzi ich i zachowuje się tak jak gdyby ich nie było, dlatego dolna krawędź kontenera, zamiast kończyć się na krawędzi elementu z float, kończyłaby się na ostatnim elemencie bez float, który znajduje się w kontenerze. Jeżeli takiego nie ma, w ogóle nie zobaczylibyśmy tła kontenera. Z pomocą przychodzi clear:both, który z powrotem wrzuca do obiegu elementy z float, musi jednak znajdować się pod nimi. Dlatego też nasza stopka ma clear:both.

Kod: Zaznacz wszystko
/********WP page class**************/

h1.page-title, h1.entry-title {
   margin: 15px 0 20px 0;
   padding-left: 20px;
   font: bold 19px arial, sans-serif;
   color: #9bb800;
   border-bottom: 1px dashed #9bb800;
}

body.page div#content div.entry-content {padding: 10px;}
body.single .post {border: none;}
body.search-no-results .post {border: none;}


1. Na koniec umieściłem zmienione style dla elementów na innych stronach np. h1.page-title, h1.entry-title są to klasy produkowane domyślnie przez wp, dotyczą kolejno nagłówka strony statycznej i nagłówka innych stron np. archiwum, wyniki wyszukiwania.

2. Dzięki odpowiedniej funkcji umieszczonej w znaczniku body (dowiesz się przy podpinaniu pod wp), dodawane są do niego odpowiednie klasy, w zależności, w którym miejscu na blogu się znajdujemy. Pozwala to w łatwy sposób nadpisać style innych elementów.


Oto cały plik style.css

Kod: Zaznacz wszystko
* {margin: 0; padding: 0; border: 0; outline: 0; }

html {background: #efefef; }
body {
   width: 898px;
   margin: 0 auto;
   background: #fff;
   border-left: 1px solid #cacaca;
   border-right: 1px solid #cacaca;
   color: #1f1f1f;
   font: 12px/17px Arial, tahoma, sans-serif;
   }

a { color: #000; text-decoration: underline; }
a:hover { text-decoration: none; }

.auraltext {
   width: 1px;
   height:1px;
   position: absolute;
   left: -2000px;
   overflow:hidden;
   }

/**************HEADER***************/
#header {position: relative;}
#header h1 {
   width: 100%;
   height: 69px;
   background: #2c97ca;
}

#header h1 a {
   display: block;
   width: 137px;
   height: 69px;
   margin-left: 39px;
   text-indent: -9999px;
   overflow: hidden;
   background: url("images/logo.png") no-repeat;
   }

/*navigation**************/
#nav {
   height: 22px;
   padding: 6px 0 0 20px;
   background: #9bb800;
   list-style: none;
   color: #fff;
   }
   
#nav li {
   float: left;
   margin-right: 6px;
   font: bold 11px verdana, tahoma, sans-serif;
   }

#nav li a {
   font: bold 11px verdana, tahoma, sans-serif;
   color: #fff;
   text-decoration: none;
   }

#nav li a:hover {text-decoration: underline;}

/*social media**************/
#social_media {
   padding-top: 40px;
   width: 270px;
   height: 57px;
   position: absolute;
   right: 20px;
   background: url("images/mist.png") no-repeat;
   list-style: none;
   }
   
#social_media li {float: left; margin-right: 10px;}
#social_media li a {
   display: block;
   width: 51px;
   height: 51px;
   text-indent: -9999px;
   overflow: hidden
   }

#social_media li a#rss {margin-left: 20px; background: url("images/rss.png") no-repeat;}
#social_media li a#facebook {background: url("images/facebook.png") no-repeat;}
#social_media li a#twitter {background: url("images/twitter.png") no-repeat;}
#social_media li a#vimeo {background: url("images/vimeo.png") no-repeat;}

/**************CONTENT**************/
#content {
   float: left;
   width: 608px;
   border-right: 1px dashed #9bb800;
   min-height: 800px;
}   

/*post**************/
.post {
   width: 599px;
   margin: 10px 10px;
   padding-bottom: 0px;
   overflow: hidden;
   border-bottom: 1px dashed #2d97ca;
}

h2.title a {text-decoration: none; color: #353535;}
h2.title a:hover {font-size: 24px;}
h2.title {
   padding: 5px 10px 0px;
   font: bold 23px arial, sans-serif;
   color: #4c4c4c;
}

.post p {
   margin-top: 10px;
   padding: 10px;
   }

.post img {
   float: left;
   margin: 25px 15px 10px;
}

.post .more-link {
   margin-left: 10px;
   font: bold 11px verdana, sans-serif;
   text-decoration: none;
}
   
.post .more-link:hover {text-decoration: underline;}

.post .post_info {
   clear: both;
   padding: 5px 10px;
   overflow: hidden;
   list-style: none;
}

.post .down {padding-top: 20px;}

.post .post_info li {float: left; padding: 1px 0; font: 11px tahoma, sans-serif; color: #373737;}
.post .post_info li a {color: #373737; text-decoration: underline;}
.post .post_info li a:hover {color: #8ba500; font-weight: bold;}
.post .post_info span {color: #727272;}
.post .post_info span.break {padding: 0px 7px;}
.post .post_info .comments_number {
   padding-left: 5px;
   font-size: 11px;
   font-size: 11px;
   }

.post .post_info .data {
   float: right;
   padding: 1px 0 2px 25px;
   font: italic 12px arial, sans-serif;
   color: #565656;
}

/*post-navigation**************/

#post_nav {overflow: hidden; margin: 30px 0;}
#post_nav .next {float: right; padding-right: 20px;}
#post_nav .prev {float: left; padding-left: 20px;}
#post_nav a {font: bold 18px arial, sans-serif; color: #4c4c4c; text-decoration: none; }
#post_nav a:hover {text-decoration: underline;}

/**************SIDEBAR***************/
#sidebar {
   float: right;
   width: 250px;
   padding-right: 19px;
   list-style: none;
   }

#sidebar h2 {margin: 20px 0 10px 0; font-size: 20px; color: #353535;}

/*szukaj***************/
.search_input {
   width: 178px;
   height: 17px;
   float: left;
   padding: 8px 0 6px 0;
   background: url("images/sinput_center.png") repeat-x;
   font: 10px arial, sans-serif;
   color: #757575;
   }

#input_left { float: left; padding-left: 12px; background: url("images/sinput_left.png") no-repeat left;}
#input_right { float: left; padding-right: 8px; background: url("images/sinput_right.png") no-repeat right;}
#search_submit { width: 30px; height: 31px; float: left;}
#search_submit:hover {background: url("images/submit_hover.png") no-repeat;}

/*kategorie***************/

.widget_mycategoryorder ul { list-style: none;}

.widget_mycategoryorder li {padding: 5px 5px 5px 15px; border-bottom: 1px dotted #c9c9c9; background: url("images/marker.png") no-repeat left;}
.widget_mycategoryorder a {text-decoration: none;}
.widget_mycategoryorder a:hover {color: #2c97ca; font-weight: bold;}

/*tagi***************/


.widget_tag_cloud a {text-decoration: none; padding-right: 5px; color: #8b8b8b;}
.widget_tag_cloud a:hover {text-decoration: underline; color: #2c97ca;}

/*archiwum***************/

.widget_archive ul {list-style: none;}
.widget_archive li {padding: 5px 5px 5px 15px; border-bottom: 1px dotted #c9c9c9; background: url("images/marker2.png") no-repeat left;}
.widget_archive a {text-decoration: none;}
.widget_archive a:hover {color: #9bb800; font-weight: bold;}

/*text***************/
.widget_text a {display: block; text-align: center;}


/**********COMMENTS**************/
#comments {
   clear: both;
   padding: 0 15px 5px;
   overflow: hidden;
}

#comments .navigation {
   padding: 0 0 18px 0;
}
h3#comments-title,
h3#reply-title {
   font: bold 19px arial, sans-serif;
   color: #393939;
}

h3#reply-title {padding-bottom: 3px; border-bottom: 2px solid #393939; }
h3#comments-title {padding: 3px 0 15px 0; border-top: 2px solid #393939; }

.commentlist {
   list-style: none;
   margin: 0;
}
.commentlist li.comment {
   border-bottom: 1px dashed #dadada;
   line-height: 24px;
   margin: 0 0 24px 0;
   padding: 0 0 0 56px;
   position: relative;
}
.commentlist li:last-child {
   border-bottom: none;
   margin-bottom: 0;
}
#comments .comment-body ul,
#comments .comment-body ol {
   margin-bottom: 18px;
}
#comments .comment-body p:last-child {
   margin-bottom: 6px;
}
#comments .comment-body blockquote p:last-child {
   margin-bottom: 24px;
}

#comments .comment-body p {clear: both;}
.commentlist ol {
   list-style: decimal;
}
.commentlist .avatar {
   position: absolute;
   top: 4px;
   left: 0;
}
.comment-author {
float: left;
}
.comment-author cite {
   color: #f33c17;
   font: bold 15px arial, sans-serif;
}
.comment-author .says {
   display: none;
}
.comment-meta {
   font-size: 11px;
   margin: 0 0 7px 5px;
   float: left;
}
.comment-meta a:link,
.comment-meta a:visited {
   color: #888;
   text-decoration: none;
}
.comment-meta a:active,
.comment-meta a:hover {
   color: #2c97ca;
}

.reply {
   font-size: 12px;
   padding: 0 0 24px 0;
}
.reply a,
a.comment-edit-link {
   color: #888;
}
.reply a:hover,
a.comment-edit-link:hover {
   color: #2c97ca;
}
.commentlist .children {
   list-style: none;
   margin: 0;
   padding-bottom: 10px;
}
.commentlist .children li {
   border: none;
   margin: 0;
}
.nopassword,
.nocomments {
   display: none;
}
#comments .pingback {
   border-bottom: 1px solid #e7e7e7;
   margin-bottom: 18px;
   padding-bottom: 18px;
}
.commentlist li.comment+li.pingback {
   margin-top: -6px;
}
#comments .pingback p {
   color: #888;
   display: block;
   font-size: 12px;
   line-height: 18px;
   margin: 0;
}
#comments .pingback .url {
   font-size: 13px;
   font-style: italic;
}

/* Comments form */

#respond {
   margin: 24px 0;
   overflow: hidden;
   position: relative;
}
#respond p {
   margin: 0;
}
#respond .comment-notes {
   margin-bottom: 25px;
   font-size: 11px;
}

#respond form {padding-left: 10px;}

.form-allowed-tags {
   line-height: 1em;
}
.children #respond {
   margin: 0 48px 0 0;
}
h3#reply-title {
   margin: 18px 0;
}

h3#reply-title a {
   color: #f33c17;
   font: bold 15px arial, sans-serif;
   text-decoration: none;
}


#comments-list #respond {
   margin: 0 0 18px 0;
}
#comments-list ul #respond {
   margin: 0;
}

.comment-reply-link {
   float: right;
   clear: both;
}
h3#reply-title a#cancel-comment-reply-link {
   font-size: 12px;
   color: #888;
   font-weight: normal;
   line-height: 18px;
   text-decoration: underline;
   float: right;
}
#respond .required {
   color: #fe2616;
   font-weight: bold;
}
#respond label {
   color: #4e4e4e;
   font: bold 13px arial,sans-serif;
}

#respond form input {
   display: block;
   padding: 5px;
   margin: 5px 10px 9px 0px;
   width: 190px;
   border: 2px solid #ddd;
   -moz-border-radius: 4px;
   border-radius: 4px;
   -webkit-border-radius: 4px;
}

#respond form input:focus, #respond form textarea:focus {
border-color: #2c97ca;
}

#respond .comment-form-author, #respond .comment-form-email {
   float: left;
   overflow: hidden;
   margin-bottom: 12px;
}

#respond .comment-form-url , #respond .comment-form-comment {clear: both;}

#respond textarea {
   display: block;
   width: 520px;
   padding: 5px;
   margin-top: 5px;
   border: 2px solid #ddd;
   -moz-border-radius: 4px;
   border-radius: 4px;
    -webkit-border-radius: 4px;
}
#respond .form-allowed-tags {
   color: #888;
   font-size: 12px;
   line-height: 18px;
}
#respond .form-allowed-tags code {
   font-size: 11px;
}
#respond .form-submit {
   margin: 12px 0;
}
#respond .form-submit input {
   border: none;
   font: bold 11px verdana, sans-serif;
   color: #fff;
   width: auto;
   padding: 8px;
   background: #2c97ca;
   -moz-border-radius: 4px;
   border-radius: 4px;
    -webkit-border-radius: 4px;
   }

#respond .form-submit input:hover {
   background: #9bb800;
}

.comment-page {border: none;}

/********FOOTER**************/
#footer {margin-top: 20px; width: 100%; height: 35px; border-top: 10px solid #2c97ca; background: #9bb800; clear: both; }
#footer p {padding-top: 5px; font: bold 11px tahoma, sans-serif; color: #fff; text-align: center;}
#footer p a {color: #3f4b00;}

/********WP page class**************/

h1.page-title, h1.entry-title {
   margin: 15px 0 20px 0;
   padding-left: 20px;
   font: bold 19px arial, sans-serif;
   color: #9bb800;
   border-bottom: 1px dashed #9bb800;
}

body.page div#content div.entry-content {padding: 10px;}
body.single .post {border: none;}
body.search-no-results .post {border: none;}


ie.css - jak zrobić i się nie narobić

1. Przechodzimy na stronę http://www.onderhond.com/tools/ie6fixer/
Image

2. Zaznaczamy paste your complete master stylesheet oraz receive as separate css po czym wklejamy zawartość style.css i klikamy na Give me my ie6 fixes

3. Otrzymamy fix na większość problemów z IE6 oraz 7. Nie musimy babrać się sami w hackach, skrypt jest aktualizowany co jakiś czas co jest dużym plusem.

Oto cały plik ie.css

Kod: Zaznacz wszystko
/* IE6 css fixer v0.95: Sun, 02 Jan 2011 12:27:04 +0100 */

/* ============================================= */
/* safe settings                                 */

/* add display:inline to floated elements */
#nav li,
#social_media li,
#content,
.post img,
.post .post_info li,
.post .post_info .data,
#post_nav .next,
#post_nav .prev,
#sidebar,
.search_input,
#input_left,
#input_right,
#search_submit,
.comment-author,
.comment-meta,
.comment-reply-link,
h3#reply-title a#cancel-comment-reply-link,
#respond .comment-form-author,#respond .comment-form-email {display:inline;}

/* convert min height values */
#content {height:800px;}


/* fix negative margins */
.commentlist li.comment+li.pingback {position:relative; zoom:1;}

/* add zoom:1 to overflow:hidden */
.auraltext,
#header h1 a,
#social_media li a,
.post,
.post .post_info,
#post_nav,
#comments,
#respond,
#respond .comment-form-author,
#respond .comment-form-email {zoom:1;}

/* add zoom:1 to pos:relative elements */
#header,
.commentlist li.comment {zoom:1;}

/* add overflow:visible to (submit) buttons */
input, button {overflow:visible;}


Domyślna struktura widgetów i style wordpressa

Przyda się podczas kodowania :) Znalezione na http://wp-content-themes.com/how-to-get-the-same-style-for-default-and-widgeted-sidebars/125
Możesz je też wyciągnąć sam dodając wszystkie widgety do paska i skopiować ze źródła kod html oraz style z style.css.

Struktura html

Kod: Zaznacz wszystko
<form id="searchform" action="/index.php" method="get">
<input id="s" name="s" size="20" type="text" />
<input id="searchsubmit" type="submit" value="Go" />
</form></li>
<!–PAGES WIDGET–>
        <li id="pages" class="widget widget_pages">
<h2 class="widgettitle">Pages</h2>
<ul>
        <li class="page_item page-item-x"><a></a></li>
</ul>
</li>
<!–CATEGORIES WIDGET–>
        <li id="categories-x" class="widget widget_categories">
<h2 class="widgettitle">Categories</h2>
<ul>
        <li class="cat-item cat-item-y"><a></a></li>
</ul>
</li>
<!–RECENT POSTS WIDGET–>
        <li id="recent-posts" class="widget widget_recent_entries">
<h2 class="widgettitle">Recent Posts</h2>
<ul>
        <li><a></a></li>
</ul>
</li>
<!–RECENT COMMENTS WIDGET–>
        <li id="recent-comments" class="widget widget_recent_comments">
<h2 class="widgettitle">Recent comments</h2>
<ul id="recentcomments">
        <li class="recentcomments">p on <a href="/21/comment-page-1#comment-124">P</a></li>
</ul>
</li>
<!–ARCHIVES WIDGET–>
        <li id="archives" class="widget widget_archive">
<h2 class="widgettitle">Archives</h2>
<ul>
        <li><a>December 2007</a></li>
</ul>
</li>
<!–BLOGROLL WIDGET–>
        <li id="linkcat-2" class="widget widget_links">
<h2 class="widgettitle">Blogroll</h2>
<ul class="xoxo blogroll">
        <li><a></a></li>
</ul>
</li>
<!–TAG CLOUD WIDGET–>
        <li id="tag_cloud" class="widget widget_tag_cloud">
<h2 class="widgettitle">Tags</h2>
</li>
<!–META WIDGET–>
        <li id="meta" class="widget widget_meta">
<h2 class="widgettitle">Meta</h2>
<ul>
        <li><a>Site Admin</a></li>
</ul>
</li>
<!–TEXT WIDGET–>
        <li id="text-x" class="widget widget_text">
<h2 class="widgettitle">Text</h2>
<div class="textwidget">Some text</div></li>
<!–RSS WIDGET–>
        <li id="rss-somenumber" class="widget widget_rss">
<h2 class="widgettitle">
<a class="rsswidget" title="Syndicate this content" href="http://feeds2.feedburner.com/TheThemeMuseum">
<img style="background:orange;color:white;border:none;" src="http://wp-content-themes.com/wp-content/uploads/2009/03/rss.png" alt="RSS" width="14" height="14" /></a> <a class="rsswidget" title="Your WordPress blog themes are here" href="http://wp-content-themes.com">Theme Museum Feed</a></h2>
<ul>
        <li>
<a class="rsswidget"></a></li>
</ul>
</li>
<!–CALENDAR WIDGET–>
        <li id="calendar" class="widget widget_calendar">
<h2 class="widgettitle"></h2>
<div id="calendar_wrap">
<table id="wp-calendar" border="0" summary="Calendar"><caption>month</caption>
<thead>
<tr>
<th title="Monday" scope="col">M</th>
</tr>
</thead>
<tfoot>
<tr>
<td id="prev" colspan="3"><a title="View posts for December 2007">« month</a></td>
<td class="pad"></td>
<td id="next" class="pad" colspan="3"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td class="pad" colspan="6"></td>
<td>1</td>
</tr>
<tr></tr>
<tr>
<td>30</td>
<td>31</td>
<td class="pad" colspan="5"></td>
</tr>
</tbody></table>
</div></li>
<!–AKISMET WIDGET–>
        <li id="akismet" class="widget widget_akismet">
<h2 class="widgettitle">Spam Blocked</h2>
<div id="akismetwrap">
<div id="akismetstats">
<a id="aka" href="http://akismet.com">
<div id="akismet1"><span id="akismetcount">867</span><span id="akismetsc">spam comments</span></div>
<div id="akismet2"><span id="akismetbb">blocked by</span>
<span id="akismeta">Akismet</span></div>
</a></div>
</div></li>


Style

Kod: Zaznacz wszystko
.widget{} /* use it to style all the widgets the same way */
h2 .widgettitle{}
#search{}
.widget_search{}
form #searchform{} /* pay attention to the default/reseted form styles */
input #s{}
input #searchsubmit{}

#pages{}
.widget_pages{}
.widget_pages ul{}
.widget_pages ul li{}
.widget_pages ul li a{}
.page_item {}
.page-item-x{}  /* replace x with the actual page ids */

#categories-x{} /* replace x with the number assigned by WordPress; you can find it in the page source */
.widget_categories{}
.cat-item{}
.cat-item a{}
.cat-item-y{} /* replace x with the actual cat ids */
.cat-item-y a{}

#recent-posts{}
.widget_recent_entries{}
.widget_recent_entries ul{}
.widget_recent_entries ul li{}
.widget_recent_entries ul li a{}

#recent-comments{}
.widget_recent_comments{}
ul #recentcomments{}
li .recentcomments{}
.recentcomments a{}

#archives{}
.widget_archive{}
.widget_archive ul{}
.widget_archive ul li{}
.widget_archive ul li a{}

#linkcat-x /* replace x with the actual blogroll cat id; you’ll find it in the page source */
.widget_links{}
ul .xoxo{}
ul .blogroll{}
.xoxo li{}
.xoxo li a{}
.blogroll li{}
.blogroll li a{}

#tag_cloud{}
.widget_tag_cloud{}
.widget_tag_cloud a{}

#meta{}
.widget_meta{}
.widget_meta ul{}
.widget_meta ul li{}
.widget_meta ul li a{}

#text-x{} /* replace x with the actual widget id you see in the page source */
.widget_text{}
div .textwidget{}

#rss-x{} /* replace x with the id assigned by WordPress */
.widget_rss{}
a .rsswidget{}

#calendar{}
.widget_calendar{}
#calendar_wrap{}
table #wp-calendar{} /* pay attention to the default/reseted table styles */
table #wp-calendar abbr{} /* pay attention to the default/reseted abbr styles */
table #wp-calendar td .pad{}

/* The default style for the Akismet widget (nested by WordPress inside the  tag */

#aka,#aka:link,#aka:hover,#aka:visited,#aka:active{color:#fff;text-decoration:none}
#aka:hover{border:none;text-decoration:none}
#aka:hover #akismet1{display:none}
#aka:hover #akismet2,#akismet1{display:block}
#akismet2{display:none;padding-top:2px}
#akismeta{font-size:16px;font-weight:bold;line-height:18px;text-decoration:none}
#akismetcount{display:block;font:15px Verdana,Arial,Sans-Serif;font-weight:bold;text-decoration:none}
#akismetwrap #akismetstats{background:url(/wp-content/plugins/akismet/akismet.gif) no-repeat top left;border:none;color:#fff;font:11px ‘Trebuchet MS’,‘Myriad Pro’,sans-serif;height:40px;line-height:100%;overflow:hidden;padding:8px 0 0;text-align:center;width:120px}


Niestandardowe fonty w menu dzięki Cufon

1. Najpierw znajdź swoją wymarzoną czcionkę, ja wybrałem Coolvetica - http://www.dafont.com/search.php?psize=m&q=coolvetica . Weź pod uwagę to czy możesz ją wykorzystać na swojej stronie, notka od autora mówi "...it's free for commercial use".

2. Po jej pobraniu przejdź na http://cufon.shoqolate.com/generate/ i pobierz Cufon (Download u góry), zapisz w katalogu js plik cufon-yui.js

3.Załaduj czcionkę, pozaznaczaj odpowiednie opcje, niektóre według uznania i kliknij Let's do this. Pojawi się okienko pobierania, dla mnie był to Coolvetica_Rg_400.font.js, wrzuć do katalogu js.

ImageImage

4.Pozostaje nam jedynie wybrać, które elementy mają być wyświetlane czcionką Coolvetica. Ja wybrałem nagłówki widgetów. Utwórz plik cufon_replace.js i umieść w nim Cufon.replace('#sidebar h2');, następnie zapisz do katalogu js. Mamy już wszystko czego nam potrzeba, pozostaje już tylko dodać skrypty do nagłówka (sekcja header)

Kod: Zaznacz wszystko
<script type="text/javascript" src="js/cufon-yui.js"></script>
   <script type="text/javascript" src="js/Coolvetica_Rg_400.font.js"></script>
   <script type="text/javascript" src="js/cufon_replace.js"></script>


5.Jeżeli chcesz się dowiedzieć więcej o możliwościach cufon, odwiedź stronę jego dokumentacji.

Autor postu otrzymał pochwałę
"Wczoraj do ciebie nie należy. Jutro niepewne... Tylko dziś jest twoje."
Awatar użytkownika
muraju
~user
 
Posty: 447
Dołączenie: 26 Gru 2005, 20:55
Pochwały: 20



Wordpress - własny szablon na bloga

Postprzez muraju 19 Sty 2011, 00:15

Faza III - podpinamy szablon pod wordpressa

Najgorsze już za nami, teraz pójdzie z górki. Wiele osób sądzi, że jest to najtrudniejszy etap, "bo musisz umieć php, bla bla" - to nie prawda. Tak naprawdę musisz umieć kopiuj-wklej i trochę znajomości na temat tego co dany tag oznacza. Hmm tag ? Otóż podpinanie wordpressa polega na podzieleniu index.html na kilka plików, z których każdy reprezentuje szablon danej części strony np. nagłówek, sidebar, content ... oraz wypełnieniu odpowiednich miejsc tzw. template tagami, czyli funkcjami wordpress, które generują zawartość na podstawie danych z bazy (np. lista kategorii, pozycje w menu, posty, komentarze).

Instalujemy lokalny serwer do testów

Aby zacząć prace, musisz mieć środowisko do testów - zainstalowanego wordpressa, w którym będziesz mógł sprawdzić jak ci idzie. Ja używam http://webserv.pl/ , dzięki któremu pstryknięciem palcami stawiam lokalnie serwer z php i bazą danych, na którym mogę zainstalować wordpressa i testować działanie motywu. Wystarczy, że zainstalujesz WebServ, pobierzesz wordpressa i wypakujesz do katalogu Program Files\WebServ\httpd.
Kiedy w przeglądarce wpiszesz localhost pojawi się strona z instalacją wordpressa, która jest banalna. Przed tym kliknij ppm na ikonę webserv w trayu i wybierz phpmyadmin (login: root , bez hasła) w polu Utwórz nową bazę danych wpisz jej nazwę np. wordpress i zatwierdź akcje. Te dane będą ci potrzebne podczas instalacji - nazwa bazy, login i hasło do bazy. I to wszystko.

ImageImage
Image

Podpinania czas zacząć

Na początek pragnę zaznaczyć, iż ogromna dokumentacja wordpressa znajduje się pod adresem http://codex.wordpress.org . Znajduje się tam opis każdego elementu wraz z przykładami. Bardzo pomocne. Jeżeli chcesz dowiedzieć się czegoś więcej na temat jakiejś funkcji, koniecznie zajrzyj tam.

Wszystkie motywy wordpressa znajdują się w katalogu wordpress\wp-content\themes. Utworzyłem tam nowy katalog "blog programosy.pl" i wrzuciłem index.html, single.html, style.css,ie.css, katalog images z grafiką oraz katalog js ze skryptami do cufona.

Czas poznać z czego składa się motyw.

header.php - zaczyna się od samego początku strony do końca tagu </header> przy czym można objąć nim też nagłówek strony, menu nawigacyjne - ja tak zrobiłem.
index.php - szablon strony głównej bloga, zawiera pętle, która sprawdza czy istnieją posty i wyświetla je, każdy według szablonu posta.
single.php - szablon strony z pojedynczym postem i sekcją komentarzy (którą podpinamy z innego pliku)
comments.php - sekcja z komentarzami i formularzem ich dodawania
sidebar.php - pasek boczny
footer.php - stopka
page.php - szablon podstrony
404.php - strona z błędem 404 (kiedy user próbuję dostać się do błędnego lub nieistniejącego adresu)
search.php - wyniki wyszukiwania
archive.php - archiwum wpisów
category.php - kategoria wpisów
searchform.php - formularz wyszukiwarki
tag.php - tag wpisów
functions.php - plik z dodatkowymi funkcjami PHP użytymi w szablonie

Zacznij od stworzenia pustych plików o tych nazwach i wrzuć je do katalogu z naszym theme.
Czas podzielić to co wcześniej zakodowaliśmy.

header.php

Kod: Zaznacz wszystko
<!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" xml:lang="pl" lang="pl">
<head>
   <title><?php wp_title('',true,'right'); ?><?php bloginfo('name'); ?></title>
    <meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>" />
    <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
    <meta name="description" content="Opis strony" />
   <link rel="Stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url');?>" media="screen" />
   <link rel="alternate" type="application/rss+xml"title="<?php get_bloginfo('name'); ?> - RSS" href="<?php bloginfo('rss2_url'); ?>" />
   <link rel="alternate" type="application/atom+xml" title="<?php get_bloginfo('name'); ?> - Atom" href="<?php bloginfo('atom_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/cufon-yui.js"></script>
   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/Coolvetica_Rg_400.font.js"></script>
   <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/cufon_replace.js"></script>
    <!--[if lt IE 8]><link rel="Stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/iestyle.css" /><![endif]-->
   
   <?php wp_enqueue_script( 'comment-reply' ); ?>
</head>

<body <?php body_class(); ?> >
   <div id="header">
      <h1><a href="<?php echo get_option('home'); ?>/"><?php bloginfo('name'); ?> -  <?php get_bloginfo('description'); ?> </a></h1>
      
      <?php wp_nav_menu('menu_id=nav&container=&after= | '); ?>
      
      <ul id="social_media">
         <li><a id="rss" href="<?php bloginfo('rss2_url'); ?>">rss</a></li>
         <li><a id="facebook" href="http://www.facebook.com">facebook</a></li>
         <li><a id="twitter" href="http://www.twitter.com">twitter</a></li>
         <li><a id="vimeo" href="http://www.vimeo.com">vimeo</a></li>
      </ul>
   </div>


<?php wp_title('',true,'right'); ?> :arrow: wyświetla tytuł bloga (ustawiony w kokpicie wordpressa), pierwszy argument to separator oddzielający go od nazwy bloga, atrybut right oznacza, że nazwa będzie wyświetlana po prawej stronie.
<?php bloginfo('name'); ?> :arrow: wyświetla nazwę bloga
<?php bloginfo('charset'); ?> :arrow: kodowanie zgodne z tym jakie ustawiliśmy w wp
<?php bloginfo('stylesheet_url');?> :arrow: podaje lokalizacje style.css (zazwyczaj bezpośrednio w folderze motywu)
<?php bloginfo('rss2_url'); ?> :arrow: link do kanału rss2
<?php bloginfo('atom_url'); ?> :arrow: link do kanału atom
<?php bloginfo('pingback_url'); ?> :arrow: dotyczy powiadomień otrzymywanych od innych blogów
<?php bloginfo('template_url'); ?> :arrow: wskazuje katalog naszego motywu
<?php wp_enqueue_script( 'comment-reply' ); ?> :arrow: funkcja zagnieżdżająca komentarze
<?php wp_head(); ?> :arrow: dzięki tej funkcji, pluginy do WP mogą dodawać swoje skrypty js oraz dodatkowe arkusze stylów w sekcji <head>
<?php body_class(); ?> :arrow: generuje klasę z nazwą strony szablonu (w zależności w jakim miejscu na blogu się znajdujemy) - przydatne podczas stylowania
<?php echo get_option('home'); ?> :arrow: generuje link do strony głównej bloga
<?php get_bloginfo('description'); ?> :arrow: generuje opis ustawiony w ustawieniach wp
<?php wp_nav_menu('menu_id=nav&container=&after= | '); ?> :arrow: generuje menu na liście, pierwszy atrybut oznacza nazwę identyfikatora jaki będzie przypisana do listy, kolejny oznacza kontener, którym będzie objęta lista (ul id="nav") ja po myślniku nic nie ustawiłem, gdyż nie potrzebny mi dodatkowy kontener na listę, ostatni atrybut dodaje na koniec każdego elementu listy separator '|'. Zwróć uwagę, że każdy atrybut jest oddzielony znakiem &, a jego wartość znajduje się po znaku równości. Aby menu było widoczne trzeba je ustawić w kokpicie > wygląd > menu , tam też dodamy pozycje (zajmiemy się tym później).

index.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">
   
   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>

      <!-- POST START -->
      <div class="post" id="post-<?php the_ID(); ?>">
         <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><?php the_category(' ,'); ?><span class="break">|</span></li>
            <li><span>Tagi: </span> <?php the_tags('',' ,', '' ); ?></li>         
         </ul>
         
         <?php the_content('Czytaj więcej...'); ?>
         
         <ul class="post_info">
            <li><span>Dodał: </span><?php the_author(); ?><span class="break">|</span></li>      
            <li class="comments_number"><?php comments_popup_link('brak komentarzy', '1 komentarz', 'komentarzy: %'); ?></li>                  
            <li class="data"><?php echo get_the_date(); ?></li>      
         </ul>
         
      </div>
      <!-- POST END -->
      
      <?php endwhile; else: ?>
      <p><?php _e('Brak postów spełniających twoje kryteria.'); ?></p>
      
      <?php endif; ?>
   
   <div id="post_nav">
         <div class="prev"><?php next_posts_link('&laquo; Starsze posty') ?></div>
         <div class="next"><?php previous_posts_link('Nowsze posty &raquo;') ?></div>
   </div>
   
</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>


Funkcje get_header, get_sidebar, get_footer :arrow: załączają odpowiednio pliki header.php, sidebar.php, footer.php

Ważną rzeczą jest tu pętla tzw. loop. Oto jej struktura:

Kod: Zaznacz wszystko
<?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>
   //Jeżeli są posty, wyświetl je
   <?php endwhile; else: ?>
   //W innym wypadku wyswietl info o ich brakui   
<?php endif; ?>


Funkcja have_posts() sprawdza, czy są jakieś posty w bazie danych. Jeżeli tak, zostaje wykonana pętla while, która wykonuje się tak długo aż wszystkie posty zostaną wyświetlone. Po skończeniu działania petli (endwhile) uruchamia się warunek else, którego zawartość zostaje wykonana, jeżeli nie odnaleziono żadnych postów (w instrukcji if). Tak też, w pętli while umieszczamy szablon posta wypełniony template tagami (funkcjami wordpress), które generują content, a w else wiadomość, która się wyświetli w przypadku, kiedy posty nie zostaną znalezione.

Oto tagi, które wykorzystałem w szablonie posta:

<?php the_ID(); ?> :arrow: generuje unikalny identyfikator wpisu
<?php the_permalink() ?> :arrow: generuje link bezpośredni do wpisu
<?php the_title(); ?> :arrow: wyświetla tytuł
<?php the_category(' ,'); ?> :arrow: wyświetla kategorie do których przypisany jest post, argument wewnątrz, który jest przecinkiem, oznacza, że każda kolejna kategoria będzie oddzielana przecinkiem
<?php the_tags('',' ,', '' ); ?> :arrow: tak samo jak w przypadku kategorii
<?php the_content('Czytaj więcej...'); ?> :arrow: wyświetla zawartość wpisu, jako argument podajemy tekst, który wyświetli się jako link do dalszej części posta, jeżeli podczas pisania podzieliliśmy wpis w danym miejscu dzięki <!--more-->
<?php the_author(); ?> :arrow: wyświetla autora
<?php comments_popup_link('brak komentarzy', '1 komentarz', 'komentarzy: %'); ?> :arrow: podaje liczbę komentarzy w zależności czy nie ma ich w ogóle, jest jeden lub wiele
<?php echo get_the_date(); ?> :arrow: pobiera datę posta

Pozostały jeszcze 2 na dole od nawigacji między postami:

<?php next_posts_link('&laquo; Starsze posty') ?>
<?php previous_posts_link('Nowsze posty &raquo;') ?>


Są o linki do starszych, nowszych postów.

single.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">
   
   <?php if (have_posts()) : ?>
   <?php while (have_posts()) : the_post(); ?>

      <!-- POST START -->
      <div class="post" id="post-<?php the_ID(); ?>">
         <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><?php the_category(' ,'); ?><span class="break">|</span></li>
            <li><span>Tagi: </span> <?php the_tags('',' ,', '' ); ?></li>         
         </ul>
         
         <?php the_content(); ?>
         
         <ul class="post_info">
            <li><span>Dodał: </span><?php the_author(); ?><span class="break">|</span></li>      
            <li class="comments_number"><?php comments_popup_link('brak komentarzy', '1 komentarz', 'komentarzy: %'); ?></li>                  
            <li class="data"><?php echo get_the_date(); ?></li>      
         </ul>
         
      </div>
      <!-- POST END -->
      
      <?php endwhile; else: ?>
      <p><?php _e('Brak postów spełniających twoje kryteria.'); ?></p>
      
      <?php endif; ?>
      
      <?php comments_template(); ?>
</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>


W dalszej części będziemy się opierać na index.php, dlatego, jeżeli przeraziła cię liczba plików wordpressowego motywu, możesz spocząć :)
Single.php to kopia index.php z wyjątkiem usunięcia argumentu "Czytaj więcej" wewnątrz content i dodania tagu <?php comments_template( ); ?>, który podpina szablon komentarzy (comments.php)

comments.php

Kod: Zaznacz wszystko
<div id="comments">
<?php
if ( post_password_required() ) { ?>

<p>Wpis chroniony hasłem. Wpisz je, aby uzyskać dostęp do komentarzy.</p>

<?php return;} ?>


<?php if ( have_comments() ) : ?>
         <h3 id="comments-title"><?php
         printf( _n( '1 komentarz', '%1$s komentarzy', get_comments_number()),
         number_format_i18n( get_comments_number() ));
         ?></h3>

         <ol class="commentlist">
            <?php
               wp_list_comments();
            ?>
         </ol>

<?php else :
   if ( ! comments_open() ) :
?>
   <p class="nocomments">Komentarze wyłączone</p>
<?php endif; ?>

<?php endif;  ?>

<?php comment_form('comment_notes_after='); ?>

</div>


Początek zaczyna się sprawdzeniem dzięki funkcji post_password_required(), czy w kokpicie wp nie zabezpieczyliśmy komentarzy hasłem przed niezarejestrowanymi osobami (jeżeli uruchomiliśmy możliwość rejestracji ).
Następnie wykonujemy pętle, która sprawdza czy są jakieś komentarze dzięki have_comments().
W <h3> ujęliśmy ich liczbę w zależności od tego czy jest jeden czy kilka.
Do listy ol class="commentlist" wsadziliśmy funkcję <?php wp_list_comments();?>, która pobiera komentarze i wyświetla każdy w osobnym elemencie <li>. W przypadku kiedy wyłączyliśmy komentarze, sprawdzamy to przez comments_open() i wyświetlamy odpowiednie info.

functions.php

Kod: Zaznacz wszystko
<?php

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Right Sidebar',
'before_widget' => '<li id="%1$s" class="%2$s">',
'after_widget' => '</li>',
'before_title' => '<h2>',
'after_title' => '</h2>',
));

?>


Aby nasz pasek boczny działał poprawnie, musimy go zarejestrować funkcją register_sidebar. W kokpicie w sekcji z widgetami powinien pojawić się wtedy pasek "Right sidebar", do którego będziemy mogli przeciągać widgety. W ten sposób rejestrujemy wszystkie sidebary a może ich być kilka.
Jest tu kilka ciekawych argumentów. Ustawiłem, że przed widgetem ma być znacznik otwierający <li> wraz z identyfikatorem i klasą, która pomoże nam w ostylowaniu, a po nim znacznik zamykający </li>. Przed tytułem zaś, <h2> a po </h2>. Jednym słowem zamknąłem widget w tagach <li> a tytuł w <h2>

siebar.php

Kod: Zaznacz wszystko
<ul id="sidebar">
      <li>
         <h2>Szukaj</h2>
            <?php get_search_form(); ?>
      </li>
      
      <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Right Sidebar") ) : ?>      
      <?php endif; ?>      
   </ul>


Trochę się skurczył nieprawdaż ? Jak już mówiłem, strukturę widgetów zapożyczyłem domyślnie od wordpressa aby odpowiednio ostylować.
Tylko wyszukiwarka jest statyczna, gdyż zmodyfikowałem ją. Jest ładowana przez funkcję get_search_form(); z pliku searchform.php.

Najważniejszy jest tu kod:

Kod: Zaznacz wszystko
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar("Right Sidebar") ) : ?>      
      <?php endif; ?>   


To właśnie on sprawia, że nasz pasek staje się dynamiczny i możemy dodawać do niego widgety. Statyczne widgety muszą być poza nim, w innym wypadku nie wyświetlą się. Zwróć uwagę, że występuje tu nazwa paska, który zarejestrowaliśmy w functions.php.

searchform.php

Kod: Zaznacz wszystko
<form id="search_form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="get">
   <fieldset><legend><span class="auraltext">Formularz wyszukiwania</span></legend>
      <span id="input_left"><span id="input_right"><input type="text" value="Wpisz fraze do wyszukania..." name="s" id="s" class="search_input" onfocus="if(this.value=='Wpisz fraze do wyszukania...')this.value=''" onblur="if(this.value=='')this.value='Wpisz fraze do wyszukania...'" /></span></span>
      <input type="image" id="search_submit" src="<?php bloginfo('template_url'); ?>/images/submit.png" alt="Szukaj" />
   </fieldset>
</form>


Aby wyszukiwanie działało, musimy dodać do action <?php echo $_SERVER['PHP_SELF']; ?>

archive.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">
   
   <?php if (have_posts()) : ?>
   <h1 class="page-title">Archiwum <?php single_month_title(' '); ?> </h1>
   <?php while (have_posts()) : the_post(); ?>

      <!-- POST START -->
      <div class="post" id="post-<?php the_ID(); ?>">
         <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><?php the_category(' ,'); ?><span class="break">|</span></li>
            <li><span>Tagi: </span> <?php the_tags('',' ,', '' ); ?></li>         
         </ul>
         
         <?php the_content('Czytaj więcej...'); ?>
         
         <ul class="post_info">
            <li><span>Dodał: </span><?php the_author(); ?><span class="break">|</span></li>      
            <li class="comments_number"><?php comments_popup_link('brak komentarzy', '1 komentarz', 'komentarzy: %'); ?></li>                  
            <li class="data"><?php echo get_the_date(); ?></li>      
         </ul>
         
      </div>
      <!-- POST END -->
      
      <?php endwhile; else: ?>
      <p><?php _e('Brak postów spełniających twoje kryteria.'); ?></p>
      
      <?php endif; ?>
   
   <div id="post_nav">
         <div class="prev"><?php next_posts_link('&laquo; Starsze posty') ?></div>
         <div class="next"><?php previous_posts_link('Nowsze posty &raquo;') ?></div>
   </div>
   
</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>


Całość skopiowałem z szablonu index.php. U góry wyświetlam jedynie tytuł podstrony, wykorzystałem tutaj funkcję single_month_title(' '), która wyświetla miesiąc i rok wpisów. Wewnątrz funkcji znajduje się argument (' ') jest to spacja, która oddziela miesiąc od roku.

footer.php

Kod: Zaznacz wszystko
<div id="footer">
      <p>Copyright &copy; 2010-2011 by <a href="/">muraju</a> <br />Wszelkie prawa zastrzeżone</p>
   </div>
</body>
<?php wp_footer(); ?>
</html>


Po tagu </body> umieszczamy funkcję wp_footer(), która podobnie jak wp_head, jest wykorzystywana przez pluginy wordpressa do osadzania dodatkowych elementów.

search.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">   
   <?php if ( have_posts() ) : ?>
      <h1 class="page-title">Wyniki wyszukiwania dla: <?php the_search_query(); ?></h1>
            
      <?php while (have_posts()) : the_post(); ?>

      <!-- POST START -->
      <div class="post" id="post-<?php the_ID(); ?>">
         <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><?php the_category(' ,'); ?><span class="break">|</span></li>
            <li><span>Tagi: </span> <?php the_tags('',' ,', '' ); ?></li>         
         </ul>
         
         <?php the_excerpt(); ?>
         
         <ul class="post_info">
            <li><span>Dodał: </span><?php the_author(); ?><span class="break">|</span></li>      
            <li class="comments_number"><?php comments_popup_link('brak komentarzy', '1 komentarz', 'komentarzy: %'); ?></li>                  
            <li class="data"><?php echo get_the_date(); ?></li>      
         </ul>
         
      </div>
      <!-- POST END -->
      
      <?php endwhile; else: ?>
            <div id="post-0" class="post no-results not-found">
               <h1 class="entry-title">Niestety, nic nie znaleziono</h1>
               <div class="entry-content">
                  <p>Brak wyników dla tego hasła. Spróbuj użyć wyszukiwarki.</p>
               </div><!-- .entry-content -->
            </div><!-- #post-0 -->
<?php endif; ?>

      <div id="post_nav">
         <div class="prev"><?php next_posts_link('&laquo; Starsze posty') ?></div>
         <div class="next"><?php previous_posts_link('Nowsze posty &raquo;') ?></div>
      </div>
      </div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>


W nagłówku umieściłem tag the_search_query(), który wyświetla poszukiwaną frazę. Szablon ten nie różni się znacznie od index.php.
Zamiast the_content() do wyświetlania postów, użyłem funkcji the_excerpt(), która wyświetla pierwsze 55 słów wpisu, jednak możemy to zmienić w ustawieniach wp.
W pętli przedstawionej w index.php w przypadku braku postów, była wyświetlana odpowiednia notka. W tym wypadku wyświetlana jest notka o braku wyników wyszukiwania.

category.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">
   
   <?php if (have_posts()) : ?>
   <h1 class="page-title">Wpisy dla kategorii: <?php single_cat_title();?></h1>
   <?php while (have_posts()) : the_post(); ?>

      <!-- POST START -->
      <div class="post" id="post-<?php the_ID(); ?>">
         <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><?php the_category(' ,'); ?><span class="break">|</span></li>
            <li><span>Tagi: </span> <?php the_tags('',' ,', '' ); ?></li>         
         </ul>
         
         <?php the_content('Czytaj więcej...'); ?>
         
         <ul class="post_info">
            <li><span>Dodał: </span><?php the_author(); ?><span class="break">|</span></li>      
            <li class="comments_number"><?php comments_popup_link('brak komentarzy', '1 komentarz', 'komentarzy: %'); ?></li>                  
            <li class="data"><?php echo get_the_date(); ?></li>      
         </ul>
         
      </div>
      <!-- POST END -->
      
      <?php endwhile; else: ?>
      <p><?php _e('Brak postów spełniających twoje kryteria.'); ?></p>
      
      <?php endif; ?>
   
   <div id="post_nav">
         <div class="prev"><?php next_posts_link('&laquo; Starsze posty') ?></div>
         <div class="next"><?php previous_posts_link('Nowsze posty &raquo;') ?></div>
   </div>
   
</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>


W dalszym ciągu bazujemy na szablonie index.php. Dodałem tag < single_cat_title();, który wyświetla nazwę bieżącej kategorii

tag.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">
   
   <?php if (have_posts()) : ?>
   <h1 class="page-title">Wpisy dla tagu: <?php single_tag_title();?></h1>
   <?php while (have_posts()) : the_post(); ?>

      <!-- POST START -->
      <div class="post" id="post-<?php the_ID(); ?>">
         <h2 class="title"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
         <ul class="post_info">
            <li><span>Kategorie: </span><?php the_category(' ,'); ?><span class="break">|</span></li>
            <li><span>Tagi: </span> <?php the_tags('',' ,', '' ); ?></li>         
         </ul>
         
         <?php the_content('Czytaj więcej...'); ?>
         
         <ul class="post_info">
            <li><span>Dodał: </span><?php the_author(); ?><span class="break">|</span></li>      
            <li class="comments_number"><?php comments_popup_link('brak komentarzy', '1 komentarz', 'komentarzy: %'); ?></li>                  
            <li class="data"><?php echo get_the_date(); ?></li>      
         </ul>
         
      </div>
      <!-- POST END -->
      
      <?php endwhile; else: ?>
      <p><?php _e('Brak postów spełniających twoje kryteria.'); ?></p>
      
      <?php endif; ?>
   
   <div id="post_nav">
         <div class="prev"><?php next_posts_link('&laquo; Starsze posty') ?></div>
         <div class="next"><?php previous_posts_link('Nowsze posty &raquo;') ?></div>
   </div>
   
</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>


Tak samo jak w przypadku category.php, single_tag_title(); oznacza bieżący tag.

404.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">

            <h1 class="entry-title">Niestety, nie odnaleziono tej strony</h1>
            <div class="entry-content">
               <p>Strona, której szukałeś nie została odnaleziona. Spróbuj użyć wyszukiwarki.</p>
            </div>
         
</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>


W tym miejscu możemy ustawić dowolnie swoją stronę błędu.

page.php

Kod: Zaznacz wszystko
<?php get_header(); ?>
<div id="content">

<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>

            <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
                  <h2 class="entry-title"><?php the_title(); ?></h2>
               <div class="entry-content">
                  <?php the_content(); ?>      
               </div>
            </div>

            <?php comments_template( '', true ); ?>

<?php endwhile; ?>

</div>
   
<?php get_sidebar(); ?>
<?php get_footer(); ?>


Tak wygląda szablon statycznej podstrony. Co najlepsze, możemy utworzyć kilka szablonów wystarczy, że w nowo utworzonym twojapodstrona.php dodasz na początku

Kod: Zaznacz wszystko
<?php
/*
Template Name: Twoja podstrona
*/
?>


Wtedy też w menu podstron podczas jej dodawania, będziesz mógł wybrać ten szablon. Może w nim nie być sidebara, może mieć inny pasek, może też całkiem inaczej wyglądać, wszystko zależy od ciebie.

Faza IV -instalujemy potrzebne pluginy i dostosowujemy theme

Nie pozostało nam już nic do zrobienia jak tylko wejść do kokpitu i dostosować ustawienia do naszego motywu.
Po jego aktywowaniu w Wygląd > Motyw, przejdziemy do Strony > podstrony, tam utworzyłem nową podstronę kontakt .

Image

Wracamy do Wyglad > menu , utworzymy nowe menu i dodamy odpowiednie pozycje.

Image

Teraz pobieramy plugin MyCategoryOrder http://wordpress.org/extend/plugins/my-category-order/ i wypakowujemy do folderu wordpress\wp-content\plugins. Następnie przechodzimy do menu Wtyczki i aktywujemy My Category Order.

Image

Teraz w Wpisy > Kategorie, możemy dodać odpowiednie kategorie.

Image

Przechodzimy teraz do Wpisy > Mu Category Order i ustawiamy swoją hierarchię.

Image

Finiszując, przechodzimy do Wygląd > Widgety i dodajemy widgety do paska.

Image


THE END

Pobierz motyw

DOWNLOAD blog programosy.pl theme

Autor postu otrzymał pochwałę
"Wczoraj do ciebie nie należy. Jutro niepewne... Tylko dziś jest twoje."
Awatar użytkownika
muraju
~user
 
Posty: 447
Dołączenie: 26 Gru 2005, 20:55
Pochwały: 20




Powróć do Tworzenie stron www

Kto jest na forum

Użytkownicy przeglądający to forum: Brak zarejestrowanych użytkowników oraz 1 gość