Jak dodać w WordPressie katalogi ze zdjęciami?
- Poziom trudności:
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:
Najpopularniejszą wtyczką galerii w WordPressie jest zdecydowanie NextGEN Gallery. Chociaż ponad milion pobrań robi wrażenie to zastanawiająca jest średnia ocena użytkowników: 3.2 na 5 gwiazdek nie wygląda najlepiej. Może zamiast dosyć topornych galerii NextGEN warto skorzystać ze zmodyfikowanej opcji dodawania galerii wbudowanej w WordPressa? Czytaj dalej jeśli chcesz spróbować mojego sposobu.
Jak dodawać w treści pojedynczy album ze zdjęciami?
Pojedynczy album w WordPressie można dodać stosunkowo łatwo:

Jak widzisz na powyższym przykładzie miniaturki wyglądają już całkiem dobrze ale brakuje efektu powiększenia. Sprawę rozwiązuje wtyczka Fancybox, którą wystarczy zainstalować i uruchomić w sekcji Wtyczki -> Dodaj nową dzięki czemu zdjęciazaczną się powiększać w estetyczny sposób.
Bardzo istotną opcją, o której bardzo często się zapomina jest ustawienie odnośnika do pliku multimedialnego. Jeśli zapomnisz wprowadzić tej modyfikacji zawsze możesz wrócić do edycji fotografii klikając na nią podczas edycji wpisu/strony. Bez problemu znajdziesz tam opcję ustawień odnośnika. Zawsze jeśli chcesz aby miniaturka wskazywała duże zdjęcie – wybieraj plik multimedialny. Dzięki temu strona będzie wiedzieć, żeby nie otwierać dużego zdjęcia w nowej karcie. Wskazanie pliku multimedialnego będzie również rozpoznane jako właściwie przygotowana miniatura pod Fancyboxa lub inną tego typu wtyczkę wspierającą galerie na Twojej stronie.

Struktura podstrony z albumami
Mam nadzieję, że poradziłeś sobie z dodawaniem pojedynczego albumu. Najprostsze za nami. Trochę inaczej sprawa wygląda jeśli chcesz stworzyć podstronę, która będzie gromadzić albumy ze zdjęciami. Aby lepiej to zrozumieć zobacz poniższy diagram:
W środku mamy podstronę z albumami, która jest zwykłą stroną o nazwie „Galeria”. W ramach tej galerii znajdują się albumy (kółka z literą A), które posiadają tytuł oraz okładkę albumu. Wewnątrz każdego albumu są zdjęcia (kółka z literą Z) w formie miniatur, które po kliknięciu powiększają się do dużych rozmiarów. Tak właśnie wygląda cały układ podstrony z albumami.
Potrafimy już dodać przy pomocy przycisku
pojedynczy album ze zdjęciami. Opanowaliśmy także metodę pozwalającą na powiększanie zdjęć w efektowny sposób przy pomocy wtyczki Fancybox. Teraz czas przygotować szablon pod stronę zawierającą wszystkie albumy.
Szablon strony z albumami
Wpierw kilka słów teorii. Nowa podstrona w WordPressie najczęściej wyświetlana jest według szablonu zamieszczonego w pliku page.php. Tam znajduje się najczęściej wywołanie nagłówka, stopki oraz kod odpowiadający za wyświetlenie treści. Najczęściej jest to:
<?php the_content(); ?>
Aby przygotować odrębny szablon pod Twoją podstronę z galeriami powinieneś połączyć się ze swoim serwerem, następnie znaleźć swój motyw (poszukaj w /wp-content/themes/ w katalogu sugerującym nazwę Twojego motywu – a nazwę możesz sobie przypomnieć wchodząc do sekcji Wygląd -> Motywy i sprawdzić który motyw jest włączony). Po wejściu do katalogu poszukaj pliku page.php i skopiuj go na dysk. Możesz od razu zmienić jego nazwę na page-galeria.php albo inną sugerującą, że będzie to szablon galerii. Teraz przejdź do edycji i znajdź wywołanie treści. Może to być wspomniany wcześniej <?php the_content(); ?> albo inny kod, który wywołuje to, co zostanie wpisane w edytorze WordPressa.
Kiedy już znajdziesz kod odpowiadający za wyświetlenie treści – podmień go na:
<h1 class="postTitle"><?php the_title(); ?></h1> <div class="view-gallery"> <?php $child_pages = $wpdb->get_results("SELECT * FROM $wpdb->posts WHERE post_parent = ".$post->ID." AND post_type = 'page' ORDER BY $wpdb->posts.post_date DESC", 'OBJECT'); ?> <?php if ( $child_pages ) : foreach ( $child_pages as $pageChild ) : setup_postdata( $pageChild ); ?> <div class="child-thumb"> <a href="<?php echo get_permalink($pageChild->ID); ?>" rel="bookmark" title="<?php echo $pageChild->post_title; ?>"> <?php echo get_the_post_thumbnail($pageChild->ID, 'thumbnail'); ?><br /> <span><?php echo $pageChild->post_title; ?></span> </a> </div> <?php endforeach; endif; ?> </div>
Jestem winny kilka słów wyjaśnień. Powyższy fragment kodu pozwala na zautomatyzowanie procesu dodawania nowych albumów w ramach albumu rodzica. Innymi słowy – wszystkie albumy, które będą przypięte do strony rodzica będą rozpoznawane przez tę stronę i tym samym nie trzeba będzie ich w dwóch miejscach dodawać. Więcej powiem później, więc jeśli jeszcze nie rozumiesz co zrobiłeś poprzez wklejenie powyższego kodu – proszę Cię o chwilę cierpliwości.
Wróćmy do edycji pliku page-galeria.php. Ostatnią zmianą jaką chciałbym żebyś wprowadził jest zmiana nazwy szablonu. Najprawdopodobniej na górze pliku znajdziesz taki fragment kodu PHP:
<?php get_header(); ?>
Jeśli znajdziesz coś podobnego, wtedy w ramach kodu PHP czyli między otwarciem <?php i zamknięciem ?> dopisz linijkę:
/* Template Name: Galeria */
Dzięki temu WordPress będzie wiedział jak stworzony szablon się nazywa (jego nazwa to Galeria) i na podstawie tej nazwy będzie można zadeklarować stronę, która jest galerią z albumami. Po zapisaniu pliku przenieś go na serwer w miejsce gdzie znajduje się plik page.php. Teraz powinieneś mieć dwa tego typu pliki: page.php i page-galeria.php. Jeśli masz tylko jeden, znaczy to, że gdzieś po drodze popełniłeś błąd.
Rodzic – dziecko czyli relacja strony z albumami do strony pojedynczego albumu
Przejdź teraz do sekcji Strony i dodaj nową stronę. Dodaj nową stronę, która będzie zbierać wszystkie albumy zdjęć – możesz ją nazwać dla ułatwienia „Galeria”. W treści nie musisz nic wpisywać. Zwróć teraz uwagę na atrybuty strony (z prawej pod przyciskiem Opublikuj). Najprawdopodobniej znajdziesz tam trzy opcje: rodzica, szablon i kolejność. Interesują nas tylko pierwsze dwie. Strona, którą aktualnie tworzysz nie ma rodzica, bo sama będzie rodzicem dla dzieci czyli konkretnych albumów podpiętych pod tę stronę. W polu Rodzic zostawiasz więc „nie ma rodzica” chyba że strukturalnie stronę umieszczasz w podmenu, wtedy ustawiasz to inaczej. W większości przypadków prostych witryn gdzie galeria będzie widocznym elementem menu ta podstrona nie będzie miała rodzica.
Kolejna opcja to szablon. Zazwyczaj wszystkie strony, które dodajesz w WordPressie mają ustawiony domyślny szablon jako standardowy. Jeśli poprawnie stworzyłeś nowy, dodatkowy, szablon w poprzednim paragrafie, wtedy oprócz domyślnego będziesz mógł wybrać szablon galerii. Zrób to w tym przypadku.

Po zapisaniu zmian WordPress będzie wiedział, że na tej konkretnej stronie powinien korzystać nie z pliku page.php ale z page-galeria.php. Bardzo nam to ułatwi późniejsze dodawanie kolejnych albumów ze zdjęciami.
Dodawanie nowego albumu w ramach podstrony z albumami
Pamiętasz album ze zdjęciami, który stworzyłeś wraz ze mną na początku tego kursu? Aby ten i inne albumy były widoczne na podstronie Galeria musisz powiedzieć WordPressowi, że to są dzieci rodzica czyli strony Galeria. Przejdź więc do stworzonego wcześniej albumu i wybierz w atrybutach opcję Rodzic -> Galeria. Jeszcze musisz dodać obrazek wyróżniający, który będzie jednocześnie okładką albumu i możesz już zapisać zmiany.

Gratulacje! Właśnie stworzyłeś pierwszy album ze zdjęciami w ramach galerii. Teraz czynność możesz powtórzyć kilkukrotnie aby stworzyć podstronę wypełnioną albumami. Każdy z albumów będzie zawierał wybrane przez Ciebie zdjęcia, zostanie podpisany nazwą, którą podałeś w tytule oraz zilustrowany przy pomocy dodanego obrazka wyróżniającego. Albumy na podstronie układają się według porządku chronologicznego, od najwcześniej dodanego do najstarszego.
Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

Super artykuł. Dzięki za przydatne wskazówki:)
Cieszę się, że mogłem pomóc. Zachęcam do korzystania z innych materiałów. 🙂
Ekstra artykuł!
Mam jednak pytanie, otóż, galeria (albumy) wyświetla mi się w formie listy. Czyli jednen album pod drugim.
Istnieje sposób na stworzenie tego w ładniejszy sposób? Grid style, czy chociaż w formie 3 lub 4 kolumn.
Jak można to ostylować, aby miało ręce i nogi?
Pozdrawiam, Dawid.
Można i tu robotę robi CSS. Napisz na priv to prześlę Ci w wiadomości zwrotnej kod z którego ja korzystam aby albumy wyświetlały się w 3 kolumnach.
super! a jest szansa jeszcze na ten kod aby albumy wyświetlały się w 3 kolumnach?
Piszę na priv 🙂
Bardzo dziękuję za artykuł. Ogromna lekcja semantyki i uporządkowania. Przerabiam szablon i mam problem z dodaniem slidera js. do pętli. Zupełnie nie wiem, gdzie mógłbym jeszcze go umieścić. chciałbym skorzystać z tego co jest, ale..slider jest popularny w motywie jest zainstalowana biblioteka jquery.fractionsslider.js, no, alee. z góry dziękuję za każdą podpowiedź.
Witam, świetny artykuł, zawłaszcza, że dokładnie tego potrzebowałem.
Mam tylko pytanie, otóż galeria wyświetla miniatury w rozmiarze 150×150 mimo, że domyśle miniatury WP są ustawione na 300×300. Czy podany skrypt sam ustala rozmiary, a jeśli tak to jak je powiększyć?
Pozdrawiam Tomek
Nie wiem czy dobrze rozumiem ale ustalić rozmiary można samodzielnie w functions.php dopisując:
add_image_size( 'nazwa-rozmiaru’, 300, 300, true );
i zamieniając w kodzie odpowiadającym za wyświetlenie treści „thumbnail” na „nazwa-rozmiaru”.
Wtedy nie jesteśmy uzależnieni od rozmiaru określonego przez zainstalowany motyw.
Witam, pewnie dobrze wytłumaczone, ale u mnie coś poszło nie tak….
po wprowadzeniu zmian i chęci podglądu pojawia się następujący komunikat
Parse error: syntax error, unexpected '<' in /wp-content/themes/twentysixteen/image.php on line 58
Prztestowałem na Twentysixteen i wszystko działa bez zarzutu. Upewnij się czy:
1) Edytujesz plik page-galeria.php
2) Nie dodałeś w linii 58 pliku image.php niepotrzebnego apostrofu.
3) Pętla wyświetlająca treść którą podmieniasz ma formę inną niż . Powinieneś usunąć ze strony:
i wkleić kod z artykułu.
Bardzo dziękuje, świetny artykuł…
Tylko co zrobić aby obrazki wyróżniające poszczególnych albumów na głównej stronie galerii układały np. poziomo lub pionowo ale na środku.
Analogicznie foto w albumach również nie mogę wycentrować – zostaje niezajęty pas z prawej, niezależnie od wybranej ilości kolumn.
Niestety bez dostosowania CSS pod odpowiednią stronę nie da się tego zrobić.
Przez przypadek znalazlem ten artykuł. Powyższe wskazówki były skuteczne i strona też super.