W poprzedniej części rozpoczęliśmy budowę tematu WordPress. Nasze dalsze działania rozpoczniemy od uzupełnienia szablonu nagłówka header.php o kolejne potrzebne elementy.
Obecnie nasz nagłówek zawiera "czysty" html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
Na wstępie uzupełnimy go o deklarację wersji językowej strony która umieścimy wewnątrz znacznika <html>:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
Kolejnym krokiem będzie uzupełnienie sekcji head strony w tym meta tagów odpowiedzialnych za definiowanie tytułu, linków do arkuszów stylu itp. W tym celu sekcję <head></head> uzupełnimy w nastepujący sposób:
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) {
bloginfo('name'); print '. '; bloginfo('description'); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) {
bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
elseif ( is_404() ) { bloginfo('name'); print '. Nie znaleziono'; }
else { bloginfo('name');}
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>;
charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>"
title="<?php printf( 'Ostatnie posty z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>"
title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
Znacznik title został uzupełniony kodem php który w zależności od typu strony generuje tytuł na podstawie atrybutów systemowych WordPressa. Dla przykładu dla stron wyszukiwania w tytule poza nazwą bloga (funkcja bloginfo(name);) pojawi się wpis Wyniki wyszukiwania dla oraz zawartość szukanej frazy (funkcja wp_specialchars($s);).
Trzeba tu koniecznie napisać kilka słów o funkcji bloginfo(). Funkcja ta służy do pobierania niektórych atrybutów systemowych WordPressa (głównie z profilu użytkownika i sekcji ustawień podstawowych systemu) i będzie często wykorzystywana we wszystkich szablonach, które zechcecie stworzyć.
W kolejnych wierszach mamy dynamicznie wygenerowane wartości metadanych dla meta tagów content-type i description, następnie zaś link do arkusza stylów.
Kolejny "tajemniczy" wiersz pozwala zainicjować skrypt ładujący wątki komentarzy dla stron, na których komentarze występują.
Funkcja wp_head(); w kolejnym wierszu jest hakiem który potrzebny jest po to, aby pluginy wyświetlane w dalszej części strony mogły za jego pośrednictwem załadować w nagłówku niezbędne im do funkcjonowania elementy (style, skrypty javascript).
Na koniec mamy odnośniki do RSS oraz pingback (pingback informuje o tym, że ktoś dodał linka do naszego bloga lub wpisu.)
W efekcie wprowadzonych modyfikacji nasz szablon nagłówka wygląda tak oto:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print '. '; bloginfo('description'); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
elseif ( is_404() ) { bloginfo('name'); print '. Nie znaleziono'; }
else { bloginfo('name');}
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>"
title="<?php printf('Ostatnie posty z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>"
title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<!-- #logo, miejsce na logo, znak firmowy itp -->
</div>
<div id="nav">
<!-- #nav, nawigacja górna -->
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
O ile sekcja head dokumentu html wygląda na ukończoną, o tyle kontenery które przygotowaliśmy na informacje w nagłówku strony są nadal puste. Najwyższy czas je uzupełnić.
Na poczatek w sekcji firma umieścimy warunkowy link do naszej strony głównej:
<div id="firma">
<?php if ( !is_home() && !is_front_page() ) { ?>
<div id="home-link">
<a href="<?php bloginfo( 'url' ) ?>" title="<?php bloginfo( 'name' ) ?>" rel="home">
<?php bloginfo( 'name' ) ?>
</a>
</div>
<?php } ?>
</div>
Kolejnym elementem niezbędnym na każdej stronie jest menu. Aby załadować w nagłówku menu WordPress skorzystamy z wbudowanej funkcji wp_page_menu(); Funkcja przyjmuje m.in. parametr pozwalający określić sposób uporządkowania wyświetlanych opcji menu oraz parametr pozwalający określić nazwę klasy CSS która zostanie przypisana głównemu kontenerowi menu. Dla przykładu:
wp_page_menu(array( 'menu_class' => 'page-navi', 'sort_column' => 'menu_order' ));
Wywołanie powyższej funkcji umiescimy wewnątrz kontenera o identyfikatorze nav. Ostatecznie więc szablon nagłówka strony przybierze formę:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print '. '; bloginfo('description'); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print '. Wyniki wyszukiwania dla '.esc_html($s); }
elseif ( is_404() ) { bloginfo('name'); print '. Nie znaleziono'; }
else { bloginfo('name');}
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta http-equiv="description" content="<?php bloginfo('description'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>"
title="<?php printf('Ostatnie posty z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>"
title="<?php printf('Ostatnie komentarze z %s', esc_html( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
<body>
<div id="container">
<div id="header"><!-- nagłówek -->
<div id="header-inner"><!-- wewnętrzny kontener nagłówka -->
<div id="firma">
<?php if ( !(is_home() || is_front_page()) ) { ?>
<div id="home-link">
<a href="<?php bloginfo( 'url' ) ?>" title="<?php bloginfo( 'name' ) ?>" rel="home">
<?php bloginfo( 'name' ) ?>
</a>
</div>
<?php } ?>
</div>
<div id="nav">
<?php wp_page_menu(array( 'menu_class' => 'page-navi', 'sort_column' => 'menu_order' )); ?>
</div>
</div> <!-- #header-inner -->
</div><!-- #header -->
<div id="main">
Na kolejnym etapie budowy tematu WordPress przystąpimy do uzupełniania stopki strony o elementy generowane przez silnik CMSa.
Brak komentarzy:
Prześlij komentarz