Jeśli chcesz zachować obrazki wyróżniające we wpisach, które je mają, nie usuwaj bloku Obrazek wyróżniający wpisu z szablonu. Pozostaw go bez grafiki zastępczej i sprawdź, czy przy wpisie bez obrazka znika również jego pusty obszar. Usuń blok tylko wtedy, gdy obrazki mają zniknąć ze wszystkich wpisów korzystających z tego szablonu. W motywie blokowym zmienisz układ w Wygląd > Edytor > Szablony, a w klasycznym - w pliku lub funkcji wyświetlającej obraz. Osobno sprawdź pojedynczy wpis, stronę bloga i archiwum na komputerze oraz telefonie.
Najpierw sprawdź, z jakiego typu motywu korzystasz. Jeśli w panelu widzisz Wygląd > Edytor, możesz edytować szablony za pomocą bloków. Motyw klasyczny tworzy układ głównie z plików PHP, JavaScriptu i CSS. Jeśli dopiero porządkujesz sposób pracy z witryną, możesz zacząć pracę z WordPressem od rozpoznania aktywnego motywu i jego szablonów.
Motyw blokowy - zachowaj obrazki, usuń pusty obszar
Otwórz Wygląd > Edytor > Szablony i wybierz szablon pojedynczego wpisu. Zależnie od motywu może to być szablon własny albo jeden z plików hierarchii, takich jak single.html, singular.html czy index.html.
- Otwórz szablon pojedynczego wpisu i zaznacz blok Obrazek wyróżniający wpisu.
- Jeśli obraz ma się pojawiać tylko przy wpisach, które mają przypisany obrazek wyróżniający, pozostaw blok i nie dodawaj grafiki zastępczej.
- Sprawdź, czy blok lub jego kontener nie wymusza wysokości, która pozostaje pusta, gdy obrazka nie ma.
- Usuń blok tylko wtedy, gdy chcesz ukryć obrazki we wszystkich wpisach korzystających z tego szablonu.
- Upewnij się, że tytuł, metadane i treść znajdują się w głównym układzie, a następnie zapisz zmianę.
W bloku możesz też włączyć ustawienie useFirstImageFromPost. Domyślnie jest wyłączone; po włączeniu blok może wykorzystać pierwszy obraz z treści wpisu, jeśli nie przypisano mu osobnego obrazka wyróżniającego. To zmienia, jaki obraz zobaczy czytelnik: jeśli chcesz pokazywać wyłącznie osobno przypisane obrazki, pozostaw ustawienie wyłączone. Proporcje, szerokość, wysokość i sposób skalowania bloku również wpływają na rozmiar grafiki oraz spójność układu.
Wybierz sposób obsługi wpisów bez grafiki
To, czy ukryjesz puste miejsce, czy zastosujesz obraz zastępczy, zależy od roli kart na stronie bloga i w archiwach.
| Rozwiązanie | Kiedy je wybrać | Co zmienia dla czytelnika |
|---|---|---|
| Ukrycie pustego obszaru | Gdy tytuł, metadane i zajawka są najważniejsze | Tytuł i tekst przesuwają się w górę, a karta nie ma pustego pola po grafice |
| Stała grafika zastępcza | Gdy karty mają mieć jednakową wysokość albo obraz pomaga rozpoznawać tematy | Karty zachowują bardziej spójny układ, ale grafika pojawia się również przy wpisach bez własnego obrazka |
| Pierwszy obraz z treści | Gdy wpisy zawierają zdjęcia, ale nie przypisujesz ich osobno jako obrazków wyróżniających | Karta może pokazać zdjęcie z artykułu zamiast pozostać bez grafiki; sprawdź, czy jest ono odpowiednie do tego widoku |
Przykład: wpis nie ma obrazka wyróżniającego ani żadnej grafiki w treści. Włączenie użycia pierwszego obrazu nie wypełni wtedy karty, więc wybierz stały obraz zastępczy, jeśli zależy Ci na jednakowej wysokości. Jeśli pierwszy akapit zawiera zdjęcie, ustawienie może wypełnić kartę tym zdjęciem. Gdy wystarczą tytuł i zajawka, ukryj pusty obszar.
Osobno zmień listę wpisów i archiwa
Zmiana szablonu pojedynczego wpisu nie musi wpływać na kartę na stronie bloga. Otwórz szablon strony z najnowszymi wpisami - może to być Blog Home albo układ z blokiem Pętla zapytań - i sprawdź blok Obrazek wyróżniający wpisu w karcie. Zastosuj tę samą regułę: pozostaw blok bez zastępczej grafiki, jeśli obraz ma się pojawiać tylko przy wpisach z przypisanym obrazkiem, albo dodaj rozwiązanie zastępcze zgodnie z wybraną funkcją kart.
Następnie sprawdź szablon All Archives, który może obejmować archiwa kategorii, tagów, autorów i dat. Sprawdź co najmniej archiwum kategorii oraz tagu - widoki te mogą korzystać z innych części szablonu niż strona bloga. Zapisane w Edytorze witryny zmiany trafiają do bazy danych i mają pierwszeństwo przed szablonami dostarczonymi z motywem. Po zmianie motywu sprawdź więc, czy zapisany szablon nadal ma właściwy układ.
Motyw klasyczny - znajdź miejsce wyświetlania obrazka
W motywie klasycznym nie ma jednego uniwersalnego pliku odpowiedzialnego za obrazek wyróżniający. Motyw może wyświetlać go w pojedynczym wpisie, nagłówku, zajawce lub archiwum, więc poprawkę trzeba dopasować do konkretnego widoku. Zmiana w pliku wpisu nie musi zmienić kart na stronie bloga.
Funkcja has_post_thumbnail() sprawdza, czy wpis ma obrazek wyróżniający, a the_post_thumbnail() go wyświetla. Warunek pozwala pominąć obraz i jego kontener, gdy grafiki nie ma:
<?php if ( has_post_thumbnail() ) : ?>
<?php the_post_thumbnail(); ?>
<?php endif; ?>
To przykład zasady, nie gotowy fragment do wklejenia w dowolne miejsce. Motyw może dodawać własne klasy, linki lub strukturę karty. Jeśli zmieniasz pliki, użyj motywu potomnego, aby aktualizacja motywu nadrzędnego nie nadpisała poprawki. Gdy obrazka wyróżniającego nie ma w edytorze wpisu, motyw może nie deklarować jego obsługi przez add_theme_support('post-thumbnails'). Ta deklaracja udostępnia obsługę obrazków, ale nie wskazuje pliku, który odpowiada za ich wyświetlanie.
Sprawdź wpis, stronę bloga i archiwum
Po zapisaniu zmiany obejrzyj każdy z trzech widoków na komputerze i telefonie. Jeśli wpis bez obrazka wygląda poprawnie, ale jego karta nadal ma pusty prostokąt, sprawdź szablon Blog Home, All Archives lub Pętlę zapytań - poprawka dotyczyła innego widoku.
- Pojedynczy wpis - sprawdź, czy po braku obrazka nie zostaje pusta wysokość i czy tytuł oraz metadane są we właściwej kolejności.
- Strona z najnowszymi wpisami - porównaj karty z obrazkiem i bez niego; sprawdź odstępy oraz ich wysokość.
- Archiwum kategorii lub tagu - upewnij się, że karta stosuje tę samą regułę co strona bloga.
- Telefon i komputer - sprawdź, czy tytuł i metadane nie są przesunięte, obraz zachowuje proporcje, a karty w jednym rzędzie mają spójne odstępy.
Jeśli karty mają różne wysokości, wybierz między ukryciem pustego obszaru a stałą grafiką zastępczą stosownie do funkcji listy. Nie dodawaj przypadkowych odstępów w CSS zamiast usunąć przyczynę pustego miejsca.
