Jak dodać obrazek do WordPress?

Owszem, temat może wydawać się banalny, ale postanowiłem przygotować bardzo krótki wpis, z dwóch względów:

1. Przyda się (mam nadzieję) osobom, które dopiero zaczynają przygodę z WordPressem.
2. Przyda się to moim klientom, którzy korzystają z w/w systemu. Nie będę musiał za każdym razem żmudnie opisywać mailem procedury.

A więc po kolei:

1. Dodanie grafiki do szablonu WordPress

1. Logujemy się do panelu WordPress (www.nazwastrony.pl/wp-admin).
2. Podajemy nasz login i hasło.
3. Wchodzimy we wpis który nas interesuje.
4. Klikamy Dodaj medium w lewym górnym rogu: 

Dodanie obrazka (medium) następuje z głównego pola edycji wpisu.

5. Możemy wybrać dwa rodzaje plików. Albo pliki, które już znajdują się w szablonie – wcześniej załadowane (Biblioteka Mediów), albo takie, które chcemy dodać z dysku (dokładnie tak samo jak np. załącznik do e-maila):

Możemy albo dodać bezpośrednio z dysku lub skorzystać z wcześniej wgranych zdjęć.

2. Edycja grafiki pliku w szablonie WordPress:

Równie ważne jak dodanie pliku jest właściwe wyedytowanie pliku, tj. uzupełnienie go o odpowiednie opisy potrzebne dla użytkowników oraz robotów wyszukiwarek:

Najpierw wybieramy plik, potem po kolei możemy uzupełnić pola po prawej.

I Edycja zaraz po dodaniu pliku – opis. 

Gdy już załadujemy plik, wystarczy, że klikniemy na nim w bazie biblioteki mediów, w panelu po prawej stronie możemy wpisać:

a) Tytuł pliku (tytuł pod jakim będzie się wyświetlał na stronie).

b) Etykietę (jest to podpis, który widzimy pod obrazkiem).

c) Atrybut alt (bardzo ważne – zdanie, które powinno opisywać co znajduje się w w pliku. Opis alt – czyli alternatywny ma za zadanie informować roboty wyszukiwarek co jest na zdjęciu, a także może się wyświetlić, w momencie, gdy z jakiegoś powodu zdjęcie nie chce się załadować).

d) Opis (przyporządkowany do pliku, może jak najdokładniej odzwierciedlać to co w pliku się znajduje – wtedy łatwiej robotom dokładnie namierzyć jego zawartość po wpisaniu zapytania w wyszukiwarkę).

II Edycja zaraz po dodaniu – parametry: 

Tu możemy ustawić rozmiar zdjęcia, jego położenie i co się będzie z nim działo po kliknięciu.

Możemy również ustalić rozmiar pliku, jego umieszczenie, a także co będzie się działo, gdy ktoś w niego kliknie.

a) Wyrównanie – możemy określić, do której strony plik ma być wyrównany lub czy ma być wyśrodkowany.

b) Odnośnik – to miejsce, które decyduje o tym, co ma się dziać z plikiem, gdy w niego ktoś kliknie. Możemy zdecydować aby plik otworzył się na stronie, otworzył się w osobnym oknie, by nic się nie otwierało lub by kliknięcie w obrazek prowadziło do innego linka (wtedy trzeba podpiąć jeszcze link).

c) Rozmiar – pozwala nam wybrać jeden z kilku rozmiarów i zwiększyć obrazek lub go zmniejszyć. Zwykle, gdy wielkość obrazka przekracza szerokość pola szablonu – szablon zmniejszy go automatycznie.

UWAGA! Należy pamiętać, że przy znacznym zwiększaniu małych plików bardzo tracimy na jakości obrazu. 

III Edycja obrazka z samego wpisu: 

Obrazek możemy również w każdym momencie edytować z samego wpisu, wystarczy kliknąć na niego w trakcie edycji, a następnie kliknąć w ikonkę ołówka, która się w nim znajduje:

Ta forma edycji jest zdecydowanie szybsza.

3. Gdzie się dodaje obrazek wyróżniający?

Wiele szablonów umożliwia nam dodanie obrazka wyróżniającego, czyli takiego, który będzie się znajdował w miniaturach wpisu i u samej góry wpisu (najczęściej) pełniąc rolę jego “okładki”.

By go dodać wystarczy kliknąć w okienko po lewej stronie – reszta edycji zostaje taka sama jak w powyższych punktach:

Obrazek wyróżniający jest standardem w większości szablonów.

4. O jeszcze czym warto pamiętać?

Na koniec kilka rad, których przestrzeganie bardzo ułatwiało mi życie:

• Obrazki najlepiej przygotować już w rozmiarach, w jakiej mają się znaleźć na stronie – wszystkie zmiany i rozciągania komplikują życie
• Obrazek wyróżniający – bezwzględnie powinien mieć te same rozmiary (proporcje), które zaproponowali twórcy szablonu. Unikniemy wtedy brzydkiego “wykrzaczania” obrazka w różnych miejscach strony
• Obrazki warto zoptymalizować (zmniejszyć ich rozmiar) przed dodaniem, by zajmowały mniej miejsca. To dobre dla SEO (optymalizacji strony pod wyszukiwarkę) oraz wygodne dla użytkowników – strona będzie się ładowała szybciej. Do optymalizacji polecam darmowe narzędzie: http://optimizilla.com/
• ZAWSZE dodawaj atrybuty alt – to kluczowa kwestia, by Twoja strona była lepiej widoczna w wynikach wyszukiwania. O tym jakie dodawać – napiszę kolejnym razem.
• Nazwa pliku powinna być BEZ polskich znaków – wtedy przy przenosinach serwera/innych działaniach mamy pewność, że nic się nie wykrzaczy i obrazki nie znikną.

To tyle – jakby się pojawiły pytania – pisz śmiało w komentarzu!

Autor

Radek Klimek

Tworzę treści. Jestem mistrzem w opowiadaniu, wymyślaniu i ubarwianiu historii.