Jak stylizować obrazy na swojej stronie WordPress za pomocą CSS?

Jestem pewien, że już wiesz, jak ważne są obrazy dla sukcesu Twojej witryny.

Ale jeśli chodzi o zwiększenie zaangażowania (i ostatecznie o wyniki finansowe), nie chodzi tylko o umieszczanie obrazów w witrynie, ale o to, jakie obrazy umieszczasz i jak je prezentujesz.

W tym poście chcę zająć się jednym ważnym elementem tej układanki: prezentacją.

WordPress jest wstępnie wyposażony w proste sposoby stylizowania obrazów za pomocą CSS. Masz możliwość tworzenia różnych efektów dla różnych klas CSS, które WordPress automatycznie przypisuje do obrazów w Twojej witrynie. (Jeśli wydaje mi się, że zacząłem mówić w obcym języku, nie martw się, wszystko wyjaśnię szczegółowo w dalszej części artykułu).

Zacznę od zagłębienia się w powody, dla których obrazy są tak ważne dla Twojej witryny, następnie przejdę do omówienia domyślnych klas CSS, które WordPress stosuje do obrazów, a na koniec pokażę, jak możesz użyć CSS do zastosowania niestandardowych stylów do swoich obrazów .

• Dlaczego obrazy są tak ważne dla stron internetowych
• Crash kurs WordPressa CSS
• Jak dodać niestandardowy CSS do WordPress
• Domyślne klasy obrazów CSS WordPress
• Prosta stylizacja obrazu z WordPress
• Więcej przykładów tego, co możesz zrobić z obrazem CSS w WordPress
• A co z istniejącymi stylami?
• Tylko niebo ogranicza

Dlaczego obrazy są tak ważne dla stron internetowych

Czy jest lepszy sposób na wyjaśnienie, jak korzystne są obrazy dla blogów, niż udowodnienie tego obrazem?

Sprawy stają się jeszcze ciekawsze, gdy przejdziesz do biologii tego, jak przetwarzamy informacje. Weźmy na przykład, że 90 procent informacji przekazywanych do mózgu ma charakter wizualny, a 40% ludzi reaguje lepiej na informacje wizualne niż zwykły tekst (źródło: Zabisco).

Ale bądźmy szczerzy: nie muszę rzucać w ciebie statystykami, aby wyrazić swoją opinię. Z własnych nawyków wiesz, że atrakcyjne wizualnie strony internetowe i blogi znacznie częściej przykują Twoją uwagę niż masa tekstu. Obrazy dodają koloru, uroku i intrygi. Wywołują wiele reakcji w naszym mózgu, zanim zdążyliśmy nawet zacząć czytać.

Mówiąc prościej, jeśli nie umieszczasz przekonujących, trafnych obrazów w swoich postach na blogu, nie jesteś blisko pełnego wykorzystania treści. Dołożenie dodatkowych kroków, jeśli chodzi o umieszczanie obrazów w postach na blogu i dobre ich prezentowanie, może mieć ogromny wpływ na zaangażowanie, ruch i sprzedaż.

Crash kurs WordPressa CSS

Najważniejsi programiści WordPressa są zbyt świadomi znaczenia obrazów dla stron internetowych, dlatego dają twórcom motywów (i twórcom motywów) dużą moc i elastyczność w określaniu sposobu prezentacji obrazów.

Ta moc i elastyczność jest oferowana w postaci szeregu klas CSS. Ale zanim przejdziemy dalej, poświęćmy chwilę, aby zrozumieć, czym jest CSS i jak z niego korzystać.

CSS oznacza kaskadowe arkusze stylów: język znaczników używany do określania wyglądu stron internetowych. CSS jest połączony z HTML (Hyper Text Markup Language), który jest językiem znaczników używanym do definiowania struktury semantycznej strony internetowej. Jeśli to nie ma dla Ciebie większego sensu, nie przejmuj się – to więcej informacji uzupełniających niż to konieczne.

CSS jest prostym językiem, kiedy już go ogarniesz. Jeśli chodzi o możliwość zmiany wyglądu i rozmieszczenia obrazów, będziesz mógł stosunkowo łatwo pobrać i pracować z kodem, który zamieściłem w tym artykule.

Oto przykład fragmentu kodu CSS dotyczącego wyglądu określonego typu obrazu w WordPress:

 .wyrównaj w prawo {
	obramowanie: 1px stałe #c5c5c5;
	pływak: w prawo;
	margines: 0 0 10px 10px;
	wypełnienie: 3px;
}

Tekst .alignright jest klasą CSS (można ją zidentyfikować jako klasę na podstawie kropki poprzedzającej jej nazwę). W tym przypadku .alignright to klasa, którą WordPress przypisuje do dowolnego obrazu wybranego w backendzie WordPressa do wyrównania do prawej strony treści:

Różne deklaracje (takie jak border i padding ) można zastosować do klasy CSS, które ostatecznie są stosowane do dowolnego elementu HTML, do którego została przypisana dana klasa.

W powyższym przykładzie każdy obraz w WordPressie, który został wyrównany do prawej strony (za pomocą edytora tekstu), będzie miał przypisaną klasę .alignright , a tym samym odziedziczy styl zastosowany do tej klasy. Obraz będzie „unosić się” w prawo, będzie miał mały margines, aby zapobiec wpadaniu tekstu, wokół niego szarą ramkę i trochę dopełnienia, aby oddzielić ramkę od krawędzi obrazu.

To wszystko będzie miało o wiele więcej sensu dzięki wizualnej reprezentacji:

Istnieje wiele innych deklaracji, które można dodać do klasy CSS; niedługo będziemy się z nimi bawić.

Jak dodać niestandardowy CSS do WordPress

Motywy WordPress mają własne „arkusze stylów” CSS, które są plikami wypełnionymi znacznikami CSS, jak w powyższym przykładzie. Chociaż istnieje wiele sposobów dodawania własnego niestandardowego kodu CSS do witryny, edytowanie arkusza stylów CSS istniejącego motywu nie jest dobrym rozwiązaniem. Twoja ciężka praca może zostać nadpisana przy następnej aktualizacji motywu.

Najczystszą i najbardziej przyszłościową metodą jest stworzenie własnego prostego „motywu podrzędnego” WordPress z własnym arkuszem stylów CSS. Arkusz stylów CSS w katalogu motywu potomnego zastąpi wszystkie pasujące style w arkuszu stylów motywu „nadrzędnego”.

Tworzenie motywu potomnego może wydawać się nieco zniechęcającym ćwiczeniem, ale jest dość łatwe, jeśli znasz FTP. Jeśli chcesz iść tą drogą, zapoznaj się z samouczkiem w Kodeksie WordPress.

Jeśli szukasz czegoś prostszego, mam dwie propozycje wtyczek:

1. Niestandardowy moduł CSS w Jetpack: Idealny, jeśli używasz już Jetpack na swojej stronie.
2. Prosty niestandardowy CSS: Jeśli nie używasz jeszcze Jetpack (i nie potrzebujesz jego zróżnicowanej funkcjonalności), jest to lżejsza opcja.

Niezależnie od wybranej opcji dodanie niestandardowego CSS do WordPressa będzie tak proste, jak edycja niestandardowego pliku CSS, który został wygenerowany (przez Ciebie lub jedną z wtyczek).

Domyślne klasy obrazów CSS WordPress

Pomijając to wszystko, przejdźmy do soczystej rzeczy: domyślnych klas CSS obrazu WordPress.

Istnieją cztery domyślne klasy, których możesz użyć do zmiany wyglądu obrazów w WordPress:

• .aligncenter
• .alignleft
• .alignright
• .alignnone

Jestem pewien, że możesz dowiedzieć się, do jakich typów obrazów są przypisane te klasy.

Każdy obraz, który dodasz do swojej witryny za pomocą edytora tekstu TinyMCE na ekranach postów/stron, będzie miał przypisaną jedną z tych klas, co oznacza, że ​​możesz stylizować wszystkie te obrazy według własnego uznania.

Aby wystylizować określony typ obrazu, wystarczy zastosować format, który już widziałeś w powyższym przykładzie:

 .Nazwa klasy {
	wartość nieruchomości;
	wartość nieruchomości;
	wartość nieruchomości;
}

Ważne: gdy obraz ma podpis, WordPress przypisuje jedną z powyższych klas do elementu div otaczającego obraz, a nie do samego obrazu. Rozwiązanie tego konkretnego problemu wykracza poza zakres tego postu, ale należy o tym pamiętać podczas eksperymentowania. Zalecam przetestowanie wybranych efektów z obrazami z napisami, aby zobaczyć, jak wyglądają rzeczy.

Powiedziawszy to, przejdźmy do zabawnej części: stylizacji obrazów!

Prosta stylizacja obrazu z WordPress

Jeśli chodzi o dodawanie prostych efektów stylistycznych do obrazów w WordPressie, istnieje pięć typowych właściwości CSS:

1. background
2. border
3. float
4. margin
5. padding

Aby w pełni zrozumieć, w jaki sposób te właściwości wpływają na wygląd obrazu (a dokładniej na wygląd „ramki”, w której znajduje się obraz), musimy wziąć pod uwagę „model pudełkowy” CSS:

Jeśli chodzi o stylizację obrazów, sam obraz jest „treścią”. Ten obraz jest następnie otoczony dopełnieniem, granicami i marginesami; z których wszystko możesz zdefiniować. Obrazy mogą być również „pływające”, co na potrzeby tego samouczka oznacza po prostu wyrównanie. Twoje opcje „float” to lewe, prawe i żadne. (Wyśrodkowanie obrazu jest nieco bardziej skomplikowane; zajmiemy się tym wkrótce.)

Rozważmy prosty przykład, aby zademonstrować, jak można wykorzystać te właściwości. Po pierwsze, oto obrazek z przypisaną do niego klasą .alignright , bez żadnych znaczników CSS:

Dodajmy teraz kilka prostych znaczników CSS:

 .wyrównaj w prawo {
	tło: szare;
	obramowanie: 3px jednolita czerń;
	pływak: w prawo;
	margines: 10px;
	wypełnienie: 3px;
}

Oto efekt końcowy:

Prawdopodobnie możesz rozszyfrować, co tutaj zrobiliśmy. Obraz został teraz „uniesiony” (tj. wyrównany) w prawo, dzięki czemu tekst zawija się wokół niego. Dodaliśmy trochę wyściółki, która otrzymała szare tło. Nałożyliśmy grubą czarną ramkę, która pojawia się wokół wyściółki. Wreszcie margines 10 pikseli tworzy trochę miejsca między obrazem a tekstem.

Za pomocą samych pięciu selektorów można zrobić wiele. Jeśli chcesz je dokładniej zbadać, oto obszerne źródło dla każdego z nich:

• background
• border
• float
• margin
• padding

Obiecałem też rozwiązanie do centrowania obrazów. Z powodów, które wykraczają poza zakres tego samouczka, CSS nie pozwala po prostu na użycie float: center; (tj. wartość nie istnieje). Zamiast tego musisz zdefiniować obraz jako element blokowy , zastosuj margin: 0 auto; i zdefiniuj szerokość obrazu. Więcej o tej technice przeczytasz tutaj. (Poniżej podam również przykład znaczników użytych do utworzenia wyśrodkowanego obrazu).

Więcej przykładów tego, co możesz zrobić z obrazem CSS w WordPress

Teraz lepiej rozumiesz najpopularniejsze właściwości CSS, których możesz użyć. Oto kilka przykładów, które dadzą Ci inspirację.

Zacznijmy od dopełnienia i szarego tła, aby nadać naszym obrazom ramkę:

 .wyrównaj w lewo {
	tło: #dbdbdb;
	pływak: lewy;
	margines: 0 10px 5px 0;
	wypełnienie: 5px;
}

Efektem tego znacznika jest:

Przyjrzyjmy się, co się tutaj wydarzyło:

• Użyłem koloru szesnastkowego HTML jako tła. Te kody kolorów zapewniają praktycznie nieograniczoną elastyczność w doborze kolorów dla Twojej witryny.
• Ponieważ obraz, którego użyłem, jest przezroczystym PNG, kolor background wypełnił całą dostępną przestrzeń, która nie została wykorzystana w pliku obrazu.
• Użyłem czterech wartości we właściwości margin , aby ustawić różne marginesy dla każdej strony obrazu.

Spróbujmy czegoś innego. Zamiast nadać naszym obrazom kolor tła, ustawmy je w prostej ramce, aby oddzielić je od treści. Oto znacznik:

 .wyrównaj w prawo {
	obramowanie: 1px stałe #000099;
	pływak: w prawo;
	margines: 0 0 10px 10px;
	wypełnienie: 3px;
}

Jak widać, bawiliśmy się wartościami właściwości margin , aby uwzględnić wyrównanie obrazu, zmniejszyliśmy dopełnienie i dodaliśmy jednolitą ramkę o wielkości 1 piksela. Oto wynik końcowy:

Na koniec utwórzmy wyśrodkowany obraz i nadajmy mu grubą szarą ramkę. Oto znacznik:

 .centrum wyrównania {
	obramowanie: stałe 5px #dbdbdb;
	Blok wyświetlacza;
	margines: 0 auto;
	szerokość: 300px;
}

I efekt końcowy:

Jak widać, można całkowicie zmienić położenie i wygląd obrazu w WordPress za pomocą samego CSS.

W rzeczywistości tylko zarysowaliśmy tu powierzchnię; możesz zrobić o wiele więcej. (Jeśli chcesz dowiedzieć się więcej, poniżej udostępniłem przydatne zasoby do dalszej nauki).

A co z istniejącymi stylami?

Jeśli używasz motywu WordPress o jakiejkolwiek rzeczywistej jakości, programista doda już style do każdej z domyślnych klas obrazu WordPress. Przynajmniej odpowiednio dopasuje każdą klasę obrazu.

Poza tym jej wybory będą całkowicie subiektywne, a Ty masz teraz możliwość zignorowania ich efektów stylizacyjnych. Wszelkie wprowadzone znaczniki CSS — w arkuszu stylów motywu podrzędnego lub za pośrednictwem wtyczki — będą miały pierwszeństwo przed domyślnym kodem CSS motywu. Masz kontrolę.

Tylko niebo ogranicza

Czytając ten artykuł, mam również nadzieję, że zainspiruje Cię do eksperymentowania z własnymi niestandardowymi stylami CSS. Nie chciałem zagłębiać się w bardziej zaawansowane selektory w tym samouczku, ale jest dużo więcej do zrobienia z CSS, niż omówiłem tutaj.

Jeśli chcesz poznać bardziej zaawansowane efekty (takie jak cienie, zaokrąglanie i obracanie), istnieje ogromna liczba bezpłatnych zasobów online, które mogą nauczyć Cię więcej o CSS. Moje osobiste rekomendacje to:

• Sieć programistów Mozilla: uwielbiana przez społeczność twórców stron internetowych.
• Szkoły W3: Nienawidzone przez wielu „poważnych” twórców stron internetowych, ale nie można zaprzeczyć ich głębi i rozległości informacji. Pamiętaj tylko, że nie zawsze może być w 100% poprawny i/lub aktualny.
• WordPress Codex: Dowiedz się więcej o tym, jak łączy się WordPress i CSS.

Jeśli masz jakieś pytania, nie wahaj się odpalić w sekcji komentarzy poniżej!

Źródło zdjęcia: Simon Pow, PicJumbo.

• CSS
• obrazy