Chciałbyś zmienić wygląd obrazków (miniatur) wyróżniających wpisów z jednej kategorii na stronie w WordPress ?
Jest na to kilak sposobów , ja przetestowałem dwa rozwiązania i zadziałało jedno (Rozwiązanie 2) 🙂
Rozwiązanie 1:
1. Zidentyfikowanie kategorii
Każda kategoria w WordPressie ma swój unikalny identyfikator (ID). Możesz go znaleźć w panelu administracyjnym:
- Przejdź do Wpisy > Kategorie.
- Najedź na nazwę kategorii, której dotyczy zmiana, i spójrz na URL w przeglądarce. Powinna się tam pojawić wartość
tag_ID
, np.tag_ID=12
. To jest ID Twojej kategorii.
2. Dodanie klasy CSS w szablonie
WordPress automatycznie dodaje klasy CSS do wpisów na podstawie ich kategorii, np. category-12
dla kategorii o ID 12. Dzięki temu możesz użyć tych klas do stylizacji.
3. Dodanie reguły CSS (rozmycie ikony)
Przejdź do Wygląd > Personalizacja > Dodatkowy CSS i dodaj następujący kod:
category-12
odnosi się do ID kategorii. Zmień numer na ID swojej kategorii.- Rozmycie można dostosować, zmieniając wartość
blur(5px)
.
Rozwiązanie 2:
1. Sprawdź strukturę motywu
W motywach WordPressa za wyświetlanie artykułów na stronie głównej odpowiadają różne pliki, np.:
- index.php
- home.php
- front-page.php
- content.php (często dla pojedynczych wpisów)
Sprawdź, który plik odpowiada za stronę główną, edytując go bezpośrednio.
2. Użyj Hooków WordPressa (Filtrowanie miniatur za pomocą akcji)
Spróbuj dodać kod do pliku functions.php swojego motywu lub do wtyczki z własnymi funkcjami.
function custom_thumbnail_filter($html, $post_id) {
// Sprawdź, czy post należy do określonej kategorii (np. ID 12)
if (has_category(12, $post_id)) {
// Dodaj klasę CSS, która zastosuje filtr
$html = str_replace('<img', '<img class="custom-blur"', $html);
}
return $html;
}
add_filter('post_thumbnail_html', 'custom_thumbnail_filter', 10, 2);
CSS:
Dodaj odpowiedni styl w sekcji Wygląd > Personalizacja > Dodatkowy CSS:
.custom-blur {
filter: blur(5px);
transition: filter 0.3s ease;
}
.custom-blur:hover {
filter: none;
}
3. Sprawdź buforowanie strony
Jeśli korzystasz z wtyczki cache (np. WP Super Cache, W3 Total Cache), zmiany w PHP mogą nie być od razu widoczne. Spróbuj:
- Wyczyścić cache wtyczki.
- Odświeżyć stronę w trybie incognito lub z wyłączonym cache przeglądarki (Ctrl+F5).
Poniżej rezultat Rozwiązania2, rozmyte zostały obrazki wpisów należące do jednej kategorii wpisów:
tutaj można zauważyć że po zmodyfikowaniu obrazka zmienił się także rozmiar tego obrazka , mozna temu zaradzić dodając ponizszy kod w sekcji Wygląd > Personalizacja > Dodatkowy CSS wraz głównym kodem który podany jest wyżej:
.custom-blur {
width: 100%;
height: auto;
display: block;
}
Oraz widok całej kategorii w obrazkami wpisów na jednej stronie:
W modyfikacji obrazów można zastosować kilka rodzajów filtrów:
1. Rozmycie (blur)
- Kod:
filter: blur(5px);
- Powoduje rozmycie obrazu.
2. Przekształcenie na odcienie szarości (grayscale)
- Kod:
filter: grayscale(100%);
- Konwertuje obraz na odcienie szarości. Wartość może wynosić od
0%
(brak efektu) do100%
(całkowicie szary).
3. Jasność (brightness)
- Kod:
filter: brightness(50%);
- Zmienia jasność elementu. Wartości poniżej
100%
przyciemniają obraz, a powyżej100%
rozjaśniają.
4. Kontrast (contrast)
- Kod:
filter: contrast(150%);
- Zwiększa lub zmniejsza kontrast obrazu. Wartość
100%
oznacza brak zmiany, a wartości poniżej lub powyżej tej wartości regulują kontrast.
5. Odcień barwy (hue-rotate)
- Kod:
filter: hue-rotate(90deg);
- Obraca barwy obrazu w spektrum kolorów. Wartość jest podawana w stopniach (
deg
).
6. Inwersja kolorów (invert)
- Kod:
filter: invert(100%);
- Odwraca kolory elementu. Wartość
100%
całkowicie odwraca kolory, a0%
pozostawia je bez zmian.
7. Sepia (sepia)
- Kod:
filter: sepia(100%);
- Nadaje obrazowi brązowy, starodawny odcień.
8. Nasycenie (saturate)
- Kod:
filter: saturate(200%);
- Zwiększa lub zmniejsza nasycenie kolorów. Wartość
100%
oznacza brak zmiany.
9. Cień (drop-shadow)
- Kod:
filter: drop-shadow(10px 10px 5px rgba(0,0,0,0.5));
- Dodaje cień do obrazu. Wartości to odpowiednio: przesunięcie poziome, pionowe, promień rozmycia i kolor.