Czy chcesz dodać obramowanie wokół twoich obrazków w WordPress? Niedawno jeden z naszych użytkowników poprosił nas o łatwy sposób na dodanie obramowania wokół obrazka w WordPress. Chociaż można użyć CSS, jest to mylące dla początkujących. W tym artykule pokażemy prosty sposób na dodanie obramowania obrazka w WordPress bez edytowania kodu HTML lub CSS.
Film poradnik
Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, czytaj dalej.
Metoda 1: Użycie wtyczki do dodania obramowania obrazka w WordPressie
Ta metoda jest przeznaczona dla początkujących, którzy nie chcą edytować żadnego kodu HTML ani CSS. Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę WP Image Borders. Po włączeniu należy przejść na stronę Ustawienia „ WP Image Borders, aby skonfigurować ustawienia wtyczki.
Pierwsza sekcja w ustawieniach wtyczki pozwala na targetowanie obrazków. Możesz dodać obramowania do wszystkich obrazków w twoich wpisach na WordPressie, zaznaczając pole obok opcji „Dodaj obramowania do wszystkich obrazków w wpisach na blogu”.
Alternatywnie, możesz wybrać określone klasy CSS, które mają mieć obramowanie. W dalszej części artykułu pokażemy, jak dodać klasę CSS do konkretnego obrazka. W tej chwili możesz umieścić cokolwiek w klasie CSS, takiej jak .border-image
.
Druga sekcja w ustawieniach wtyczki pozwala na dostosowanie ustawień obramowania. Możesz wybrać styl obramowania, szerokość, promień i kolor.
Ostatnia sekcja na stronie ustawień pozwala dodać cienie do twoich obrazków. Możesz wpisz odległość w poziomie i w pionie, promień rozmycia i rozłożenia, a także kolor cienia w ramce. Jeśli nie chcesz dodawać cieni do twoich obrazków, możesz po prostu pozostawić te pola puste.
Nie zapomnij kliknąć przycisku Zapisz zmiany, aby zapisać ustawienia twojej wtyczki.
Jeśli wybrałeś pierwszą opcję „Dodaj obramowanie do wszystkich obrazków we wpisach na blogu”, nie musisz robić nic więcej.
Powinieneś zobaczyć obramowania obrazków we wszystkich wpisach na twoim blogu.
Jeśli jednak wybrałeś drugą opcję, aby wyświetlać obramowanie tylko dla określonych obrazków, musisz wykonać następny krok.
Dodawanie klasy CSS do obrazka w WordPressie
Jeśli chcesz dodać obramowanie tylko wokół wybranych obrazków, musisz powiedzieć WordPressowi, które obrazki powinny mieć obramowanie. Można to zrobić, dodając klasę CSS do obrazków, które wymagają obramowania.
Po prostu prześlij swój obrazek i dodaj go do swojego wpisu. Po dodaniu obrazka kliknij go w edytorze wizualnym, a następnie kliknij przycisk edycji na pasku narzędzi.
Spowoduje to wyświetlenie wyskakującego okienka edycji obrazu pokazującego szczegóły twojego obrazka. Musisz kliknąć Opcje zaawansowane, aby je rozwinąć, a następnie wpisz klasę css twojego obrazka.
Podpowiedź: to jest .border-image
, ponieważ wybraliśmy to w ustawieniach naszej wtyczki.
Następnie kliknij przycisk aktualizacji, aby zapisać i zaktualizować ustawienia obrazka. To wszystko, twój obrazek będzie miał teraz dodatkową klasę. Ponieważ używasz wtyczki WP Image Borders, na obrazku pojawi się obramowanie.
Metoda 2: Używanie HTML i CSS do dodawania obramowań obrazków w WordPressie
Dodawanie obramowań obrazków za pomocą CSS/HTML jest szybszym i szybszym sposobem na uzyskanie obramowań wokół twoich obrazków w WordPress. Istnieje wiele sposobów, aby to zrobić, a my pokażemy ci wszystkie z nich. Możesz wybrać to, co najbardziej Ci odpowiada.
Dodawanie obramowania za pomocą stylów wbudowanych w WordPress
Po przesłaniu i wstawieniu twojego obrazka do wpisu WordPress, przejdź do edytora tekstu. Zobaczysz kod HTML dla twojego obrazka. Będzie on wyglądał mniej więcej tak:
. <img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" />
Możesz łatwo dodać styl CSS w kodzie HTML w ten sposób:
. <img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird" width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeee; dopełnienie:3px; margin:3px;" />
Zachęcamy do zmiany szerokości obramowania, koloru, dopełnienia i marginesu do twoich potrzeb.
Dodawanie obramowania obrazka w twoim motywie WordPress lub motywie potomnym
Jeśli chcesz trwale dodać obramowanie do wszystkich obrazków we wpisach i na stronach swojego bloga WordPress, możesz dodać CSS bezpośrednio w twoim motywie WordPress lub motywie potomnym.
Większość motywów WordPress ma już zdefiniowane reguły stylu w arkuszu stylów motywu, który zwykle jest plikiem style.css. Możesz zmodyfikować istniejący CSS lub dodać swój własny CSS w motywie potomnym.
WordPress dodaje domyślne klasy obrazków do wszystkich obrazków. Aby upewnić się, że obrazki w twoich wpisach/stronach mają obramowanie, musisz skierować wszystkie te klasy. Oto prosty fragment kodu CSS, który pomoże ci zacząć:
img.alignright { float:right; margin:0 0 1em 1em; border:3px solid #EEEEEE; } img.alignleft { float:left; margin:0 1em 1em 0; border:3px solid #EEEEEE; } img.aligncenter { display: block; margin-left: auto; margin-right: auto; border:3px solid #EEEEEE; } img.alignnone { border:3px solid #EEE; }
.
Jeśli chcesz używać obramowań obrazów tylko wtedy, gdy ich potrzebujesz, możesz dodać klasę CSS do twoich obrazków (patrz wyżej). Dodaj reguły stylizacji dla tej klasy CSS w twoim motywie lub motywie potomnym.
img.border-image { border: 3px solid #eee; padding:3px; margin:3px; }
.
Mamy nadzieję, że ten artykuł pomógł ci dodać obramowanie obrazu wokół twoich obrazów na blogu WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat zapisywania obrazków zoptymalizowanych pod kątem sieci, aby przyspieszyć twoją witrynę WordPress.
Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube, aby zobaczyć poradniki dotyczące filmów WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Reuben says
Trying to get this to work using the Gutenberg editor and instead I get the following error: This block contains unexpected or invalid content.”
I know there’s no mistake. I’m adding a CSS class in the html but Gutenberg doesn’t like it.
Aboud Dandachi says
The plugin you mentioned apparently hasnt been tested with the last 3 major releases of WordPress. Would not be a good idea to use it then.
WPBeginner Support says
We will be sure to look into updating our article when we are able. For not tested with the version of WordPress message you would want to take a look at our article below:
https://www.wpbeginner.com/opinion/should-you-install-plugins-not-tested-with-your-wordpress-version/
Administrator
Michael Torres says
Very informative. Thank you for helping us as beginners.
WPBeginner Support says
Thank you, glad you like our content
Administrator
Joey says
Excellent. Thank you for the concise and informative post.
WPBeginner Support says
You’re welcome
Administrator
Eduardo says
Hi, nice article!
Do you know any way to put a border with a „wood style”?
I’m making a wordpress site to show landscape photos and i want to use a wood style border so people couldsee how the picture will be as a real photo frame , can you help me with this?
Thanks!
david says
Very very talented article not so many people on the net and in wp word know how to make thing simple and clear !
thanks i got my beautiful nice border set nicely
dav from france
Erin says
This looks beautiful, so clean.
Is there any way to have images and text (with links) within a box on wordpress. Creating a book reviews site so will have to do this many times
Connor Rickett says
Nice little article. There’s a plugin for every basic thing in WordPress, which is what makes it so friendly to beginners. But, you can dive right into the guts of it if you don’t want to run a plugin for something as small as borders (especially since your site is faster without them).
It was good of you to show the child theme option, since this will add the borders to all images, past, present, and future.
You might also mention that, by changing the border width and color, you can create „boxes” and „frames” around the images, using nothing but what you’ve got up here already.