The Clam Shell

Gallery

Wall Magazine

Gamezine

NEWSPRESS

Good Theme Lead 2

Marikit

New York

CoolRetro

Blue Rooster

BlueBubble

Bueno

Zeoal

Fotofolio

Furvious

cleanPRESS

Jungleland

KeKo

BrownMag

Art Themes

Futura

The Morning After

Elegance

Elegant Grunge

Androida

BlogTheme

SohoMag

WPESP

BlackPower

GrungeD

Color Paper

Curious

Portfolio WordPress Theme

WordPress Fun

FREEmium

ModernOak

Masinop

Meta-Morphosis

DeStyle

Irresistible

Skóra ta zbudowana została na fundamentach poprzedniej skóry - theme do portfolio.
Posiada ona klasyczny układ - dwie kolumny, wyświetlanie stron, wpisów, archiwum, ostatnie komentarze (tym razem bez uzycia wtyczki), możliwość wstawienia graficznej reklamy, itp.

Dostępne są jej dwie wersje:
1. Pierwsza posiada graficzny nagłówek z dorzucanym plikiem psd, który pozwoli na dopasowanie własnej wersji logotypu strony.
Pobierz: Vivee Theme v1 (1.1)

2. Druga wersja, posiada nagłówek tekstowy, w którym wyciągane są z panelu informacje o nazwie bloga oraz jego opis
Pobierz: Vivee Theme v2 (1.1)

Upadates

• 27.12.2008 - v 1.1 - Znaleźliśmy drobny błąd w wyglądzie wyszukiwarki. Nowe wersje do pobrania.

Tym razem mamy dla Was przetłumaczone skóry do WordPressa autorstwa Denisa Shakhova. Za jego osobistą zgodą zostały one zmodyfikowane dla polskich uzytkówników WP.

DevArt

Zobacz Demo
Pobierz skóre DevArt w polskiej wersji językowej

Librio

Zobacz Demo
Pobierz skóre Librio w polskiej wersji językowej

Życzymy miłego korzystania z przetłumaczonych skór do WP

W ramach propagowania WordPressa postanowiliśmy specjalnie dla naszych czytelników zacząć tłumaczyć ciekawe i estetyczne skóry, a następnie udostępniać je wszystkim.
Oto pierwsze 3 takie skóry:

GreyMagic

Zobacz Demo
Pobierz skóre GreyMagic

Grey100

Zobacz Demo
Pobierz skóre Grey100

BlueSkys

Zobacz Demo
Pobierz skóre BlueSkys

Informacja

W skórze GreyMagic oraz Grey100 znajdują się buttony reklamowe. Po zainstalowaniu skóry w Panelu Administracyjnym w Ustawieniach pojawi się nowa zakładka Theme Ads. W niej możecie ustawić ile banerów reklamowych ma się pojawić na stronie oraz w prosty sposób możecie przypisać w określonym miejscu określony obrazek - podając adres bezpośredni do niego i adres strony do jakiej ma prowadzić.

Życzymy miłego korzystania z przetłumaczonych skór do WP

Struktura plikowa szablonów do WP

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

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ą.

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.

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:

I zastąpic go tym:

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:

Zastępujemy fragmentem wcześniej napisanego kodu:

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:

W pliku footer.php podmienić musimy aktualny kod:

Naszym:

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

Najważniejsze informacje dotyczące cms WordPress

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

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

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

Jak to działa?

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

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

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

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

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

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

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

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

Kod mojego autorstwa wyglada następująco:

oraz xHTML

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