nagradzam tutoriale

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

    dodano 15.12.2007 / komentarzy: 2 / autor: agressiva

    Artykuł ten jest kontynuacją pierwszej części, w której dowiedzieliście się najwazniejszych rzeczy odnośnie Wordpressa i pierwszego etapu tworzenia własnego theme. Teraz czas zapoznać się z dalszymi krokami. Na poczatek z jakich plików składa się standardowa skóra do wordpressa i jak wyedytować ich zawartość.

    Struktura plikowa szablonów do WP

    Każda skóra do Wordpressa składa się z kilku podstawowych plików:

    theme do Wordpress

    Każdy ten plik odpowiada za wygląd poszczególnych elementów na naszej stonie opartej o system Wordpress, np.

    • index.php – odpowiada za stronę główną
    • archive.php – wyglad podstrony z archiwum wpisów
    • comments.php – wyglad komentarzy ułożonych pod pojedynczym wpisem
    • footer.php – wyglad stopki strony
    • header.php – wyglad nagłównka strony
    • page.php – wygląd „stron” na naszej stronie
    • sidebar.php – odpowiada za wygląd menu bocznego
    • single.php – wyglad pojedynczego wpisu otwartego na podstronie

    Na wstępie należy powiedzieć, że te pliki nie mają sztywnej konstrukcji. Można je modyfikowac dowoli zgodnie z przeznaczeniem strony.
    Jednym z lepszych sposobów na stworzenie własnej skóry jest zmiana już istniejącej. Osobiście polecam skóre default która znajduje się w katalogu wp-content/themes/default/

    Aby na jej plikach źródłowych stworzyć theme należy ją skopiować, wkleić w katalogu wp-content/themes/ i zapisac pod własną nazwą.

    theme do Wordpress

    Fakt, że dokonaliśmy tą czynność możemy zobaczyć w panelu administacyjnym w zakładce Wygląd (Presentation).
    W tym momencie przejdziemy już do konkretnego działania na plikach Wordpressowych. Na wstępie dobrze jest podzielić sobie wcześniej napisany kod strony głównej naszej skórki za pomocą komentarzy na poszczególne elementy, tj. nagłówek, menu, stopkę, część odpowiadającą za wyświetlanie treści. Np.

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

    <body>
    <div id="page">

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

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

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

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

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

    </div>

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

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

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

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

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

    W katalogu głównym skopiowanego theme znajduje się katalog images z obrazkami do poprzedniej edycji tej skóry, my wyrzucamy je wszystkie i na ich miejsce wrzucamy obrazki, które złożą się na nową wersję skóry.

    Kiedy jest już to zrobione z katalogu, otwieramy plik style.css z katalogu naszej przyszłej skórki i usuwamy zawartość, wklejamy zamiast tego własny styl, który został napisany przy okazji pisania kodu strony głównej po pocięciu szablonu graficznego. Po wrzuceniu nowego stylu CSS skóra nasza wygląda dość strasznie.

    Aby pozbyć się takiego stanu rzeczy należy teraz zająć się kolejnymi plikami wchodzącymi w skład skóry.

    Przechodzimy do pliku index.php, otwieramy do podobnie jak style.css w edytorze html.

    Jak widać jest tutaj dużo funkcji PHP, które decydują o wyswietlaniu wygladu strony / bloga. Ogromną zaletą Wordpressa jest fakt, że do tworzenia theme nie trzeba być znawcą języka PHP – jedynie co należy zrobić aby poznać która funkcja jest do czego to wejść na stronę oficjalną Wordpressa i przeczytać wybrane działy dokumentacji. W dalszym dziale przedstawię najwazniejsze tzw. Temaplate Tagi (funkacje PHP) stosowane przy skórach.

    W pliku index.php jak i w innych plikach skóry są takie linijki:
    <?php get_header(); ?>, <?php get_sidebar(); ?>, <?php get_footer(); ?> one decydują o wyświetleniu headera, sidebara oraz footera, czyli stopki. Kolejność ich ułożenia jest dość istotna, bo jak już wiadomo czytanie kodu przez przegladarkę odbywa się od góry do dołu i od lewej strony do prawej.
    I jeżeli nasz szablon ma mieć sidebara ułożonego od lewej strony funkcja <?php get_sidebar(); ?> powinna znaleźć się tuż pod <?php get_header(); ?>. I tak tez musimy uczynic w tym przypadku.

    Z kodu index.php musimy wyrzucić ten fragment:

    <div class="post" id="post-<?php the_ID(); ?>">
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <small><?php the_time(’F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

    <div class="entry">
    <?php the_content(’Read the rest of this entry &raquo;’); ?>
    </div>

    <p class="postmetadata"><?php the_tags(’Tags: ‘, ‘, ‘, ‘
    ‘); ?> Posted in <?php the_category(’, ‘) ?> | <?php edit_post_link(’Edit’, ”, ‘ | ‘); ?>  <?php comments_popup_link(’No Comments &#187;’, ‘1 Comment &#187;’, ‘% Comments &#187;’); ?></p>
    </div>

    I zastąpic go tym:

    <div id="prawo">

    <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>
    <!– div w którym znajduje się treść i pozostałe elementy pojedyńczego wpisu –>
    <div class="tresc">
    <!– tytuł wpisu –>
    <h1 class="tytul">Jakiś tytuł wpisu</h1>
    <!– dane o publikacji, kategorii i komentarzach –>
    <div class="dane"><span class="red">Opublikowany:</span> 02.02.02 | <span class="red">Kategoria:</span> Ciekawostki | 2 <span class="red">komentarze</span></div>
    <p>Zawartość wpisu</p>
    </div>
    </div>
    <!– koniec main –>
    </div>

    Funkcje <?php if (have_posts()) : ?>, <?php while (have_posts()) : the_post(); ?>, które decydują o wyświetlaniu wpisów należy podać tuż przez fragmentem kodu, który podczas wyświetlania wpisów będzie powtarzany, czyli każdy wpis będzie miał taką samą strukturę.
    Do uzupełnienia plików template tagami przejdziemy w następnym dziale, teraz doprowadzimy każdy z plików do prawidłowej formy.

    W pliku header.php fragment:

    <div id="page">
    <div id="header">
    <div id="headerimg">
    <h1><a href="<?php echo get_option(’home’); ?>/"><?php bloginfo(’name’); ?></a></h1>
    <div class="description"><?php bloginfo(’description’); ?></div>
    </div>
    </div>
    <hr />

    Zastępujemy fragmentem wcześniej napisanego kodu:

    <div id="page">

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

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

    Teraz całą zawartość pliku sidebar.php zastępujemy przygotowanym fragmentem kodu, który decydować będzie o wyglądzie i ułożeniu menu po lewej stronie.
    Czyli:

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

    W pliku footer.php podmienić musimy aktualny kod:

    <hr />
    <div id="footer">
    <!– If you’d like to support WordPress, having the "powered by" link somewhere on your blog is the best way; it’s our only promotion or advertising. –>
    <p>
    <?php bloginfo(’name’); ?> is proudly powered by
    <a href="http://wordpress.org/">WordPress</a>

    <a href="<?php bloginfo(’rss2_url’); ?>">Entries (RSS)</a>
    and <a href="<?php bloginfo(’comments_rss2_url’); ?>">Comments (RSS)</a>.
    <!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. –>
    </p>
    </div>
    </div>

    Naszym:

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

    Komentarze / dodaj komentarz


    • autor: Eref
      dodano: 09.09.2008

      Przeczytałem z uwagą i (jak sądzę) ze zrozumieniem obie części “Struktura plikowa szablonów do WP”. Przy wykonywaniu ćwiczenia pojawia mi się błąd: “Parse error: syntax error, unexpected $end in E:\xampp\htdocs\wp\wp-content\themes\nauka\index.php on line 45″.
      W Google odszukałem co znaczy “unexpected $end in”, sprawdziłem wszystkie nawiasy - nic nie znalazłem, ale błąd wciąż tkwi.
      Przyznaję, że moja wiedza o PHP jest mizerna, ale właśnie dlatego próbuję wykonać to ćwiczenie by się czegoś dowiedzieć i nauczyć.
      Pozdrawiam.


    • autor: palmiak
      dodano: 10.09.2008

      Sprawdzę później jeszcze dokładnie, ale błąd o którym mówisz wygląda na to, że gdzieś zapomniałeś (albo my zapomnieliśmy) zamknąć jakieś pętli. zobacz czyl ilość “{” równa się ilości “}”. Jeżeli nie to musisz jeden dostawić.

    Napisz komentarz