WordPress: jak zmienić tło w co drugim wpisie

przez

o 23 grudnia 2011

w Snippet, WordPress

Na polskim forum WordPressa użytkownik kujdak zadał pytanie

Mam skórkę Twenty Eleven ten. chciałem wyróżnić posty – co drugi o np. szarym tle. porsze o pomoc jak to zrobic?

Odpowiedź dotyczy dowolne skórki i jest przewrotna. Wystarczy dodać odpowiednią klasę i ją wyróżnić.

A więc jak dodać klasę?

add_filter( 'post_class', 'iworks_even_odd_post_class_filter' );
 
$post_count = 1;
 
function iworks_even_odd_post_class_filter( $class )
{
    global $post_count;
    $class[] = $post_count++ % 2? 'odd':'even';
    return $class;
}

Oraz dodać odpowiedni wygląd w pliku style.css:

.hentry.odd
{
    background-color:red;
}

Poprzedni

Zmiana w repozytorium wtyczek WordPressa

Następne

Aktualizacja do 3.3.1

13 komentarzy

  1. wujekbogdan

    ja bym to zrobił za pomocą css i nth-child(), no ale jak ma być cross browser to rozwiązanie powyżej jest ok.

    btw i tak w większości projektów używam selectivizr: http://selectivizr.com/ więc rozwiązanie w css w zasadzie jest cross browser ;)

  2. kujdak

    witam,
    a w jakim pliku ten pierwszy kod umieścić oraz w którym miejscu?

  3.

    Marcin

    Pierwszy kod można umieścić w pliku functions.php, drugi w style.css używanego motywu.

  4. techformator

    Powinno być .hentry.odd a nie jak napisałeś .hetry.odd zakładam że to była tylko literówka ;)

    Pozdrawiam i Wesołych Świąt.

  5.

    Marcin

    @technoformator: słusznie, literówka została poprawiona

  6. Lukasz

    Mam prosty theme pod wordpressem, który robiłem od podstaw (nie ma plików funkcji i innych różnych plików .php odpowiedzialnych za wyświetlanie postów, jak w TwentyEleven).

    Jak włączam theme TwentyE to to działa, na moim nie. Jakaś sugestia co może być nie tak?

    Z góry dzięki ;)

  7. Lukasz

    Poradziłem sobie za pomocą prostego licznika postów oraz sprawdzaniem czy licznik ma wartość parzystą czy nie ;)

  8.

    Marcin

    @Łukasz: we wpisie jest właśnie licznik postów i klasy „parzysta” i „nieparzysta”, tylko że sposób wypisywania do samego szablonu jest związany z tym jak trzeba pisać motyw. Jeżeli ten kod u Ciebie nie działa, to znaczy, że ma źle napisany motyw lub taki był Twój wybór.

  9. karol ż

    Dobrym i łatwym rozwiązaniem jest wtyczka http://wordpress.org/plugins/post-backgrounds

    Właśnie ją testuje i widzę że jest fajna (próbowałem też innych ale albo mój szablon robiony artesteer’em jest jakiś niekompatybilny albo te wtyczki po prostu szwankowały lub nie działały jak należy)

    Pozdrawiam :)

  10. Rafał

    Witam,

    jak dodać obrazek w każdym poście inny , chodzi mi oczywiście o obrazek pod treścią a nie o background strony. Id strony, wszedzie szczątkowe odpowiedzi. Pluginy typu post backgrounds nie maja racji bytu. Szablon Workalite portfolio.

    Z góry dziękuję i pozdrawiam.

  11.

    Marcin Pietrzak

    @Rafał: nie bardzo rozumiem Twoje pytanie, ponieważ Wp natywnie obsługuje „Ikonę wpisu” czyli, obrazek, który można przypisać do każdego wpisu.

    Taką funkcjonalność musi wspierać motyw lub wtyczki.

  12. Rafał

    moja strona :
    . W tle dodałem obrazek za pomocą prostego kodu
    background-image: url(https://m1.behance.net/profiles2/127962/projects/13578751/3b6fb6485e76c75373c916f507769b6f.png);. Każda pozycja z portfolio powinna mieć odrębne tło. Wiem że jest cos w stylu post.id- 384, nie wiem gdzie to umieścić ;) Przepraszam za ten bajzel w mojej wypowiedzi.

  13.

    Marcin Pietrzak

    @Rafał: pomagam na tej stronie sugerując gdzie szukać. Za poprawianie konkretnego kodu biorę już pieniądze, więc mogę to poprawić, ale za wynagrodzenie.

Oparte na WordPress & Theme by Anders Norén

iWorks Marcin Pietrzak

Wykorzystujemy ciasteczka do spersonalizowania treści i reklam, aby oferować funkcje społecznościowe i analizować ruch w naszej witrynie.

Informacje o tym, jak korzystasz z naszej witryny, udostępniamy partnerom społecznościowym, reklamowym i analitycznym. Partnerzy mogą połączyć te informacje z innymi danymi otrzymanymi od Ciebie lub uzyskanymi podczas korzystania z ich usług.

Informacja o tym, w jaki sposób Google przetwarza dane, znajdują się tutaj.