Kategoria: Tutoriale i przykłady

Już kilka osób pytało w komentarzach, jak w WordPressie wykonać menu z obrazkami. Zainteresowanie tematem wcale mnie nie dziwi – menu obrazkowe może uatrakcyjnić wygląd i podkreślić indywidualny charakter strony. A pytanie, jak „wbić się” z własnymi grafikami do menu generowanego przez WordPressa, długo stanowiło zagadkę i dla mnie. Do momentu, gdy poznałam klasę Walker, której zastosowanie opisałam w artykule Ujarzmić menu w WordPressie….

Czytaj dalej Jak zrobić menu obrazkowe w WordPressie – tutorial

Już dawno nie zaglądałam do statystyk odwiedzin tego bloga. Właśnie to zrobiłam i oniemiałam: najwięcej wejść z wyszukiwarek jest na hasło „WordPress jak dołączyć plik php”. Nie byłoby w tym może nic szczególnego, w końcu to blog o WordPressie, jednak nie przypominam sobie, żebym w ogóle pisała artykuł na ten właśnie temat.

Czytaj dalej Własny formularz w WordPressie, czyli jak dołączyć swój kod php

Tutorial pokazuje na żywym przykładzie (stronach demo), jak przerobić statyczną stronę opartą o pliki HTML i CSS w witrynę działającą w systemie WordPress. W artykule znajdziesz również:

• projekt graficzny strony demo na warstwach
• statyczną stronę demo wykonaną na podstawie pliku graficznego w postaci plików HTML i CSS
• odpowiadającą jej stronę demo działającą pod WordPressem
• paczkę plików do pobrania zawierającą kody źródłowe gotowe do uruchomienia i wykorzystania na własne potrzeby

Na rysunkach obok zamieszczono odnośniki do działających przykładów: statycznej strony HTML, którą – w ramach tego tutoriala – przekształcimy w witrynę działającą pod WordPressem.

Tworzenie witryny opartej o WordPress – etapy

Na rysunku niżej widzimy etapy tworzenia strony internetowej. W kroku 1 wyodrębniamy podstawowy szkielet witryny (bloki) i na jego podstawie wykonujemy statyczną stronę HTML. W tym tutorialu zajmiemy się krokiem 2: mając gotową, działającą stronę, opartą o pliki HTML/CSS dostosujemy ją do działania pod WordPressem.

Czy każdą statyczną stronę/witrynę HTML można dostosować do działania na WordPressie?

Tak, jednak aby proces ten przebiegł gładko, taka strona musi być wcześniej odpowiednio przygotowana. Tutorial oparty jest właśnie na takiej witrynie. Jest to statyczna strona HTML dla fikcyjnej firmy „Milena Motrawska fotografia artystyczna”. Strona ta jest z założenia prosta, lecz zarazem odpowiada typowej stronie internetowej prezentującej usługi małej lub średniej firmy.

Warunki, jakie powinna spełniać statyczna witryna HTML, żeby zamienić ją na stronę działającą pod WP:

• reguły CSS muszą być zebrane w zewnętrznym pliku (style.css)
• witryna musi mieć strukturę bloków podstawowych łatwą do odwzorowania na podstawowe pliki szablonu WordPressa (układ bazowy oparty o bloki typu: header, sidabar, content, footer itp.)
• podstrony powinny być napisane na bazie spójnego layoutu– np. kolumna boczna powinna być na wszystkich podstronach w tym samym miejscu.
• w niektórych miejscach struktur HTML muszą być użyte odpowiednie klasy
  Dla przykładu: aby za pomoc stylów CSS wyróżnić stronę bieżącą, dla znacznika li musimy użyć klasy „curren_page_item”.

Zamiana strony HTML na witrynę działającą pod WordPress – kroki:

• Krok 1: Zainstalowanie WordPressa
• Krok 2: Ustawienie parametrów WordPressa do naszych potrzeb:
  • Krok 2a: Nadanie tytułu witrynie
  • Krok 2b: Ustawienia sposobu wyświetlania adresów URL podstron
• Krok 3: Założenie stron
• Krok 4: Ustawienie strony głównej
• Krok 5: Założenie katalogu na nasz motyw
• Krok 6: Przygotowanie obrazka podglądu motywu
• Krok 7: Założenie pliku style.css
• Krok 8: Przekopiowanie katalogu images na serwer
• Krok 9: Odwzorowanie plików HTML-owych na pliki php
  • Krok 9a: header.php
  • Krok 9b: sidebar.php
  • Krok 9c: index.php
  • Krok 9d: footer.php
• Krok 10: Włączenie naszego motywu

Krok 1: Zainstalowanie WordPressa

Instalujemy (najlepiej najnowszą wersję) WordPressa lokalnie lub zdalnie na serwerze.

Krok 2: Ustawienie parametrów WordPressa do naszych potrzeb:

Krok 2a: Nadanie tytułu i opisu witrynie

Logujemy do się do panelu administracyjnego, wchodzimy w Ustawienia->Ogólne i ustawiamy tytuł i podtytuł naszej witryny. W naszym przykładzie będzie to Milena Motrawska (pole Tytuł witryny) fotografia artystyczna (pole Opis).

Krok 2b: Ustawienia sposobu wyświetlania adresów URL podstron

Domyślnie WordPress wyświetla adresy stron ze znakami zapytania i liczbami, np. www.milenamotrawska.pl/?page_id=11. Bardziej przyjazny (również dla Google) sposób wyświetlania to taki, w którym ostatni człon adresu odpowiada tytułowi strony, np: milenamotrawska.pl/o-mnie

W tym celu wchodzimy w Ustawienia->Bezpośrednie odnośniki, zaznaczamy pole „Własny format” i wpisujemy /%postname%/. Uwaga: jeśli zmiana ta nie dała u Ciebie efektu, pozostań przy domyślnych ustawieniach lub poczytaj o ręcznym ustawieniu pliku .htaccess

Krok 3: Założenie stron

W panelu admin. w sekcji Strony wybieramy „Dodaj nową” i kolejno zakładamy strony o tytułach:

• Start (1)
• O mnie (2)
• Portfolio (3)
• Oferta (4)
• Kontakt (5)

W nawiasach podano kolejny numer. Numer ten należy wpisać w pole Kolejność jak pokazano na rysunku obok. Dzięki temu strony wyświetlą się we właściwej kolejności w menu. O tym później. Dla każdej ze stron możemy również wprowadzić treść.

Krok 4: Ustawienie strony głównej

Musimy powiedzieć WordPressowi, która z założonych stron będzie stroną startową. Wchodzimy w Ustawienia->Czytanie, zaznaczamy w polu „Strona główna wyświetla” opcję „stayczną stronę” i wybieramy z listy stronę Start jako stronę główną, jak pokazano na rysunku obok.

Krok 5: Założenie katalogu na nasz motyw

Gdybyśmy w tym momencie chcieli zobaczyć wygląd naszej witryny, okaże się że ona już działa, tylko wygląda zupełnie inaczej (przykładowy wygląd na obrazku obok). Zobaczymy strony: O mnie, Portfolio, Kontakt itd,. Dzieje się tak dlatego, że WordPress bezpośrednio po instalacji do wyświetlenia stron używa własnego motywu (skórki), który zainstalował się podczas instalacji WordPressa.

Motyw ten zapisany jest jako podkatalog w katalogu wp-content/themes/ a szczegółowe informacje na jego temat znajdziemy wchodząc w sekcję Wygląd->Motywy. Dla wersji WordPressa 3.2 będzie to motyw Twenty Eleven, znajdujący się w katalogu wp-content/themes/twentyeleven.

Naszym zadaniem będzie stworzenie własnego motywu, po przełączeniu na który, nasza witryna w WordPressie dostanie nową „sukienkę” – utworzone w kroku 3 strony i wpisana treść zostaną wyświetlone inaczej. Jak? Naszym celem będzie zapewnienie wyglądu identycznego z naszą wyjściową stroną statyczną.

Łączymy się przez ftp z serwerem, gdzie zainstalowaliśmy WordPresss i w katalogu wp-content/themes zakładamy katalog na nasz motyw. Na potrzeby tutoriala nazwiemy go mm-photo. Taką nazwę ma również katalog w paczce do ściągnięcia.

Krok 6: Przygotowanie obrazka podglądu motywu

Jeśli chcemy, żeby nasz motyw pokazał się w WordPressie wraz z obrazkiem podglądu strony (zobacz zdjęcie obok), taki obrazek musimy wcześniej przygotować. Możemy to zrobić na bazie projektu graficznego strony docelowej lub wykonać tzw. „zrzut ekranu” strony napisanej w HTML, którą będziemy przerabiać pod WordPressa. Następnie za pomocą narzędzia graficznego należy przyciąć i przeskalować ten obrazek do wymiarów 300×225 i umieścić w katalogu naszego motywu pod nazwą screenshot.png.

Taki obrazek zobaczysz również w katalogu mm-photo w paczce do ściągnięcia.

Krok 7: Założenie pliku style.css

W katalogu z naszym motywem (wp-content/themes/mm-photo) zakładamy plik tekstowy o nazwie style.css. Jest to ważny plik, a nie mniej ważne jest to, co napiszemy w jego nagłówku. Wszystkie informacje, które zawrzemy (zgodnie z odpowiednimi regułami) w nagłówku pojawią się na ekranie wyboru motywu w WordPressie pod miniaturką zrobioną w poprzednim kroku.

Aby WordPress wyświetlił informacje takie, jak pokazano na rysunku wyżej, musimy wpisać następujący kod:

/*
Theme Name: Milena Motrawska
Theme URI: https://webfaces.pl/blog/downloads/mm-photo/mm-photo.zip
Milena Motrawska Fotografia Artystyczna
Author: webfaces.pl
Author URI: http://www.webfaces.pl
Description: Milena Motrawska to motyw napisany specjalnie do pokazania jak można wykorzystać WordPress jako system CMS. Motyw stanowi część tutoriala dostępnego pod adresem webfaces.pl/blog
Version: 1.0
*/

Poniżej tego nagłówka wklejamy wszystkiego reguły CSS skopiowane z pliku CSS dołączonego do statycznej strony HTML, którą przerabiamy na witrynę WordPressa. Ponad 95% tych reguł nie będzie wymagało zmian. Tam gdzie zmiany będą potrzebne pokazane będzie w dalszej części tutoriala. Plik style.css możemy utworzyć również jako kopię dotychczasowego pliku style.css (do którego odwoływała się strona statyczna), doklejając na górze powyższy nagłówek.

Pełną zawartość pliku style.css możesz podejrzeć tutaj lub znajdziesz w paczce do plików do pobrania w podkatalogu mm-photo.

• Uwaga 1: jeśli w nagłówku używasz polskich znaków diakrytycznych, do ich poprawnego wyświetlenia konieczne jest zapisanie pliku style.css w formacie UTF-8 (bez BOM).
• Uwaga 2: Umieszczenie pliku style.css z nagłówkiem i obrazkiem podglądu w katalogu z motywem nie wystarczy, aby zobaczyć nasz motyw na ekranie Wygląd->Motywy. WordPress pokaże go dopiero wówczas, kiedy w katalogu tym znajdzie plik index.php (do tego dojdziemy). Jeśli jednak bardzo chcesz zobaczyć już w tej chwili, jak prezentują się w WordPressie informacje z nagłówka pliku style.css, utwórz pusty plik tekstowy, nazwij go index.php i wrzuć do katalogu z motywem.

Krok 8: Przekopiowanie katalogu images do katalogu motywu

Do katalogu z naszym motywem przekopiowujemy katalog images, w którym znajdują się zdjęcia wykorzystywane do stylizowania wyglądu strony (zdjęcia do których odwołuje się plik style.css).

Uwaga: katalog images powinien zawierać tylko i wyłącznie zdjęcia, do których odwołuje się plik style.css. Zdjęcia, które stanowią treść witryny (tzw. content) należy dołączać do poszczególnych stron poprzez panel administracyjny (będą dostępne w sekcji Media i przechowywane w innych katalogach WordPressa).

Na zdjęciu obok pokazano zawartość katalogu z naszym motywem po wykonaniu tego kroku.

Krok 9: Odwzorowanie plików HTML-owych na pliki WordPressa

Teraz najważniejsza i najistotniejsza część tutoriala. Zawartość pliku index.html naszej statycznej strony rozdzielimy na 4 pliki php (zobacz obrazek poglądowy niżej), w oparciu o które będzie działać witryna na WordPressie:

• header.php
• sidebar.php
• index.php
• footer.php

Ta informacja rozczarowuje nieco początkujących webmasterów. Dlaczego aż tyle „krojenia”? Z czasem przekonamy się, że taka architektura daje dużą elastyczność w rozbudowywaniu witryny pod WordPressem: szybko napiszemy kolejne templatki, a podczas poszerzania funkcjonalności witryny intuicyjnie będziemy wiedzieć, który plik wymaga zmian.

Obrazek obok pokazuje, w których miejscach należy „pociąć” plik index.html, aby prawidłowo rozłożyć jego strukturę pomiędzy pliki php. W kolejnych krokach pokazane będzie, co należy zmienić w kodzie każdego z nich, aby współdziałał z WordPressem i zaczytywał treść wpisaną przez użytkownika z poziomu panelu admin.

Docelowo (po przejściu do końca instrukcji podanych w krokach 9a-d) katalog z naszym motywem będzie zawierać pliki, które pokazano na obrazku obok. Zawartość katalogu znajduje się również w paczce do pobrania.

Krok 9a: header.php

Tworzymy pusty plik tekstowy i nazywamy go header.php. WordPressowy plik header.php będzie zawierać tę część pliku index.html naszej statycznej strony, która obejmuje: blok head oraz część nazywaną przez niektórych bannerem powiązanym z menu nawigacyjnym.

Niżej pokazano dwa bloki kodu: 1) fragment pliku index.html wycięty ze statycznej strony HTML i 2) odpowiadający mu plik header.php z przeróbkami umożliwiającymi współpracę z WordPressem. Poniżej opatrzono komentarzem miejsca, wymagające zmian.

<!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>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Milena Motrawska | Start</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="upper-box">
				<h1>Milena Motrawska <span>fotografia artystyczna</span></h1>
			</div>
			<div id="menu">
				<img id="offert" src="images/oferta.jpg" alt="Usługi" />
				<ul id="nav">
					<li class="current"><a href="index.html">Start</a></li>
					<li><a href="o-mnie.html">O mnie</a></li>
					<li><a href="portfolio.html">Portfolio</a></li>
					<li><a href="oferta.html">Oferta</a></li>
					<li><a href="kontakt.html">Kontakt</a></li>
				</ul>
			</div><!--menu-->
		</div><!--header-->

<!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 profile="http://gmpg.org/xfn/11">
	<title><?php wp_title("",true); ?> | <?php bloginfo('name'); ?></title>
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
	<?php wp_head(); ?>
</head>
<body>
<div id="container">
	<div id="header">
			<div id="upper-box">
				<h1><?php bloginfo('name'); ?><span><?php bloginfo('description'); ?></span></h1>
			</div>
			<div id="menu">
				<img id="offert" src="<?php bloginfo('template_directory'); ?>/images/oferta.jpg" alt="Usługi" />
				<ul id="nav">
						<?php wp_list_pages('title_li='); ?>
				</ul>
			</div><!--menu-->
	</div><!--header-->

Co wymagało zmiany i dlaczego:
Sekcja head

• Tytuł witryny pojawiający się w pasku przeglądarki:
  • wp_title(„”,true) – wyświetlenie tytułu bieżącej strony
  • bloginfo(’name’) – wyświetleine tytułu witryny (ustawionego w kroku 2a)
• odwołanie do pliku style.css – w WordPressie nie może być ścieżką względną. Zastępujemy ją wywołaniem funkcji bloginfo(’stylesheet_url’).
• wp_head() – niezbędne do prawidłowego działania wtyczek

Dociekliwych szczegółami pozostałych tajemniczych funkcji i zapisów w sekcji head odsyłam do artykułu Analiza budowy standardowego nagłówka, którego autorka wyjaśnia szczegółowo funkcję każdego z nich.

Sekcja body

• tytuł i podtytuł (opis) witryny – dzięki funkcjom bloginfo(’name’) oraz bloginfo(’description’) wykorzystamy tytuły ustawione w kroku 2a. Dzięki temu użytkownik będzie mógł je zmienić sam, bez ingerencji w źródła motywu.
• ścieżka do zdjęcia
  WordPress musi znać pełną ścieżkę do obrazków. Uzyskamy to używając funkcji bloginfo(’template_directory’), która zwraca pełny URL katalogu z motywem
• lista stron w menu
  Strony utworzone w kroku 3 wyświetlimy za pomocą funkcji wp_list_pages. Parametru 'title_li=’ użyto po to, aby pozbyć się napisu „Strony” wstawianego domyślnie jako tytuł listy. Uwaga: większą dla użytkownika kontrolę na zawartością menu umożliwi oparcie menu o funkcję wp_nav_menu. O różnicach tych dwóch funkcji przeczytamy w artykule Dynamiczna nawigacja w wordpress 3.

Drugi z powyższych bloków kodu wklejamy do pliku header.php.

Zmiany w pliku style.css
Drobnej zmiany w tym kroku będzie wymagał nasz plik style.css. Do identyfikacji bieżącej strony użyliśmy wcześniej klasy current. WordPress do oznaczania bieżącej strony witryny używa własnej klasy current_page_item.

Fragment pliku style.css przed zmianą:

ul#nav li a:hover, ul#nav li.current a {
	text-decoration: underline;
}

Fragment pliku style.css po zmianie:

ul#nav li a:hover, ul#nav li.current_page_item a {
	text-decoration: underline;
}

Krok 9b: sidebar.php

Dobra wiadomość dla leniwych: plik sidebar.php możemy pozostawić bez zmian w stosunku do odpowiadającego mu fragmentowi strony statycznej index.html (zobacz rysunek podziału na pliki we wstępie do kroku 9), zamieniając jedynie ścieżkę względną do obrazka (podobnie jak zrobiliśmy to w header.php)

<div id="sidebar">
	<div>
		<h2>Lorem ipsum sit:</h2>
		<ul>
			<li>Lorem ipsum dolor sit amet consectetur</li>
			<li>Nam molestie porttitor et venenatis tortor.</li>
			<li>nec vulputate odio placerat omini dolor</li>
		</ul>
	</div>
	<div>
		<img src="images/kamienie.png" alt="Kamienie" />
	</div>
</div><!--sidebar-->

<div id="sidebar">
	<div>
		<h2>Lorem ipsum sit:</h2>
		<ul>
			<li>Lorem ipsum dolor sit amet consectetur</li>
			<li>Nam molestie porttitor et venenatis tortor.</li>
			<li>nec vulputate odio placerat omini dolor</li>
		</ul>
	</div>
	<div>
		<img src="<?php bloginfo('template_directory'); ?>/images/kamienie.png" alt="Kamienie" />
	</div>
</div><!--sidebar-->

Wklej dolny blok kodu do pliku sidebar.php. Takie rozwiązanie jest szybkie, lecz ma tę wadę, że każda zmiana w treści będzie wymagała ingerencji w kody źródłowe, a tego należałoby unikać.

Lepszym, bardziej elastycznym rozwiązaniem, jest oparcie paska bocznego o Widgety. Wówczas użytkownik sam będzie decydował co ma znajdować się w pasku poprzez pracę z ekranem Wygląd->Widgety.

Obrazek obok pokazuje efekt, który będzie możliwy, kiedy przygotujemy nasz motyw na obslugę widgetów. Użytkownik w panelu admin. w Wygląd->Widgety będzie mógł przeciągnąć dowolny widget na pasek boczny i za ich pomocą wyświetlić pożądaną treść.

Oparcie motywu o widgety wymaga wykonania dwóch czynności:

• A. rejestracji sidebaru w pliku functions.php
• B. wywołanie funkcji dynamic_sidebar, która wyświetli na pasku kolejne aktywne widgety

Krok A: rejstracja sidebaru

Tworzymy plik tekstowy i nazywamy go functions.php. Do niego wklejamy poniższy kod:

<?php
if (function_exists("register_sidebar")) {
    register_sidebar(array(
        'before_widget' => '<div class="side-box">',
        'after_widget' => '</div>',
        'before_title' => '<h2>',
        'after_title' => '</h2>',
    ));
}
?>

Do rejestracji paska bocznego wykorzystujemy funkcję register_sidebar. Użyta w parametrach nazwa klasy „side-box” w znacznku div nie jest przypadkowa. Odpowiada ona klasie użytej w pliku style.css w naszej statycznej stronie, dla poszczególnych bloków paska bocznego.

Podobna rzecz ma się ze znacznikiem h2. W stronie statycznej tytuły na pasku bocznym „owijaliśmy” właśnie w nagłówek h2. Teraz chcemy zachować zgodność.

Krok B: wyświetlania widgetów

<div id="sidebar">
		<?php 	
			if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
			<div class="side-box">
				<ul>
						<?php wp_register(); ?>
						<li><?php wp_loginout(); ?></li>
						<?php wp_meta(); ?>
				</ul>
			</div>
		<?php endif; ?>
</div><!--sidebar-->

Za pomocą funkcji dynamic_sidebar wyświetlamy wszystkie aktywne widgety. W powyższym przykładzie zadbaliśmy również o to, żeby pokazać coś w pasku bocznym w przypadku, kiedy użytkownik nie wybrał żadnego widgetu. W naszym przykładzie wyświetlamy dane do logowania, jednak w tym miejscu również dobrze mogło to być wywołanie listy stron, innego widgetu czy choćby tekstu „Brak aktywnych widgetów”.

Powyższy kod wklejamy do pliku sidebar.php. Jeśli uprzednio wykorzystano wersję „dla leniwych”, należy ją nadpisać. Oba pliki: functions.php i sidebar.php umieszczamy w katalogu z naszym motywem.

Krok 9c: index.php

Nadszedł czas na wyświetlenie najistotniejszej rzeczy: treści poszczególnych stron, które utworzyliśmy w kroku 3.

W witrynie opartej o statyczne pliki html trzeba było tworzyć osobny plik html do zaprezentowania zawartości każej podstrony. W WordPressie wystarczy zrobić jeden taki plik (index.php), a WordPress zadba już o to, żeby wyświetlić zawartość odpowiedniej strony, URL której podaliśmy w pasku przeglądarki.

Plik index.php jest sercem naszego motywu. To tego pliku będzie szukać WordPress, Żeby zacząć przetwarzać nasz motyw.

Do wyświetlania zawartości stron wykorzystamy mechanizm Pętli (The Loop). Celowo napisałam „Pętli” wielką literą, gdyż pod tym pojęciem kryje się główny mechanizm przetwarzania w WordPressie.

Za pomocą Pętli WordPress przetwarza wszystkie wpisy, które mają być wyświetlone na bieącej stronie. Wprawdzie w naszej witrynie nie wyświetlamy nigdzie wpisów/artykułów (posts), jednak strony (pages) są traktowane przez WordPressa tak jak wpisy.

Poniżej pokazany jest możliwie najprostszy kod pliku index.php (dolny blok) z wykorzystaniem mechanizmu Pętli. Tym kodem zastępujemy blok „content” przedstawiony na rysunku podziału na bloki we wstępie do kroku 9:

		<div id="content">
			<h2>Milena Motrawska<span>artysta fotograf, dekorator wnętrz</span></h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
			<p>Praesent vestibulum hendrerit placerat. Nam molestie porttitor porta...</p>
		</div><!--content-->

<?php get_header(); 
get_sidebar(); ?>
		<div id="content">
			<?php if ( have_posts() ) while ( have_posts() ) : the_post();
				the_content();
			endwhile; ?>
		</div><!--content-->
<?php get_footer(); ?>

Wykorzystane funkcje:

• have_posts() – za pomocą tej funkcji WordPress sprawdza obecność kolejnego z wpisów, jeżeli taki jest, zwraca „true”
• the_post() – pobiera kolejny wpis i przygotowuje go do użycia w ramach pętli. To dzięki obecności tej funkcji będziemy mogli wykorzystywać tzw. tagi do wyświetlania wielu informacji (np: tytuł strony, data opublikowania, zawartość). Przykładem tagu jest następna funkcja the_content() opisana niżej:
• the_content() – funkcja wyświetla zawartości wpisu/strony

Zainteresowany szczegółowymi informacjami na temat działania Pętli WordPressa odsyłam do artykułu „The Loop in Action” w Kodeksie WordPressa.

Jak łatwo się domyślić, za pomocą wywołań funkcji:

• get_header();
• get_sidebar();
• get_footer();

do pliku index.php włączyliśmy kod opowiedziany za przetworzenie pozostałych części składających się na wyświetlenie strony, zawartych odpowiednio w plikach:

• header.php
• sidebar.php
• footer.php

Uwaga: Plik index.php jest wykorzystywany nie tylko do wyświetlenia strony głównej – analogia do statycznego pliku index.html tu się nie sprawdzi. WordPress wykorzysta plik index.php do wyświetlania zawartości każdej strony/wpisu, również kategorii, czy strony błędu 404, jeśli nie znajdzie dedykowanych templatek do ich generowania. Jest to zgodne z zasadami hierarchii szablonów WordPressa.

Krok 9c: footer.php

Stopka wymaga najmniej zmian w stosunku do statycznej strony HTML. Wystarczy dodać funkcję wp_footer(), niezbędną do prawidłowego działania wtyczek. Funkcję tę dodajemy przez zamykającym tagiem body:

		<div id="footer">
			<p id="copyright">copyright Milena Motrawska</p>
			<p id="author">projekt i realizacja: <a href="https://webfaces.pl">webfaces.pl</a></p>
		</div><!--footer-->
	</div><!--container-->
</body>
</html>

		<div id="footer">
			<p id="copyright">copyright &copy; Milena Motrawska</p>
			<p id="author">projekt i realizacja: <a href="https://webfaces.pl">webfaces.pl</a></p>
		</div><!--footer-->
	</div><!--container-->
<?php wp_footer(); ?>
</body>
</html>

Wklejamy dolny z bloków do pliku o nazwie footer.php i przerzucamy go do katalogu z motywem.

Krok 10: Włączenie naszego motywu

Po wykonaniu kroków 9a-d w katalogu wp-content/mm-photo powinniśmy mieć zestaw plików jak pokazano na obrazku obok. Teraz pozostaje nam włączyć motyw. Wchodzimy do Wygląd->Motywy i wciskamy „Włącz” w okienku podglądu naszego motywu. Po wpisaniu do przeglądarki adresu witryny powinniśmy zobaczyć taki efekt końcowy.

Jeśli w kroku 9b wykonaliśmy sidebar oparty o widgety, niezbędne będzie również wybranie i ustawienie Widgetów paska bocznego. W tutorialu wybrano widget Tekst i uzupełniono o dane wyświetlające listę oraz obrazek, jak pokazano na rysunku w kroku 9b

Pliki do pobrania

Niżej znajdują paczka plików do pobrania, zawierająca wszystkie kody źródłowe wykorzystane w tym tutorialu.

Zawartość poszczególnych katalogów:

• projekt – projekt graficzny witryny Milena Motrawska na warstwach (format xcf, do edycji w programie GIMP – darmowym odpowiedniku Photoshopa)
• html – witryna statyczna w postaci plików HTML i CSC (którą przerabialiśmy na witrynę WordPressową)
• mm-photo – pliki motywu Milena Motrawska, który utworzyliśmy w tym tutorialu. Motyw gotowy do uruchomienia w WordPressie po umieszczeniu katalogu mm-photo (wraz z zawartością) w folderze wp-content/themes

Uff… Było trochę pisania. Jeśli jednak któryś z kroków był dla Ciebie niejasny, zapytaj o szczegóły w komentarzach.

Inne wpisy o podobnej tematyce:

• WordPress jako CMS – najczęstsze błędy deweloperów
• WordPress jako CMS – ukryj to co niepotrzebne

Artykuł ten powstał w odpowiedzi na sugestię zgłoszoną w ramach strony Pomysły na tutorial. Ty też możesz zgłosić swoje „zapotrzebowanie” na artykuł, jeśli dotyczy tematu WordPressa. Zapraszam i zachęcam do komentowania.