Artykuł ten jest wskazówką pomocną przy tworzeniu własnych tematów do WordPress.

Przygotowanie tematu dla WordPressa wymaga zawarcia w kodzie HTML oraz CSS3 wielu dodatkowych funkcji, które dopiero w połączeniu z projektem witryny tworzą wspólnie funkcjonującą całość. W tym artykule opiszę style CSS3, które trzeba umieścić wewnątrz naszego przygotowanego pliku ze stylami np. style.css. Oba style dotyczą właściwej stylizacji zdjęć w postach.

1) Wielkość obrazu, który załączamy do posta musi być ograniczona szerokością np. DIV, bez poniższego kodu po wyświetleniu posta każde zdjęcie miałoby rzeczywistą wartość, a zatem zburzyłoby układ witryny. W pliku CSS należy dodać poniższy kod, a WordPress każdą dodaną grafikę ograniczy do elementu, wewnątrz którego będzie ona umieszczona.

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
    max-width: 100%;
    height: auto;
}

2) Drugi kod również dotyczy stylizacji zdjęć w postach, ale jego zadaniem jest obsłużenie wyrównania grafik, według oczekiwań użytkownika. Gdyby poniższy kod nie znalazł się w pliku CSS to każda grafika zawsze byłaby wyrównana do lewej niezależnie od tego co w MENU „Dodaj” -> „Wpis” zaznaczyłby użytkownik piszący posta.

img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
a img.alignright {float:right; margin:0 0 1em 1em}
a img.alignleft {float:left; margin:0 1em 1em 0}
a img.aligncenter {display: block; margin-left: auto; margin-right: auto}

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij