MENU
HOME
TOP
WhiteTiger Ver 1.2.1に更新しました。確認よろしくお願いします。

「WordPress」吹き出し会話な最近のコメントウィジェットを追加する方法

Photo by rawpixel on Unsplash

もうネタバレしてますが、一応完成イメージを紹介。

スマホとパソコン表示はだいたいこんな感じです。

タブレット端末の表示

functions.phpの編集

今回はウィジェット追加するから、苦手なfunctions.phpの編集からです。

えと、今回のカスタマイズのネタ元はこちらです。

ただこちらのパティーンだと、プラグイン 「Speech bubble」を使用するのと、変数に直接文字の代入をするので、ちょっと変えました。

説明は長くなりそうなので、結論から申し上げますとコピペするだけです。

以下のコードをfunctions.phpに追記しておくれやす。
class RecentCommentsWidgetItem extends WP_Widget {
  function __construct() {
    parent::__construct(
      'recent_comments',
      '*最近のコメント(吹き出し)*',   //ウイジェット名
      array('description' => '最近投稿されたコメント表示を吹き出し風に表示するウィジェット')
    );
  }
  function widget($args, $instance) {
    extract( $args );

    //タイトル名を取得
    $title = apply_filters( 'widget_recent_comment_title', $instance['title'] );
    //コメント表示数
    $count = apply_filters( 'widget_recent_comment_count', $instance['count'] );
    //コメント文字数
    $str_count = apply_filters( 'widget_recent_comment_str_count', $instance['str_count'] );
    //管理者除外するか
    $author_not_in = apply_filters( 'widget_recent_comment_author_not_in', $instance['author_not_in'] );

    ?>
    <?php //classにwidgetと一意となるクラス名を追加する ?>
    <?php echo $args['before_widget']; ?>
    <?php
    echo $args['before_title'];
    if ($title) {
      echo $title;//タイトルが設定されている場合は使用する
    } else {
      echo '最近のコメント';
    }
    echo $args['after_title'];
    ?>

    <div class="recent-comments-ori">
      <?php
      $comments_args = array(
      'author__not_in' => $author_not_in ? 1 : 0, // 管理者は除外
      'number' => $count, // 取得するコメント数
      'status' => 'approve', // 承認済みコメントのみ取得
      'type' => 'comment' // 取得タイプを指定。トラックバックとピンバックは除外
      );
    //現在のユーザー名を取得

      //クエリの取得
      $comments_query = new WP_Comment_Query;
      $comments = $comments_query->query( $comments_args );
      $comment_author_admin = get_the_author();

      //コメントループ
      if ( $comments ) {
        foreach ( $comments as $comment ) {
          //コメント作成者の名前を取得
          $selectauthor = get_comment_author( $comment->comment_ID );


          echo '<div class="sb-type-ln">';
            //コメントタイトルの出力
            echo '<div class="recent-comment-title">';
              echo '<a href="'.get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID.'">'.$comment->post_title.'</a>';
            echo '</div>';

            //コメント投稿日の出力(投稿者でclassを分ける)
            if($selectauthor == $comment_author_admin){
              echo '<div class="recent-comment-date">';
            }else{
              echo '<div class="recent-comment-date-left">';
            }
            echo comment_date( 'Y/n/d', $comment->comment_ID);
            echo '</div>';

            //コメント作成者の画像と名前を出力(管理人と一般ユーザでclassを変える)
            if($selectauthor == $comment_author_admin){
              echo '<div class="sb-subtype-a">';
            }else{
              echo '<div class="sb-subtype-b">';
            }
              echo '<div class="sb-speaker">';
                echo '<div class="sb-icon">';
                  echo get_avatar( $comment, '28' );
                echo '</div>';

                echo '<div class="sb-name">';
                  comment_author($comment->comment_ID);
                echo '</div>';
              echo '</div>';

              //コメントを出力
              echo '<div class="sb-content">';
                echo '<div class="sb-speech-bubble">';
                  $my_pre_comment_content = strip_tags($comment->comment_content);
                  if(mb_strlen($my_pre_comment_content,"UTF-8") > $str_count) {
                  $my_comment_content = mb_substr($my_pre_comment_content, 0, $str_count) ; echo $my_comment_content. '...' ;
                  } else {
                  echo $comment->comment_content;
                  };
                echo '</div>';
              echo '</div>';
            echo '</div>';
          echo '</div>';
        } //コメントループEND
      } else {
        echo 'コメントなし';
      }
    ?>
    </div>
    <?php echo $args['after_widget']; ?>
    <?php
  }
  function update($new_instance, $old_instance) {
    $instance = $old_instance;
    $instance['title'] = strip_tags($new_instance['title']);
    $instance['count'] = $new_instance['count'];
    $instance['str_count'] = $new_instance['str_count'];
    $instance['author_not_in'] = $new_instance['author_not_in'];
    return $instance;
  }
  
  function form($instance) {
    if(empty($instance)){//notice回避
      $instance = array(
      'title' => null,
      'count' => 5,
      'str_count' => 100,
      'author_not_in' => false,
      );
    }
    $title = esc_attr($instance['title']);
    $count = esc_attr($instance['count']);
    $str_count = esc_attr($instance['str_count']);
    $author_not_in = esc_attr($instance['author_not_in']);
    ?>
    <?php //タイトル入力フォーム ?>
    <p>
      <label for="<?php echo $this->get_field_id('title'); ?>">
        タイトル
      </label>
      <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
    </p>
      <?php //表示するコメント数 ?>
      <p>
      <label for="<?php echo $this->get_field_id('count'); ?>">
      表示するコメント数
      </label>
      <input class="widefat" id="<?php echo $this->get_field_id('count'); ?>" name="<?php echo $this->get_field_name('count'); ?>" type="number" min="3" max="30" value="<?php echo $count; ?>" />
      </p>
      <?php //コメント文字数 ?>
      <p>
      <label for="<?php echo $this->get_field_id('str_count'); ?>">
      コメント文字数
      </label>
      <input class="widefat" id="<?php echo $this->get_field_id('str_count'); ?>" name="<?php echo $this->get_field_name('str_count'); ?>" type="number" min="30" value="<?php echo $str_count; ?>" />
      </p>
      <?php //管理者の除外 ?>
      <p>
      <label for="<?php echo $this->get_field_id('author_not_in'); ?>">
      管理者の除外
      </label><br />
      <input class="widefat" id="<?php echo $this->get_field_id('author_not_in'); ?>" name="<?php echo $this->get_field_name('author_not_in'); ?>" type="checkbox" value="on"<?php echo ($author_not_in ? ' checked="checked"' : ''); ?> />管理者のコメントを表示しない
    </p>
    <?php
  }
}
add_action('widgets_init', create_function('', 'return register_widget("RecentCommentsWidgetItem");'));

style.cssの編集

あとはスタイルを整えるだけです。
style.cssに以下のコードを追加してください。
.recent-comments-ori {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}
.recent-comments-ori .sb-type-ln {
    color: #333;
    width: 100%;
    margin-bottom: 30px;
    position: relative;
}
.recent-comment-title {
    position: relative;
    margin-bottom: 10px;
    padding: 8px 3px;
    border-left: solid 30px #6da7ff;
    border-top: 1px solid #6da7ff;
    font-size: 85%;
    background: #fafcff;
}
.recent-comment-title:before {
    font-family: FontAwesome;
    content: "\f27a";
    position: absolute;
    color: #ffffff;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 30px;
    height: 23px;
    margin: auto;
    text-align: center;
}
.recent-comment-date, .recent-comment-date-left {
    color: #ffffff;
    line-height: 1.3;
    margin: 0 auto;
    padding: 2px 6px;
    position: absolute;
    right: 0px;
    top: -9px;
    text-transform: uppercase;
    font-size: .6em;
    background: #6da7ff;
}
.recent-comment-date::before, .recent-comment-date-left::before {
    font-family: FontAwesome;
    content: "\f040";
    padding-right: 3px;
}
.sb-subtype-a .sb-icon {
    float: left;
    margin-right: 8px;
}
.sb-subtype-b .sb-icon {
    float: right;
    margin-left: 8px;
}
.sb-subtype-b  .sb-name {
    float: right;
}
.sb-content {
    font-size: 90%;
    clear: both;
    line-height: 1.46;
    border: solid 1px #ccc;
    padding: 6px;
    border-radius: 3px;
    position: relative;
}
.sb-subtype-a .sb-content::after, .sb-subtype-b .sb-content::after {
    position: absolute;
    content: '';
    border: 4px solid transparent;
    border-bottom: 6px solid #fff;
    top: -10px;
}
.sb-subtype-a .sb-content::before, .sb-subtype-b .sb-content::before {
    position: absolute;
    content: '';
    border: 4px solid transparent;
    border-bottom: 6px solid #ccc;
    top: -11px;
}
.sb-subtype-a .sb-content::after {
    left: : 7px;
}
.sb-subtype-a .sb-content::before {
    left: : 7px;
}.sb-subtype-b .sb-content::after {
    right: 7px;
}
.sb-subtype-b .sb-content::before {
    right: 7px;
}

動作の確認

さて、一応動作の確認ですが以下の画像のように「*最近のコメント(吹き出し)*」と出てれば正解です。

あとはいつものように、表示したいところにキメてください。文字よりよりパラパラの方が伝わりやすいので、非常に重たくなってるのは 、あいぎょうやで。

スタイルとかは 、プラグイン 「Speech bubble」を使用するか、style.cssを変更するなりであんじょうたのんます。(`・ω・´)ゞ

スポンサーリンク

この記事をかいた人

閲覧どうもありがとうございます。当サイトキャンディースタイルとWordPressテーマのWhite Tigerというサイトを運営しています。まだまだ初心者なので、お見苦しいとこがありますがどうぞよろしく。

コメントを閉じる

コメントを残す

メールアドレスが公開される事はございませんが*の付いている欄は必須項目となります。
なおコメントの反映にお時間がかかる場合があります事をご了承ください。


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください