Jak uzyskać inny wygląd podstrony w WordPressie. Przykład z mapą google.

Inny widok strony w WordPressie

Jeden z czytelników poprosił mnie kiedyś o tutorial, jak tworzyć strony w WordPressie, różniące się wyglądem (layoutem). Ja o prośbie zapomniałam, ale nie czytelnik. Przypomniał mi się z tym tematem ponownie. Bardzo sobie cenię upór w dążeniu do celu, więc żeby nie zawieść wytrwałego czytelnika bloga, po prostu siadam i piszę.

Jako przykład wykonamy stronę informującą o nadchodzącym WordCamp Europe 2013, składającą się z trzech bloków. Pierwsza kolumna pokaże to, co użytkownik wpisze w standardowym okienku edycji strony, druga kolumna wyświetli mapę google, a w bloku dolnym pojawi się ikona wpisu oraz dodatkowa notka informacyjna. Zobacz obrazek niżej.

Jaki będzie efekt końcowy

Efekt końcowy dla motywu Twenty Twelve
Efekt końcowy dla motywu Twenty Twelve
Efekt końcowy dla motywu Twenty Twelve
Efekt końcowy na żywo WordCamp Europe

Efekt końcowy można zobaczyć w dwóch wersjach. Na pierwszym obrazku obok zobaczymy widok dla motywu TwentyTwelve (w oparciu o który można samodzielnie prześledzić tutorial).

Pod drugim obrazkiem kryje się link do strony, gdzie można na żywo zobaczyć efekt.

Część 1: Tworzymy własny szablon podstrony w WordPressie

Krok 1. Założenie pliku generującego indywidualny szablon strony

Tworzymy pusty plik tekstowy o dowolnej nazwie z rozszerzeniem php, np. google-map-page.php i zapisujemy gdzieś na lokalnym dysku. Otwieramy plik w edytorze i rozpoczynamy pisanie kodu od specjalnego komentarza, który uczyni go szablonem dla strony:

<?php 
/*
Template Name: Google Map Page
*/
?>

Najważniejsza jest obecność słów kluczowych „Template Name:”. Nazwa po dwukropku może być dowolna, najlepiej, żeby kojarzyła się z przeznaczeniem pliku.

To co znajdzie się po komentarzu zamykającym zależy już od nas. Dobrze, żeby plik generował nagłówek i stopkę strony zgodne z resztą motywu. Czyli najlepiej pozostawić „ramy” skórki niezmienione, a indywidualnej modyfikacji poddać wszystko „pomiędzy”.

Porada: Ułatwimy sobie pracę tworząc własny szablon podstrony na podstawie innego, już istniejącego w motywie. Można zrobić kopię pliku page.php, a jeśli go nie ma, pliku index.php i na jego bazie wprowadzać zmiany.

Ja rozpisuję tutorial tworzenia własnej templatki dla motywu TwentyTwelve, dlatego wykorzystam w tym celu pliku page.php ze skórki TwentyTwelve.

Plik page.php motywu TwentyTwelve
Plik page.php motywu TwentyTwelve
Własna, początkowa wersja szablonu
Własna, początkowa wersja szablonu

Na obrazkach obok pokazano wygląd oryginalnego pliku page.php dla motywu TwentyTwelve oraz utworzonej na jego podstawie wstępnej wersji naszego, indywidualnego szablonu.

Kod z rysunku drugiego podaję również niżej:

Kod pliku google-map-page.php – wersja poglądowa

<?php
/**
 * Template Name: Google Map Page
 * 
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">			
			<?php while ( have_posts() ) : the_post(); ?>						
				<header class="entry-header">
					<h1 class="entry-title">Hej, tu indywidualny szablon!</h1>
				</header>								
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Zapisujemy zmiany i plik google-map-page.php umieszczamy na serwerze w katalogu z motywem (w naszym przypadku w katalogu motywu TwentyTwelve). Jeśli wykonujesz szablon dla innego motywu niż TwentyTwelve, Twój kod będzie się nieco różnił.

Krok 2. Dodanie nowej strony w WordPressie i podpięcie szablonu

Przypisanie szablonu do Strony w WordPressie
Podpięcie szablonu
Rezultat podpięcia szablonu do strony
Rezultat

Logujemy się do panelu WordPressa i dodajemy nową stronę (Strony->Dodaj nową). Teraz musimy powiedzieć WordPressowi, że chcemy, żeby tak konkretna strona była wyświetlana w oparciu o stworzony przez nas szablon.

W tym celu z obszaru po prawej stronie o nazwie „Atrybuty strony” z listy dla pola Szablon wybieramy ten nasz, czyli Google Map Page. Zobaczy pierwszy rysunek obok. Drugi obrazek pokazuje rezultat.

Uwaga dla niecierpliwych: Na tym koniec filozofii tworzenia własnej templatki dla podstrony w WordPressie. Kolejne kroki są opcjonalne i mają na celu dostrojenie strony do wyglądu jaki sobie zaplanowaliśmy.

Część 2. Planujemy indywidualną strukturę strony

Struktura strony
Struktura strony – wyodrębnienie bloków
Struktura strony - kod php i HTML
Struktura strony – kod php/HTML

Nasz szablon „w części środkowej” (w miejscu gdzie dotąd był tylko tytuł „Hej, tu indywidualny szablon!”) docelowo będzie składał się z tytułu strony i trzech bloków treści. Podział treści na blocki pokazano na obrazku obok.

Każdy z bloków zostanie odwzorowany na HTML-owy element div, co pokazano na drugim z obrazków obok.

Wyodrębnione bloki treści:

  • Tytuł strony
  • Bloki treści:
    • left block – lewa kolumna z dowolnym tekstem
    • right block – prawa kolumna z osadzoną mapą google
    • bootom block – dolny blok z obrazkiem i tekstem rozciągającym się na całą szerokość strony

Część 3. Wypełniamy bloki odpowiednią treścią

Teraz musimy do odpowiednich bloków zaczytać treść umieszczoną w WordPressie. Operujemy na poziomie strony, więc na „kontenery” treści musimy wybrać takie byty WordPressa, które dostępne są na poziomie strony.

  • tytuł – tytuł strony podany przy zakładaniu strony
  • left block – treść z edytora strony
  • right block – osadzona mapa google – kod mapy przechowamy we własnym polu (szczegóły niżej)
  • bottom block – obrazek: ikona wpisu ustawiona dla strony; tekst notatki: treść podana w okienku „Wypis” dla strony (szczegóły niżej)
Widok strony w WordPressie od środka
Widok strony w WordPressie od środka

Na rysunku obok pokazano miejsca w WordPressie, z których będą pobierane poszczególne treści.

Najczęściej padające pytanie w tym miejscu: Po co zaprzęgać tyle różnych dodatkowych elementów: Wypis, własne pola, ikona wpisu? Przecież taki układ można uzyskać w samym edytorze!

Komentarz: Tak, racja, przy założeniu, że użytkownik końcowy WordPressa się w tym odnajdzie i za chwilę nie rozwali całej struktury. Dobra praktyka tworzenia motywów to takie przygotowanie „kontenerów” treści, żeby dodawanie treści było intuicyjne i „idiotoodporne”.

Wyświetlenie tytułu strony i treści wprowadzonej w edytorze

Za wyświetlenie tytułu strony odpowiada funkcja the_title(). Za wyświetlenie treści wprowadzonej w edytorze (to co u nas trafi do lewej kolumny) odpowiada funkcja the_content().

Dodanie i wyświetlenie mapy google

Pobranie kodu mapy google ze strony Google Maps
Pobranie kodu mapy google ze strony Google Maps
Dodanie własnego pola jako pojemnik na google map
Dodanie własnego pola jako pojemnik na google map

Mapę google przechowamy jako kod pobrany ze strony Google Maps. Jak odczytać kod Mapy Google pokazuje pierwszy obrazek obok.

Do przechowania kodu mapy wykorzystamy tzw. Własne pole. Jak to zrobić pokazuje drugi z obrazków obok.

Wskazówka Jeśli pod edytorem nie widzisz obszaru „Własne pola”, kliknij w prawym górnym rogu „Opcje ekranu” i zaznacz pole „Własne pola”.

Aby pobrać zawartość z własnego pola należy wykorzystać funkcję get_post_meta, przykład wywołania pokazuję niżej.

<?php 
echo get_post_meta($post->ID, 'google_map', true);
?>

Aby osadzić mapę google na stronie musimy wygnenerować pełny kod w postaci iframe’a:

<div class="right-block">
	<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="<?php if ( get_post_meta($post->ID, 'google_map', true) ) echo get_post_meta($post->ID, 'google_map', true) . "&output=embed"; ?>"></iframe>
</div>

Dodanie i wyświetlenie ikony wpisu oraz notatki wprowadzonej w Wypisie

Ustawiamy Ikonę wpisu dla strony korzystając z obszaru „Ikona wpisu” w prawej części ekranu. Jeśli w edycji strony nie widzisz tego obszaru upewnij się, czy w pliku functions.php Twojego motywu jest wywołana funkcja add_theme_support( 'post-thumbnails’ ).

Aby wyświetlić w szablonie Ikonę wpisu korzystamy z funkcji the_post_thumbnail:

<div class="bottom-block">
<?php if ( has_post_thumbnail()) : ?>
	<?php the_post_thumbnail(array(150,150)); ?>
</div>

Pora na dodanie ostatniego elementu – notatki dolnej. W tym celu wykorzystamy tzw. Wypis.

Czy wiesz że…. Obszaru „Wypis” dla stron nie zobaczymy, dopóki jawnie nie powiemy WordPressowi, że chcemy z niego korzystać. Aby go aktywować należy posłużyć się funkcją add post type support

Aby przygotować nasz motyw, na wykorzystanie pola Wypis dla stron należy dodać dodać następujący kod do pliku functions.php:

<?php
add_action('init', 'show_page_excerpt');
function show_page_excerpt() {
	add_post_type_support( 'page', 'excerpt' );
}
?>

Jeśli po dodaniu tego kodu nadal nie widzisz obszaru „Wypis”, sprawdź, czy pole to jest włączone w „Opcjach Ekranu”. W tym celu kliknij w prawym górnym rogu „Opcje ekranu” i postaw checkboksa przy tym polu.

Zawartość pola Wypis wyswietlimy w szablonie wywołując funkcję excerpt (linia 24 w kodzie niżej).

A oto pełny kod naszego szablonu:

/**
 * Template Name: Google Map Page
 * 
 */

get_header(); ?>

	<div id="primary" class="site-content">
		<div id="content" role="main">			
			<?php while ( have_posts() ) : the_post(); ?>						
				<header class="entry-header">
					<h1 class="entry-title"><?php the_title(); ?></h1>
				</header>				
				<div class="entry-content">
					<div class="left-block">					
						<?php the_content(); ?>
					</div>					
					<div class="right-block">
						<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="<?php if ( get_post_meta($post->ID, 'google_map', true) ) echo get_post_meta($post->ID, 'google_map', true) . "&output=embed"; ?>"></iframe>
					</div>				
					<div class="bottom-block">
						<?php if ( has_post_thumbnail()) : ?>
							<?php the_post_thumbnail(array(150,150)); ?>
						<?php the_excerpt(); ?>
						<?php endif; ?>
					</div>
				</div>
			<?php endwhile; // end of the loop. ?>

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

Cześć 4: Dodanie stylów CSS

Widok strony bez CSS
Widok strony zanim dodamy style CSS
Widok strony po dodaniu stylów
Widok strony po dodaniu stylów

Jeśli teraz podejrzymy naszą stronę, to będzie ona wyglądała tak, jak na pierwszym rysunku obok. Treść się wyświetla poprawnie, ale układ pozostawia wiele do życzenia.

My dążymy do uzyskania layoutu jak na drugim z rysunków obok.

Wystarczy dodać kilka reguł do pliku style.css:

.left-block, .right-block  {
	width: 50%;
	float: left;
	margin-bottom: 20px;
}

.right-block > iframe {
	width: 100%;
	height: 344px;
}

.bottom-block img {
	float: left;
	margin: 0 25px 10px 0;
}

Po wykonaniu tego kroku strona powinna wyglądać już dobrze w pełnej okazałości.

Uwaga 1. Dla uproszczenia tutoriala założyłam, że zmiany wykonujemy bezpośrednio na plikach motywu TwentyTwelve. Pamiętajmy jednak, że dobrą praktyką jest wprowadzania własnych zmian w tzw. motywie potomnym.

Uwaga 2. Własne pola (jak to do przechowywania mapy google) możemy przygotować do edycji w bardziej elegancki sposób. W tym celu sprawdzi się wtyczka Advanced Custom Fields lub można zrobić to ręcznie, po zgłębieniu tematu tzw. meta boksów.

Inne wpisy o podobnej tematyce

39 komentarzy do “Jak uzyskać inny wygląd podstrony w WordPressie. Przykład z mapą google.”

    1. Homoklikus, ja wiem, że Ty zaradny człowiek jesteś i to wysoko pożądana cecha, ale układy na tabelach to chyba minione tysiąclecie jeśli dobrze kojarzę?

      1. Tak masz rację, tabele to przeżytek, aczkolwiek nadal ich używam, żeby coś szybciorem zrobić.

        Teraz dłubie się na divach, chociaż i divy w html 5 schodzą na dalszy plan.

    1. Plusa od Ciebie zapisuję w pamięci 🙂 Może przyjdzie czas, że się zacznę bawić w fan page, lajki i całą tę integrację z fejsbukowym światem, ale jeszcze nie teraz…

    1. Mariusz, napisałam o tym w tabelce na końcu. Zgadzam się z Tobą oczywiście, chociaż sama w motywach dedykowanych pod konkretną stronę robię efekt z advanced custom fields ręcznie w kodzie, bo nie lubię instalować zbyt dużo wtyczek.

      P.S. Twój komentarz trafił do spamu, miałeś szczęście, że zajrzałam, bo ostatnio dostaję tyle spamu, że nawet go nie przeglądam i kasuję wszystko jak leci.

  1. o dzięki za spełnienie tak szybko mojej prośby 🙂 Nie spodziewałem się tak szybkiego odzewu 🙂 Jutro zabieram się za wdrazanie 🙂 Dzięki Aga 🙂

  2. Witam, mam takie pytanie. Czy jest możliwe podwójne wyświetlenie pętli wpisów na jednej podstronie?

    Chodzi mi o to, że po wyborze kategorii, na dole strony listują mi się miniatury wpisów (z danej kategorii) i chciałbym po naciśnięciu jednego z nich wyświetlić pełny wpis na tej samej stronie nie tracąc miniatur pod opisem.

    Poniżej przedstawiam graficznie, o co mi chodzi:)
    http://bankfotek.pl/view/1480507

    1. Można by to zrobić tak, żeby w kodzie dla widoku pojedynczego wpisu (single.php) na dole dopisać kod, który pobierze inne wpisy (wraz z ich ikonami wpisu) z tej samej kategorii.

  3. Dzięki za info. Wpis mi się na prawdę przyda. Miałam problem z własnymi polami, a właśnie nie chciałam instalować dodatkowych wtyczek, bo potrzebuję miejsce na inne. Może uda mi się wdrożyć tą metodę przy następnych wpisach. Czy metoda działa podobnie na wpisach, jeśli użyję wtyczki do osobnych szablonów dla kolejnych wpisów?

  4. Witam,

    Nawiązując do tego fachowego i bardzo przejrzystego artykułu, może można by było go rozbudować o jeszcze jedną pozycję. Jak zrobić, aby ten inny wygląd podstrony można było wykorzystać niezależnie od ustawienia motywu? Przy tym rozwiązaniu, trzeba kopiować pliki do motywu potomnego i modyfikować. Czytam manuala WP i google, ale na razie nie dotarłem jeszcze do źródła takiej funkcjonalności. Jest na to jakieś mądre rozwiązanie, bo na razie pierwsze co mi się nasuwa, to zrobić może jako plugin? Myślę, że wiele osób skorzystało by z takiej dogodności. Za informacje z góry dziękuję.

    Pozdrawiam
    Greg

  5. Mam pytanie jak usunąć z widoku strony: {Możesz śledzić komentarze tego wpisu przy pomocy kanału RSS 2.0.
    Komentowanie i pingowanie zostały wyłączone.
    Komentowanie wyłączone.}

    1. Musisz wiedzieć, który z plików php Twojego motywu odpowiada za wygenerowanie tej strony (np. może to być page.php), a potem wejść do źródła i usunąć linie odpowiedzialne za wyświetlania tego tekstu.

  6. Miałem okazję wykorzystać tworzenie nowego szablonu w motywie, który przerabiałem. Zmiany w kodzie były proste i stworzenie szablonu również. Jeszcze nie korzystałem z możliwości gotowych pól i własnych pod wpisem do uzupełnia zawartości strony z wybranego szablonu. To ciekawa koncepcja dla zwykłego użytkownika. Kolejny raz WordPress potwierdza mi, że jest to narzędzie, w które warto zainwestować swój czas, aby poznać jego możliwości, bo są ogromne i stale rosną. Dzięki Agnieszko za odsłonięcie przede mną kolejnej karty WordPressa.

  7. Szukałem takiego rozwiązania jakś czas temu, znalazłem na zagranicznej strone opartej również o system zarządzania treścią – WordPress 😉 Wcześniej byłem typowym, niedzielnym leniwcem i skorzystałem z narzędznia „wycinania” i po prostu po najmniejszej lini oporu wkleiłem plik graficzny z rozszerzeniem .jpg 😉 Teraz już jestem zadowolony z wersji przedstawionej tutaj, dziękuje !

  8. Witam.

    Nie wiem czy to odpowiednie miejsce na moje pytanie, ale mam mały problem 🙂
    Potrzebuje wprowadzić zmienną dla postów tylko z 1 kategorii.

    Konkretnie sprawa wygląda tak: Mam 2 kategorie aktualności i wydarzenia. W wydarzeniach będą podpięte wyłącznie galerię z nextgena ewentualnie krotki opis.
    Po dodaniu ikony wpisów mam miniatury na liście kategorii i po wejściu w konkretny post co zaburza trochę wygląd w połączeniu z galerią. Chciałbym żeby ikony na liście zostały ale po wejściu w konkretny wpis już jej nie było. Zasadniczo problem byłby łaty za pomocą usunięcia kawałka kodu… ALE tą zmianę chciałbym wprowadzić tylko dla 1 kategorii, a w pozostałych zostawić tak jak jest czyli miniatura i na liście i po wejściu w post.

    Zasadniczo potrzebny jest chyba kawałek kodu który określa, jeśli post znajduje się w kategorii X to wykonaj Y (czyli nie wyświetlaj miniatury we wpisie) Jest to w prosty sposób wykonalne ?

    Moja wiedze z zakresie php jest raczej śladowa i obawiam się że sam sobie nie poradzę 🙂

    Z góry dziękuje za odpowiedz 😉

  9. Witam,
    mam problem przy tworzeniu swoich szablonów stron w ramach dowolnego template wordpress. zestaw z zaciąganiem header i footer oczywiście dodaje, natomiast i tak „wnętrze” gubi polskie znaki. wygląda to tak jakby moja strona nie zaciągała z header informacji o polskich znakach czy też czcionkach. czy znasz może rozwiązanie tego problemu?

  10. Na ninejszym blogu powyżej jest napisane:
    Jeśli w edycji strony nie widzisz obszaru „Ikona wpisu” upewnij się, czy w pliku functions.php Twojego motywu jest wywołana funkcja add_theme_support( 'post-thumbnails’).

    U mnie (WordPress4.4.1) – powyższa funkcja w functions.php (dla TwentyTwelve) jest wywołana ale w edycji strony nie widzę tego obszaru „Ikona wpisu”.

  11. Wtym blogu jest napisane:
    Jeśli w edycji strony nie widzisz obszaru „Ikona wpisu” upewnij się, czy w pliku functions.php Twojego motywu jest wywołana funkcja add_theme_support( 'post-thumbnails’).
    ———–
    Zrobiłem tak ale nadal nie widzę obszaru „Ikona wpisu”,
    podobnie jest z aktywacją obszaru „Wypis”.
    Mam zainstalowanego WordPressa 4.4.1 i motyw TwentyTwelve

  12. Witam, piszę z problemem, ponieważ stworzyłem osobny szablon dla podstrony ale przez to straciłem możliwość wyświetlania pluginów na tych podstronach.. Czy jest jakaś rada na to? Dla pewności sprawdziłem czy jeśli zmienię na podstawowy szablon to plugin zadziała i zadziałał. Więc wina leży przy customowych szablonach podstron.

      1. To znaczy, że jak mam wgrany plugin Responsive Menu, ten najbardziej popularny, oczywiście odpowiednio go skonfigurowałem, to na stronie głównej menu działa poprawnie, lecz jeżeli przejdę na podstronę, której szablon mam inny niż na stronie głównej to Responsive Menu już się w ogóle nie wyświetla.

        1. By znaczyło, ze najprawdopodobniej szablon deko skopany np. brakuje wywołań get_header() i get_footer() – a co za tym idzie brak nagłówka lub stopki i tym samym wywołań styli i skryptów w nich ulokowanych.

          1. Dzięki wielkie za pomocne odpowiedzi! Wszystko sprowadziło się do ponownego napisania szablonu podstrony i nagle zadziałało… nie jestem w stanie zlokalizować błędu, ale znając życie to pewnie jakaś banalna literówka albo niedopatrzenie 🙂 Na szczęście już wszystko ładnie działa. Pozdrawiam!

  13. Dzień dobry!
    Bardzo proszę o radę.
    Nie wiem, czy to dobre miejsce na takie pytanie, ale chodzi o wygląd strony w wersji mobilnej, zwłaszcza na ekranach telefonów z niedużym wyświetlaczem. Normalnie na stronie wyświetlanej na komputerze obrazki w zajawkach do wpisów umieszczone są z lewej strony tekstu. Co zrobić, żeby w wersji mobilnej wyświetlały się nad tekstem. Wyglądałoby to estetyczniej.
    Znalazłam w sieci taki kod dla justowania tekstu od okna przeglądarki większego niż 640px.
    body {
    text-align: left;
    }
    @media screen and (min-width: 640px){
    body {
    text-align: justify;
    text-justify: inter-word;
    }
    }
    Czy można coś podobnego zapisać dla pozycji obrazka, żeby zamiast z lewej strony tekstu usytuował się na środku?
    Chodzi o tę stronę:
    https://bibliotekasp2.pl/

  14. A co jeżeli w atrybutach strony nie mamy do wyboru szablonu?
    Na jednych podstronach taka możliwość występuje, a na innych nie ma wyboru szablonu.

  15. Witam,
    Mam problem z subdomeną w Multisite, gdyż mi nie działa w WordPressie po dodaniu jej jako nowej witryny. Zrobiłam Multisite po to, aby zrobić sobie stronę wielojęzyczną bez wtyczek (myślałam, że będzie to łatwiejsze :p) o ile stworzenie Multisite okazało się w miarę łatwe, tak teraz nie mogę sobie poradzić. Założyłam subdomenę na hostingu (niby twierdzą, że jest ok). Dodałam nową witrynę z tą subdomeną w sieci witryn w WP no i klops … nie działa kokpit itd. Czy ktoś ma pomysł dlaczego mi to nie działa? Może coś jeszcze trzeba ustawić? Jak skopiować stronkę, która jest na głównej domenie na subdomenę i uaktywnić ją tak, żebym mogła robić edycję poprzez kokpit?

Skomentuj janko Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.