Clouddy

Najczęściej zadawane pytania

Jak zmienić rozmiary tagów?

W Ustawienia → Clouddy ustaw minimalny i maksymalny rozmiar tekstu oraz jednostkę (rem/em/px). Rozmiar każdego tagu jest interpolowany między tymi wartościami na podstawie popularności tagu.

Jak ostylować chmurę tagów? (klasy i zmienne CSS)

Znaczniki to czysty HTML o niskiej specyficzności — stylujesz go zwykłym CSS w motywie, page builderze (np. Bricks) albo w Wygląd → Dostosuj → Dodatkowy CSS. !important nie jest potrzebny.

Generowany HTML:

<nav class="clouddy"
     style="--clouddy-min:0.8rem; --clouddy-max:2rem;
            --clouddy-color-a:#888888; --clouddy-color-b:#222222">
  <a class="clouddy-tag" href="..." style="--clouddy-weight:0.73">
    name <span class="clouddy-count">(24)</span>
  </a>
  ...
</nav>

Punkty zaczepienia CSS:

• .clouddy — kontener (<nav>, flex). Przechowuje zmienne --clouddy-min, --clouddy-max, --clouddy-color-a, --clouddy-color-b.
• .clouddy-tag — pojedynczy tag (<a>). Przechowuje --clouddy-weight (0–1 na tag — nie nadpisuj).
• .clouddy-count — liczba wpisów (<span>, pokazywana tylko gdy włączone „Pokaż liczbę wpisów”).

Rozmiar i kolor liczone są ze zmiennych na kontenerze. Aby zmienić skalę lub kolory, zachowując efekt zależny od popularności, nadpisuj te zmienne — nie font-size/color na tagu.

Zakres rozmiaru (zachowuje skalowanie wg popularności):

.clouddy {
    --clouddy-min: 1rem;   /* rarest tag */
    --clouddy-max: 3rem;   /* most popular tag */
}

Nie ustawiaj font-size na .clouddy-tag — to wyłącza skalowanie. Używaj --clouddy-min/--clouddy-max.

Kolory (płynny color-mix(in oklch …) liczony jest między dwoma krańcami — podajesz tylko skrajne):

.clouddy {
    --clouddy-color-a: #94a3b8;   /* rarest */
    --clouddy-color-b: #0ea5e9;   /* most popular */
}

Układ i odstępy:

.clouddy {
    gap: 0.5rem 1rem;
    justify-content: center;
}

Tagi w stylu „pigułek” (nie rusza skalowania rozmiaru):

.clouddy-tag {
    padding: 0.2em 0.6em;
    border-radius: 999px;
    background: #f1f5f9;
}

Jeden jednolity kolor zamiast gradientu:

.clouddy-tag { color: #333; }

Powiększenie na hover, silniejsze dla rzadszych (mniejszych) tagów, z użyciem --clouddy-weight:

.clouddy-tag {
    transition: transform .25s ease;
}
.clouddy-tag:hover {
    transform: scale(calc(1.06 + (1 - var(--clouddy-weight, 0.5)) * 0.18));
}

Tutaj 1.06 to powiększenie, które dostaje każdy tag, a 0.18 to dodatek doliczany najrzadszym; obie wartości możesz dowolnie dostroić.

Czy mogę całkowicie zastąpić domyślny arkusz stylów?

Tak. Domyślny arkusz stylów (uchwyt clouddy) ładuje się na froncie i w podglądzie bloku w edytorze (hook enqueue_block_assets). Aby stylować od zera bez niego, wyrejestruj go na tym samym hooku (Code Snippets lub functions.php motywu):

add_action( 'enqueue_block_assets', function () {
    wp_dequeue_style( 'clouddy' );
}, 20 );

Zmienne --clouddy-weight pozostają w HTML, więc możesz zbudować własny wzór calc() / color-mix() albo zignorować skalowanie.

Jak osadzić chmurę tagów?

Trzy sposoby, wszystkie renderują tę samą chmurę z ustawień globalnych (Ustawienia → Clouddy):

• Blok — dodaj blok „Clouddy — chmura tagów” w edytorze bloków.
• Shortcode — [clouddy] (przyjmuje atrybuty, patrz niżej).
• Widget — klasyczny widget „Clouddy — chmura tagów” (motywy z obszarami widgetów).

Jakie atrybuty shortcode są obsługiwane?

Każdy atrybut jest opcjonalny i nadpisuje ustawienie globalne dla tej jednej chmury, np. [clouddy mode="hybrid" number="40" order="name_asc"]:

• mode — które tagi uwzględnić: popular, rare, random, hybrid. Domyślnie popular.
• number — łączna liczba tagów (liczba całkowita, min. 1). Domyślnie 30.
• order — kolejność wyświetlania: count_desc, count_asc, name_asc, name_desc, random, length_center, count_center, rare_center. Domyślnie count_desc. Warianty *_center umieszczają najwyżej sklasyfikowane tagi pośrodku (efekt soczewki).
• rare_count — tylko tryb hybrydowy: ile z całości stanowią najrzadsze (liczba całkowita, ograniczona do number). Domyślnie 5.
• taxonomy — taksonomia źródłowa. Domyślnie post_tag.
• exclude — identyfikatory tagów do pominięcia, oddzielone przecinkami, np. exclude="12,34".
• min_size / max_size — najmniejszy / największy rozmiar tekstu (liczby). Domyślnie 0.8 / 2.0.
• unit — jednostka rozmiaru: rem, em, px, pt. Domyślnie rem.
• color_a / color_b — kolory hex najrzadszych / najpopularniejszych tagów. Domyślnie #888888 / #222222.
• show_count — dopisuje liczbę wpisów przy każdym tagu (true / false). Domyślnie false.
• aria_label — etykieta dostępności kontenera chmury. Domyślnie Tag cloud.
• ttl_minutes — czas życia cache w minutach. Domyślnie 720 (12 h).

Czym jest czas życia cache (TTL) i co robi?

Clouddy cache’uje zbiór tagów, o które odpytuje (przez Transients API WordPressa), żeby baza nie była odpytywana przy każdym ładowaniu strony. Czas życia cache (ttl_minutes) to czas, przez jaki ten zbiór jest przechowywany, zanim zostanie odbudowany z bazy — domyślnie 720 minut (12 godzin). To tylko zabezpieczenie: cache odświeża się też automatycznie przy każdej zmianie treści (zapis lub usunięcie wpisu, dodanie, edycja lub usunięcie tagów). Rzadko trzeba to zmieniać; obniż tę wartość tylko jeśli chcesz węższą górną granicę tego, jak nieaktualna może być chmura.

Kolejność „losowa” nie zmienia się przy każdym odświeżeniu strony. Dlaczego?

Kolejność jest wyliczana w PHP podczas renderowania strony — Clouddy nie używa JavaScriptu. Jeśli korzystasz z wtyczki cache’ującej całe strony lub z CDN (np. LiteSpeed Cache, WP Super Cache, W3 Total Cache albo cache hostingu/CDN), wygenerowany HTML — wraz z tym jednym losowym układem — jest zapisywany i serwowany odwiedzającym, więc kolejność zmienia się dopiero przy regeneracji cache strony. To normalne dla każdej losowej treści renderowanej po stronie serwera. Aby tasować przy każdym wejściu mimo cache, potrzebny byłby JavaScript po stronie klienta, którego Clouddy świadomie unika. Albo wyłącz tę stronę z cache całostronicowego, albo zaakceptuj, że kolejność odświeża się razem z cache.