Configurare Author Box — Instrucțiuni

1. Creează câmpurile ACF

Mergi la ACF → Field Groups → Add New

Titlu grup: User Profile

Adaugă primul câmp:

Field Type: WYSIWYG Editor
Field Label: Author Bio Extended
Field Name: author_bio_extended (se completează automat)
Toolbar: Full
Media Upload: Yes

Adaugă al doilea câmp (+Add Field):

Field Type: Image
Field Label: Author Profile Image
Field Name: author_profile_image (se completează automat)
Return Format: Image Array

Setează Location Rules (important!):

În secțiunea Settings → Location Rules de jos, schimbă regula astfel:

Primul dropdown: User Form
Al doilea: is equal to
Al treilea: All

Apasă Save Changes.

2. Completează profilul de autor

Mergi la Users → Profile (sau editează profilul autorului dorit).

Vei vedea două câmpuri noi:

Author Bio Extended — editor vizual unde scrii biografia (cu bold, italic, linkuri etc.)
Author Profile Image — buton de upload pentru imaginea de profil

Completează ambele și apasă Update Profile.

3. Adaugă codul PHP

Mergi la Code Snippets → + Add Snippet → Add Your Custom Code → PHP Snippet

Lipește codul de mai jos, setează pe Active, și salvează:

add_filter( 'the_content', 'custom_author_box_after_content' );
function custom_author_box_after_content( $content ) {
    if ( ! is_single() ) {
        return $content;
    }

    $author_id = get_the_author_meta( 'ID' );
    $name      = get_the_author();
    $bio       = get_field( 'author_bio_extended', 'user_' . $author_id );
    $image     = get_field( 'author_profile_image', 'user_' . $author_id );
    $link      = get_author_posts_url( $author_id );

    if ( ! $bio && ! $image ) {
        return $content;
    }

    $avatar = $image
        ? '<img src="' . esc_url( $image['sizes']['thumbnail'] ) . '" alt="' . esc_attr( $name ) . '" class="author-box-avatar">'
        : get_avatar( $author_id, 150 );

    $box  = '<div class="custom-author-box">';
    $box .= '<div class="author-box-image">' . $avatar . '</div>';
    $box .= '<div class="author-box-info">';
    $box .= '<h4 class="author-box-name"><a href="' . esc_url( $link ) . '">' . esc_html( $name ) . '</a></h4>';
    $box .= '<div class="author-box-bio">' . wp_kses_post( $bio ) . '</div>';
    $box .= '<a href="' . esc_url( $link ) . '" class="author-box-link">Vezi toate articolele &rarr;</a>';
    $box .= '</div></div>';

    return $content . $box;
}

4. Adaugă stilurile CSS

Mergi la Appearance → Customize → Additional CSS și lipește:

.custom-author-box {
    display: flex;
    gap: 24px;
    padding: 28px;
    margin-top: 48px;
    border: 1px solid #e2e2e2;
    border-radius: 12px;
    background: #f8f9fa;
    align-items: flex-start;
}
.custom-author-box .author-box-image { flex-shrink: 0; }
.custom-author-box .author-box-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.custom-author-box .author-box-info { flex: 1; }
.custom-author-box .author-box-name { margin: 0 0 10px; font-size: 1.2em; }
.custom-author-box .author-box-name a { text-decoration: none; color: #1a1a1a; }
.custom-author-box .author-box-name a:hover { color: #0073aa; }
.custom-author-box .author-box-bio {
    font-size: 0.95em;
    line-height: 1.7;
    color: #444;
    margin-bottom: 12px;
}
.custom-author-box .author-box-bio p:last-child { margin-bottom: 0; }
.custom-author-box .author-box-link {
    font-size: 0.9em;
    font-weight: 600;
    color: #0073aa;
    text-decoration: none;
}
.custom-author-box .author-box-link:hover { color: #005177; }
@media (max-width: 600px) {
    .custom-author-box {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

5. Verificare

Deschide orice articol de pe site. La final trebuie să apară caseta cu imaginea, biografia și linkul către pagina de autor.

Dacă nu apare: verifică că autorul are completată biografia sau imaginea din Users → Profile, și că snippet-ul PHP este activ în WPCode.

dev

Rambo — not the one with the bandana and the rocket launcher, though he does go to war daily… with servers that refuse to cooperate, printers that have a personal vendetta against humanity, and clients who swear they "didn't touch anything."

Vezi toate articolele →

WP Demo