WordPressのコメント内部デザインをWalkerクラスを使って変更する方法

Jun 26, 2015

AD:

wp_list_commentsでulなどを変更できたりしますが、コメント内部のデザインを変更ができません。
なので、wp_list_commentsのWalker_Commentをオーバーライドしてデザインを変更します。
下記のようにcomments.phpなどに書いてあるwp_list_commentsにwalkerにfunctions.phpに書いたクラスを渡します。

&lt;?php wp_list_comments( array(
  'walker' =&gt; new custom_walker_comment,
  'style' =&gt; 'ul',
  'callback' =&gt; null,
  'end-callback' =&gt; null,
  'type' =&gt; 'all',
  'page' =&gt; null,
  'avatar_size' =&gt; 32
) ); ?&gt;

<?php wp_list_comments( array(

'walker' => new custom_walker_comment,

'style' => 'ul',

'callback' => null,

'end-callback' => null,

'type' => 'all',

'page' => null,

'avatar_size' => 32

) ); ?>

次にfunctions.phpの下記のようなWalker_Commentを継承したクラスを作成します。
ちなみに、下記の内容はFirst Name+Last Nameを表示しているのと、htmlを変更しております。

class custom_walker_comment extends Walker_Comment {

  var $tree_type = 'comment';
  var $db_fields = array( 'parent' =&gt; 'comment_parent', 'id' =&gt; 'comment_ID' );

  function __construct() {
    echo '&lt;ul id=&quot;comment-list&quot;&gt;';
  }

  function start_lvl( &amp;$output, $depth = 0, $args = array() ) {
    $GLOBALS['comment_depth'] = $depth + 1;
    echo '&lt;ul class=&quot;children&quot;&gt;';
  }

  function end_lvl( &amp;$output, $depth = 0, $args = array() ) {
    $GLOBALS['comment_depth'] = $depth + 1;
    echo '&lt;/ul&gt;&lt;!-- /.children --&gt;';
  }

  /** START_EL */
  function start_el( &amp;$output, $comment, $depth, $args, $id = 0 ) {
    $depth++;
    $GLOBALS['comment_depth'] = $depth;
    $GLOBALS['comment'] = $comment;
    $parent_class = ( empty( $args['has_children'] ) ? '' : 'parent' );
    ?&gt;

    &lt;section class=&quot;mb-md&quot;&gt;
      &lt;h1&gt;&lt;?php  echo get_the_title($comment-&gt;comment_post_ID);?&gt;&lt;/h1&gt;
      &lt;p class=&quot;mt-sm&quot;&gt;&lt;small&gt;By &lt;?php $comment_user = get_userdata($comment-&gt;user_id);
          echo $comment_user-&gt;first_name.&quot; &quot;.$comment_user-&gt;last_name;?&gt;&lt;/small&gt;&lt;/p&gt;
      &lt;p class=&quot;mt-sm&quot;&gt;
        &lt;?php if( !$comment-&gt;comment_approved ) : ?&gt;&lt;em class=&quot;comment-awaiting-moderation&quot;&gt;Your comment is awaiting moderation.&lt;/em&gt;
        &lt;?php
        else: comment_text();
        endif;
        ?&gt;
      &lt;/p&gt;
      &lt;p&gt;&lt;time&gt;&lt;?php comment_date(); ?&gt;&lt;/time&gt;&lt;/p&gt;
    &lt;/section&gt;
  &lt;?php
  }

  function end_el(&amp;$output, $comment, $depth = 0, $args = array() ) {
    echo '&lt;/li&gt;&lt;!-- /#comment-' . get_comment_ID() . ' --&gt;';
  }

  function __destruct() {
    echo '&lt;/ul&gt;&lt;!-- /#comment-list --&gt;';
  }
}

class custom_walker_comment extends Walker_Comment {

var $tree_type = 'comment';

var $db_fields = array( 'parent' => 'comment_parent', 'id' => 'comment_ID' );

function __construct() {

echo '<ul id="comment-list">';

}

function start_lvl( &$output, $depth = 0, $args = array() ) {

$GLOBALS['comment_depth'] = $depth + 1;

echo '<ul class="children">';

}

function end_lvl( &$output, $depth = 0, $args = array() ) {

$GLOBALS['comment_depth'] = $depth + 1;

echo '</ul>';

}

/** START_EL */

function start_el( &$output, $comment, $depth, $args, $id = 0 ) {

$depth++;

$GLOBALS['comment_depth'] = $depth;

$GLOBALS['comment'] = $comment;

$parent_class = ( empty( $args['has_children'] ) ? '' : 'parent' );

<h1><?php echo get_the_title($comment->comment_post_ID);?></h1>

<p class="mt-sm"><small>By <?php $comment_user = get_userdata($comment->user_id);

echo $comment_user->first_name." ".$comment_user->last_name;?></small></p>

<?php if( !$comment->comment_approved ) : ?><em class="comment-awaiting-moderation">Your comment is awaiting moderation.</em>

<?php

else: comment_text();

endif;

</p>

</section>

<?php

}

function end_el(&$output, $comment, $depth = 0, $args = array() ) {

echo '</li>';

}

function __destruct() {

echo '</ul>';

}

AD:

Cloud Nine

WordPressのコメント内部デザインをWalkerクラスを使って変更する方法

No Comments, Comment or Ping

Reply to “WordPressのコメント内部デザインをWalkerクラスを使って変更する方法”

Search Keyword

Meta

FacebookPage

Popular Posts

My Tags

Status

Links

ARCHIVES