Jak dodać w WordPressie katalogi ze zdjęciami?
- Poziom trudności:
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:
|
1 |
<?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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<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:
|
1 2 3 |
<?php get_header(); ?> |
Jeśli znajdziesz coś podobnego, wtedy w ramach kodu PHP czyli między otwarciem <?php i zamknięciem ?> dopisz linijkę:
|
1 2 3 |
/* 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.
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.
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.