Jak efektywnie zarządzać zdjęciami w WordPress?

Jeśli szukasz sposobów na ulepszenie swojego bloga, to prawdopodobnie spotkałeś się ze wskazówką, żeby wpisy urozmaicać zdjęciami. A już na 100% słyszałeś lub czytałeś gdzieś, że obraz jest wart tysiąc słów. Na szczęście WordPress znakomicie radzi sobie ze zdjęciami i w związku z tym ma szereg wbudowanych funkcji i ułatwień w tym zakresie. Niestety wiele z nich pozostaje w cieniu, a użytkownicy często wymyślają koło od nowa, instalując różnorodne wtyczki, dodając funkcje do swoich szablonów, podczas gdy zazwyczaj nie jest to w ogóle potrzebne.

Celem tego wpisu jest pokazanie Ci, jak wykorzystać wbudowane mechanizmy WordPress do efektywnego zarządzania obrazkami na blogu. Po pierwsze, czy wiesz jak prawidłowo wstawić obrazek do wpisu? Pewnie robiłeś to nie raz, sprawdź jednak czy robisz to dobrze.

Dodawanie obrazków do wpisów

Zanim przejdziemy do WordPress, przyjrzymy się jak wygląda wstawianie obrazków metodą „tradycyjną”. Dodając obrazek w HTML potrzebujesz użyć odpowiedniego znacznika, w tym wypadku <img>

Jego składnia wygląda tak:

<img title="Palma" src="sciezka/do/pliku.jpg" alt="Palma podczas burzy z piorunami" />

Przyjrzyjmy się teraz poszczególnym elementom tego zapisu:

• w atrybucie src podajemy ścieżkę do pliku. Jest to wymagany element, bez niego obrazek się nie wyświetli.
• w atrybucie alt podajemy tekst alternatywny, który zostanie wyświetlony, jeśli obrazek się nie wczyta, np. gdy podasz złą ścieżkę, lub użytkownik korzysta z przeglądarki tekstowej (chociaż to pewnie marginalna sprawa). Jest to również wymagany atrybut, ale jego brak spowoduje jedynie niezgodność naszego kodu ze standardami XHTML. Sam obrazek zostanie wyświetlony, jeśli tylko podana ścieżka jest prawidłowa.
• w atrybucie title podajemy tytuł zdjęcia, który jest wyświetlany, kiedy myszka ustawiona jest nad obrazkiem.

Dlaczego warto używać atrybutów alt oraz title?

Na dzień dzisiejszy roboty wyszukiwarek nie potrafią czytać obrazków, potrafią natomiast doskonale czytać tekst. Dlatego też warto wykorzystać dostępne atrybuty tekstowe, aby jak najlepiej opisać zawartość zdjęcia.
Kluczowe w tej kwestii jest uzupełnienie atrybutów alt oraz title obrazka. Alt powinien zawierać rzeczową informację o tym, co znajduje się na zdjęciu, natomiast title to miejsce na wstawienie opisu (w obu przypadkach pamiętaj o odpowiednim dobraniu słów kluczowych). Poniższa fotografia powinna zostać opisana w następujący sposób:

<img title="Pyszne ciasto z malinami na letnie przyjęcie" src="sciezka/do/pliku/biszkopt-z-malinami.jpg" alt="Biszkopt z malinami i bitą śmietaną" />

Należy również zwrócić uwagę na nazwy plików. Warto zadbać, aby nie były one przypadkowe, np. DSC00123.jpg, ale odpowiednio dobrane frazy, np. biszkopt-z-malinami.jpg

Więcej informacji na temat optymalizacji grafiki na potrzeby SEO znajdziesz tutaj:

• http://www.google.com/support/webmasters/bin/answer.py?answer=114016
• http://www.cezzy.pl/optymalizacja-grafiki-dla-google-image-search/

Jak prawidłowo dodawać grafiki za pomocą WordPress?

Jako użytkownik Wprodpress, nie musisz znać kodu HTML, wystarczy że dobrze wypełnisz formularz dodawania grafiki. Pola w formularzu odzwierciedlają atrybuty, o których pisałam powyżej, w związku z tym rządzą się tymi samymi zasadami. Tobie pozostaje jedynie pamiętać, aby ZAWSZE je uzupełniać tekstami, jak najlepiej oddającymi treść obrazka (mając na uwadze słowa kluczowe).

Absolutnym minimum jest wypełnienie pól Tytuł oraz Tekst alternatywny, natomiast warto się również zastanowić nad wykorzystaniem podpisów pod obrazkami na swoim blogu (pole Podpis). Jest to użyteczne zwłaszcza wtedy, gdy wstawisz do wpisu galerię, o czym przeczytasz na końcu tego wpisu.

Zarządzanie rozmiarami obrazków

Załóżmy że chcesz na stronie wyświetlić obrazek, w rozmiarze 200×300 pikseli… co robisz w takiej sytuacji? Wgrywasz duży obrazek, np. 1024×768 i zmniejszasz go dopiero w przeglądarce za pomocą CSS? Mam nadzieję, że nie Co prawda w tej chwili nie musimy już się martwić prędkością łączy internetowych, ale zwyczajnie szkoda transferu (za który ty płacisz). Może to mieć również znaczenie dla osób korzystających z internetu mobilnego.
Jeśli używasz WordPress, to w ogóle nie masz tego typu dylematów. Wszystkie obrazki, które wgrywasz poprzez WordPress są automatycznie przetwarzane i zapisywane przynajmniej w trzech rozmiarach, zdefiniowanych na twoim blogu. Swoje aktualne ustawienia znajdziesz w panelu administracyjnym, w pozycji  Ustawienia -> Media. Domyślnie w WordPress masz do dyspozycji trzy rozmiary obrazków: mianiaturę, średni i duży. Dla każdego z nich ustawiasz maksymalną szerokość i wysokość, tak aby obrazek wynikowy nie przekraczał określonych wymiarów.

W momencie gdy zmienisz wymiary dla któregoś z trzech podstawowych rozmiarów obrazków, nie będą one miały żadnego skutku dla plików wgranych wcześniej. Oznacza to, że wszystkie grafiki dodane przed dokonaniem zmian, pozostaną w dotychczasowych rozmiarach. Na szczęście jest wtyczka, która pozwoli nam wygenerować wszystkie obrazki ponownie, stosowanie do wprowadzonych rozmiarów.
Wtyczek tego typu jest nawet kilka, ale ja polecę ci Regenrate Thumbanils. Po zainstalowaniu i aktywacji wtyczki, w menu Narzędzia zostanie dodana nowa opcja – Regen. Thumbnails. W tym miejscu wygenerujesz na nowo WSZYSTKIE dotychczas wgrane zdjęcia.

Możesz również wygenerować na nowo tylko wybrane obrazki, poprzez zakładkę Media (kiedy najedziesz na obrazek, wśród opcji pojawi się nowa – Regenerate Thumbnails), lub grupę obrazków, zaznaczając przy nich checkbox po lewej stronie i wybierając na górze (przy Operacje grupowe) Regenerate Thumbails. Gdy klikniesz Zastosuj wybrane obrazki zostaną ponownie wygenerowane, zgodnie z nowymi ustawieniami.

A co jeśli trzy wielkości obrazków to dla Ciebie za mało?

Jest to już nieco bardziej skomplikowane zagadnienie, dlatego poświęciłam mu osobny wpis.

Jak wstawić galerię zdjęć do wpisu na blogu?

Ostatnio sama stanęłam przed koniecznością dodania galerii zdjęć na jednym z moich blogów. O razu instynktownie zaczęłam szukać odpowiedniej wtyczki. Google jednak podrzucił mi również inne rozwiązanie, w dodatku wbudowane w WordPress, które wydaje mi się warte pokazania. Okazuje się, że najprostszym rozwiązaniem jest dodanie wszystkich zdjęć, które mają się znaleźć w galerii, do wpisu, a WordPress sam zajmie się resztą

W edycji wpisu, kliknij na górze, aby dodać zdjęcia. W okienku które się pojawi, zaznacz wszystkie zdjęcia, które chcesz wstawić (najwygodniej jest mieć je przygotowane w jednym katalogu na komputerze). Kiedy zaznaczysz kilka plików na raz, WordPress wgra je po kolei, po czym będziesz mieć możliwość dodania tytułu i tekstu alternatywnego dla każdego z nich (do czego serdecznie Cię zachęcam!). W przypadku galerii zdjęć możesz również chcieć wypełnić pole Opis, jeśli chcesz wyświetlać opisy przy każdym zdjęciu podczas przeglądania galerii. Kiedy skończysz, kliknij Zapisz wszystkie zmiany. W tym momencie do wpisu zostanie wstawiony specjalny kod [ gallery ], który podczas wyświetlania strony zostanie zamieniony na galerię zdjęć.

Wykluczanie/Dodawanie zdjęć do galerii

Domyślnie wszystkie zdjęcia które dodasz do wpisu, znajdą się w galerii. Jeśli chcesz, aby galeria zawierała tylko wybrane zdjęcia, możesz łatwo decydować które wykluczyć, a które zostawić.

Aby kontrolować które zdjęcia wykluczyć/dodać, potrzebujesz najpierw znać ich ID. ID zdjęcia znajdziesz w zakładce Media, po najechaniu na wybrane zdjęcie. W pasku stanu zobaczysz wtedy coś takiego:
http://mojastrona.pl/wp-admin/media.php?attachment_id=22&action=edit
Najważniejszy fragment to attachement_id=22 – ta liczba to właśnie ID obrazka. Zapamiętaj go sobie lub zapisz, a następnie wróć do edycji wpisu. Teraz, aby wykluczyć to konkretne zdjęcie z galerii, użyjesz następującego kodu:
[ gallery exclude="22" ]
lub
[ gallery exclude="22,11" ]
jeśli chcesz wykluczyć więcej zdjęć.

Podobnie jeśli chcesz wskazać konkretne zdjęcia, które mają się znaleźć w galerii używasz następującego kodu (wcześniej oczywiście musisz przygotować sobie ID tych zdjęć):

[ gallery include="22,39,45" ]

A co jeśli chcesz wstawić więcej niż jedną galerię do wpisu?

Jest to możliwe bez dodatkowych wtyczek, wykorzystując sposób podany powyżej, czyli wskazując które konkretnie zdjęcia powinny się znaleźć w galerii. W tym celu potrzebujemy jednak znać ID wszystkich obrazków, przez co cały proces będzie bardziej pracochłonny. W takim przypadku polecam skorzystanie z odpowiedniej wtyczki, a jest ich dosyć dużo.

W tym wpisie chciałam pokazać Ci podstawy zarządzania zdjęciami na stronie opartej o WordPress. Temat jest oczywiście o wiele szerszy, natomiast myślę, że rady zawarte w tym wpisie są podstawą w zakresie zarządzania zdjęciami i warto o nich pamiętać, a przede wszystkim korzystać z nich w praktyce.

Related posts:

1. Jak dodać własny rozmiar zdjęcia w WordPress?