Jak dodać krawędzie (obramowanie) do obrazów ? cz.2

W poprzedniej części dowiedziałeś się jak dodać obramowanie obrazków za pomocą wtyczki WordPress. Jeśli dobrze pamiętasz im więcej masz zainstalowanych wtyczek, tym twoja strona może się dłużej wczytywać, co nie jest oczywiście wskazane, ponieważ możesz tracić czytelników, którzy nie będą czekać kilkanaście, a nawet kilkadziesiąt sekund nim zobaczą to po co przyszli na bloga, czyli artykuł.

W tej części dowiesz się jak uzyskać ten sam efekt, czyli obramowanie obrazów bez użycia wtyczek WordPress.

Dodanie krawędzi do obrazów za pomocą CSS

Sposób 1. Dodanie kodu CSS bezpośrednio do obrazu we wpisie.

Będziemy dodawać kod CSS bezpośrednio do obrazu we wpisie. Dlatego wracamy do edytora wpisu, który przełączamy w tryb tekstowy. Wśród wyświetlanej zawartości znajdziemy znacznik <img> dla drugiego obrazku. On ma taki przekładowy wygląd:

< img src=”http://www.example.com/wp-content/uploads/2016/12/widok-ze-Świnicy-300×200.jpg” alt=”” width=”300″ height=”200″ class=”alignnone size-medium wp-image-36 / />

Dodamy do tego znacznik styli CSS: style=”border: 3px solid #dd3333; border-radius: 2px;. powinien dodać do obrazu krawędź koloru czerwonego z szerokości linii 3px i zaokrąglonymi kątami krawędzi – 2 px.

Zmodyfikowany kod będzie wyglądać następująco:

< img src=”http://www.example.com/wp-content/uploads/2016/12/widok-ze-Świnicy-300×200.jpg” alt=”” width=”300″ height=”200″ class=”alignnone size-medium wp-image-36″ style=”border: 3px solid #dd3333; border-radius: 2px; / />

Po aktualizacji i zapisywaniu wszystkich zmian w artykułu, odświeżamy stronę. Otrzymujemy następujący rezultat (rys.7):

Jak widać na rysunku 7, krawędzie dwóch obrazów niczym się nie różnią. A więc zaproponowane przez nas rozwiązanie działa poprawnie.

Przejdźmy zatem do następnego sposobu dodania krawędzie.

Sposób 2. Tworzenia własnej klasy CSS i dodanie jej do motywu

Podany sposób jest właśnie najlepszą alternatywą dla wtyczki. Za jego pomocą możemy dodać swoje style do motywu i korzystać się z nich podczas prowadzenia bloga. Dlatego aby dodać krawędzi do obrazów należy zmodyfikować plik style.css, który znajduje się w folderze z motywem. Przy tym rekomendujemy stworzyć motyw potomny i przenieść do niego arkusz stylów aby nie stracić wszystkich wprowadzony zmian, po aktualizacji motywu potomnego. W tym przypadku pokażemy jak modyfikować kod w pliku style.css, dlatego nie będziemy tworzyć motywu dziecka.

Dla modyfikacji pliku style.css skorzystamy się z Edytora wbudowanego w WordPressie. Przejdziemy do sekcji Wygląd – Edytor, gdzie wybierzemy plik Arkusz stylów (style.css).

W przypadku, jeśli chcemy, aby krawędzi były dodane do wszystkich obrazów we wpisach, musimy wstawić ten kod:

img.alignright {

float:right;

border: 3px solid #dd3333;

border-radius: 2px;

}

img.alignleft {

float:left;

border: 3px solid #dd3333;

border-radius: 2px;

}

img.aligncenter {

display: block;

margin-left: auto;

margin-right: auto;

border: 3px solid #dd3333;

border-radius: 2px;

}

img.alignnone {

border: 3px solid #dd3333;

border-radius: 2px;

}

Zwróćcie uwagę, że dla sprawdzania działalności kodu CSS, muszą być usunięte wszystkie zmiany wprowadzone do obrazów za pomocą wtyczki oraz modyfikacji znacznika <img>.

Po aktualizacji pliku style.css i zapisaniu zmian, powinniśmy otrzymać taki samy rezultat, jak na rysunku 7.

Jeśli chcemy dodać krawędź tylko do wybranego obrazu, musimy stworzyć własną klasę. Nadamy jej już wcześniej użytą nazwę czyli border-image:

img. border-image {

border: 3px solid #dd3333;

border-radius: 2px;

}

Zwróćcie uwagę, że poprzedni kawałek kodu lepiej usunąć oraz skomentować, aby móc sprawdzić poprawność działania nowej klasy.

Po zapisywaniu zmian w arkuszu stylów, powrócimy do Edytora wpisu. Dodamy do pierwszego obrazu naszą klasę border-image. Znacznik będzie miał przykładowy wygląd:

< img class=”border-image” src=” http://www.example.com/wp-content/uploads/2016/12/widok-ze-Świnicy-300×200.jpg” alt=”” width=”300″ height=”200″ />

Po zapisywaniu zmian i odświeżaniu strony, rezultat musi być tak jak na rysunku 6.

Podsumowanie

W dzisiejszym artykułu przedstawiliśmy Państwu kilka różnych sposobów pozwalających dodać krawędzie do obrazków we wpisach. Oczywiście, użycie wtyczki byłoby najprostszym rozwiązaniem dla osób początkujących, które nie mają wiedzy na temat CSS. Ale jak wiemy każda wtyczka to dodatkowe obciążenie na stronie i zmniejszenie jej wydajności.

Jeśli chodzi o bezpośrednie użyciu stylów CSS, to na pierwszy rzut oka takie rozwiązanie może wyglądać na skomplikowane. Ale pozwala ono dojść szybko rozwiązać powyższy problem i obciążać dodatkowo bazę danych. Oprócz tego korzystanie z „czystego” CSS daje więcej możliwości niż wtyczka 🙂

Jakie rozwiązanie wybrać? Ostateczny wybór należy do was.

Ale pamiętajcie, jeśli znacie Państwo jak rozwiązać problem bez stosowania rozszerzeń, to po prostu ZMODYFIKUJCIE KOD! 🙂

P.S. Jeśli macie Państwo dodatkowe pytania, proszę zostawić komentarz pod wpisem.