Jak dodać obramowanie wokół obrazu w WordPress (3 proste metody)

Czy kiedykolwiek czujesz, że Twoje obrazy po prostu znikają w tle Twojej witryny WordPress? Wybierasz świetne wizualizacje, ale gdy tylko znajdą się na stronie, wyglądają płasko, jakby ich ledwo tam było.

Dzieje się tak często, zwłaszcza w przypadku czystych, białych układów. I może sprawić, że Twoje treści będą mniej angażujące, nawet gdy wszystko inne wygląda dopracowanie.

W tym miejscu dodanie prostej ramki może zrobić dużą różnicę.

W WPBeginner lubimy dodawać czyste obramowania wokół naszych zrzutów ekranu, aby pomóc im się wyróżnić i poprawić ogólny wygląd naszych stron. Jest to jeden z naszych ulubionych trików dla lepszego zaangażowania, bardziej zrównoważonego projektu i bardziej profesjonalnego wyglądu.

W tym przewodniku pokażemy trzy proste sposoby dodania obramowania wokół obrazu w WordPressie. Do końca będziesz wiedzieć, jak sprawić, by Twoje obrazy wyróżniały się i utrzymywały zainteresowanie odwiedzających Twoimi treściami. 🙌

Dlaczego dodać obramowanie wokół obrazu w WordPress?

Obramowanie pomaga obrazom wyróżnić się na tle reszty treści, zwłaszcza na stronach z jasnym lub zatłoczonym tłem. Tworzy wyraźną granicę wizualną, która ułatwia dostrzeganie obrazów i zwiększa ich atrakcyjność.

Obrazy to potężne narzędzia komunikacji. Mogą szybko przekazywać informacje i sprawić, że strony z dużą ilością tekstu będą bardziej atrakcyjne.

Czasami jednak obrazy mogą zlewać się z tłem witryny. Jest to bardziej prawdopodobne, jeśli używasz obrazu tła lub kolory Twojej witryny są podobne do kolorów Twoich zdjęć.

Osoby z wadami wzroku lub daltonizmem mogą również mieć trudności z odróżnieniem obrazów od tła. Jeśli chcesz dowiedzieć się więcej, mamy przewodnik na temat poprawy dostępności witryny WordPress.

Dodanie obramowania wokół obrazu w WordPress wyraźnie odróżnia obraz od tła Twojej witryny. Jest to również świetny sposób na zwrócenie uwagi na Twoje najważniejsze wizualizacje.

Mając to na uwadze, przeprowadzimy Cię przez proces dodawania obramowania wokół obrazu na Twoim blogu WordPress.

Oto szybki przegląd wszystkich metod, które omówimy w tym artykule:

• Metoda 1: Używanie niestandardowych klas CSS do dodania obramowania wokół obrazu w WordPress
• Metoda 2: Używanie kreatora stron do dodania obramowania wokół obrazu w WordPress
• Metoda 3: Używanie HTML i CSS do dodawania obramowania wokół obrazu w WordPress
• Wskazówka bonusowa: Używanie narzędzia do projektowania graficznego do dodania obramowania wokół obrazu
• FAQ: Dodawanie obramowania wokół obrazu w WordPress
• Więcej poradników dotyczących używania obrazów w WordPressie

Gotowi? Zacznijmy.

Metoda 1: Używanie niestandardowych klas CSS do dodania obramowania wokół obrazu w WordPress

Utworzenie niestandardowej klasy CSS to sprytny i łatwy sposób na dodanie obramowań do obrazów. Klasa CSS to blok kodu wielokrotnego użytku, który pozwala zastosować te same style, takie jak obramowania, kolory czy odstępy, do wielu elementów na Twojej stronie.

Zamiast więc edytować każdy obraz pojedynczo, możesz zdefiniować ustawienia obramowania w jednym miejscu i zastosować je wszędzie tam, gdzie potrzebujesz, za pomocą zaledwie kilku kliknięć. Jest to idealne rozwiązanie, jeśli planujesz dodać obramowania do wielu obrazów na swojej stronie.

Istnieje kilka sposobów na utworzenie niestandardowej klasy CSS. Możesz użyć narzędzia do dostosowywania motywu, Edytora Pełnej Witryny lub wtyczki WPCode.

Zawsze zalecamy korzystanie z wtyczki WPCode, ponieważ jest ona przyjazna dla początkujących i niezależna od motywu. Oznacza to, że Twój niestandardowy kod CSS będzie działał nawet wtedy, gdy zmienisz motyw.

W naszych markach partnerskich używamy WPCode do dodawania i zarządzania niestandardowymi fragmentami kodu. Aby dowiedzieć się więcej, zapoznaj się z naszą szczegółową recenzją WPCode.

Zainstalujmy i aktywujmy wtyczkę WPCode. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Fragmenty kodu » + Dodaj fragment.

Następnie możesz najechać kursorem na opcję „Dodaj własny kod (nowy fragment)” i kliknąć „Użyj fragmentu”.

Na następnym ekranie WPCode poprosi Cię o wybranie typu kodu.

Możesz zauważyć, że domyślne ustawienia WPCode wskazują na „Fragment PHP”, ale tutaj musisz kliknąć „Fragment CSS”.

Otworzy to edytor WPCode. Stąd możesz najpierw utworzyć nazwę dla niestandardowego fragmentu. Na przykład, używamy „border-black”.

Pamiętaj, że podczas tworzenia klasy CSS będziesz musiał określić kolor i grubość obramowania.

Na przykład możesz ustawić piksele (px) dla szerokości i kod koloru szesnastkowego dla koloru.

W poniższym fragmencie kodu tworzymy czarne obramowanie o szerokości 5 pikseli:

.border-black {
    border: #000 solid 5px;
}

W powyższym przykładowym kodzie border-black to nazwa klasy CSS (taka sama jak w naszym niestandardowym fragmencie kodu w WPCode, co ułatwia utrzymanie porządku).

Możesz użyć dowolnej nazwy, ale będziesz musiał wpisać nazwę klasy CSS za każdym razem, gdy chcesz utworzyć obramowanie. Mając to na uwadze, chcesz wybrać nazwę klasy CSS, która jest krótka i łatwa do zapamiętania.

Teraz wystarczy skopiować ten fragment kodu do pola „Podgląd kodu” WPCode w następujący sposób:

Po tym możesz przełączyć przełącznik, aby aktywować fragment i kliknąć przycisk „Zapisz fragment” lub „Aktualizuj”. Szczegółowe instrukcje znajdziesz w naszym przewodniku na temat dodawania niestandardowego CSS do WordPressa.

Możesz dodać tyle klas CSS, ile chcesz. Na przykład możesz tworzyć obramowania o różnych kolorach.

Teraz dodanie obramowania do obrazu jest dość proste.

Aby rozpocząć, kliknij obraz na swojej stronie lub wpisie WordPress. Następnie spójrz na zakładkę „Blok” po prawej stronie ekranu i znajdź tam opcję „Zaawansowane”.

Kliknij go, aby rozwinąć sekcję.

W polu „DODATKOWE KLASY CSS” możesz wpisać nazwę klasy CSS, którą chcesz dodać do obrazu.

Pamiętaj, że, jak widać na poniższym obrazku, obramowanie nie pojawi się w edytorze treści WordPress.

Aby zobaczyć, jak obramowanie będzie wyglądać dla Twoich odwiedzających, kliknij przycisk „Podgląd”.

Teraz zobaczysz swój obraz z zastosowaną ramką.

Jeśli jesteś zadowolony z wyglądu obramowania, wystarczy opublikować lub zaktualizować stronę.

Metoda 2: Używanie kreatora stron do dodania obramowania wokół obrazu w WordPress

Inną metodą jest użycie wtyczki do tworzenia stron.

Kreatory stron typu „przeciągnij i upuść” pozwalają łatwo projektować i dostosowywać strony internetowe, takie jak strony logowania i strony docelowe. Możesz dodawać tekst, obrazy i inne elementy bez potrzeby posiadania umiejętności kodowania.

Te narzędzia pozwalają również łatwo tworzyć unikalne obramowania dla każdego obrazu. Możesz je projektować za pomocą edytora wizualnego, co jest łatwiejsze dla wielu osób.

Polecamy SeedProd, który jest najlepszym kreatorem stron docelowych dla WordPressa. Jest przyjazny dla użytkownika i pozwala łatwo tworzyć profesjonalnie wyglądające strony.

Zapoznaj się z naszą pełną recenzją SeedProd, aby dowiedzieć się, dlaczego polecamy to narzędzie.

SeedProd ma specjalny blok Obraz z wbudowanymi opcjami obramowania. Możesz również łatwo dodawać cienie i dostosowywać odstępy.

Najpierw musisz zainstalować i aktywować wtyczkę. Jeśli potrzebujesz pomocy, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do SeedProd » Strony docelowe z panelu administracyjnego WordPress.

SeedProd zawiera setki profesjonalnie zaprojektowanych szablonów, które są pogrupowane w kategorie. Na górze ekranu zobaczysz kategorie, których możesz użyć do:

• Zbuduj stronę 404.
• Stwórz niestandardową stronę logowania.
• Zaprojektuj piękną stronę wkrótce.
• I więcej.

Aby przyjrzeć się projektowi, po prostu najedź kursorem myszy na szablon, a następnie kliknij ikonę lupy, gdy się pojawi.

To pokaże podgląd szablonu.

Jeśli jesteś zadowolony z wyglądu szablonu, kliknij „Wybierz ten szablon”.

W polu „Nazwa strony” wpisz nazwę strony. Domyślnie SeedProd użyje tej nazwy jako adresu URL strony.

Jeśli chcesz zmienić ten automatycznie utworzony adres URL, po prostu edytuj tekst w polu „Adres URL strony”.

Po wprowadzeniu informacji możesz kliknąć przycisk „Zapisz i rozpocznij edycję strony”. Spowoduje to otwarcie wybranego szablonu w edytorze typu „przeciągnij i upuść” SeedProd.

W menu po lewej stronie zobaczysz wszystkie bloki, które możesz dodać do swojej strony WordPress za pomocą funkcji przeciągnij i upuść.

Po prostu znajdź blok „Obraz”, a następnie przeciągnij go na projekt swojej strony.

Po wykonaniu tej czynności kliknij blok „Obraz”, aby zobaczyć wszystkie ustawienia, których możesz użyć do dostosowania bloku.

W menu po lewej stronie kliknij „Użyj własnego obrazu”.

Możesz teraz wybrać dowolny obraz z biblioteki multimediów WordPress.

Następnie kliknij zakładkę „Zaawansowane” w menu po lewej stronie.

Następnie kliknij, aby rozwinąć sekcję „Obramowanie obrazu”.

Domyślnie wszystkie ustawienia grubości obramowania w SeedProd wynoszą 0, co oznacza, że obraz nie ma obramowania.

Najpierw będziesz chciał zwiększyć te wartości do 1 lub więcej. Spowoduje to dodanie widocznego obramowania do obrazu.

Aby rozpocząć, kliknij każde z pól „Szerokość ramki”, a następnie wpisz wyższą liczbę lub użyj pojawiających się przycisków strzałek.

Gdy będziesz zadowolony z grubości obramowania, możesz zacząć je stylizować.

Jedną z opcji jest zmiana koloru ramki poprzez kliknięcie pola obok „Kolor ramki”. Spowoduje to otwarcie okna podręcznego, w którym możesz wybrać nowy kolor ramki.

SeedProd oferuje trzy proste style obramowania: ciągły, kropkowany i przerywany. Możesz wybrać ten, który najlepiej pasuje do Twojego obrazu.

Aby wypróbować te różne style obramowania, po prostu otwórz menu rozwijane „Styl obramowania”, a następnie wybierz opcję z listy.

I oto jest!

A jeśli chcesz dodać obramowanie do innych obrazów, po prostu postępuj zgodnie z powyższym procesem.

Gdy będziesz zadowolony z projektu swojej strony, możesz kliknąć przycisk „Zapisz”, a następnie wybrać „Opublikuj”, aby udostępnić ją online.

Metoda 3: Używanie HTML i CSS do dodania obramowania wokół obrazu w WordPressie

Możesz również dodawać obramowania za pomocą HTML i CSS. Ta metoda nie wymaga wtyczki, co może być przydatne.

Jednak dostosowanie wyglądu obramowania wymaga napisania kodu, więc może nie być najlepszym wyborem dla początkujących. Jeśli jednak czujesz się komfortowo z odrobiną kodowania, ta metoda oferuje dużą elastyczność.

Na początek dodajmy obraz do dowolnej strony lub wpisu.

Gdy to zrobisz, możesz kliknąć ikonę trzech kropek w prawym górnym rogu, a następnie kliknąć „Edytor kodu”.

WordPress wyświetli teraz cały kod, który tworzy stronę lub wpis.

Teraz możesz znaleźć sekcję kodu, która dodaje obraz do Twojej strony. Ten kod zacznie się od wp:image .

Jeśli strona zawiera wiele obrazów, sprawdź wartość img src=. Jest to adres URL obrazu w Twojej bibliotece multimediów WordPress, który będzie inny dla każdego obrazu.

Gdy znajdziesz odpowiednią sekcję kodu, następnym krokiem jest napisanie linii kodu, która doda obramowanie i określi jego styl.

Na przykład, w poniższym fragmencie kodu obramowanie ma szerokość 3 pikseli. Dodajemy również 3 piksele odstępu i marginesu:

style="border:3px solid #000000; padding:3px; margin:3px;" />

W powyższym przykładowym kodzie, solid #000000 ustawia kolor obramowania. Wartość #000000 to kod szesnastkowy koloru czarnego.

A jeśli nie chcesz tworzyć czarnej ramki, możesz zastąpić wartość dowolnym innym kodem szesnastkowym.

Po wybraniu kodu obramowania musisz znaleźć sekcję /></figure> i dodać swój kod bezpośrednio przed pierwszym znakiem /.

Spójrzmy na przykład:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

Gdy będziesz zadowolony z kodu, wyjdź z edytora kodu, klikając „Wyjdź z edytora kodu”.

Powinieneś teraz zobaczyć obramowanie wokół swojego obrazu. Nie martw się, jeśli otrzymasz ostrzeżenie o nieprawidłowym kodzie HTML. Jest to normalne i nie wpłynie na sposób wyświetlania obrazu.

Jeśli jesteś zadowolony z wyglądu, możesz zaktualizować lub opublikować swoją stronę jak zwykle.

Teraz, jeśli odwiedzisz swoją stronę WordPress, zobaczysz obramowanie wokół swojego obrazu.

Wskazówka bonusowa: Używanie narzędzia do projektowania graficznego do dodania obramowania wokół obrazu

Chociaż WordPress oferuje kilka metod dodawania obramowań, opcje te mogą być czasami ograniczone pod względem stylu i personalizacji. Dlaczego więc nie edytować obrazu najpierw, a następnie przesłać go do WordPress?

Tutaj przydają się narzędzia do projektowania graficznego.

Adobe Photoshop to główny gracz, z mnóstwem fantazyjnych funkcji dla profesjonalistów. Jeśli nie chcesz wydawać fortuny, to Affinity Photo jest solidnym wyborem – ma podobne sztuczki w zanadrzu, ale płacisz tylko raz.

Aby uzyskać bardziej przyjazne dla użytkownika, przeglądarkowe doświadczenie, Canva jest doskonałym narzędziem. Nasz zespół regularnie używa go do szybkiego projektowania obrazów wyróżniających i grafik do mediów społecznościowych.

A jeśli dbasz o swój portfel, GIMP (GNU Image Manipulation Program) może być Twoim wyborem. Jest całkowicie darmowy, open-source i potrafi zrobić wiele z tego, co płatne narzędzia.

GIMP jest również świetną opcją zarówno dla początkujących, jak i doświadczonych użytkowników. Możesz go używać na Macu i Windowsie.

W tym samouczku pokażemy, jak dodać obramowanie wokół obrazu za pomocą GIMP.

Po zainstalowaniu będziesz chciał otworzyć aplikację GIMP na pulpicie. Następnie możesz kliknąć Plik » Otwórz i wybrać obraz do edycji z dysku lokalnego. Możesz też przeciągnąć i upuścić obraz do edytora GIMP.

Gdy obraz zostanie załadowany do edytora GIMP, narysujmy obramowanie wokół obrazu za pomocą „Narzędzia zaznaczania prostokątnego”. To narzędzie znajdziesz na pasku narzędzi w lewym górnym rogu.

Następnie możesz sprawdzić ustawienia koloru pierwszego planu i tła.

Dzieje się tak, ponieważ GIMP używa koloru pierwszego planu do obrysowania linii. Więc jeśli potrzebujesz użyć konkretnego koloru dla swojego obramowania, możesz kliknąć na kolor pierwszego planu, aby go dostosować.

Spowoduje to otwarcie selektora kolorów, gdzie możesz przesunąć mysz nad obszarem wyboru koloru lub wstawić kod szesnastkowy koloru.

Po wykonaniu tej czynności możesz kliknąć „OK”.

Teraz, gdy ustawiłeś kolor obramowania, czas go zastosować. Możesz przejść do Edytuj » Obrysuj zaznaczenie, a otworzy się okno „Obrysuj zaznaczenie”.

Tutaj możesz dostosować styl obrysu, szerokość linii i inne. Na przykład, ustawiliśmy naszą szerokość linii na 5 px.

Po wykonaniu tej czynności kliknij „Stroke” (Obrys), a obramowanie zostanie dodane do Twojego obrazu.

Przed przesłaniem do WordPress, możesz zoptymalizować obraz, aby utrzymać doskonałą szybkość i wydajność witryny. Surowe obrazy często mają duży rozmiar, więc ten krok może być ogromną pomocą.

W GIMP możesz zoptymalizować swój obraz, zmieniając jego rozmiar.

Aby rozpocząć, przejdź do Obraz » Skaluj obraz. Otworzy się okno „Skaluj obraz”, w którym możesz dostosować „Rozmiar obrazu” w następujący sposób:

Po dostosowaniu rozmiaru obrazu możesz kliknąć przycisk „Skaluj”.

GIMP przeskaluje obraz, a następnie wyświetli nową wersję w edytorze.

Po zakończeniu możesz zapisać obraz, przechodząc do Plik » Eksportuj jako.

Następnie możesz postępować zgodnie z instrukcjami, aby wybrać lokalizację, nazwać plik i zdefiniować format obrazu. Gdy wszystko będzie gotowe, kliknij „Eksportuj”.

Teraz możesz przesłać swój obraz do swojego posta lub strony WordPress. Oto jak może wyglądać w edytorze bloków:

To wszystko – nauczyłeś się, jak dodać ramkę wokół obrazu za pomocą narzędzia do projektowania graficznego!

Możesz użyć tej metody, gdy tylko chcesz przesłać obraz do WordPress.

FAQ: Dodawanie obramowania wokół obrazu w WordPress

Nadal masz pytania dotyczące stylizacji obrazów? Oto kilka często zadawanych pytań, które pomogą Ci rozwiązać problemy, dostosować i w pełni wykorzystać dodawanie obramowań w WordPressie.

Czy mogę dodać to samo obramowanie do wszystkich obrazów na mojej stronie jednocześnie?

Tak, możesz to zrobić za pomocą niestandardowego CSS, stosując style do głównego tagu img. Może to jednak wpłynąć również na elementy takie jak logo, ikony lub obrazy w widżetach.

Dla lepszej kontroli zalecamy utworzenie klasy CSS (jak w Metodzie 1) i zastosowanie jej tylko do obrazów, do których chcesz dodać obramowanie.

Jak mogę stworzyć zaokrąglone rogi dla obramowania mojego obrazu?

Możesz łatwo tworzyć zaokrąglone rogi za pomocą właściwości CSS border-radius. Po prostu dodaj linię border-radius: 15px; do swojego niestandardowego fragmentu CSS. Im wyższa wartość w pikselach, tym bardziej zaokrąglone będą rogi.

Czy mogę usunąć ramkę, którą mój motyw WordPress dodaje automatycznie?

Tak. Aby to nadpisać, możesz utworzyć niestandardową klasę CSS – na przykład .no-border z border: none !important;. Następnie możesz zastosować ją do konkretnych obrazów, używając pola „Dodatkowe klasy CSS” w ustawieniach bloku lub obrazu.

Czy dodanie obramowania CSS spowolni moją stronę internetową?

Nie, prosta ramka CSS to tylko linia kodu i nie ma zauważalnego wpływu na szybkość ładowania strony. Rozmiar pliku samego obrazu wpływa na wydajność, dlatego zawsze upewnij się, że optymalizujesz obrazy do sieci.

Więcej poradników dotyczących używania obrazów w WordPressie

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać obramowanie wokół obrazu w WordPress.

Jeśli uznałeś to za pomocne, możesz również zapoznać się z naszymi przewodnikami na temat:

• Jak prawidłowo dodawać obrazy w WordPressie
• Jak edytować podstawowe obrazy w WordPress
• Jak przeskalować i powiększyć obrazy bez utraty jakości
• Jak tworzyć dodatkowe rozmiary obrazów w WordPress
• Jak łatwo leniwie ładować obrazy w WordPressie
• Tekst alternatywny obrazu a tytuł obrazu w WordPress
• Jak dodać obraz nagłówkowy w WordPressie (działa ze wszystkimi motywami)
• Najlepsze wtyczki i narzędzia do obrazów wyróżnionych dla 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.