Jak dodać obramowanie wokół obrazka w WordPress?

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.