Jak dodać obrazek do panelu bocznego

Image Widget

Panel boczny (sidebar) to idealne miejsce do umieszczania informacji, które mają być widoczne w całym serwisie. Bardzo często wstawiamy tam różnego rodzaju obrazki – od informacyjnych do reklamowych – i mimo że nie sprawia to większych problemów nawet początkującym użytkownikom WordPressa, to zawsze można ten proces uprościć.

Ten wpis jest częścią cyklu Pierwsze kroki, skierowanego do najbardziej początkujących użytkowników WordPressa i poruszającego podstawowe zagadnienia związane z obsługą tego CMSa.

Sposób pierwszy – kod HTML

Najprostszym sposobem na umieszczenie obrazka w panelu bocznym jest skorzystanie z widgetu Tekst i umieszczenie w nim kodu HTML wyświetlającego obrazek. Taki kod może wyglądać na przykład tak:

Proste, prawda? Jeśli chcemy, aby wstawiony obrazek był linkiem, wystarczy dodać odpowiedni znacznik:

Problem z tą metodą jest taki, że musimy samodzielnie wygrzebać z biblioteki mediów adres URL naszego obrazka. Nie jest to szczególnie skomplikowane (chyba że potrzebujemy obrazka w niestandardowym rozmiarze), ale zawsze to kolejna czynność, którą trzeba wykonać.

Sposób drugi – wtyczka Image Widget

Dodawanie obrazków do panelu bocznego można sobie nieco uprościć korzystając z darmowej wtyczki Image Widget. To jeden z tych prostych dodatków, które na pierwszy rzut oka wydają się trywialne i niepotrzebne, a po kilku miesiącach używania stają się wręcz niezbędne.

Image WidgetPo instalacji wtyczki w panelu zarządzania widgetami (Wygląd → Widgety) znajdziemy nowy widget Obrazek. Po umieszczeniu go w dowolnym panelu bocznym możemy wybrać obrazek, który chcemy w nim osadzić – wystarczy kliknąć przycisk Wybierz obrazek, który otwiera znane okno biblioteki mediów.

Po wybraniu interesującego nas obrazka jego podgląd pojawi się w oknie konfiguracji widgetu wraz z dodatkowymi opcjami. Domyślnie ustawiona zostanie pełna wersja wybranego zdjęcia – jeśli chcemy wybrać inny rozmiar możemy to zrobić korzystając z opcji Rozmiar (aktualizacja podglądu nastąpi po kliknięciu przycisku Zapisz).

Pola znajdujące się pod podglądem wybranego obrazka pozwalają na wprowadzenie tytułu zdjęcia (to tak naprawdę tytuł widgetu), jego opisu (pojawi się pod zdjęciem) i tekstu alternatywnego (atrybut alt). W polu Opis możemy korzystać ze znaczników HTML, co pozwala na formatowanie tekstu.

Pole Link pozwala na opcjonalne wprowadzenie adresu, do którego będzie linkować umieszczone zdjęcie. Dodatkowo możemy określić, czy link otworzy się w nowym oknie lub karcie przeglądarki.

W ten oto szybki i prosty sposób możemy wstawiać dowolne obrazki do paneli bocznych. Wtyczka ta na pewno nie jest jakimś rewolucyjnym narzędziem, ale pozwala na zaoszczędzenie kilku minut. W przypadku osób nieznających kompletnie HTMLa zapobiegnie również popełnianiu błędów – doceni to z pewnością każda osoba, która szukała w kodzie strony na przykład niedomkniętych cudzysłowów w atrybutach…

Bezpośredni link

  • waldas

    Jeżeli już jesteśmy przy temacie wtyczek do obrazków z linkami – już pół roku męczy mnie inna kwestia. Chciałbym w panelu bocznym stworzyć zwykły prosty rotator z kilku obrazków podlinkowanych do stron partnerów – miałby się po prostu co 5 sekund zmieniać. Czy zna ktoś wtyczkę, która wyeliminuje mi ręczne wstawianie kodu java w pole tekst?

  • Jak dla mnie – jeszcze niedojrzałego szczypiorka – rzecz bardzo przydatna. Nie zrobię błędu zostawiając sobie jakieś „śmieciuszki”. Zresztą niby rzecz bardzo prosta, a zastosowań może być bardzo dużo dzięki temu, że obrazek można podlinkować.

  • Bardzo mi pomógł ten artykuł, dzięki :) Chciałam jeszcze się dopytać, jak można zapanować nad rozmiarem obrazka korzystając z pierwszego sposobu?

    • Należy użyć obrazka o odpowiednim rozmiarze. ;) Ewentualnie (nie polecam) ustawić rozmiar dodając do elementu ‚img’ atrybuty ‚width’ i/lub ‚height’.

  • Prosta i przyjemna wydaje się ta wtyczka :) Moje pytanie jest, czy jest możliwość umieszczenia przycisku na zdjęciu, który przekierowywał by do zapisu lub otwierał pop-up? Z tego co widzę, to tylko opis pojawi się pod obrazkiem. Zależało by mi, abym wstawił obrazek i dodatkowo na dole obrazka dołożył przycisk do kliknięcia. Pozdrawiam

    • Takie rzeczy to już musisz we własnym zakresie zrobić – ta wtyczka na to nie pozwala.

  • Szalenie pomocny wpis! :) Męczyłam się, bo coś źle zrobiłam przez ponad 30 min. Podałeś rozwiązanie na tacy :) Całuję stopy :)

  • Monika

    Hej, mam problem z dodaniem opisu „o blogu/ o sobie”. Od razu przyznam, że dopiero raczkuję w temacie wordpressa i nie do końca jeszcze ogarniam jego tajniki :) Założyłam bloga i mam stronę główną i po prawej stronie panel boczny, gdzie dodałam nowy widget/sidebar z własnego menu „o blogu” i chciałabym dodać tam wpis i zdjęcie o blogu i o sobie. Pytanie, jak to zrobić? Oprócz tego sidebaru mam również „kategorie”, archiwum” i tagi. I te sidebary udało mi się ogarnąć, natomiast nie mam pojęcia jak dodać cokolwiek do „o blogu”. Finalnie zalezy mi na tym, aby po wejściu na stronę była strona główna a po prawej w panelu bocznym było „o blogu”, pod napisem zdjęcie i żeby po kliknięciu na zdjęcie wyświetlał się opis o blogu i o mnie. Tylko jak to zrobić? Jest szansa na pomoc?

    • Nie bardzo rozumiem problemu, bo chyba dokładnie to opisane jest w tym wpisie. Wstaw do tego panelu bocznego widget (np. ten opisywany w tym wpisie), wstaw do niego zdjęcie i dodaj link do strony ‚o blogu’.

  • Artur Śliwiński

    Proszę o informację, czy można zmodyfikować kod

    tak by link otwierał się w nowym oknie?

    • Pod polem do wprowadzenia linku jest lista rozwijana, w której możesz wybrać sposób, w jaki będzie otwierał się link. Jest to widoczne na screenie i wspominam o tym w treści wpisu.

  • Edyta Guhl (Edita)

    Wreszcie sie udalo :-) Bardzo dziekuje. Swietna wtyczka.

  • Dzięki!

  • Ola

    Dokładnie tego potrzebowała dzisiaj! Dzięki za ten wpis. Mam tylko jedno pytanie: Jak zmodyfikować kod HTML (ze sposobu pierwszego) żeby link otwierał się w nowym oknie? Będę wdzięczna za odpowiedz.

    • Dodaj do linku target=”_blank”, np. tak:

      <a href=”https://wpzen.pl” target=”_blank”>

      • Ola Pyszkowska

        Bosko! Dziękuję.