parę sposobów na randomowy kolor tła
Fajnie mieć możliwość dodania do wybranego elementu losowego koloru np. tła. Ciekawie sprawdza się to w sliderach z treścią, kiedy każdy kolejny slid ma inne tło.
Jednym z rozwiązań jest stworzenie tablicy wybranych kolorów i użycie funkcji php array_rand.
Tworzymy tablice kolorów i poniżej, w zmiennej $bg_color pobieramy losowy element tablicy, czyli losowy kolor
$bg_colors = array( "#d7bbe3", "#F2C4DE", "#71B1D9", "#AED8F2", "#F2DEA2", "#F2CDC4", "#ABD3DB", "#C2E6DF", "#D1EBD8" ); $bg_color = $bg_colors[array_rand($bg_colors)];
Kolejnym krokiem jest dodanie tej wartości inlinowo do wybranego elementu html:
<div class="sliderSimple" style="background-color: <?php echo $bg_color; ?>"></div>
I dzięki temu otrzymujemy, każdy slid z innym kolorem, w losowej kolejności, po odświeżeniu strony, kolory znów się przetasowują, dzięki czemu element wygląda ciekawiej :)
Trochę ciekawiej robi się, kiedy chcemy tą sztuczkę zastosować do elementu before lub after ale tutaj użyć możemy zmienne kaskadowe CSS które definiujemy w pliku .css za pomocą funkcji var().
plik .css
.sliderSimple::before { content: ''; width: 66px; height: 66px; background-color: var(--nws-color); }
a następnie, w pliku gdzie mamy kod samej strony (np. .php w przypadku WordPress) przypisujemy wartość zmiennej losowo wygenerowanego koloru:
<div class="sliderSimple" style="--nws-color: <?php echo $bg_color; ?>"></div>
Hope this helps and happy coding :)
Zobacz jeszcze
Wordpress - jak sprawdzić czy w treści jest użyty shortcode
Kiedy potrzebujemy zamieścić skrypt, który jest tylko umieszczany wtedy kiedy zamieszczamy konkretny shortcode w treści strony, można skorzystać z funkcji has_shortcode gdzie jako pierwszy...
shortcode
losowe tło - style dodane inline
Czasami jest taka potrzeba lub konieczność by dodać losowe tło w kodzie samej strony WP, poniżej przykład jak można to zrobić. Zaczynamy od stworzenia katalogu na serwerze bg_random gdzie...