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:

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
WordPress dla początkujących