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.