Jak dodać obramowanie wokół obrazu w WordPress

Czy chcesz dodać ramkę wokół zdjęć w WordPress? Niedawno jeden z naszych użytkowników poprosił nas o łatwy sposób na dodanie obramowania wokół obrazu w WordPress. Chociaż możesz używać CSS, jest to mylące dla początkujących. W tym artykule pokażemy Ci łatwy sposób dodawania obramowania obrazu w WordPress bez edycji kodu HTML lub CSS.

Video Tutorial

Jeśli nie podoba Ci się film lub potrzebujesz więcej instrukcji, Kontynuuj czytanie.

Metoda 1: używanie wtyczki do dodawania obramowania obrazu w WordPress

Ta metoda jest dla początkujących, którzy nie chcą edytować żadnego HTML lub CSS. Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę WP Image Borders. Po aktywacji musisz odwiedzić Ustawienia ” wp Image Borders aby skonfigurować ustawienia wtyczki.

Pierwsza sekcja w ustawieniach wtyczki pozwala na kierowanie obrazów. Możesz dodać obramowania do wszystkich obrazów w postach WordPress, zaznaczając pole obok “Dodaj obramowania do wszystkich obrazów w postach na blogu” opcja.

Alternatywnie możesz kierować określone klasy CSS na obramowania. Pokażemy Ci, jak dodać klasę CSS do określonego obrazu w dalszej części tego artykułu. Teraz możesz umieścić wszystko w klasie CSS jak .border-image.

Druga sekcja w ustawieniach wtyczki pozwala dostosować ustawienia obramowania. Możesz wybrać styl obramowania, szerokość, Promień i kolor.

Ostatnia sekcja na stronie Ustawienia umożliwia dodawanie cieni do obrazów. Możesz wprowadzić odległość poziomą i pionową,rozmycie i promień rozsyłu, a także kolor cienia pola. Jeśli nie chcesz dodawać cieni do obrazów, możesz po prostu pozostawić te pola puste.

Nie zapomnij kliknąć przycisku Zapisz zmiany, aby zapisać ustawienia wtyczki.

Jeśli wybrałeś pierwszą opcję “Dodaj obramowania do wszystkich obrazów w postach na blogu”, wtedy nie musisz robić nic innego.

Powinieneś zobaczyć obramowania obrazów na wszystkich zdjęciach postów na blogu.

Jeśli jednak wybrano drugą opcję, aby wyświetlać tylko obramowanie dla określonych obrazów, musisz wykonać następny krok.

Dodawanie klasy CSS do obrazu w WordPress

Jeśli chcesz tylko dodać obramowania wokół wybranych obrazów, musisz powiedzieć WordPress, które obrazy powinny mieć obramowania. Możesz to zrobić, dodając klasę CSS do obrazów, które wymagają obramowania.

Po prostu prześlij swoje zdjęcie i dodaj je do swojego posta. Po dodaniu obrazu kliknij na niego w edytorze wizualnym, a następnie kliknij przycisk Edytuj na pasku narzędzi.

Spowoduje to wyświetlenie wyskakującego okienka edycji obrazu pokazującego szczegóły obrazu. Musisz kliknąć Opcje zaawansowane, aby je rozwinąć, a następnie wprowadzić klasę css swojego obrazu.

Podpowiedź: to jest .border-image ponieważ wybraliśmy to w naszych ustawieniach wtyczki.

Następnie kliknij przycisk Aktualizuj, aby zapisać i zaktualizować ustawienia obrazu. To wszystko, twój obraz będzie teraz miał dodatkową klasę. Ponieważ używasz wp image Borders plugin, ramka pojawi się na tym obrazie.

Metoda 2: Używanie HTML i CSS do dodawania obramowań obrazu w WordPress

Dodawanie obramowań obrazu za pomocą CSS / HTML to szybszy i szybszy sposób na uzyskanie obramowań wokół obrazów w WordPress. Możesz to zrobić na wiele sposobów, a my pokażemy Ci je wszystkie. Możesz wybrać to, co działa najlepiej dla ciebie.

Dodawanie obramowań za pomocą stylów in-line w WordPress

Po przesłaniu i wstawieniu obrazu do postu WordPress przełącz się na edytor tekstu. Zobaczysz kod HTML dla swojego obrazu. Będzie to wyglądać mniej więcej tak:

<img src="https://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="https://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 #eeeeee; padding:3px; margin:3px;" />

Możesz zmienić szerokość obramowania, kolor, wyściółkę i margines według własnych potrzeb.

Dodawanie obramowania obrazu w motywie WordPress lub motywie podrzędnym

Jeśli chcesz trwale dodać obramowania do wszystkich obrazów w postach i stronach na blogu WordPress, możesz dodać CSS bezpośrednio do motywu WordPress lub motywu podrzędnego.

Większość motywów WordPress ma już te reguły stylu zdefiniowane w arkuszu stylów motywu, który zwykle jest stylem.plik css. Możesz zmodyfikować istniejący CSS lub dodać własny CSS do motywu podrzędnego.

WordPress dodaje domyślne klasy obrazów do wszystkich obrazów. Aby upewnić się, że obrazy w Twoich postach/stronach mają ramkę obrazu, musisz kierować reklamy na wszystkie te klasy. Oto prosty fragment CSS na początek:

img.alignright {
float: right; 
margines: 0 0 1em 1em;
border: 3px solid #EEEEEE;
}
img.alignleft {
float: left; 
margines: 0 1em 1em 0;
border: 3px solid #EEEEEE;
}
img.aligncenter {
wyświetlacz: blok; 
margin-left: auto; 
margin-right: auto;
border: 3px solid #EEEEEE;
}
img.alignnone { 
border: 3px solid #EEE; 
}

Jeśli chcesz używać obramowań tylko wtedy, gdy ich potrzebujesz, możesz dodać klasę CSS do swoich obrazów (patrz wyżej). Dodaj reguły stylizacji dla tej klasy CSS do motywu lub motywu podrzędnego.

img.border-image { 
border: 3px solid #eee;
padding: 3px; 
margin: 3px;
}

Mamy nadzieję, że ten artykuł pomógł Ci dodać obramowanie obrazu wokół obrazów na blogu WordPress. Możesz również zobaczyć nasz przewodnik, Jak zapisywać obrazy zoptymalizowane pod kątem Internetu, aby przyspieszyć witrynę WordPress.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.