Modificarea HTML-ului Generat de wp_list_comments()

2 feb. 2016, 23:47:11
Vizualizări: 20K
Voturi: 10

Dezvolt o temă WordPress pentru care aș dori ca marca temporală a fiecărui comentariu să fie înfășurată într-un element <span> pentru a o putea stiliza cu reguli CSS. Cu toate acestea, funcția wp_list_comments() așa cum o folosesc în șablonul comments.php al temei mele nu pare să ofere opțiuni pentru a modifica HTML-ul generat:

<ol class="comment-list">
    <?php
        wp_list_comments( array(
            'style'       => 'ol',
            'format'      => 'html5',
            'short_ping'  => true,
        ) );
    ?>
</ol>

care generează marcaje temporale astfel:

<time datetime="2015-12-21T19:09:49+00:00"> 21 decembrie 2015 la 19:09 </time>

Cum pot modifica rezultatul funcției pentru a include un element <span> în jurul fiecărui element <time> fără a modifica fișierele core?

Am încercat să mă uit în functions.php al temei mele, precum și în fișierele WordPress wp-includes/comment.php și wp-includes/comment-template.php. Niciunul dintre acestea nu se ocupă de structura efectivă a tag-urilor marcajelor temporale ale comentariilor generate de wp_list_comments(), așa că nu am găsit nimic cu care să mă pot juca.

9
Comentarii

Ai văzut sursa funcției wp_list_comments()? Ești sigur că aceasta este funcția responsabilă și nu, de exemplu, șablonul comments.php sau o altă parte complet diferită?

kaiser kaiser
2 feb. 2016 23:51:42

Ești sigur că ai nevoie de un înveliș <span>? De ce nu aplici stilurile direct pe elementul <time>?

bosco bosco
3 feb. 2016 00:11:12

Sunt de acord cu @bosco, pare că <span> nu este necesar aici. Altfel, ar trebui să arăți argumentele funcției wp_list_comments() pentru a vedea dacă folosește un callback sau un walker personalizat. Cel mai probabil folosești Walker_Comment::html5_comment() inclus în WordPress. A fost pusă o întrebare similară ieri.

birgire birgire
3 feb. 2016 00:43:51

@birgie greșeala mea - de fapt am eliminat folosirea lui wp_list_comments() crezând că e redundant. Corectat O.o

bosco bosco
3 feb. 2016 00:50:51

am găsit EXACT ce aveam nevoie în acest fișier: wp-includes/class-walker-comment.php - aici puteam modifica html-ul datei comentariului. voiam să stilizez ora diferit față de dată, deci aveam nevoie să fie în tag-uri separate. mulțumesc tuturor!

marlakash marlakash
3 feb. 2016 09:37:57

Sper că nu modifici fișierele core direct! @marlakash

birgire birgire
3 feb. 2016 13:33:24

mi-ar plăcea să fac asta altfel, dar nu sunt sigur cum... nu prea am experiență în scrierea de plugin-uri și altele asemănătoare. ai vreo sugestie? @birgire

marlakash marlakash
4 feb. 2016 00:23:51

Apropo, cred că e mai bine să păstrez titlul anterior al întrebării mele. Nu aș fi găsit niciodată acest răspuns prin Google. E mult prea specific... @birgire

marlakash marlakash
4 feb. 2016 10:03:52

Am pregătit câteva opțiuni pentru tine, sper că le poți adapta nevoilor tale @marlakash

birgire birgire
4 feb. 2016 13:25:22
Arată celelalte 4 comentarii
Toate răspunsurile la întrebare 1
2
14

Iată câteva opțiuni pentru a suprascrie layout-ul nativ pentru fiecare comentariu:

Abordarea #1 - Suprascrierea start_el() cu un walker personalizat

Să definim formatul nostru personalizat de comentarii wpse:

// Argumente pentru wp_list_comments() 
$args = [
    'style'       => 'ol',
    'format'      => 'html5',
    'short_ping'  => true,
];

// Folosim walker-ul nostru personalizat dacă este disponibil
if( class_exists( 'WPSE_Walker_Comment' ) )
{
    $args['format'] = 'wpse';
    $args['walker'] = new WPSE_Walker_Comment;
}

wp_list_comments( $args );

cu un walker de comentarii personalizat, care gestionează acest nou format (PHP 5.4+):

/**
 * Walker de comentarii personalizat
 *
 * @users Walker_Comment
 */
class WPSE_Walker_Comment extends Walker_Comment
{
    public function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 )
    {
       // Formatul nostru personalizat 'wpse' pentru comentarii
       if ( 'wpse' === $args['format'] )
       {
           $depth++;
           $GLOBALS['comment_depth'] = $depth;
           $GLOBALS['comment'] = $comment;

           // Începem bufferizarea output-ului
           ob_start();

           // Folosim șablonul nativ de comentarii html5
           $this->html5_comment( $comment, $depth, $args );

           // Modificările noastre (înfășurăm <time> cu <span>)
           $output .= str_replace( 
               [ '<time ', '</time>' ], 
               ['<span><time ', '</time></span>' ], 
               ob_get_clean() 
           );
       }
       else
       {
           // Revenim la formatele native de comentarii
           parent::start_el( $output, $comment, $depth, $args, $id );
       }    
    }
} // sfârșitul clasei

Observați cum gestionăm formatul nostru personalizat de comentarii. De asemenea, refolosim metoda start_el() din clasa părinte pentru formatele native, apelând parent::start_el().

De remarcat că folosim bufferizarea output-ului într-un mod similar cu clasa părinte.

Abordarea #2 - Suprascrierea html5_comment() cu un walker personalizat

Putem suprascrie direct metoda nativă Walker_Comment::html5_comment(), în felul următor:

// Argumente pentru wp_list_comments() 
$args = [
    'style'       => 'ol',
    'format'      => 'html5',
    'short_ping'  => true,
    'walker'      => new WPSE_Walker_Comment,
];

wp_list_comments( $args );

unde clasa noastră de walker personalizat este definită în functions.php astfel:

if ( !class_exists( 'WPSE_Walker_Comment' ) ) {

    /**
     * Walker de comentarii personalizat
     *
     * @users Walker_Comment
     */
    class WPSE_Walker_Comment extends Walker_Comment {

        public function html5_comment( $comment, $depth, $args ) {
            // Aici plasăm modificările metodei Walker_Comment::html5_comment()
        }
    }
    // sfârșitul clasei WPSE_Walker_Comment
} // sfârșitul condiției '!class_exists'

Aici putem păstra modificările noastre la metoda Walker_Comment::html5_comment(). Este destul de lungă, așa că nu am adăugat-o aici.

Abordarea #3 - Callback personalizat

Aici am folosi atributul callback:

// Argumente pentru wp_list_comments() 
$args = [
    'style'       => 'ol',
    'format'      => 'html5',
    'short_ping'  => true,
];

// Folosim callback-ul nostru personalizat dacă este disponibil
if( function_exists( 'wpse_comment_callback' ) )
{
    $args['format'] = 'wpse';
    $args['callback'] = 'wpse_comment_callback';
}

wp_list_comments( $args );

unde definim wpse_comment_callback() conform nevoilor noastre.

/**
 * Callback personalizat pentru comentarii
 */
function wpse_comment_callback( $comment, $depth, $args )
{
    // Modificăm metoda Walker_Comment::html5_comment() conform nevoilor 
    // și o plasăm aici
}

unde am putea începe prin a simula metoda Walker_Comment::html5_comment(). Dar trebuie să ne amintim să înlocuim toate referințele la $this.

Abordarea #4 - Suprascrierea argumentelor wp_list_comments() cu un filtru

Putem folosi și filtrul wp_list_comments_args pentru a modifica argumentele funcției wp_list_comments() cu metodele de mai sus.

Există și alte abordări disponibile, dar sperăm că le puteți adapta la nevoile dumneavoastră.

4 feb. 2016 13:24:35
Comentarii

De ce nu există un filtru pentru asta în loc să folosești OOP.

Brad Dalton Brad Dalton
12 feb. 2022 10:48:11

Structura arborelui de comentarii este probabil prea complexă pentru a fi ajustată printr-un singur filtru de text.

birgire birgire
17 feb. 2022 18:14:12