WordPress jako CMS – konwersja statycznej strony HTML do WordPressa

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ż:

Statyczna strona HTML, którą przerobimy na witrynę pod WordPress
Statyczna strona HTML, którą przerobimy na WP
Witryna na WordPress - efekt końcowy
Witryna na WordPressie (zobacz demo - efekt końcowy)

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.

Etapy tworzenia witryny w oparciu o WordPress
Etapy tworzenia witryny w oparciu o WordPress (powiększ)

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

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

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

Ustawienie tytułu i opisu witryny
Ustawienie tytułu i opisu witryny (powiększ)

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).

Własny format odnośników bezpośrednich
Własny format odnośników bezpośrednich (powiększ)

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

Dodanie strony
Dodanie strony (powiększ)

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ść.

Ustawienie strony głównej
Ustawienie strony głównej (powiększ)

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.

Wygląd strony na domyślnym motywie WP
Wygląd strony na domyślnym motywie WP (powiększ)

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.

Aktywny motyw
Aktywny motyw (powiększ)

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ą.

Katalog z motywami WP
Katalog z motywami WP (powiększ)

Łą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.

Obrazek podglądu motywu
Obrazek podglądu motywu (powiększ)

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.

Nagłówek pliku style.css
Nagłówek pliku style.css (powiększ)

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: http://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.
Rezultat kroku 8
Rezultat kroku 8 (powiększ)

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

Zamiana pliku index.html na pliki php WordPressa
Zamiana pliku index.html na pliki php WordPressa (powiększ)

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.

Pliki które otrzymamy po wykonaniu kroku 9
Pliki które otrzymamy po wykonaniu kroku 9 (powiększ)

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:
  • 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.

Widgety - efekt do kórego zmierzamy
Widgety - efekt do kórego zmierzamy (powiększ)

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.

Pętla WordPressa
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:

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="http://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="http://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.

Pliki które otrzymamy po wykonaniu kroku 9
Pliki które otrzymamy po wykonaniu kroku 9 (powiększ)

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:

101 thoughts on “WordPress jako CMS – konwersja statycznej strony HTML do WordPressa”

  1. Nie wiem dlaczego, ale nie mogłem odpowiedzieć w wątku o wielojęzyczności, dlatego spróbowałem tu.
    W Joomli jest tak jakbym chciał. Czyli jestem na KONTAKT(pl), zmieniam język i jestem na CONTACT(en). Ale tu odpowiada za to komponent/moduł Joomfish. Myślałem, że w WP jest jakaś sprytna sztuczka.
    Dodam jeszcze, że dzięki tutorialowi o konwersji statycznej strony HTML do WordPressa udało mi się (projekt na ukończeniu) dostosować szablon http://www.os-templates.com/free-website-templates/solutions 🙂
    Teraz już będę mógł oferować Klientom nie tylko korzystanie z „gotowców”. Jeszcze tylko gdybym posiadał większe zdolności graficzne i umiejętność kodowania z pliku graficznego do szablonu CSS i HTML. Właśnie – czy to nie byłby dobry pomysł na tutorial?

    1. Nie wiem dlaczego, ale nie mogłem odpowiedzieć w wątku o wielojęzyczności

      Faktycznie, próba wpisania kolejnych komentarzy kończyła się wyświetleniem białej strony. Międzyczasie usunęłam komentarze zakwalifikowane automatycznie jako spam przez Aksimet i problem zniknął.

      A co najciekawsze, potem w necie znalazłam opinie, że biała strona przy wysyłaniu komentarzy jest właśnie następstwem tego, że niektóre z komentarzy są oznaczone jako spam.

      Dodam jeszcze, że dzięki tutorialowi o konwersji statycznej strony HTML do WordPressa udało mi się (projekt na ukończeniu) dostosować szablon

      Cieszę się niezmiernie, że tutorial się przydał!

      Jeszcze tylko gdybym posiadał większe zdolności graficzne i umiejętność kodowania z pliku graficznego do szablonu CSS i HTML. Właśnie – czy to nie byłby dobry pomysł na tutorial?

      Tak, właśnie mam w planach zrobić drugą, w właściwie „poprzedzającą” (patrząc na chronologię prac), część do tego tutoriala. Dzięki tej uwadze będę mieć jeszcze większą motywację.

  2. witam, jestem początkujący w temacie wordpress, mam zasadnicze pytanie tylko proszę sie nie smiać: co mi da konwertowanie prostych stron html/php do wordpressa? co zyskam?

    stronę statyczną jestem w stanie zrobic dosc szybko, tu trzeba trochę pokombinować, jakie argumenty są za przejsciem na wordpressa?

    pozdrawiam

    1. To jest bardzo dobre pytanie. I to nie jest tak, że WordPress (czy inny CMS) jest zawsze lepszy od prostej strony w czystym html/php. Wszystko zależy od sytuacji: od tego, dla kogo będzie strona, kto ją będzie uaktualniał w przyszłości, jak często, jak duża będzie witryna itd.

      Jeżeli stronę robisz dla siebie i jest to dość prosta witryna, to napisanie strony w HTML/php w zupełności wystarczy. Jednak, schody zaczynają się wówczas, gdy strona ma być aktualizowana w przyszłości przez przeciętego użytkownika, który o HTML-u nie ma pojęcia, ale za to dobrze radzi sobie z edycją treści w edytorach typu Word. Wówczas stawiasz WordPressa i cały interfejs użytkownika: dodawanie kolejnych podstron, edytowania treści, zdjęć i dodawania innych bajerów dostajesz niejako w prezencie. Twoim zadaniem jest tylko dopasowanie wyglądu i ewentualnie funkcjonalności. Możesz zmodyfikować domyślny motyw pod swoje potrzeby, albo napisać swój zgodnie ze schematem pokazanym w tym tutorialu.

      Użytkownik też będzie zadowolony, bo edycja treści w WordPressie jest bardzo intuicyjna i nawet zupełny laik w technologiach webowych sobie z tym poradzi. Pisząc stronę w czystym HTML-u/CSS-ie wymagasz od użytkownika znajomości tych języków do wykonania nawet prostych aktualizacji. Wspierając się językiem php, przyjazny interfejs użytkownika jesteś w stanie napisać sam, ale będziesz się musiał bardzo napracować, nie wspominając o błędach, które wyjdą w trakcie użytkowania, a już na pewno podczas jego rozbudowy. Po co wywarzać otwarte drzwi? Lepiej zainstalować WordPressa i skupić się tylko na tym, co najistotniejsze: dostosowaniu witryny do potrzeb danego użytkownika, interfejs do zarządzania treścią będziesz już mieć gotowy i co najwazniejsze intuicyjny.

      Inne zalety WordPressa:
      – świetnie współgra z Google – strony oparte o WordPress dobrze się pozycjonują
      – bardzo duża liczba pluginów/wtyczek pozwalających w prosty sposób rozbudować go o przeróżne bajery typu: zarządzania galeriami, ankietami, formularzami kontaktowymi, automatyczne robienie backupu i tysiące innych przydatnych rzeczy
      – prosta instalacja
      – administracja systemem jest bardzo intuicyjne
      – można dodawać wielu użytkowników do jednej witryny
      – jest ciągle rozwijany
      – jest darmowy
      – ma miliony użytkowników na całym świecie
      – łatwo znaleźć w sieci odpowiedź na jakiś problem

      Podsumowując: warto zainteresować się WordPressem jeśli przyszły użytkownik stron sam będzie chciał edytować treść, a nie zna się na „technikaliach webowych”. Jeśli stronę robisz dla siebie i radzisz sobie z wszelkiego rodzaju zmianami w treści w sprawny sposób, to nic nie stoi na przeszkodzie, żeby pozostać przy HTML/php.

      Jeśli jesteś początkującym WordPressowcem, to myślę, że lepiej najpierw pobawić się nim jako zwykły użytkownik (na bazie jakiegoś gotowego motywu), żeby poznać jego możliwości, a dopiero potem, próbować pisać własny motyw.

      Dziękuję za komentarz i pytania. Życzę dobrej zabawy z WordPressem, to może być ciekawa przygoda.

    2. Mogę Ci odpowiedzieć, na moim przykładzie co dała mi konwersja statycznej strony do WordPressa. Po pierwsze, korzyści SEO-wordpress bardzo dobrze się indeksuje i pozycjonuje dzięki pingom oraz wtyczkom seo. Po drugie, bardzo łatwo jest dodawać nową treść. Po trzecie możliwości wordpressa bardzo łatwo rozszerzać dzięki wtyczkom.

  3. Hej, dzięki za wspaniały poradnik tworzenia szablonów wordpress, który będzie zastosowany przy zmianie wyglądu na jednej z moich stron! 🙂

    1. Dzięki za miłe słówko. W razie jakiś wątpliwości, które się pojawią, zachęcam do śmiałego zadawania pytań.

      1. Dzięki Aga, w razie problemów na pewno zajrzę i napiszę pytanie 🙂

        Jeszcze raz dziękuję, bo to chyba jedyny taki poradnik w sieci.
        Pozdrawiam

  4. Dzięki za cenną pomoc. Nie jestem jakimś ekspertem w dziedzinie grafiki czy programowania (php czy html) ale ten art mi pomógł. Miałem ze 100 lat temu stronkę statyczną i bardzo podobała mi się grafika (a może byłem po prostu do niej przywiązany 🙂 ) i w końcu przekonałem się do CMSów a w szczególności do WordPressa tylko był problem z dostosowaniem. Ale dzięki Tobie jakoś się udało. Dzięki wielkie 🙂

  5. Witam:)
    Mam pytanie, dlaczego jedny mz warunków postawienia WordPressa jest fakt, że podstrony muszą mieć taki sam układ np. box boczny lewy, prawy, header takich samyhc wymiarów. Na powyższym przykładzie strony www, zmienia się tylko treść w poszczególnych podstronach. Mam więc pytanie, czy da się zrtobić różne podstrony np mniejszy header na podstronach, czy brak poszczegolnyhc boxow, ktore były na glownej:)?

    Pozdrawiam

    1. Jasne, że się da. Powyższy przykład jest uproszczony po to, żeby przekazać ideę.

      Generalnie header (górny baner) i stopka powinny być zawsze te same, ale całą resztę można dowolnie dostosować tworząc własne templatki i przypinając je następnie do wybranych podstron. Trzeba je oczywiście oprogramować w php. Stronę główną można też oprogramować zupełnie dowolnie i zapisać w pliku pod nazwą home.php lub front-page.php.

  6. Hej,
    Dopiero zaczynam przygodę z wordpressem i dostosowaniem stron html/css, więc prosze o wyrozumiałość.
    Podłączam się pod problem poruszony przez Marcina.

    Moja strona składa się z 6 podstron bazujących na tym samym szablonie. Mam z lewej strony sidebara, ale nie wyswietlam w nim zadnego widgetu. Chciałbym natomiast w podstronie „kontakt” wyswietlić w miejscu sidebara małą mapkę z google maps, ale tylko tam.

    Czy możesz pokrótce opisać w jaki sposób to oprogramować? I czy nazwa takiego pliku jest już z góry ustalona czy mogę go sobie nazwać np maps.php?

    Czy chodzi o to że ten nowy plik ma zawierać to co index.php tzn get_header();
    get_footer(); itd, wyłączając get_sidebar(); a w jego miejscu div z mapką google?

    Czy moje rozumowanie jest błędne?

    Pozdrawiam.
    Świetny poradnik!:)

    1. Dobrze myślisz.
      Ogólnie zamiast włączać plik sidebar.php za pomocą funkcji get_sidebar(); możemy w php dołączyć kod pochodzący z dowolnego pliku za pomocą instrukcji:

      &lt;?php include (TEMPLATEPATH . '/prawa-kolumna.php'); ?&gt;
      

      gdzie prawa-kolumna.php jest plikiem umieszczonym w katalogu z motywem o zawartości podobnej jak plik sidebar.php

      Jeśli chcesz daną stronę wyświelić inaczej niż pozostałe, to musisz zrobić dla niej inny szablonik (tempate). Skopiuj plik index.php pod dowolną nazwę np. strona-kontakt.php i koniecznie zacznij ją od:

      &lt;?php
      
      /*
      Template Name: Strona kontaktu
      */
      
      

      Dzięki temu, WordPress rozpozna ją jako templatkę i podczas edycji/zakładania strony w panelu WP, po prawej stronie będziesz mógł wybrać ten szablon, żeby powiedzieć „chcę żeby ta (zakładana właśnie/edytowana) strona, miała wygląd w generowany w oparciu o tą templatkę”.

      W tej templatce miejsce get_sidebar() zastąp kodem jak podałam na początku (czyli zainkluduj plik, w którego kodzie wstawisz mapkę google czy jakiś inny HTML lub HTML przeplatany z php).

  7. Dzięki śliczne. Mam jeszcze jedno pytanie- czy istnieje możliwość aby dwie strony wyswietlały wpisy, a przy dodawaniu nowego wpisu mógłbym wybrać na której stronie ma się pokazać?
    Chodzi o sytuację, że chciałbym dodawać wpisy na stronie głównej oraz co jakiś czas kilka zdjęć do galerii, która jest osobną podstroną, ale chciałbym uniknąć każdorazowej edycji strony „galeria”.

    Czy w wordpresie istnieje wogóle taka możliwość czy zawsze wpisy wyświetlane są tylko na jednej (domyślnie głównej) stronie.

    A jeśli się nie da to czy można zamienić aby wpisy ukazywały się w galerii ale jednocześnie żeby główna pozostała główną?

  8. Witam,
    Właśnie szukałem jakiegoś poradnika z ciekawymi radami odnoszącymi się do wordpressa. Mam jednak pytanie: W jaki sposób na jadną z podstron stworzoną w oparciu o takie rozwiązanie CMS zamieścić galerię opartą w jquery? Da się? Czy trzeba to zrobić „na zewnątrz” i podlinkować?

    Czy przy sidebarze dla leniwych wystarczy tylko ? nie trzeba linkować?

  9. A jeżeli w statycznej stronie, w pliku index mamy inny układ strony niż w tutorialu? NP. mamy sekcję czy right menu..itp. Czy dla każdej takiej sekcji tworzymy osobne pliki?

  10. A jeżeli w statycznej stronie, w pliku index.html mamy inny układ strony niż w tutorialu? NP. mamy sekcję „div id=”left”” czy „div id=”nav”” czy „div id=”right”, menu..itp. Czy dla każdej takiej sekcji tworzymy osobne pliki .php?

    1. Podstawowym blokiem strony na WordPressie jest blok content, który zawiera wszystko co wpiszemy w edytorze podczas edycji wpisu lub strony. Można tam właśnie wstawić inne bloki div (wcześniej przełączyć się w tryb HTML w edytorze), jednak to nie jest eleganckie podejście, bo o ile programista HTML to rozumie, to powinniśmy się starać pisać stronę tak, aby zwykły użytkownik nie musiał w ogóle korzystać z HTML-a. Dlatego w momencie, kiedy chcemy mieć bardziej złożony podział w ramach danego bloku w WordPressie trzeba stosować różne obejścia, np. tzw. custom fields.

  11. Proszę mi powiedzieć czy jest możliwość dodania nowego wpisu na różnych stronach?
    Na przykładzie: http://www.lumitex.pl/nowa —> w dziale „szkolenia” jest zakładka LPR, jest wpisany tam artykuł ( opisz szkolenia ratowników), chciałbym teraz, nad tym artykułem dodać wpis z informacją na temat postępów w kursie, jak to wykonać?

  12. Np. dzisiaj chciałbym dodać wpis w dziale „Szkolenia”, jutro w dziale „Partnerstwa”, chciałbym
    to zrobić nie edytując treść strony, tylko dodając wpis na stronę. 🙂

    1. Zwykle jest tak, że na blogu WordPressowym artykuły są wyświetlane na jednej stronie, najczęście na głównej, a to co jest w zakładkach stron statycznych, dotyczy tzw. treści stałych np. info o kontakcie, oferta itd.

      Możemy szybko zrobić tak, żeby wpisy wyświetlały się jeden po drugim na jednej ze stron (tylko jednej, wybranej). Ustawia się to w panelu admina, wchodząc w Ustawienia->Czytanie; w części Strona główna wyświetla zaznaczasz „statyczna strona” i wybierasz z listy stronę z wpisami.

      Jeśli chcesz, aby różne wpisy przypisane były do różnych haseł w menu górnym, w zależności o tematyki, to trzeba zastosować zupełnie inne podejście. W takim przypadku strony menu górnego nie mogą być stronami statycznymi, lecz kategoriami. A każdy wpis, po napisaniu trzeba przypisać do odpowiedniej kategorii. Oczywiście motyw musi być przygotowany na obsługę tego podejścia. Nie wszystkie motywy to umożliwiają. „Motyw” z tego przykładu jest możliwie najprostszy i temat artykułu nie obejmuje tego, jak to zrobić. Jeśli chcesz podążyć ten temat, to musiałbyś założyć menu nie w oparciu o wp_list_pages jak w przykładzie, lecz jak wp_nav_menu. Wówczas możliwe będzie dodawanie do menu zamiast stron – kategorii. Sam będziesz mieć wpływ (z panelu admina), które kategorie mają funkcjonować jako strony w menu górnym. Będziesz mógł robić również miks: część zakładek jako strony, część jako kategorie.

    1. Ciężko to ocenić. Możesz też spróbować zainstalować jakiś gotowy motyw i dopasować jego wygląd do swoich potrzeb.

    2. Tutaj jest link do wp_nav_menu po polsku:
      http://netpress.960pixels.pl/2011/02/dynamiczna-nawigacja-w-wordpress-3-wp_nav_menu/

      Możesz spróbować.

      Albo przełącz się chwilowo na standardowy motyw (np. TwentyEleven), on wspiera wp_nav_menu. Założ tam kilka stron, wpisów i przydziel jego do kategorii w taki sposób jak Ci zależy, a potem założ własne menu i dodaj do niego wybrane kategorie. Wtedy będzie wiedzieć o co chodzi z tym wp_nav_menu.

  13. Pani Agnieszko, wszystko jest chyba ok, tylko jak dodać to na tą górną belkę menu? Koło przycisku „KONTAKT” bo teraz dodałem do bocznego sidebar-u i to pokazało mi się z boku. :/ 7 światów z tym WordPressem.

    1. Nie wiem, czy pytanie jest jeszcze aktualne (nie zawsze mogę odpowiedzieć od razu). Żeby menu (zarejesrowane uprzednio w pliku functions.php za pomocą funkcji register_nav_menu) wyświetlić na stronie, trzeba do użyć funkcji:

      wp_nav_menu( array('theme_location' =&gt; 'primary' ) );
      

      którą wstawiamy do pliku header.php w miejscu, gdzie dotychczas yżyta była funkcja wp_list_pages. Oczywiście w miejscu „promary” należy podać taką nazwę, jakiej użyliśmy podczas rejestracji.

  14. Dziękuję uprzejmie za pomoc, jestem bardzo wdzięczny.
    Poszukuję uśilnie jeszcze jakieś galerii, prostej ale z możliwością podlinkowania zdjęć umieszczonych na innym serwerze niż strona (np. na imageshack, lub picasa)

  15. Właśnie zrobiłem nieco bardziej skomplikowaną stronę niż przykład podany w tym tutorialu, jednak tutek sprawdził się w 100 % i się udało 🙂 Jednak jak już włączałem gotowy motyw przeżylem chwile grozy mianowicie po włączeniu wyświetliły się same treści na białym tle, na szczęscie udało mi się wyczaić błąd:
    zamaist:

    get_header();
    get_sidebar(); ?>
    powinno być:

    w kodzie index.php 🙂
    I wszystko gra 🙂

    Teraz czekam na tutorial odnośnie zaimplementowania strony która się nieco różni podstronami układem 🙂

    Pozdrawiam 🙂

    1. Dziękuję za konstruktywny komentarz. Fragmenty kodu trzeba wstawić do komentarza pomiędzy [php]tu idzie kod [/php]

      Jakbyś mógł jeszcze raz napisać to, co urwało. Dzięki!

  16. We fragmencie kodu index.php powinno być to:

    &lt;?php get_header(); ?&gt;
    &lt;?php get_sidebar(); ?&gt;

    Bo jak dałem te komendy któe były to motyw pokazywał tylko treść contentu na białym tle, oraz na początku kod php headera i sidebara 🙂 i dzięki temu się skapnąłem,, o co biega:)

    Podsumowując, mega gratki za tutorial :), a pomyśleć, że tak się bałem czy sobie poradze:) Teraz myśle pójdzie już z górki w rozwijaniu się w WP. 🙂

    1. O faktycznie! Wcięło mi otwierający znacznik php. Właśnie go dodałam. Dzięki ogromne za tę uwagę. Ale jesteś czujny i uważny. Cieszę się, że tutorial się przydał. Tak, zgadza się, myślę, że teraz faktycznie pójdzie z górki. Ja miałam podobnie. Na początku miotałam się w tym WP i miotałam, nie wiedząc od czego zacząć, żeby przekroczyć tę magiczną linię między byciem tylko userem a deweloperem. I jak zrozumiałam ideę na czym polega tworzenie własnych motywów, to potem poszło już gładko.

      Ja pomyślę nad artykułem, który były czymś w rodzaju „drugiego kroku”. Zachęcam do zaglądania na blog, niedługo będzie wpis który mam nadzieję też Ci się przyda, a o czym, to niespodzianka 🙂

  17. Witam
    Walczę w WP od kilku godzin i mam zagwozdkę.
    Chciał bym wkleić kod PHP galerii-slideshow na statyczną stronę w WP, czyli np Home, czy jest taka możliwość ?
    Oczywiście korzystam z wtyczki do galerii której kawałek kodu należy wkleić w index.php w wybranym Theme’ie.

    Ale wtedy mam ten slideshow tylko na stronie bloga, a chciał bym tylko na str którą sam wybiorę.
    Jest taka możliwość ?

    1. Tak. Można zrobić to np. poprzez otoczenie tego kodu if’em:

      if (is_front_page())
      ... //tu twój kod
      

      o ile strona główna została wskazana w Ustawieniach WP jako statyczna strona.

      Można też odczytać id tej strony i w if’ie dać:

      if (is_page(42))
      ... //tu twój kod
      

      gdzie w miejsce 42 wpisać id strony

      o innych sposobach możesz przeczytać w kodeksie:
      http://codex.wordpress.org/Function_Reference/is_page

      1. Tak, dziękuję,
        Jednak ten ‚if’ działa kiedy po wklejeniu kodu który wrzuciłem powyżej pojawia się galeria na każdej stronie, co jednak jeśli jest ona ograniczona do pojawienia się tylko na stronie z wpisami (Blog). Wtedy po wklejeniu tego ‚if’ slideshow znika mi z bloga i nie pojawia się nigdzie indziej. Gdzie szukać parametru który o tym decyduje?

  18. Robie własna stronę do portfolio, lecz kodowanie mi ciężko idzie w php, bo nie rozumiem go. w html się znam, ostatnio lecę na divach, ale to trochę kłopot mam bo w divach nie można stosować _targer. Wiem ze w JS się da, ale ja wole php + xhtml. W dodatku WP ma za dużo niepotrzebnych dla mnie rzeczy.

    Przydała by się pomoc kogoś kto dobrze się zna na na kodowaniu stron.

    Daje kontakt na gg: 32780888

    1. Rafał, o co chodzi z _target i divami? Nie rozumiem związku.
      Jakich dużo niepotrzebnych rzeczy ma wg Ciebie WP?

      GG nie mam.

      1. Target stosuje się w ramkach, jak ma się dwie ramki i chce się lądować dane do innej a nie aktualnej, niestety div nie można tego stosować. Co do WP, na obecnym etapie to: wyszukiwarka, panel admina na gł. stronie, komentarze. Zleciłbym napisanie komuś strony pod mój wymóg, ale każdy chce kasy za to, a ja sam nie mam kasy mimo iż robię w grafice. Bez portfolio można się w nos pocałować.

        1. Rafał, zapomnij o ramkach. Postaw na CSS-a. Bez porządnej wiedzy z CSS prędzej czy później się będziesz z czymś męczyć.

          Jeśli chcesz pokazać portfolio, to weź jakiś darmowy motyw i już. Zawsze to jakieś wyjście, jak się ma ograniczone środki.

          1. Założyłem blogera na Google i już. Zrobię tymczasowa oprawę, a kiedy zarobie kasę to wykupie inny serwer i pomyśle czy na WP czy może sam od zera napiszę. Podejrzewam że w następnym roku będę miał już własnej roboty stronę.Ale czas pokaże. W dodatku rezygnuje z webd.pl, bo w następnym roku kupie zapewne domenę i hosting w home.pl – fakt drogo, ale maja nieraz niezłe rabaty i jest fachowa pomoc.

    1. Mieczysław, czy pytasz o linki zwrotne do starej strony prowadzące od innych, zewnętrznych stron? Np. gdy ktoś linkował do nas, a nam się zmienił adres URL po przeniesieniu strony na WP?

  19. Ograniczyłem komentarze od 20 do 90 znaków.
    Nie wiem jak zmniejszyć pole wpisów, do dwóch wierszy po 50 znaków?
    Chodzi o wymuszenie takich wpisów , aby zachowały formę dwuwiersza .
    Motyw Twenty Eleven, WP 3.5 . Czy to jest możliwe? Prosił bym o odpowiedź w stylu „Nie tylko dla orłów”
    Początkujący.

  20. A ja mam problem z current_page_item, bo chciałbym ustawić różne klasy current_page_item_header, current_page_item_sidebar oraz current_page_item_footer. WIem, że WOrdpress ma też opcje, żeby zamiast current_page_item używać current-menu-item czy też current_menu_item tego nie pamiętam dokładnie. Dlaczego chcę różne klasy? Bo przystosowaniu wyświetlania menu za pomocą ‚header-menu’ ) ); ?> w header oraz ‚menu_order’, ‚theme_location’=>’footer-menu’, ‚menu_class’=>’menu-stopka’));?> a także ‚menu_order’, ‚theme_location’=>’sidebar-menu’, ‚menu_class’=>’menu-sidebar’));?> pojawia się jeden problem zasadniczy. lient sobie zażyczył trójkątne punktory przy pozycjach menu w sidebar. W momencie, gdy stosuję opcję:
    li.current_page_item a {
    margin-left:37px;
    color: #000000;
    font-weight:bold;
    background: transparent url(images/arrow.png) 0px 15px no-repeat;
    }
    To punktory są dodawane także do pozycji w menu górnym i dolnym , a nie tylko i wyłącznie w menu lewym bocznym w sidebar.php. I ten problem spędza mi sen z powiek, ponieważ zarówno IE 6, 7, 8 jak i Opera najnowsza, a więc i wcześniejsze wersje również wyświetlają te punktory , jak opisałem powyżej, natomiast w chrome, firefox, safari, IE 10, comodo dragon wyświetlane są punktory prawidłowo, czyli tylko w pliku sidebar.php

    1. Adrian, nie wiem, czy Cię dobrze zrozumiałam. Wejdź może na tę stronę:
      http://frankipolska.pl/projekty/

      To jest strona, którą robiłam na WordPressie. Jak widzisz w menu bocznym na żółtym tle są punktatory w formie trójkątów, a w górnym menu w formie białych ikon.

      Osiągnęłam to za pomocą funkcji wp_nav_menu. Czyli mam dwa różne menu i różnych klas do nich używam.

      Czy o coś podobnego Ci chodzi? Jeśli tak, to napiszę więcej szczegółów technicznych.

  21. Tak, dokładnie mi o to chodzi. Tyle tylko, że zamiast obrazków w górnym menu chcę tekst i nie chcę, by była tylko jedna klasa dla current_page_item, czy current-menu-item. Bo Opera zaciąga czytaj dziedziczy sobie z li.current_page_item {background: url(„images/arrow.png”) no-repeat scroll 0px 15px transparent;} I jak widzisz ten lewy margines 15px, który ustawia strzałkę 15 pikseli na lewo od tekstu ładowany jest w operze do górnego menu wraz z tą strzałką, a nie powinno jej tam być. Nie mam pojęcia, jak to rozwiązać, żeby OPera nie ładowała do górnego menu strzałki dla klasy current_page_item, czy current-menu-item, bo w sumie obojętne której klasy użyję, dzieje się to samo.

  22. Aga, super tutorial, wielkie dzięki. Do tej pory (oprócz zajmowania się e-marketingiem) wdrażałem z powodzeniem strony www w joomla, teraz próbuję wordpressa, głównie ze względu na legendarną prostotę i przyjemne SEO.

    W kroku 4 masz literówkę – „Musimy powiedzieć WordPressowi, która z założonych stron będzie stroną startową. Wchodzimy w Ustawienia->Pisanie” powinno być „Ustawienia -> Czytanie”

    Pozdrawiam

    1. Konrad, dzięki, poprawiłam.
      Tutorial jest już stary, ale generalnie wystarczy, żeby „załapać bazę”. Jak robiłeś strony dla Joomla, to z WP poradzisz sobie lekko. Coraz więcej osób przechodzi z Joomla na WP.

  23. Witam,

    faktycznie zamiescilem post w niewlasciwym temacie. Czy mozna wlaczyc sidebar tylko dla konkretnych podstron i w ktorym miejscu mozna wstawic kod html content’u dla konkretnej podstrony?
    pozdrawiam

  24. Witam!
    Jest jeden szczegół do poprawienia, o ile się orientuję, to nikt na to nie zwrócił uwagi. Mianowicie, w miejscu gdzie przechodzi pętla wyświetlająca wpisy (index.php):

    if while
    endwhile jest – zamyka while, OK. A gdzie zamknięcie if? Powinno być zamknięcie „endif” albo
    wg szkoły „tradycyjnej” if(){ while(){ } };

    pozdrawiam
    Poza tym szczegółem, piękny materiał szkoleniowy. Napisałem 1-szy szablon z czystego html-a w jeden wieczór.
    Zibi

    1. Jak po if jest tylko jedna instrukcja, nie trzeba zamykać ani nie trzeba używać klamerek. To samo dotyczy pętli. Fajnie, że materiał się przydał.

  25. Witam, przeszedłem cały tutorial i faktycznie jest bardzo przydatny. Jednak mam pewien problem. Otóż moja strona którą chce przełożyć z html-a na wordpressa ma menu tak jak tutaj u góry i ma poboczne menu w sidebarze. Tylko w tym przykładzie co Pani opisuje w sidebarze jest tekst a u mnie są linki. I nie wiem jak dodać nowe strony,żeby nie pokazywały się do nich odnośniki w menu głównym (Start,O mnie, Portfolio itd) Tylko,żeby Menu główne zostało takie jak zrobiłem, a menu poboczne miało osobne linki do podkategorii. Mam nadzieję,że zrozumiale wszystko napisałem:) Pozdrawiam!

  26. Dodam jeszcze,że za każdym razem, kiedy dodaję nową stronę z treścią wrzuca mi się ona automatycznie do głównego menu, a tego nie chcę. Chcę potworzyć do dodatkowej strony podkategorii link w menu pobocznym. I to mi nie wychodzi 🙂

  27. witam

    a jak zrobić, żeby ta zmiana przebiegła najmniej „bezboleśnie” dla mojej dotychczasowej strony, czyli bez przerw w jej działaniu?
    mam na myśli, żeby tego wordpressa zainstalować najpierw w osobnym katalogu, a potem go przetransportować do głównego public_html, chciałabym wiedzieć czy można to tak technicznie zrobić? :))

    pozdraiwam

  28. Mam takie pytanie odnośnie pojedynczego wpisu. Dajmy na przykład, że mam małe wpisy (tak jak na jarock.pl). Chce aby po wejściu były szersze i w ogóle. Jak to zrobić? Stworzyć jakiś plik php i użyć jakoś IF w indexie? W ogóle nie znam się na tych funkcjach php, dopiero wczoraj zacząłem zgłębiać się powoli. Prosze o pomoc.

    Dzięki 😉

    1. Hej Mateuszek.
      Jeśli pisząc ‚szersze’ masz na myśli zwiększenie całej szerokości bloku (prostokątnego obszaru, który obejmuje) treść, to służy do tego CSS. Zwykle zmiany w CSS są robione w pliku style.css, ale w zależności od używanego przez Ciebie motywu, mogą to być inne pliki. Zawsze z końcówką css. Żeby wiedzieć, który element w CSS zmienić, najlepiej poznać narzędzie typu Firebug.

      1. Dzięki za odpowiedź.
        Wiem, że CSS służy do tego. Tylko jak to zrobić aby szerokość klasy news’u w „ostatnich wpisach” na blogu miał np. 300px, natomiast w środku wpisu miał szerokość 900px? Trzeba zrobić osobny plik .php, gdzie będzie stworzony cały wpis i do niego przekierowywać? Tylko jak zrobić aby WP wiedział? Proszę o wytłumaczenie jak poradzić sobie z tym problemem, ewentualnie pokierować gdzie rozwiązania szukać. Mateuszek

  29. Witam, mam pytanie jak zrobić podstronę z końcówką HTML ? mam normalne linki, ale chciałbym HTML, wiem że trzeba grzebać w pliku htacces, może ktoś zapoda jakiegoś linka ?

  30. Cześć!
    Zrobiłem projekt strony w html/css – właściwie to gotową stronę , ale chcę ją przerzucić do WordPress. Strona oparta jest na Skroll.js i jest ona w widoku ONE PAGE (tak to teraz wygląda http://as-creative.com.pl/purity/). Jak mogę ją dostosować abym mógł treść poszczególnych sekcji modyfikować w wordpress? np: edytowanie treści 2 slajdu czy zmiana danych kontaktowych?
    Pozdrawiam.

  31. Witam, odświeżę trochę temat. A jak ma się dostosowywanie templatki do responsywnej strony napisanej tylko przy użyciu HTML5/CSS3? Wiem, że używając WP można zainstalować responsywne skórki. Czy przerobienie strony responsywnej może nastręczać jakichś większych problemów?

  32. brakuje mi tu obsługi menu, to znaczy samo menu się tworzy jednak nie mogę uruchomić żadnego z lightboxów… domyślam się że brakuje mi kodu

  33. Hej Aga,

    W mojej statycznej witrynie odwołuję się w links do trzech plików, mianowicie

    Jak mogę odwołać się do tej ścieżki z poziomu WP? Ścieżka jest dość istotna bo np. do touchTouch.css odwołują się javascript odpowiedzialny za galerię, zaś grid definiuje siatkę – rozłożenie kolumn, divów itd. Style oczywiście zawiera wszystkie pozostałe i główne style dla witryny.

  34. Bardzo fajny tutorial, jeden z lepszych w sieci.
    Przy okazji, nie można pobrać paczki z kodami źródłowymi.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Wyrażam zgodę na przetwarzanie przez Webfaces Agnieszka Bury, ul. Rymarska 42/3, 53-206 Wrocław NIP: 9111769381, REGON: 021997379, moich danych osobowych w celu dodania komentarza na blogu webfaces.pl w zgodzie i według zasad określonych w Polityce prywatności.