<?php
$categories = get_the_category();
$output = '<div class="flex-row gap-2xs">';

if ( ! empty( $categories ) ) {
    foreach( $categories as $category ) {
        $category_name = esc_html( $category->name );
        
        $output .= '<div class="pill-primary radius-m">' . $category_name . '</div>';
    }
}

$output .= '</div>';
echo $output;
?>

Tema Astra WordPress: configurare, performanță și personalizare

2 aprilie 2026

Tema Astra e una dintre cele mai descărcate teme WordPress tocmai pentru că nu îți impune nimic. Pornești cu un fișier CSS minim, fără jQuery în front-end, și construiești exact ce ai nevoie. În acest articol vezi cum o configurezi corect, de la setările globale până la integrarea cu page buildere.

De ce Astra funcționează bine ca temă de bază

Astra încarcă sub 50KB în varianta fără customizări suplimentare. Nu are dependențe de jQuery pe front-end și generează CSS inline numai pentru elementele folosite efectiv. Asta înseamnă că nu pornești cu un handicap de performanță înainte să scrii o singură linie de cod.

Funcționează bine cu Elementor și blocurile native Gutenberg. Cu Elementor Pro poți dezactiva complet header-ul și footer-ul din Astra și le construiești tu în builder, o abordare curată dacă vrei control total.

Setări globale pe care le faci de la început

Intri în Appearance → Customize și prima oprire e secțiunea Global → Colors. Definești paleta de culori o singură dată și le aplici global: accent color, heading color, text color. Dacă folosești Elementor, poți ignora aceste setări și le gestionezi direct din builder, dar dacă lucrezi cu Gutenberg merită să le setezi corect.

Logo

Din Customizer, deschide Style Guide și dă click pe iconița creion de lângă logo. Încarci imaginea din media library sau direct de pe calculator. Astra suportă două variante de logo: unul pentru header-ul standard și unul pentru header-ul transparent. Dacă ai un header cu fundal transparent pe homepage, ai nevoie de ambele versiuni, de obicei una pe fond deschis și una pe fond închis.

Dimensiunea logo-ului o ajustezi din slider-ul dedicat, fără să modifici CSS.

Favicon

Favicon-ul se setează din Style Guide, secțiunea Site Icon. Dai click pe Select Icon și alegi sau încarci imaginea. WordPress recomandă o imagine de minim 512x512px.

Astra o redimensionează automat pentru browser tabs și bookmarks. Dacă nu setezi favicon, browserul afișează iconița implicită WordPress, ceea ce arată neprofesional pe un site livrat clientului.

Culori brand

Din Style Guide, secțiunea Brand Colours, setezi culoarea primară a brandului și ajustezi paleta globală. Orice schimbare se propagă pe tot site-ul: accent color, culori heading, link color. Poți suprascrie culori și individual pentru elemente specifice, direct din secțiunile lor din Customizer. Dacă lucrezi cu un brand care are un design system definit, notează-ți hex-urile înainte să deschizi Customizer-ul și le introduci direct, fără să pierzi timp cu color picker-ul.

Stiluri butoane

Secțiunea Buttons din Style Guide controlează aspectul tuturor butoanelor generate de Astra: culoare background, culoare text, border radius. Alegi dintr-un preset sau ajustezi manual border radius-ul pentru colțuri rotunjite sau drepte. Dacă folosești WooCommerce, butoanele de add to cart și checkout moștenesc stilul setat aici, deci merită să le configurezi corect de la început înainte să testezi checkout-ul.

Tipografie

Astra are integrare nativă cu Google Fonts, dar dacă ții la performanță și GDPR, folosește Local Fonts (plugin-ul oficial Astra) sau încarcă fonturile manual via wp_enqueue_style. Poți seta font-family, font-size și line-height separat pentru body, heading H1-H6 și widget-uri.

Layout și container

Lățimea implicită e 1200px. O schimbi din Global → Container. Tot aici setezi tipul de layout implicit, boxed sau full-width, și sidebar-ul implicit pentru single posts și pagini. Dacă nu folosești sidebar deloc, bifează „No Sidebar” ca default și scapi de CSS inutil generat.

Integrarea cu Elementor Pro

Când activezi Elementor Pro ca page builder, Astra detectează automat și dezactivează o parte din output-ul propriu. Totuși, merită să faci câteva lucruri manual:

Dezactivează Astra Header din Elementor → Settings → Theme → Disable Astra header
Dezactivează Astra Footer similar
În Astra Customizer, setează Page Layout pe „Full Width / Stretched” pentru paginile construite cu Elementor Pro

Rezultatul: Elementor Pro preia controlul complet și Astra rămâne doar ca layer de reset CSS și setări WordPress, exact ce vrei.

Astra Pro merită upgrade-ul?

Versiunea gratuită acoperă 90% din cazuri. Astra Pro adaugă Custom Layouts (header/footer builder nativ), WooCommerce customizer extins, opțiuni de tipografie mai granulare și Spacing Control per element. Dacă construiești site-uri WooCommerce sau vrei header builder fără plugin suplimentar, Pro are sens. Dacă folosești Elementor Pro pentru tot, Free e suficient.

Optimizare pentru viteză cu Astra

Câteva setări concrete din Astra → Performance (disponibil în Pro sau via Astra Addon):

Remove Google Fonts dacă gestionezi fonturile manual
Preload CSS util dacă ai CSS critic separat
Minify CSS activează-l dacă nu folosești deja un plugin de caching care face asta

Pe lângă setările din temă, Astra generează un fișier dynamic-css.css cu stilurile personalizate din Customizer. Acest fișier se poate cache-ui fără probleme cu orice plugin de caching.

Child theme sau nu?

Dacă modifici doar din Customizer și page builder, nu ai nevoie de child theme, Astra păstrează setările în baza de date, nu în fișierele temei. Dacă adaugi cod PHP în functions.php sau suprascrii template parts, atunci da, creezi un child theme. Astra are un generator oficial la wpastra.com/child-theme-generator.

Testează configurația finală cu PageSpeed Insights sau GTmetrix înainte să trimiți site-ul la client. Astra pornește bine, dar un plugin greșit de caching sau fonturi neoptimizate îți pot tăia scorul la jumătate.

Dacă ți-a plăcut acest articol, abonează-te la noutățile de pe blog folosind formularul de mai jos.

Unele dintre linkurile publicate in acest articol sunt „linkuri afiliate”. Aceasta înseamnă că dacă dați clic pe link și achizitionați serviciul sau produsul respectiv, vom primi un mic comision de afiliat, ceea ce ne ajută să menținem acest proiect. Mulțumim!