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:

dodawanie-pojedynczej-galerii-strona

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.

fancybox-prezentacja-albumu

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:

diagram-podstrona-z-albumami

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

dodaj-medium

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.

szablon-galeria

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.

ustalenie-rodzica-obrazek-wyrozniajacy

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.

UDOSTĘPNIJ

Pomogłem rozwiązać Twój problem? Wspieraj moje działania bym pisał więcej:

WordPress dla początkujących