WordPress: wygląd (odc.3) – analiza budowy standardowego nagłówka

Konstrukcję nagłówka Przeanalizujemy na przykładzie skórki o nazwie “Classic” standardowo dołączonej do podstawowego pakietu WordPress. Przeanalizujmy więc kolejne wiersze pliku header.php.

Pierwszy wiersz nie powinien być tajemnica dla nikogo kto ma jako-takie pojęcie o HTML-u:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'

Jest to obowiązkowa deklaracja typu dokumentu, która informuje przeglądarkę z jakim typem dokumentu i jakim standardem języka ma do czynienia. Jest to informacja niezbędna aby dokument został właściwie wyświetlony. W tym przypadku zadeklarowano dokument pisany językiem XHTML 1.0 w wersji Transitional. Nie jest to najlepszy wybór, ale lepiej tego nie zmieniać, gdyż fragmenty kodu generowane przez wbudowane funkcje WordPress mogą nie byś wyświetlane prawidłowo.

W następnej linijce mamy znacznik otwierający dokument.
(znacznik zamykający znajduje się na samym końcu pliku footer.php, co nie bardzo mi się podoba i kiedyś pokażę jak można to zmienić, żeby było bardziej elegancko.)

<html xmlns='http://www.w3.org/1999/xhtml' <?php language_attributes(); ?> >;

Taka a nie inna forma tego znacznika oczywiście podyktowana jest językiem jaki zadeklarowany został na początku dokumentu. Inna jest w przypadku HTML inna w przypadku XHTML. Jeśli więc deklaracja dokumentu nie została zmieniona nie należy też mieniać tej linijki. Na pierwszej pozycji widać atrybut xmlns, który definiuje przestrzeń nazw dla języka XML, czyli zestaw poleceń używanych w elemencie. Wartość 

http://www.w3.org/1999/xhtml

nie wskazuje na definicję języka, jest tylko pewnym, ustalonym ciągiem znaków sugerującym przeglądarce, że dokument zawiera polecenia języka XHTML. Aby było łatwiej, jest linkiem na stronę dotyczącą XHTML.

Zaraz po pierwszym atrybucie po raz pierwszy pojawia się wbudowana funkcja WordPress (należąca do grupy Template Tags) language_attributes(); . Funkcja ta jest zadeklarowana w pliku /wp-includes/general-template.php/ i zwraca informację o kolejnych atrybutach znacznika html. W naszym przypadku funkcja ta zwraca string: dir=”ltr” lang=”pl-PL” . Atrybut dir definiuje kierunek wyświetlania tekstu zaś atrybut lang definiuje język używany w dokumencie. Więcej o atrybutach znacznika html można znaleźć w całkiem przystępnym manualu.

Kolejna linijka zawiera znacznik otwarcia sekcji nagłowków:

<head profile='http://gmpg.org/xfn/11'>

Zawiera ona jeden atrybut profile, który definiuje adresy profili dokumentów HTML. Nie należy się nim szczególnie przejmować, gdyż póki co przeglądarki nie wykorzystują tego atrybutu.

Następna linia to jeden ze znaczników meta z kilkoma atrybutami: http-equiv, content oraz charset. Linia ta słuzy do prawidłowego zdefiniowania sposobu kodowania polskich znaków.

<?
<meta http-equiv='Content-Type&quot; 
content='<?php bloginfo('html_type'); ?>; 
charset=<?php bloginfo('charset'); ?>' />
?>

W linii tej dwukrotnie użyto funkcji bloginfo() (manual – codex) z różnymi parametrami, która
jest zadeklarowana w pliku /wp-includes/general-template.php/ i wywołana z parametrem ‘html_type’ zwraca wartość atrybutu Content-type, zaś z parametrem ‘charset’ zwraca atrybut informujący o sposobie kodowania dokumentu. Wartość zwracaną dla w tym przypadku można zmieniać w panelu administratora w zakładce [Settings]->[Wyświetlanie wpisów]. Zaleca się tam stosowanie kodowania UTF-8, ale już w innym artykule napisałam o tym jak zmienić kodowanie na ISO 8859-2. Poza tym najważniejszym znacznikiem meta można oczywiście wstawić inne jakie uznamy za niezbędne.

Po znaczniku ustawiającym kodowanie polskich znaków następuje linia odpowiedzialna za wyświetlanie tytułu strony na pasku tytułu przeglądarki. 

<title><?php bloginfo('name'); ?><?php wp_title(); ?></title>

Wewnątrz znaczników title znajdują się dwie funkcje bloginfo(); oraz wp_title(); (manual – codex). Pierwsza z nich już była wcześniej wykorzystywana, choć z innymi parametrami. Tym razem użyta z parametrem ‘name’ powoduje wyświetlenie tytułu bloga. Tytuł ten można zmieniać w panelu administracyjnym w zakładce [Settings]. Funkcja wp_title(); powoduje wyświetlenie tytułu podstrony, działu lub artykułu w zależności od tego co akurat przeglądamy. Tytuł ten standardowo poprzedzony jest znaczkiem ‘»’, ale zmieniając parametry funkcji wp_title(); można zastosować inny separator. Oczywiście treść zawarta wewnątrz znaczników title może być niemal dowolnie modyfikowana w zależności od potrzeb i upodobań. Od ustawionego na sztywno tekstu aż po różne kombinacje jakie można osiągać wykorzystując standardowe funkcje WordPress.

Po ustaleniu tytułu dokumentu skrypt przechodzi do bloku ograniczonego znacznikami style, w którym następuje załadowanie arkusza stylów za pomocą polecenia :

<style type='text/css' media='screen'>
		@import url( <?php bloginfo('stylesheet_url'); ?> );
	</style>

Wykorzystana została poraz kolejny funkcja bloginfo();, tym razem z parametrem ‘stylesheet_url’ zwraca ścieżkę do głównego arkusza css bieżącej skórki. Arkusz stylów zostanie wstawiony do nagłówka dokumentu HTML. Można również użyć polecenia:

<link rel='stylesheet' href='<?php bloginfo('stylesheet_url'); ?>' type='text/css' media='screen' />;

Wtedy w dokumencie HTML będzie wyłącznie link do arkusza stylów.
W następnej kolejności pojawia się seria znaczników link, których zadaniem jest określenie powiązań dokumentu. 

<link rel='alternate' type='application/rss+xml' title='RSS 2.0' href='<?php bloginfo('rss2_url'); ?>' />
	<link rel='alternate' type='text/xml' title='RSS .92' href='<?php bloginfo('rss_url'); ?>' />
	<link rel='alternate' type='application/atom+xml' title='Atom 1.0' href='<?php bloginfo('atom_url'); ?>' />
	<link rel='pingback' href='<?php bloginfo('pingback_url'); ?>' />

Atrybut rel opisuje relacje pomiędzy bieżącym dokumentem a kotwicą wyszczególnioną przez atrybut href. Atrybut type określa typ zawartości pod adresem docelowym, zaś title jest atrybutem zawierającym tekst pomocniczy. Zawartość atrybutu href we wszystkich przypadkach generowana jest za pomocą funkcji bloginfo(); kolejno z parametrami:

  • ‘rss2_url’ – zwraca link do źródła RSS 2.0
  • ‘rss_url’ – zwraca link do źródła RSS 0.92
  • ‘atom_url’ – zwraca link do źródła Atoma
  • ‘pingback_url’ – zwraca link do Pingbacka

Poniżej tego bloku znajduje się linia zawierająca wywołanie funkcji wp_get_archives() (manual – codex) z parametrem ‘type=monthly&format=link’.

<?php wp_get_archives('type=monthly&amp;format=link'); ?>

Funkcja ta wyświetla listę linków do archiwum opartego na datach. Lista ma format zależny od wybranych parametrów. Zastosowany w tym przypadku parametr ‘type=monthly&format=link’ powoduje, że będzie to lista do archiwów miesięcznych wyświetlona w formie znacznika link.

Kolejna linia zawiera wywołanie funkcji wp_head() (manual -codex), która wstawia dodatkowe znaczniki w zależności od konfiguracji aplikacji WordPress

<?php wp_head(); ?>

Po tej linii pojawiają się znaczniki zamknięcia sekcji nagłówków i otwarcia sekcji ciała dokumentu (body). Znacznik zamykający podobnie jak w przypadku znacznika zamykającego html znajduje się w pliku footer.php.

</head>
<body>

7 komentarzy do wpisu „WordPress: wygląd (odc.3) – analiza budowy standardowego nagłówka”

  2. Pingback: WordPress jako CMS – konwersja statycznej strony HTML do WordPressa | Wodospad kolorów

  5. Mam pytanie:
    “(znacznik zamykający znajduje się na samym końcu pliku footer.php, co nie bardzo mi się podoba i kiedyś pokażę jak można to zmienić, żeby było bardziej elegancko.”
    – czy nie można otworzyć i zamknąć w pliku index.php?

    Bardzo pomocna strona, świetny artykuł. Dziękuję!

Leave a Reply

%d bloggers like this: