Kiedy uruchomiliśmy WPBeginner, szybko zobaczyliśmy, jak cenny może być pasek boczny do nawiązywania kontaktu z naszymi odwiedzającymi.
Zaczęliśmy używać obrazów w naszym pasku bocznym, aby uczynić go bardziej atrakcyjnym wizualnie, a wyniki były imponujące.
Obrazy pomogły nam promować nasze darmowe kursy, wyróżniać oferty kuponowe, prezentować popularne artykuły i kierować czytelników do różnych typów artykułów i zestawów narzędzi.
Dzięki zaledwie kilku wizualnym akcentom, pasek boczny stał się jedną z najskuteczniejszych części naszej witryny w generowaniu zaangażowania i kliknięć.
W tym przewodniku pokażemy, jak łatwo dodawać obrazy do widżetów paska bocznego na Twojej stronie WordPress – niezależnie od używanego motywu i Twojego doświadczenia technicznego.
Dlaczego dodawać obrazy do paska bocznego WordPress?
Dodawanie obrazów do paska bocznego WordPress może znacząco poprawić atrakcyjność wizualną i funkcjonalność Twojej witryny.
W przeciwieństwie do zwykłego tekstu, obrazy mogą skutecznie przyciągać uwagę ludzi, zwiększając prawdopodobieństwo zaangażowania się w treść. Może to być przydatne do wyróżniania ważnych przewodników, promocji lub zasobów, które chcesz, aby Twoi odwiedzający zauważyli.
Ponadto obrazy przyczyniają się do ogólnej estetyki Twojej witryny, czyniąc ją bardziej atrakcyjną wizualnie i przyjazną dla użytkownika.
Dobrze zaprojektowany pasek boczny z obrazami może poprawić wrażenia użytkownika, prowadząc do dłuższych wizyt na stronie i zmniejszenia współczynnika odrzuceń. Może to również poprawić reputację i wiarygodność Twojej witryny.
Mając to na uwadze, przyjrzyjmy się, jak łatwo dodawać obrazy do paska bocznego WordPress.
Po prostu kliknij poniższe linki, aby przejść do preferowanej sekcji:
- Opcja 1: Korzystanie z bloku widżetu obrazu WordPress
- Opcja 2: Korzystanie z wtyczki widżetu obrazu
- Opcja 3: Używanie widżetu Galerii Obrazów
- Opcja 4: Dodawanie obrazu w klasycznym obszarze widżetu
- Opcja 5: Używanie niestandardowego widżetu HTML
Opcja 1: Korzystanie z bloku widżetu obrazu WordPress
Możesz użyć bloku widżetu obrazu, aby dodać obrazy do paska bocznego swojej witryny.
Edytor bloków widżetów został wprowadzony w WordPress 5.8 i replikuje doświadczenie korzystania z edytora treści WordPress. Możesz używać różnych bloków do dodawania formularzy, powiązanych postów, zdjęć i innych elementów do obszaru widżetów za pomocą bloków.
Aby rozpocząć, musisz odwiedzić stronę Wygląd » Widżety z panelu administracyjnego WordPress. Następnie po prostu kliknij przycisk „+” i dodaj blok widżetu obrazu.
Następnie możesz dodać obrazek w bloku widżetu na 3 sposoby.
Na przykład, możesz przesłać obraz, wybrać istniejący obraz z biblioteki multimediów WordPress lub wstawić obraz z adresu URL.
W edytorze bloków widżetów znajdziesz również opcje zmiany stylu, dodania tekstu alternatywnego i edycji rozmiaru obrazu.
Istnieją ustawienia do zmiany obramowania obrazu i inne zaawansowane ustawienia.
Po zakończeniu nie zapomnij kliknąć przycisku „Zaktualizuj”.
Następnie możesz odwiedzić swoją stronę internetową i zobaczyć obraz w pasku bocznym.
🔎 Chcesz, aby Twoje obrazy były bardziej interaktywne? Spróbuj dodać punkty interaktywne do swoich obrazów, aby wyróżnić konkretne cechy Twoich wizualizacji!
Opcja 2: Korzystanie z wtyczki widżetu obrazu
Innym sposobem dodawania obrazów do paska bocznego WordPress jest użycie wtyczki. Daje to więcej opcji i prosty interfejs, który niektórym początkującym może być łatwiejszy niż domyślny widżet „Obraz”.
Najpierw musisz zainstalować i aktywować wtyczkę Image Widget. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.
Po aktywacji przejdź na stronę Wygląd » Widżety i dodaj blok „Widżet obrazu”.
Następnie kliknij przycisk „Wybierz obraz”, aby przesłać obraz lub wybrać go z biblioteki mediów.
Następnie musisz kliknąć przycisk „Wstaw do widżetu”, a zobaczysz podgląd obrazu pod ustawieniami widżetu.
Możesz dodać tytuł lub tekst alternatywny, a także link i podpis do obrazu.
Możesz również wybrać rozmiar obrazu z listy dostępnych opcji, edytować wyrównanie i więcej.
Gdy będziesz zadowolony, po prostu kliknij przycisk Aktualizuj, aby zapisać widżet obrazu. To wszystko. Możesz teraz przejść do swojej witryny i zobaczyć obraz wyświetlany w pasku bocznym.
Opcja 3: Używanie widżetu Galerii Obrazów
Jeśli chcesz wyświetlić wiele obrazów, możesz użyć widżetu Galerii zamiast widżetu Obraz.
Ponownie, przejdź do strony Wygląd » Widżety, a następnie kliknij opcję „Galeria”.
Stąd możesz dostosować obrazy w swojej galerii. Na przykład, możesz zaokrąglić rogi obrazów.
Gdy będziesz zadowolony z wyglądu galerii, po prostu kliknij „Zaktualizuj”.
Jeśli chcesz więcej opcji dostosowywania, zalecamy użycie wtyczki galerii obrazów, takiej jak Envira Gallery.
Jest wyposażony w mnóstwo dodatkowych funkcji, takich jak wiele szablonów galerii, których domyślny widżet galerii nie oferuje. Ponadto możesz tworzyć albumy i dodawać znaki wodne do swoich obrazów.
Więcej informacji znajdziesz w naszym przewodniku jak stworzyć responsywną galerię obrazów w WordPress.
Po zainstalowaniu wtyczki i skonfigurowaniu kilku galerii, zobaczysz widżet „Envira Gallery” w swoim edytorze widżetów opartym na blokach.
Wszystko, co musisz zrobić dalej, to wybrać galerię, którą chcesz wyświetlić.
Kliknij menu rozwijane, aby to zrobić.
Po zakończeniu możesz jeszcze bardziej dostosować galerię. Na przykład możesz zmienić układ kolumn i włączyć tryb lightbox po kliknięciu obrazu.
Gdy będziesz zadowolony, po prostu kliknij „Zaktualizuj”.
Opcja 4: Dodawanie obrazu w klasycznym obszarze widżetu
Jeśli używasz starszej wersji WordPressa lub wyłączyłeś bloki widżetów, możesz również łatwo dodać obraz do paska bocznego.
Po prostu przejdź do strony Wygląd » Widżety z panelu administracyjnego WordPress i dodaj widżet „Obraz” do swojego paska bocznego. Jeśli nigdy wcześniej nie używałeś widżetów, zapoznaj się z naszym przewodnikiem na temat jak dodawać i używać widżetów w WordPress.
Widżet rozwinie się i będziesz mógł zobaczyć jego ustawienia.
Pierwszą opcją jest dodanie tytułu do widżetu obrazu. Następnie kliknij przycisk „Dodaj obraz”, aby kontynuować.
Spowoduje to wyświetlenie narzędzia do przesyłania multimediów WordPress, gdzie możesz kliknąć przycisk przesyłania plików, aby przesłać swój obraz lub wybrać obraz, który wcześniej przesłałeś.
Po przesłaniu obrazu zobaczysz ustawienia obrazu w prawej kolumnie. Stąd możesz podać tytuł lub tekst alternatywny dla obrazu, dodać opis, wybrać rozmiar, a nawet dodać link.
Po zakończeniu możesz kliknąć przycisk „Dodaj do widżetu”, aby zapisać zmiany. Teraz zobaczysz podgląd obrazu w obszarze ustawień widżetu.
Nie zapomnij kliknąć przycisku „Zapisz”, aby zapisać swój widżet obrazu.
Możesz teraz odwiedzić swoją witrynę, aby zobaczyć obraz wyświetlany na pasku bocznym bloga WordPress.
Opcja 5: Używanie niestandardowego widżetu HTML
W niektórych przypadkach może być konieczne dodanie dodatkowego kodu HTML do swojego obrazu. Domyślny widżet tekstowy pozwala na bardzo podstawowy HTML, ale może nie działać z zaawansowanym HTML lub formatowaniem. W takim przypadku będziesz musiał ręcznie dodać obraz do paska bocznego swojego bloga.
Najpierw musisz przesłać obraz do swojej witryny WordPress. Po prostu przejdź do Multimedia » Dodaj nowe i prześlij plik obrazu.
Po przesłaniu obrazu musisz kliknąć link Edytuj obok obrazu.
WordPress przeniesie Cię teraz do strony „Edytuj multimedia”, gdzie po prawej stronie ekranu zobaczysz adres URL pliku obrazu.
Musisz skopiować ten adres URL i wkleić go do edytora tekstu, takiego jak Notatnik.
Następnie musisz przejść do ekranu Wygląd » Widżety z panelu administracyjnego WordPress.
Następnie możesz dodać blok widżetu „Niestandardowy HTML” do swojego paska bocznego tam, gdzie chcesz wyświetlić obraz.
W obszarze pola tekstowego widżetu musisz dodać swój obraz za pomocą tego kodu:
<img src="Paste The File URL Here" alt="Strawberries" />
Tag img jest używany w HTML do wyświetlania obrazów. Potrzebuje dwóch atrybutów. Pierwszym jest src, który określa lokalizację pliku obrazu. Tutaj wkleisz wcześniej skopiowany adres URL.
Drugi to alt, który służy do podania alternatywnego tekstu dla obrazu. Twój ostateczny tag obrazu będzie wyglądał mniej więcej tak:
<img src="http://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />
Musisz kliknąć przycisk „Zaktualizuj”, aby zapisać ustawienia widżetu, a następnie wyświetlić podgląd swojej witryny.
Mamy nadzieję, że ten artykuł pomógł Ci dodać obraz do widżetu paska bocznego WordPress. Możesz również zapoznać się z naszymi najlepszymi wyborami najlepszych kreatorów stron metodą przeciągnij i upuść w WordPress oraz jak zmienić stronę paska bocznego w WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Holly
Cześć,
Właśnie zadałem pytanie dotyczące mojego obrazka, który pojawia się tylko na stronie głównej, a nie na innych stronach witryny. Rozwiązałem swój problem i chciałem podzielić się rozwiązaniem na wypadek, gdyby pomogło to komuś innemu. Próbowałem użyć widżetu Niestandardowy HTML, aby POKAZAĆ kilka obrazków w moim pasku bocznym treści, a kiedy konkretnie skonfigurowałem dodanie stron, które chciałem pokazać (pozostawiając „Dopasuj wszystko” NIE zaznaczone), obrazy pojawiały się tylko na stronie głównej.
The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages.
Dziękuję,
Holly
Wsparcie WPBeginner
Thanks for sharing your resolution
Admin
Holly
Cześć,
Udało mi się uruchomić niestandardowy widżet HTML na stronie głównej, ale obrazy nie pojawiają się na innych statycznych stronach. Skonfigurowałem ustawienia, aby „Pokazywało się, jeśli” moje pożądane strony są zaznaczone, ale obraz pojawia się tylko na stronie głównej. Próbowałem usuwać i ponownie dodawać widżet oraz usuwać i ponownie dodawać strony. Jakieś pomysły?
Dziękuję!
Holly
Wsparcie WPBeginner
Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show
Admin
Alicja
Cześć, próbuję dodać obrazek i sprawić, by pojawił się w lewym górnym rogu posta. Kiedy go dodaję i podglądam, wszystko jest na miejscu, ale po opublikowaniu go tam nie ma. Masz jakieś pomysły?
Wsparcie WPBeginner
Może warto spróbować wyczyścić pamięć podręczną, aby upewnić się, że nie jest to przyczyną: https://www.wpbeginner.com/beginners-guide/how-to-clear-your-cache-in-wordpress/
Podobnie, jeśli skontaktujesz się z pomocą techniczną swojego motywu, może istnieć specyficzne dla motywu ustawienie, które wymaga zmiany.
Admin
Kathy Turner
Dodałem obrazek do stopki, a w Chrome na komputerze stacjonarnym pojawia się, a następnie natychmiast znika. Zmniejszyłem rozmiar, próbowałem dodać go jako obrazek w HTML, ale nic nie rozwiązuje problemu. Na Chrome na moim telefonie działa dobrze. Nie mam włączonego adblocka na moim komputerze stacjonarnym. Problem występuje również w Firefoksie, ale Microsoft Edge działa bez zarzutu. Jakieś pomysły?
harika
cześć, stworzyłem bloga w wordpressie, ale język publikowanych treści to telugu. Jak zmienić styl czcionki dla postów w telugu?
Micky
Cześć,
Próbowałem obu metod wymienionych w tym filmie i nadal obrazek w pasku bocznym w ogóle się nie pojawia.
Czy masz jakieś pomysły, jak mogę to zdiagnozować?
Dzięki!
Doma
Dzięki, było szybko i na temat… bardzo pomocne.
MS Rahman
Chcę wyświetlić domyślny obraz, gdy w widżecie nic nie ma. Jak to zrobić?
Dzięki
Krishna
Czy jest jakiś sposób, abym mógł ustawić obraz tak, aby był wyświetlany tylko na stronie startowej / głównej?
Sara William
Dzięki. Bardzo się staram, aby przesłać swoje zdjęcie profilowe i teraz można to zrobić łatwo.
Anette
Dziękuję za wyjaśnienie tego w prostych krokach!
Rebecca Claxton
Dziękuję za bycie zawsze na czele losowych wyszukiwań, które wykonuję w sprawach WordPressa – i dziękuję za przydatne informacje odpowiednie dla zwykłych użytkowników WP!
Wsparcie WPBeginner
Cześć Rebecca,
We are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
Karthik Marripoodi
Dziękuję za szczegółowe omówienie tego tematu. Chcę umieścić moje reklamy w sekcji widżetów. Ta metoda idealnie pasuje do moich wymagań. Mam jednak tylko jeden problem. Jak dodać inny obraz dla różnych postów na blogu. Czy jest na to sposób?
Minhaz
świetny post, uwielbiam wpbeginner
Mark
Wierzę, że w filmie powiedziano „Alt tag”. To nie byłaby właściwa terminologia – byłby to atrybut Alt tagu.
Victoria
Uwielbiam ten samouczek, jednak mam wątpliwości co do pobrania widżetu obrazu, ponieważ mówi, że nie został przetestowany z moją wersją WordPressa. Czy wkrótce pojawią się aktualizacje, czy jak zostanie przetestowany z moją wersją WordPressa?
Wsparcie WPBeginner
Cześć Victoria,
Zapoznaj się z naszym artykułem na temat czy powinieneś instalować wtyczki nieprzetestowane z Twoją wersją WordPress.
Admin
melessa
Cześć, mam nadzieję, że tego nie przeoczyłem gdzieś w komentarzach, ale jak zamiast kwadratowego obrazka umieścić okrągły lub owalny obrazek dla sekcji „o mnie” w pasku bocznym? Używam Divi od Elegant Themes.
Wsparcie WPBeginner
Zobacz nasz przewodnik na temat jak dodać okrągłe obrazy Gravatar w WordPress. Artykuł dotyczy Gravatara, ale możesz użyć CSS z dowolnym obrazem.
Admin
Rod
Cześć,
Czy masz jakiś pomysł, dlaczego punkty nie pojawiają się w widżetach paska bocznego, mimo że usunąłeś „list-style-type: none” z pliku CSS i zastąpiłeś go poniższym kodem, a nadal nie działa:
.widget ul li { list-style: circle }
Sam
Jak mogę sprawić, aby obraz był klikalnym linkiem?
Dzięki
David
wow! trafione w punkt. Wizualny tekst to za dużo pracy dla zwykłego obrazu. Szukałem wtyczki, która robi dokładnie to. Wielkie dzięki
Molly
Dzięki, to jest dokładnie to, czego potrzebowałem, i sprawiłeś, że było to tak łatwe!
Wsparcie WPBeginner
Hej Molly,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Admin
Sandra Wiese
Dziękuję bardzo – działa idealnie!
Wsparcie WPBeginner
Hej Sandra,
We are glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Admin
Jana
Cześć,
Mam kilka pytań. Po pierwsze, z jakiegoś powodu mam problem z zainstalowaniem wtyczki Widget Image. Instalowałem już wcześniej wtyczki, ale z tą sobie nie radzę. Przyznaję, jestem początkujący i dodawałem je prawie rok temu, więc może coś zapomniałem. Czy możesz mi coś doradzić?
A tak przy okazji, wierzcie lub nie, udało mi się umieścić obrazek na moim widżecie za pomocą kodu HTML! (Zaskoczony, że potrafię kodować, ale sprawiłeś, że było to bardzo łatwe i zrozumiałe) Jedyny problem, jaki mam, to to, że jest on w pełnym rozmiarze, a mam nadzieję na miniatury. Czy jest na to kod? Jeśli tak, to nie muszę instalować wtyczki.
Dzięki!
Wsparcie WPBeginner
Możesz utworzyć mniejszy obraz na swoim komputerze za pomocą dowolnego narzędzia do edycji obrazów, a następnie przesłać ten obraz.
Admin
James McAllister
Przeczytałem to, aby spróbować zaktualizować obraz, który mam w widżecie na moim blogu.
Czy wy jesteście na tej samej planecie co reszta z nas? Przeczytajcie, co napisaliście – trzeba by być prawnikiem z Filadelfii połączonym ze Stevem Jobsem, żeby zrozumieć instrukcje.
Tak czy inaczej – wracając do próby zmiany obrazu, jestem pewien, że sztuczka tkwi gdzieś tam.
Marvis
Dziękuję bardzo za te informacje. Ale naprawdę muszę wiedzieć, jak wyświetlać reklamy Google w moich postach i na pasku bocznym. Mam już zatwierdzone konto AdSense i wygenerowałem kod reklamy. Ale następny krok jest tym, czego nie rozumiem. Potrzebuję pomocy, proszę.
Wsparcie WPBeginner
Zapoznaj się z naszym przewodnikiem na temat jak zarządzać reklamami w WordPress za pomocą wtyczki Adsanity.
Admin
Abbie
Albo przeoczyłem wiele rzeczy, o których mówiłeś, albo strona się zmieniła. Widzę opcję widżetu obrazu, o którym mówisz, że nie istnieje. Nie widzę żadnych multimediów ani galerii, do których mógłbym przesłać plik obrazu.
Gdzie mam przesłać plik, aby uzyskać adres URL, który mogę umieścić w odpowiednim miejscu w formularzu, aby skonfigurować widżet obrazu?
Paul
Prześlij do swojej biblioteki multimediów
Nikki
Dziękuję, to było bardzo pomocne. film mógłby być trochę wolniejszy
Luke
Dzięki za pomoc! Zdecydowanie łatwiej jest po prostu zainstalować wtyczkę widżetu obrazu.
Manmohan
To jest dla mnie naprawdę pomocne… dziękuję za ten post.
Ale mam pytanie
Erica
Cześć. Wiem, jak umieścić obrazy w pasku bocznym, ale zajmują one za dużo miejsca, więc próbuję zrobić tutaj galerię z kliknięciami. Mam małe pole do klikania, ale żadne obrazy się nie wyświetlają. Udało mi się również zrobić automatyczny pokaz slajdów, ale jest on bardzo rozpraszający, więc tego nie chcę. Chcę tylko galerię zdjęć, w której klika się, aby przejść do następnego obrazu, ale nie mogę znaleźć nic na temat tego, jak to naprawić.
Wsparcie WPBeginner
Proszę zapoznać się z naszym przewodnikiem jak łatwo tworzyć responsywne galerie obrazów WordPress za pomocą Envira.
Admin
Giulia
Cześć,
Mam problem z dodawaniem widżetów obrazów. Kiedy próbuję dodać nowy (po usunięciu poprzedniego) zmiany się nie zapisują, strona przestaje się ładować, a gdy próbuję uzyskać dostęp do strony (administrator i normalny) pojawia się komunikat o niemożności połączenia z serwerem – czyli moja strona jest niedostępna. Zrestartowałem komputer i zainstalowałem aktualizacje, co rozwiązało problem za pierwszym razem, ale kiedy ponownie próbowałem dodać widżet, stało się to samo, z tym że ponowne uruchomienie już nie pomaga!
Proszę o pomoc! Byłbym bardzo wdzięczny!
Z góry dziękuję!
Gregor Egan
Cześć, dzięki za pomoc, działa świetnie. Mam pytanie; nie chcę, aby ten sam obraz pojawiał się na każdej stronie, więc jak mogę ograniczyć go do konkretnej strony, abym mógł używać innego obrazu na kolejnych stronach.
Pozdrawiam,
Gregor
Zespół WPBeginner
Dzięki Lee, pracujemy nad tym.
Lee
Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful.
Sheryl Anderson
Mam obraz w widżecie – chcę wiedzieć, jak skierować ten widżet do formularza zapisu – jak dodać ten kod
Sultan Ayyaz
Pomysł widżetu obrazu jest naprawdę nowy i bardzo pomocny do dodawania obrazów na stronie WordPress. Bardzo pomocny artykuł.
Fiona
Chciałem się tego nauczyć. Idealny czas. Dziękuję!
chzumbrunnen
Innym dobrym sposobem jest użycie widżetu tekstowego, ale z edytorem TinyMCE (tak jak jest używany do postów). Istnieje wtyczka do tego (właściwie jest ich więcej niż jedna): https://wordpress.org/plugins/black-studio-tinymce-widget/