Przygody z Thematic cz. 2 – przenosimy menu

Czas opisać kolejne rzeczy, które możemy zrobić z skórką-szablonem jakim jest Thematic. Dziś napiszemy bardzo mało kodu (czyż to nie wspaniale?), ale nieco się rozpiszę, po to, by wyjaśnić Wam dlaczego właśnie robi się to tak, a nie inaczej.

Domyślnie w Thematicu menu znajduje się pod tytułem bloga i jego jednozdaniowym opisem. Ja jednak postanowiłem sobie, że owo menu chce mieć na samej górze strony, tak jak to teraz widzicie na blogu. Jako, że blog będzie się zmieniał, a artykuł ten ktoś może przeczytać, gdy wygląd już będzie zupełnie inny, oto dwie ilustracje.

Tak wygląda blog przed zmianami:

Menu położone pod nagłówkiem

Menu położone pod nagłówkiem

A tak będzie wyglądał na koniec:

Menu położone nad nagłówkiem

Menu położone nad nagłówkiem

Teraz chyba wszystko jest jasne, co chcemy osiągnąć. A oto opis jak to zrobić.

Firebugiem sprawdziłem w jakim miejscu kodu HTML znajduje się menu. Wynik: jest to element wewnątrz diva o id “header” i jest ostatnim elementem w tym divie (jako element rozumiem zbiór tagów HTML tworzących te menu).

Intuicja mi podpowiedziała by zajrzeć do pliku header.php Thematica. Wszystko co tam znalazłem objęte divem “header” to ten fragment:

<div id="header">
 <?php
        // action hook creating the theme header
        thematic_header();
 ?>
</div><!-- #header-->

Jak widać wiele tam nie ma. Jedna php-owa funkcja thematic_header(), która w efekcie działania tworzy wszystkie elementy wewnątrz diva. Musimy więc znaleźć tę funkcję i zobaczyć jak wygląda.

Już wcześniej przejrzałem sobie strukturę plików i katalogów thematica i wiem, że wszystkie funkcje znajdują się w plikach zawartych w katalogu /library/extensions. Akurat pliki w tym katalogu są dość logicznie nazwane i wystarczy szybki rzut okiem by domyśleć się, że funkcje pliku skórki header.php znajdują się w wyżej wymienionym katalogu w pliku header-extensions.php. Po otworzeniu pliku okazuje się, że mam rację, definicja funkcji thematic_header() wygląda następująco:

// Used to hook in the HTML and PHP that creates the content of div id="header">
function thematic_header() {
    do_action('thematic_header');
} // end thematic_header

Króciutkie i na pierwszy rzut oka może nam niewiele mówić. Trzeba więc grzebać dalej. Przyznam, że to jest moment, w którym przychodzi do głowy aby chrzanić rozgrzebywanie tego i po prostu w naszej nowej skórce ‘szkicownik’ utworzyć własny plik header.php i napisać w nim wszystko od nowa.

Takie rozwiązanie byłoby jednak okropne. Po pierwsze musielibyśmy napisać cały kod typowy dla plików header.php od nowa. Wszystkie tagi HTML, wszystkie tagi PHP, wszystkie template tagi WordPressa. Kłóci się to kompletnie z ideą instalowania Thematica – zainstalowaliśmy go bowiem po to, by uniknąć właśnie pisania kodu.

Po drugie wyobraźmy sobie, że twórcy Thematica dodają w swojej skórce jakieś ulepszenie w pliku header.php. Jeśli stworzymy własny plik header.php z owego ulepszenia nie skorzystamy. Musielibyśmy w przyszłości śledzić zmiany w skórce thematic, analizować czy dane zmiany są istotne dla naszej skórki potomnej i ręcznie nanosić je (lub nie) w nadpisanych przez nas plikach. To niepotrzebna praca. Jeśli mamy tylko jeden blog to pół biedy. Jeśli jednak jesteśmy developerami stron opartych na WP i mamy ich wiele opartych na na Thematicu, będziemy musieli poświęcić naprawdę sporo czasu na wprowadzanie poprawek, na których raczej nie zarobimy (chyba, że ciężar wprowadzania poprawek w umowie przeniesiemy na klienta, ale wg mnie jest to rozwiązanie nieuczciwe).

OK, zatem skoro już korzystamy z Thematica korzystajmy z niego prawidłowo. Spójrzmy jeszcze raz na kod powyżej.

Co robi ta funkcja? Jej działanie można sprowadzić do takiego opisu:

“Odnajdź w kodzie skórki (oraz w kodzie skórki potomnej) wszystkie wywołania add_action odwołujących się do haka o nazwie ‘thematic_header’ i wykonaj je w tym miejscu”

Innymi słowy, jeśli w kodzie thematica lub skórki potomnej występuje przykładowo kod:

add_action('thematic_header', 'nasza_funkcja');

Zostanie w tym momencie wykonana funkcja nasza_funkcja() (którą musimy gdzieś zdefiniować, jeśli jeszcze takiej definicji nie ma).

Zatem kod z pliku header.php tak naprawdę wykonuje wszystkie znalezione akcje (add_action) odwołujące się do haka “thematic_header”. Wykona akcje zdefiniowane w samym thematicu, ale także akcje jakie samemu zdefiniujemy w naszej skórce potomnej w pliku functions.php (co ciekawe zostaną także przeskanowane aktywne pluginy w poszukiwaniu odwołania do tego haka, ale tym na razie się nie przejmujmy; nadmieniam to tylko aby dać znać, że także przez pluginy możemy modyfikować skórki).

Okej, znajdźmy więc akcję, która powoduje wykonanie funkcji tworzącej menu. Dalej w tym samym pliku header-extensions.php możemy znaleźć szereg linijek powodujących wykonanie kolejnych akcji skojarzonych z hakiem ‘thematic_header’, na interesuje ta, która powoduje stworzenie elementu HTML o id “access” (czyli naszego menu):

// Create #access
// In the header div
function thematic_access() { ?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_page_menu('sort_column=menu_order') ?>
</div><!-- #access -->
<?php }
add_action('thematic_header','thematic_access',9);

Co tu mamy? Najpierw jest definicja funkcji thematic_access(), która w ostatniej linijce jest “podhaczana” za pomocą add_action do dobrze nam już znanego haka “thematic_header”. Dziewiątka na końcu oznacza, że akcja ta ma się wykonać jako dziewiąta: jeśli gdzieś są akcje odwołujące się do “thematic_header” o niższych liczbach (a są, przejrzyjcie plik header-extensions.php), mają się one wykonać najpierw.

Jak obejrzycie plik header-extensions.php, zobaczycie, że przed wyżej zacytowanym przeze mnie fragmentem kodu są inne funkcje podhaczone w ten sposób: jest funkcja powodująca dodanie tytuły bloga, opisu bloga, kilka pomniejszych…

OK, oglądanie kodu w tym momencie możemy uznać za zakończone. Wiemy już wszystko co powinniśmy wiedzieć. Jak teraz jednak dzięki tej wiedzy dodać menu nad tytułem bloga i jak usunąć menu pod tytułem bloga?

Pierwsze co przychodzi do głowy to pliku tym po prostu zmienić cyfrę ‘9’ na mniejszą, tak aby tworzenie menu wykonało się jeszcze przed stworzeniem innych elementów (w tym tytułu naszego bloga). Kusi naprawdę, aż się chce zmienić cyferkę na ‘1’.

Jednak nie. Znów przez to zepsulibyśmy ideę Thematica: gdy w przyszłości twórcy tej skórki wydadzą jej nowszą wersję, nasza zmiana zostałaby nadpisana. Po to właśnie stworzyliśmy w poprzedniej lekcji skórkę potomną, by właśnie w niej robić zmiany bez obawy o nadpisanie ich.

Otwórzmy więc katalog naszej skórki i utwórzmy tam plik functions.php. Wewnątrz dodajmy następujacy kod:

<?php
add_action('thematic_header', 'thematic_access',1);

Banalnie proste, prawda? Spowodowaliśmy, że funkcja thematic_access() tworząca menu wykona się jako pierwsza w ramach haka ‘thematic_header’.

Odśwież teraz stronę bloga. Zobaczysz taki widok:

Menu nad nagłówkiem oraz pod nim

Menu nad nagłówkiem oraz pod nim

To nie do końca to, co chcieliśmy osiągnąć. Co prawda menu pojawiło się nad nagłówkiem, ale wciąż znajduje się także pod nim. Dzieje się tak dlatego, że akcja z pliku header-extensions.php (ta z dziewiątką) nadal się wykonuje. Musimy ją więc odwołać, a robi się to za pomocą “antyhaka” remove_action(). Dodajemy następujący kod do naszego pliku functions.php:

add_action('init', 'usun_standardowe_menu');
function usun_standardowe_menu() {
 remove_action('thematic_header','thematic_access',9);
}

Za pomocą akcji ‘init’ wywołujemy własną funkcję usun_standardowe_menu(). Funkcja ta natomiast odwołuje wszystkie akcje ‘thematic_access’ odwołujące się do haka ‘thematic_header’ z priorytetem ‘9’. W ten oto sposób powiedzieliśmy wordpresowi aby zignorował odpowiednią akcję z pliku header-extensions.php.

Proste? Oceńcie sami. Opis jaki zamieściłem jest bardzo długi, ale zauważcie, że ostatecznie piszemy tylko 4-5 linijek w naszym pliku functions.php. Najwięcej czasu zajmuje ustalenie “co gdzie i jak” jest robione w Thematicu, ale jeśli dobrze się pozna tę skórkę, w przyszłości zmiany takie jak wyżej zajmą nie więcej niż kilka minut.

0

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.

0