更改wp_list_Comments()生成的HTML

时间:2016-02-02 作者:marlakash

我正在开发一个WordPress主题,我希望每个评论的时间戳都用<span> 元素,以便使用CSS规则对其进行样式化。然而the wp_list_comments() function 当我在我的主题中使用它时comments.php 模板似乎没有提供更改生成的HTML的选项:

<ol class="comment-list">
    <?php
        wp_list_comments( array(
            \'style\'       => \'ol\',
            \'format\'      => \'html5\',
            \'short_ping\'  => true,
        ) );
    ?>
</ol>
产生时间戳:

<time datetime="2015-12-21T19:09:49+00:00"> december 21st,  2015 on 19:09 </time>
如何更改函数的输出以包含<span>每个周围的元素<time> 元素而不更改核心文件?

我试着看看我的主题functions.php, 还有WordPresswp-includes/comment.phpwp-includes/comment-template.php. 它们都不处理由生成的注释时间戳的实际标记结构wp_list_comments(), 所以那里没有我可以玩的东西。

1 个回复
最合适的回答,由SO网友:birgire 整理而成

以下是关于如何覆盖每个注释的本机布局的一些选项:

进近#1-覆盖start_el() 使用自定义walker,让我们定义自定义的wpse注释格式:

// Arguments for wp_list_comments() 
$args = [
    \'style\'       => \'ol\',
    \'format\'      => \'html5\',
    \'short_ping\'  => true,
];

// Use our custom walker if it\'s available
if( class_exists( \'WPSE_Walker_Comment\' ) )
{
    $args[\'format\'] = \'wpse\';
    $args[\'walker\'] = new WPSE_Walker_Comment;
}

wp_list_comments( $args );
使用自定义注释查询器处理这种新格式(PHP 5.4+):

/**
 * Custom comment walker
 *
 * @users Walker_Comment
 */
class WPSE_Walker_Comment extends Walker_Comment
{
    public function start_el( &$output, $comment, $depth = 0, $args = array(), $id = 0 )
    {
       // Our custom \'wpse\' comment format
       if ( \'wpse\' === $args[\'format\'] )
       {
           $depth++;
           $GLOBALS[\'comment_depth\'] = $depth;
           $GLOBALS[\'comment\'] = $comment;

           // Start output buffering
           ob_start();

           // Let\'s use the native html5 comment template
           $this->html5_comment( $comment, $depth, $args );

           // Our modifications (wrap <time> with <span>)
           $output .= str_replace( 
               [ \'<time \', \'</time>\' ], 
               [\'<span><time \', \'</time></span>\' ], 
               ob_get_clean() 
           );
       }
       else
       {
           // Fallback for the native comment formats
           parent::start_el( $output, $comment, $depth, $args, $id );
       }    
    }
} // end class
请注意我们如何处理自定义注释格式。我们还重用start_el() 通过调用parent::start_el().

还请注意,我们以与父类类似的方式使用输出缓冲。

进近#2-覆盖html5_comment() 使用自定义walker,我们还可以直接覆盖本机Walker_Comment::html5_comment() 方法,方法如下:

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

wp_list_comments( $args );
我们的custom walker课程在哪里functions.php 定义为:

if ( !class_exists( \'WPSE_Walker_Comment\' ) ) {

    /**
     * Custom comment walker
     *
     * @users Walker_Comment
     */
    class WPSE_Walker_Comment extends Walker_Comment {

        public function html5_comment( $comment, $depth, $args ) {
            // Place the modifications of the Walker_Comment::html5_comment() method here
        }
    }
    // end of WPSE_Walker_Comment
} // end of \'!class_exists\' condition
在这里,我们可以将修改存储到Walker_Comment::html5_comment() 方法它很长,所以我没有把它加在这里。

方法#3-自定义回调callback 属性:

// Arguments for wp_list_comments() 
$args = [
    \'style\'       => \'ol\',
    \'format\'      => \'html5\',
    \'short_ping\'  => true,
];

// Use our custom callback if it\'s available
if( function_exists( \'wpse_comment_callback\' ) )
{
    $args[\'format\'] = \'wpse\';
    $args[\'callback\'] = \'wpse_comment_callback\';
}

wp_list_comments( $args );
我们定义wpse_comment_callback() 满足我们的需求。

/**
 * Custom comment callback
 */
function wpse_comment_callback( $comment, $depth, $args )
{
    // Modify the Walker_Comment::html5_comment() method to our needs 
    // and place it here
}
我们可以从模拟Walker_Comment::html5_comment() 方法但我们必须记住替换所有引用$this.

还有其他可用的方法,但希望您可以根据自己的需要调整这些方法。