Una firma autore WordPress HTML CSS permette di aggiungere sotto gli articoli un blocco personale con foto, nome, ruolo e collegamenti social. Il metodo non richiede plugin: basta inserire il codice in un blocco HTML personalizzato e aggiungere le regole grafiche nel pannello CSS del tema. Il risultato è responsivo, leggibile su smartphone e facilmente adattabile ai colori del sito. Avatar, testi e URL dei profili possono essere sostituiti senza modificare la struttura principale del componente.

Cosa deve contenere una firma autore WordPress

Una firma autore efficace identifica chiaramente la persona che ha scritto il contenuto e offre un modo semplice per visitare i suoi profili professionali. Il blocco può essere inserito alla fine degli articoli, nelle pagine del team oppure in un template del tema WordPress.

Gli elementi principali sono:

Un avatar con testo alternativo descrittivo.
Il nome completo dell’autore.
Il ruolo, la specializzazione o la redazione di appartenenza.
Una breve descrizione professionale.
Collegamenti social con etichette testuali riconoscibili.
Un layout adattabile a schermi piccoli e grandi.

Il codice seguente usa HTML semantico con gli elementi article, header e nav. Le etichette dei social restano testuali invece di dipendere da un archivio di icone esterno: in questo modo la firma autore WordPress HTML CSS continua a funzionare anche quando un tema cambia libreria di icone o blocca alcune risorse remote.

Come inserire l’HTML dell’autore in WordPress

Prima di procedere, prepara l’immagine dell’autore nella Libreria Media di WordPress. È preferibile usare un’immagine quadrata, ottimizzata per il web, con un URL stabile e un testo alternativo che identifichi la persona.

Passo 1: aggiungere il blocco HTML

Apri l’articolo nell’editor a blocchi di WordPress, posiziona il cursore nel punto in cui deve comparire la firma e aggiungi il blocco HTML personalizzato. La documentazione ufficiale di WordPress descrive il funzionamento del blocco HTML personalizzato.

Incolla questo codice e sostituisci nome, ruolo, descrizione, URL dell’avatar e indirizzi dei profili social:

<article class="firma-autore">
<div class="firma-autore__avatar">
<img
src="https://www.esempio.it/wp-content/uploads/avatar-autore.jpg"
alt="Nome Cognome, autore di articoli tecnologici"
width="96"
height="96"
loading="lazy"
>
</div>

<div class="firma-autore__contenuto">
<header>
<p class="firma-autore__etichetta">Autore</p>
<h2 class="firma-autore__nome">Nome Cognome</h2>
<p class="firma-autore__ruolo">Redattore tecnico</p>
</header>

<p class="firma-autore__bio">
Scrive di WordPress, accessibilità e strumenti digitali per il lavoro.
</p>

<nav class="firma-autore__social" aria-label="Collegamenti social dell'autore">
<a href="https://www.linkedin.com/in/nome-cognome/" target="_blank" rel="noopener noreferrer">
LinkedIn
</a>
<a href="https://x.com/nomeutente" target="_blank" rel="noopener noreferrer">
X
</a>
<a href="https://www.instagram.com/nomeutente/" target="_blank" rel="noopener noreferrer">
Instagram
</a>
</nav>
</div>
</article>

L’attributo alt descrive l’immagine alle tecnologie assistive, mentre width e height aiutano il browser a riservare lo spazio corretto prima del caricamento. L’attributo loading="lazy" è adatto quando la firma si trova più in basso nella pagina; se il blocco viene mostrato subito nella parte iniziale dello schermo, il caricamento differito potrebbe non essere necessario.

Sostituisci https://www.esempio.it/... con l’indirizzo copiato dalla Libreria Media. Verifica anche che ogni collegamento social punti al profilo reale e non a un URL dimostrativo. Se non utilizzi un determinato social, elimina direttamente il relativo elemento a.

Come aggiungere il CSS senza modificare il tema

Il CSS può essere inserito in Aspetto > Personalizza > CSS aggiuntivo nei temi classici. Nei temi a blocchi il percorso può essere Aspetto > Editor > Stili, con una voce per il CSS aggiuntivo che varia in base al tema e alla versione di WordPress. L’area CSS aggiuntivo è preferibile alla modifica diretta dei file del tema, perché gli aggiornamenti non cancellano le regole personalizzate.

Incolla il foglio di stile seguente:

.firma-autore {
display: flex;
align-items: flex-start;
gap: 1.25rem;
max-width: 760px;
margin: 3rem auto 1.5rem;
padding: 1.5rem;
border: 1px solid #dfe3e8;
border-radius: 14px;
background: #f8fafc;
color: #1f2937;
box-sizing: border-box;
}

.firma-autore *,
.firma-autore *::before,
.firma-autore *::after {
box-sizing: inherit;
}

.firma-autore__avatar {
flex: 0 0 96px;
}

.firma-autore__avatar img {
display: block;
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
}

.firma-autore__contenuto {
flex: 1 1 auto;
min-width: 0;
}

.firma-autore__etichetta {
margin: 0 0 0.2rem;
color: #64748b;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}

.firma-autore__nome {
margin: 0;
color: #111827;
font-size: clamp(1.25rem, 2vw, 1.65rem);
line-height: 1.2;
}

.firma-autore__ruolo {
margin: 0.3rem 0 0;
color: #475569;
font-size: 0.95rem;
font-weight: 600;
}

.firma-autore__bio {
margin: 0.9rem 0 1rem;
line-height: 1.6;
}

.firma-autore__social {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}

.firma-autore__social a {
display: inline-block;
padding: 0.45rem 0.75rem;
border: 1px solid #cbd5e1;
border-radius: 999px;
background: #ffffff;
color: #1d4ed8;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}

.firma-autore__social a:hover,
.firma-autore__social a:focus-visible {
border-color: #1d4ed8;
background: #eff6ff;
text-decoration: underline;
}

@media (max-width: 600px) {
.firma-autore {
align-items: center;
flex-direction: column;
margin-top: 2rem;
padding: 1.25rem;
text-align: center;
}

.firma-autore__social {
justify-content: center;
}
}

La classe .firma-autore limita la larghezza del blocco e separa avatar e testo con Flexbox. La regola object-fit: cover mantiene l’immagine proporzionata anche quando il file originale non è perfettamente quadrato. La media query attiva sotto i 600 pixel dispone avatar e contenuti in verticale, evitando che il nome o la biografia risultino troppo compressi.

I colori possono essere sostituiti con quelli del sito modificando valori come #1d4ed8, #f8fafc e #1f2937. È consigliabile mantenere un contrasto sufficiente tra testo e sfondo, soprattutto per il nome dell’autore e per i collegamenti social.

Come riutilizzare la firma in più articoli

Il blocco HTML personalizzato può essere salvato come blocco riutilizzabile o come blocco sincronizzato, secondo la terminologia disponibile nella versione di WordPress utilizzata. Un blocco sincronizzato consente di aggiornare avatar, ruolo e collegamenti social in più pagine dalla stessa posizione.

Per una singola firma basta copiare il blocco nell’articolo interessato. Per una firma visualizzata automaticamente sotto ogni articolo, invece, è necessario intervenire sul template del tema, su un tema child oppure su un plugin che gestisca i blocchi globali. Il percorso esatto dipende dal tema attivo: i temi a blocchi permettono di modificare il template dell’articolo da Aspetto > Editor > Modelli, mentre i temi classici possono richiedere un file template PHP.

Quando il codice viene inserito direttamente in un file PHP, il markup deve essere integrato nel tema e non incollato come semplice testo. Questa soluzione è più adatta a chi gestisce il tema child, perché una modifica nel tema principale può essere sovrascritta dagli aggiornamenti.

Prima di pubblicare, controlla la firma su desktop e smartphone, prova ogni collegamento e verifica la navigazione da tastiera. Il focus visibile dei link, l’etichetta aria-label del menu social e il testo alternativo dell’avatar rendono il componente più accessibile.

Una firma autore WordPress HTML CSS ben strutturata migliora riconoscibilità, accessibilità e coerenza grafica senza aggiungere un plugin al sito.

Potrebbe interessarti anche:

FAQ

Sì. Il blocco HTML personalizzato e la sezione CSS aggiuntivo di WordPress sono sufficienti per inserire avatar, ruolo, biografia e collegamenti social.

Vai in Media > Libreria, apri l’immagine dell’autore e copia l’URL del file mostrato nei dettagli dell’allegato.

In genere no, perché viene salvato nelle impostazioni di WordPress. Le regole inserite direttamente nei file del tema principale, invece, possono essere sovrascritte.

Devi inserirla nel template dell’articolo del tema, in un tema child o tramite una soluzione che gestisca blocchi globali. La procedura cambia tra temi classici e temi a blocchi.

Sì, ma le icone devono avere un testo accessibile o un’etichetta ARIA. I collegamenti testuali dell’esempio sono più semplici da mantenere e più affidabili con qualsiasi tema WordPress.

Altri articoli di questa serie: