RiPro主题美化实现文章列表页面右上角3个彩色圆点效果

有很多朋友看到网站列表页面右上角有3个彩色圆点效果，今天就如何实现给大家分享一下教程！

教程开始

1、找到wp-content/themes/ripro/assets/css/diy.css并将附件内的diy.css内容整体复制进去并保存

2、找到/wp-content/themes/ripro/inc/theme-functions.php并搜索下面代码

entry-meta

<div class="entry-meta">
        <?php if ( $options['author'] ) :
          $author_id = get_post_field( 'post_author', $post_id ); ?>
          <span class="meta-author">
            <a<?php echo _target_blank();?> href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID', $author_id ) ) ); ?>">
              <?php
                echo get_avatar( get_the_author_meta( 'email', $author_id ), '40', null, get_the_author_meta( 'display_name', $author_id ) );
                echo get_the_author_meta( 'display_name', $author_id );
              ?>
            </a>
          </span>
<i class="title-iconse float-rightse"></i>

3、并将<i class=”title-iconse float-rightse”></i>内容整体复制进去放在最后面的</span>后面并保存

4、把css添加到DIY

/*列表美化角标*/
.title-iconse {
    height: 8px;
    width: 8px;
    background: #fd4b4b;
    padding: 0px;
    display: inline-block;
    border-radius: 50%;
    line-height: 0;
    position: relative;
    -webkit-transition: ease-in-out 0.25s;
    transition: ease-in-out 0.25s;
    margin: 0 10px;
}
.float-rightse {
    float: right;
	position: absolute;
    right: 30px;
}
.title-iconse:before {
    content: " ";
    height: 8px;
    width: 8px;
    background: #ffd12a;
    border-radius: 50%;
    margin-left: 15px;
    position: absolute;
    display: block;
    -webkit-transition: ease-in-out 0.25s;
    transition: ease-in-out 0.25s;
}
.title-iconse:after {
    content: " ";
    height: 8px;
    width: 8px;
    background: #79f52a;
    border-radius: 50%;
    margin-left: 30px;
    position: absolute;
    display: block;
    -webkit-transition: ease-in-out 0.25s;
    transition: ease-in-out 0.25s;
}
/*列表美化角标*/