Przygody z Thematic cz. 1 – instalacja i tworzenie tematu potomnego

Jak widzicie, tak jak zapowiedziałem kilka dni temu, zniknął temat graficzny jaki był do tej pory na tym blogu i zastąpiłem go tematem-frameworkiem o nazwie Thematic. Mam zamiar go rozbudowywać dzięki tematowi potomnemu, co już powoli się dzieje. Oto pierwszy z  wpisów opowiadających o moich przygodach podczas rozwoju skórki na bazie Thematica.

Odnośnie instalacji Thematica nie mam żadnych zastrzeżeń. Przebiegła bez problemu, jak zresztą każdej innej skórki.

Założeniem Thematica jest aby skórki tej nigdy bezpośrednio nie edytować. Jeśli chcemy zmienić wygląd naszego bloga, tworzymy nowy katalog i w nim umieszczamy pliki, które będą zmieniać zachowanie i wygląd  Thematica. W takim układzie Thematic nazywany jest tematem-rodzicem (parent theme) natomiast nasza skórka modyfikująca tematem potomnym/dzieckiem (child theme). Oto jak stworzyłem temat potomny.

W katalogu ze skórkami wp-content/themes utworzyłem nowy katalog i nazwałem go ‚szkicownik’ – taką bowiem na szybko wymyśliłem nazwę dla mojej skórki.

W katalogu tworzymy plik style.css, który rozpoczyna się od komentarza informacyjnego:

/* 
Plugin Name: Szkicownik
Template: thematic
*/

Komentarz ten jak widać zawiera tylko dwie informacje (można oczywiście dodać więcej jak w zwykłej skórce):

Plugin Name – czyli informację o nazwie naszej skórki
Template – nazwę tematu rodzica. Tu ważna uwaga: pomimo tego co pisze w tutorialach w sieci, nazwa musi być podana z małej litery (a właściwie prawdopodobnie musi być taka sama jak nazwa katalogu, w którym temat-rodzic się znajduje).

Jeśli teraz włączymy naszą skórkę ‚szkicownik’, wyświetli nam się strona kompletnie bez stylów. Prawidłowo. Od tej pory WordPress wszystkie pliki szkieletu strony (index.php, header.php, sidebar.php, footer.php) bierze z katalogu skórki Thematic, natomiast style z katalogu skórki Szkicownik. Jako, że plik style.css w katalogu ‚szkicownik’ nie zawiera żadnych definicji, strona wyświetla się goła.

Możemy w tym momencie zacząć albo samemu definiować nowe style dla strony od początku, możemy także zaimportować style z katalogu Thematica i potem je modyfikować. Wybrałem to drugie rozwiązanie, tak aby bazować na gotowym, jako tako ładnym, choć bardzo skromnym wyglądzie.

Style importujemy przez CSSowe polecenie @import url(‚sciezka’). Thematic swoje style ma rozbite na wiele plików, każdy odpowiedzialny za co innego. Co więcej wiele plików jest w kilku wariantach i to my sami decydujemy, który z nich zechcemy użyć. Przykładowo w katalogu z Thematikiem znajdziemy plik layouts/2c-r-fixed.css, który daje nam layout z dwoma kolumnami, z których prawa ma określoną na sztywno szerokość, zaraz obok jest plik layouts/2c-l-fixed.css, który daje układ podobny, tyle, że sidebar o stałej szerokości znajduje się po stronie lewej. Sami wybieramy, który z tych (jak i kilku innych) layoutów wybierzemy.

Oto jakie pliki postanowiłem sobie zaimportować na początek:

@import url('../thematic/library/styles/reset.css');

Plik zawierający tak zwany ‚reset css’. Kto tworzy strony już zna tę metodę tworzenia CSS, a kto jeszcze nie zna, prędzej czy później pozna. Pliki reset css służą wykasowaniu wszystkich specyficznych ustawień, różnych dla różnych przeglądarek. Przykłądowo Opera inaczej niż inne przeglądarki podchodzi do problemu marginesów i paddingów elementu BODY. Zazwyczaj pisanie CSS zaczynało się właśnie od podania takiej definicji dla Opery, jak dla innych przeglądarek. I właśnie takie niwelacje przeglądarkowych niuansów gromadzi plik reset.css.

Warto tu jeszcze zwrócić uwagę na ścieżkę do pliku. Aby dostać się do katalogu Thematica, najpierw musimy wyjść z naszego katalogu ‚szkicowanik’, w którym znajduje się nasz plik style.css (stąd te dwie kropki, kłania się lekcja DOSu; ale chyba nikomu czytającemu ten tekst nie muszę tego tłumaczyć).

Kolejne importujące linijki:

@import url('../thematic/library/styles/typography.css');

Plik powyższy zawiera definicje czcionek.

@import url('../thematic/library/layouts/2c-r-fixed.css');

O tym pliku już było wyżej. To nasz dwukolumnowy layout.

@import url('../thematic/library/styles/images.css');

Plik dba o prawidłowe wyświetlanie się obrazków wstawionych do tekstu wpisu.

@import url('../thematic/library/styles/default.css');

Mało wyjaśniająca nazwa, więc wyjaśnię sam: w pliku tym mamy informacje o schemacie kolorystycznym naszej strony (czyli taki szaro-czarno-biały).

@import url('../thematic/library/styles/plugins.css');

I to plik z kilkoma definicjami stylów dla elementów HTML tworzonych najczęściej przez pluginy (np w widgetach).

I to tyle. Po dodaniu tych kilku linijek nasz temat potomny Szkicownik wygląda identycznie jak Thematic. Nic więc jeszcze tak naprawdę nie osignąlieśmy. Przygotowaliśmy jedynie szkielet tak aby w następnych krokach móc zacząć go modyfikować.

Ale o tym w kolejnych wpisach.

Ten zarąbisty design niedługo zniknie

Obecna skórka na moim blogu – Paper – nie ma jeszcze roku, a już postanęowiłem ją zmienić. Już jakiś czas temu dostrzegłem to, co wyście dostrzegli już dawno, mianowicie, że najładniejsza ona nie jest 🙂 Opatrzyła mi się.

Próbowałem od kilku miesięcy zrobić coś innego, projektowałem kilka skórek, kilka nawet pociąłem wstępnie ale nawał pracy nie pozwolił mi ich skończyć. Skórkę jednak chcę zmienić; wpadłem zatem na inny pomysł.

Postanowiłem, że zainstaluję sobie czystego Thematica i będę go dzień po dniu, po kawałeczku w wolnych chwilach rozwijał. Thematic bowiem jest tak zwaną „skórką frameworkiem” – daje po zainstalowaniu bardzo prosty wygląd, ale dzięki tematom potomnym można go dowolnie przerabiać – do tego właśnie został stworzony.

Zatem – jeśli nikt z Was  mnie nie powstrzyma – za kilka dni usunę obecną skórkę, zastąpi ją coś co będzie zwykłym czarnym tekstem na białym tle i będzie na Waszych oczach rozwijać się w kierunku jakiegoś designu. Jakiego  – jeszcze nie wiem, będzie to podróż w nieznane i ciekawi mnie co z tego może wyjść 🙂

Co Wy na to? Naprawdę bardzo proszę o wyrażenie swojego zdania w komentarzach o takim pomyśle. Jeśli wszyscy się skrzynką, że ta skórka ma zostać – zostawię. Z drugiej strony – choć bardzo chcę zrobić ten eksperyment – trochę mi brakuje odwagi, więc także słowa wsparcia są bardzo mile widziane 🙂

Wczoraj zapytałem o to samo na flakerze robiąc tam ankietę. 91% osób powiedziało, że to bardzo dobry pomysł, 9% że skórkę powinienem zmienić, ale na jakąś ostateczną, a calutkie 0 (zero) osób stwierdziło, że obecna skórka im się podoba 🙂 To jednak Wy jesteście czytelnikami tego bloga, więc chcę wysłuchać Waszej opinii 🙂