Galeria WordPress podział na albumy – jak to zrobić krok po kroku

WordPress galeria albumy

Kiedyś opublikowałam wpis jak utworzyć galerię w WordPressie. Wielu czytelników tego wpisu zadawało mi w komentarzach pytanie, jak podzielić galerie na albumy. Zatem dzisiaj przedstawiam tutorial, w którym pokazuję, jak można to osiągnąć bez instalacji żadnych wtyczek.

Uwaga! Istnieje wiele dedykowanych wtyczek do WordPressa umożliwiających grupowanie galerii w albumy (np. Next Gen Gallery). Celem tego tutoriala jest pokazanie, jak samemu można uzyskać taki efekt, wykorzystując możliwości WordPressa.

Jakie będzie efekt końcowy

Galeria WordPress Albumy
Efekt końcowy (obrazek poglądowy)
Efekt końcowy galeria albumu
Efekt końcowy (zobacz przykład na żywo)

Na pierwszym obrazku obok pokazano w sposób poglądowy efekt, który chcemy uzyskać. Pod drugim obrazkiem kryje się link do żywej strony, która została utworzona na podstawie prezentowanego niżej tutoriala.

Struktura przedstawionej galerii jest dwupoziomowa. W analogiczny sposób można uzyskać dowolną liczbę poziomów (album podzielony na kolejne podalbumy).

Zanim zaczniesz – idea rozwiązania

Galeria albumy - idea rozwiązania
Idea rozwiązania

W prezentowanym rozwiązaniu wykorzystamy możliwość układania stron w WordPressie w hierarchię: rodzic-dzieci. Dzięki temu wszystkie albumy będziemy mieli zgrupowane w ramach podstrony, która je obejmuje.

Popatrz na obrazek obok. Strona główna galerii jest rodzicem, zawierającym klikane okładki albumów.
Każda z podstron (w hierarchii stron w WordPressie rozpoczyna się myślnikiem i jest zgrupowana pod rodzicem, do którego przynależy) reprezentować będzie jeden album. W ramach albumu zebrane są zdjęcia tworzące standardową galerię w WordPressie.

Krok 1. Utworzenie strony głównej galerii

Galeria albumy krok 1
Krok 1

W panelu WordPressa wybieramy Strony->Dodaj nową i zakładamy stronę główną galerii. Na razie nie podpinamy jej do menu witryny, gdyż jest jeszcze pusta. Nieco później (w kroku 3) uzupełnimy ją o okładki albumów, które będą linkami do poszczególnych galerii/albumów.

Krok 2. Utworzenie podstrony – albumu ze zdjęciami

Utworzenie podstrony - album 1
Krok 2

Tworzymy album 1. Wybieramy Strony->Dodaj nową. W sekcji po prawej przydzielamy tworzonej podstronie rodzica, jak pokazano na rysunku obok. Dzięki temu ten i inne albumy będą zgrupowane w ramach odpowiedniej strony nadrzędnej.

Krok 2.1. Tworzenie linku powrotu do strony ze wszystkimi albumami

Dodanie linku powrotu do strony-rodzica
Krok 2.1.1.
Dodanie linku powrotu do strony-rodzica
Krok 2.1.2.

Jesteśmy nadal na podstronie (albumie). Utworzymy link zwrotny do strony rodzica, aby umożliwić szybki powrót do strony ze wszystkimi albumami.

W tym celu wykorzystamy mechanizm tworzenia odnośników w WordPressie. Po zaznaczeniu tekstu, który ma być odnośnikiem, klikamy na ikonkę łączą i podpinamy odpowiednią stronę, jak pokazano na obrazkach obok.

Krok 2.2. Dodanie zdjęć tworzących galerię

Dodanie zdjęć tworzących galerię
Krok 2.2

Czas na dodanie zdjęć. Ustawiamy się kursorem w miejscu, gdzie mają się pojawić zdjęcia i wybieramy z menu Dodaj medium. Po zaznaczeniu zdjęć klikamy „Utwórz galerię”. Proces dodawania zdjęć w formie galerii opisano szczegółowo w tym tutorialu.

Rezultat kroku 2

Rezultat kroku 2
Rezultat kroku 2

Po wykonaniu czynności opisanych w ramach kroku 2, powinniśmy zobaczyć taki oto rezultat.

Krok 3. Dodanie okładki albumu jako klikany odnośnik do galerii

Dodanie klikanej okładki albumu
Krok 3.1.
Dodanie klikanej okładki albumu
Krok 3.2.

Wracamy do strony-rodzica. Teraz możemy już dodać link do albumu 1. Link będzie mieć formę obrazka, okładki reprezentującej album. Na okładkę albumu możemy wybrać dowolne ze zdjęć tworzących galerię albumu.

Ustawiamy się kursorem w miejscu, gdzie chcemy wstawić okładkę albumu, klikamy Dodaj medium i wybieramy zdjęcie. Uzupełniamy pole Etykieta (podpis albumu). W polu Odnośnik do wstawiamy link do podstrony z galerią. W konfiguracji okładki pomocny będzie drugi rysunek obok. Wstawimy obrazek na stronę.

Rezultat kroku 3

Rzeultat kroku 3
Rezultat kroku 3

Po wykonaniu czynności opisanych w ramach kroku 3, powinniśmy zobaczyć taki oto rezultat.

Rezultat finalny

Galeria albumy - Efekt finalny
Efekt finalny

Czynności opisane w krokach 2 i 3 powtarzamy dla kolejnych podstron/albumów. Ja dodałam w sumie 3 albumy, czego rezultat pokazany jest na obrazku obok.

Teraz możemy już podpiąć galerię do menu głównego, dodając stronę rodzica do menu (Wygląd->Menu).

Możliwe udoskonalenia

Wskazówki dla bardziej zaawansowanych.

Zamiast ręcznego wykonywania czynności w kroku 3. moglibyśmy napisać własną templatkę w php i przyporządkować ją do strony-rodzica. Templatka odczytywałaby w pętli wszystkie podstrony danego rodzica i automatyczne budowała na ich podstawie klikane okładki albumów. W tym rozwiązaniu moglibyśmy założyć, że zdjęcie okładki albumu jest Ikoną wpisu ustawianą wcześniej dla każdej podstrony.

Pytania i wymiana doświadczeń

A czy Ty miałeś kiedyś potrzebę podziału galerii na albumy? Jak sobie z tym poradziłeś?
Zapraszam do dyskusji i wymiany wiedzy w ramach komentarzy.

Jeśli któryś z kroków jest dla Ciebie niejasny, również zadaj pytanie. Spojrzenie na materiał oczami czeytelnika pozwoli mi na bardziej przejrzyste przedstawienie zagadnień w przyszłości.

46 komentarzy do “Galeria WordPress podział na albumy – jak to zrobić krok po kroku”

  1. To ja czekam na drugą część artykułu (czyli wyjaśnienia dla mnie zaawansowanych, jak zrobić wersja bardziej zaawansowaną). Inna sprawa, czy w wersja zaawansowanej da się zrobić by miniaturka albumu była „losowa” lub w formie ostatnio dodanego zdjęcia do albumu.

    Inna sprawa, o którą mnie kiedyś zapytał znajomy, czy da się zrobić (automatycznie, lub prawie) album ze zdjęciami które będą pochodzić z ze zdjęć załączonych w artykułach :/

    1. czy w wersja zaawansowanej da się zrobić by miniaturka albumu była „losowa” lub w formie ostatnio dodanego zdjęcia do albumu.

      SpeX, nie sprawdzałam, ale wydaje mi się to możliwe, o ile zdjęcia w danym albumie zostały załadowane do tego właśnie wpisu (wówczas można po nich „prze-iterować” w pętli i wybrać któreś, np. ostatnie albo wylosować dowolne).

      Jak to sprawdzę w praktyce, napiszę osobny artykuł albo Ci tu wkleję kod.

      1. Można sobie taki kod do functions.php dorzucić http://pastebin.com/rNd7eZ7A
        -przy zapisie posta ustawia automatycznie ikonę wpisu spośród załączonych do tegoż wpisu fotek.
        W komentarzu są parametry dla wyboru czy ma brać pierwsza czy ostatnia fotkę i czy ma porządkować wg. kolejności, czy losowo.

  2. Bardzo dobry poradnik dla początkujących.
    Też mam zamiar stworzyć taką galerię na własnym blogu, więc jak najbardziej się przyda.

    Dzięki za info
    Pozdrawiam

    1. Hej Dominik, dzięki za komentarz. Do prostych galerii wystarczą pokazane kroki, więc spróbuj, mam nadzieję że poradnik się przyda i po złapaniu idei nie będzie to zbyt mozolna praca.

  3. Tak się zastanawiam. Istnieje możliwość utworzenia załóżmy kilku albumów i upload plików bezpośrednio do nich bez kolejnych ustawień w panelu admina? Jak ktoś ma do dodania kilkaset zdjęć na raz to trochę ciężko wszystko wyklikać.

    1. Ańfachowy, a jakiego rodzaju kolejne ustawienia w panelu admina masz na myśli? Jeśli chodzi o wstawiania tych linków zwrotnych do strony rodzica, to faktycznie może być to uciążliwe, ale można by to zautomatyzować robiąc dedykowaną templatkę, która sama taki kod wygeneruje. Przemyślę sprawę, może zrobię kolejny tutek, gdzie to pokażę jak to zrobić.

      Bo jeśli chodzi o samo wstawianie zdjęć, to WP umożliwia przeciągnięcie myszą dowolnej ilości na raz.

  4. właśnie tworzę stronę z turystyką i to będzie idealne rozwiązanie, dzięki za rzeczowe pokazanie jak to wszystko ogarnąć 🙂

  5. Jak zrobić jeden album obok drugiego bo nie mogę ustawić w jednej linii obok siebie bo mi przeskakuje dziwnie jeden jest wyżej a drugi niżej???

    1. Mariusz, to zależy od Twojego motywu, a konkretnie CSS. Jak podasz link do tej strony, to będę mogła powiedzieć coś więcej.

    1. Czesc. Mialam ten sam problem. Weszlam w html na koncu zdania nacisnelam obojetnie jaka literke wrocilam do menu I skasowalam towlasnie literke I sa teraz obok siebie. Mam nadzieje ze cos pomoglam.

      1. A możesz powiedzieć w którym miejscu dokładnie robiłaś z tą literką? Zakładam, że potem kasowałaś ją backspacem i wszystko się cofało do góry. Tylko nie wiem w którym miejscu to dokładnie zrobić?

  6. Czesc. Dzieki za tutorals jesli chodzi o galerie. Bez twojego bloga bym sobie sama noe poradzila. Jednak mam pytanie. Utworzymam galerie jak podales I wszyrsko wyszlo znakomicie. Ale… jest male ale. Jak wchodze w galerie I naciskam na dane zdjecie pojawia mi sie powiekszone (spoko tak chcialam) ale nie moge przejsc do kolejneho naciskajac strzalke. Musze zamknac dane zdjecie I nacisnac na kolejne. Jest jakas wtyczja albo cos pominelam? Zebyprzecjodzic ze zdjecia na zdjecie nie muszac podglodu?

  7. Tutek fajny,ale u mnie pojawił się taki problem.
    Mam na głównej stronie galerii dodane albumy czyli miniaturki wordpressa z etykietami.
    Problem jest taki, że wyświetlają się jedna pod drugą zamiast obok siebie.Jak przełączam na edytor wizualny to wszystkie albumy mam zamknięte w znacznikach [caption] , nie ma tam żadnych czy innych rzeczy.
    Jak mogę zmusić albumy do wyświetlania się obok siebie?

  8. Witam wszystkich,
    Bardzo fajny wpis, ale pójdźmy dalej. Chciałbym zrobić galerię, do której będą prowadziły linki (do poszczególnych albumów) i to już wiemy, natomiast jak powrócić z galerii (albumu) do czytanego tekstu?

  9. tego szukałem … wieczny problem z albumami na zdjęcia w WordPress, szukam jeszcze możliwości aby uatrakcyjnić wyświetlanie się samych zdjęć, najazd itp

  10. Ja mam takie pytanie- chciałabym, aby w zakładce Galeria wyświetlały się albumy, a w nich galerie, a w nich zdjęcia:)Przykładowo W głównej Galerii (czyli mojej stronie Galeria) były albumy Morze i Góry, a w Morzu Sopot (i tam dopiero zdjęcia Sopotu), później Gdański, itd… jak to zrobić?:)

    1. Myślę, że najłatwiejszym rozwiązaniem jest powtórzenie kroków i dopiero Sopot byłby właściwą galerią zdjęć. Takie dwupoziomowe albumy na chwilę obecną można właśnie tak rozwiązać, że album morze linkowałby do albumu Sopot, a ten linkowałby do galerii zdjęć Sopot. Analogicznie powtórzyć kroki dla kolejnych albumów. Drugim rozwiązaniem, które przychodzi mi do głowy to wtyczka next gen gallery, ale nie wypowiem się obecnie, czy posiada zautomatyzowany , lub wpół zautomatyzowany proces tworzenia albumu wewnątrz albumu. W wolnej chwili mogę jutro to sprawdzić na serwerze testowym. Pozdrawiam.

  11. Juz znalazlem:

    Dla klasy .wp-caption nadalem wieksze rogi gorne (10px) od dolnych (5px)

    border-radius: 10px 10px 5px 5px;
    -moz-border-radius: 10px 10px 5px 5px;
    -webkit-border-radius: 10px 10px 5px 5px;

    1. Patrz punkt, w którym wstawia się okładki galerii, Wstaw okładkę , enter, wstaw okładkę, enter, itd. Tak, żeby okładki albumów były jedna pod drugą. Bo chyba o takie rozwiązanie chodzi?

  12. Chodzi o coś dokładnie odwrotnego. Żeby nie były pod sobą, a automatycznie jednak wskakuje pod drugą.
    Chciałbym żeby były obok siebie.

    1. Wszystkie zdjęcia (okładki) wyrównujesz do lewej …w razie potrzeby przełączasz edytor na tryb tekstowy i likwidujesz odstępy między nimi. Po zapisaniu powinny być w jednej linii.

      Gdyby nie zadziałało, zawsze możesz podziałać stylami – obrazkom tym dajesz float:left; albo display:inline-block;

  13. Witam, poszukuję takiego plugina/widgetu, który posegreguje mi miasta. Ciężko wytłumaczyć, ale chodzi mniej więcej o to co jest na dole tej strony http://www.specprawnik.pl

    Jest taka mozliwość by uzyskać odpowiedź?

    Dziekuje i pozdrawiam serdecznie

  14. Mam pytanie
    Mój problem dotyczy ustawienia obrazka wyróżniającego przy wpisie. Ogólnie zdjęcie, które dodaję jest „rozjechane” przez co słabo widoczne lub nieczytelne.
    Jakie ustawienia powinienem zastosować- jeżeli jest taka możliwość proszę o instrukcję krok po kroku
    strona do wglądu
    http://bksboleslawiec.pl/

  15. Wszystko zrobiłam kilkakrotnie wg instrukcji i kompletnie nic się nie pokazuje w finalnym efekcie..jestem zawiedziona

  16. A co zrobić żeby podany tutorial zadziałał w wersji 4.6.1? Robię po kolei i okładka która ma otwierać album wywala komunikat not found. A strona to zpotarnobrzeg.pl zakładka wydarzenia.

  17. Dzieki za tutorial , naprawdę świetny . Przynajmniej nie muszę wtyczki używać i obciążać aż tak serwera . Mam wersje 4.6.1 i wszystko działa mi

  18. Mam pytanie. Potrzebuje zrobić coś takiego.
    1. Klikam na stronę galerie
    2. Na tej stronie mam miniaturki oznaczone ROK 2013, ROK 2014, ROK 2015 itd
    3. Klikam np w Rok 2013 i tam mam następne ikonki okładki Wydarzenie jeden, wydarzenie dwa.
    4. Po kliknięciu w wydarzenie jeden dopiero wtedy pojawia się właściwe zdjęcia.

    Czyli mamy dwa poziomy. Da się to zrobić tym sposobem czy trzeba jakaś wtyczkę

  19. Witam!
    Trochę odgrzewam temat, bo wpis dosyć stary jednak działający, za co bardzo dziękuję! Jednak mam jedną zagwostkę. Otóż po stworzeniu już galerii na stronie głównej, na obrazku który mnie przekierowuję do wybranej galerii zdjęć (podstronę), mam nagłówek, który opisuje co jest w danej galerii, i ten nagłówek jest podkreślony, jak można to podkreślenie usunąć?
    Dziękuję za pomoc i pozdrawiam

    1. Einfa, takie podkreślenie można z pewnością usunąć za pomocą CSSa. Ale żeby Cię naprowadzić co dokładnie należałoby to zrobić, najlepiej żebyś podała link do strony ze wskazaniem na tę galerię czy album.

Skomentuj Mariusz Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.