web-dev-qa-db-ja.com

Wp_list_comments（）によって生成されたHTMLを変更する

私は、CSSルールでスタイルを整えるために、各コメントのタイムスタンプを<span>要素で囲むWordPressテーマを開発しています。しかし、私のテーマのcomments.phpテンプレートで使用している wp_list_comments()関数 は、生成される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、そしてWordPressのwp-includes/comment.phpとwp-includes/comment-template.phpを見てみました。それらのどれもwp_list_comments()によって生成されたコメントタイムスタンプの実際のタグ構造を扱っていません、それで私が遊ぶためにそこに何もありませんでした。

commentstimestampwp-list-commentscomments-template
2
marlakash

各コメントのネイティブレイアウトをオーバーライドする方法についていくつかのオプションがあります。

アプローチ1 - カスタムウォーカーによるstart_el()のオーバーライド

カスタムの 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_Comment::html5_comment()メソッドを直接オーバーライドすることもできます。

// 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['walker'] = new WPSE_Walker_Comment;
}

wp_list_comments( $args );

カスタムウォーカークラスは次のように定義されています。

/**
 * 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 class

ここで、 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に置き換えることを忘れないでください。

他にも利用できるアプローチがありますが、うまくいけばあなたはこれらをあなたのニーズに合わせることができます。

8
birgire