RiPro-V2主题右侧导航美化代码

也想出现在这里？点击联系我~

RiPro-V2右侧导航我感觉太丑了，我更喜欢rizhuti-v2的样式，简简洁干净，样式也好看，所以我们把RiPro-V2右侧导航替换一下，下面先看看效果图。

注意:本教程是在原主题上修改，后续将整合到子主题，可自由升级！

RiPro-V2美化效果:

RiPro-V2主题美化教程:

1.打开“/wp-content/themes/ripro-v2/template-parts/global/footer-rollbar.php”将代码全部替换为如下代码

<div class="rollbar">
	<?php $rollbar = _cao('site_footer_rollbar');
	if ( !empty($rollbar) && is_array($rollbar) ) : ?>
	<ul class="actions">
	<?php foreach ($rollbar as $item) : ?>
		<li>
			<?php $target = (empty($item['is_blank'])) ? '' : ' target="_blank"' ;?>
			<a<?php echo $target;?> href="<?php echo $item['href'];?>" rel="external nofollow"  rel="nofollow noopener noreferrer"><i class="<?php echo $item['icon'];?>"></i><span><?php echo $item['title'];?></span></a>
		</li>
		<?php endforeach;?>
	</ul>
	<?php endif;?>
	<div class="rollbar-item back-to-top" title="返回顶部">
		<i class="fas fa-chevron-up"></i>
	</div>
</div>

注意：返回顶部失效请将[class="rollbar-item"]改为[class="rollbar-item back-to-top"]

2.打开“wp-content/themes/ripro-v2/assets/css/app.css”搜索

/*rollbar*/

3.将上述代码中的rollbar样式段全部删除（RiPro-V2 V3.5大约在6509-6631行，其他版本可能位置有所变化），再添加如下的css样式

/*rollbar*/
.rollbar {
    position: fixed;
    right: 20px;
    bottom: 10%;
    z-index: 99;
    display: none;
    width: 45px;
}

.rollbar .actions {
    position: relative;
    width: 100%;
    -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
    box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
    border-radius: 5px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    line-height: 45px;
}

.rollbar .actions li {
    position: relative;
    background: #fff;
}

.rollbar .actions li+li {
    border-top: solid #eee 1px;
}

.rollbar .actions li:hover {
    opacity: .8;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

.rollbar .actions li>a {
    display: block;
    padding: 8px 0;
    cursor: pointer;
    position: relative;
    border: 0;
    opacity: 1;
    width: 100%;
    text-align: center;
    height: auto;
}

.rollbar .actions li>a .spinner-grow {
    position: absolute;
    left: 5px;
    top: -15px;
    width: 8px;
    height: 8px;
    background-color: #4CAF50;
}

.rollbar .actions li a.burger:before, .rollbar .actions li a.burger:after {
    display: none;
}

.rollbar .actions li>a>i {
    font-size: 18px;
    background-image: -o-linear-gradient(top, #343a40 0, #343a40 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #343a40), to(#343a40));
    background-image: linear-gradient(to bottom, #fc4065 0, #fc4065 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: block;
    margin-bottom: 10px;
}

.rollbar .actions li>a>span {
    font-size: 12px;
    color: #555;
    padding: 0 4px;
    letter-spacing: 2px;
    display: block;
    text-align: center;
    line-height: 1.2;
    position: relative;
}

.rollbar .rollbar-item {
    position: relative;
    margin-top: 20px;
    border-radius: 5px;
    background-color: #ffffff;
    color: #555;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -webkit-box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
    box-shadow: 0 0 10px rgb(0 0 0 / 0.1);
    line-height: 45px;
    height: 45px;
}

.rollbar .rollbar-item i {
    line-height: 45px;
}

.rollbar .rollbar-item:hover {
    opacity: .8;
    -webkit-transition: all .2s;
    -o-transition: all .2s;
    transition: all .2s;
}

@media (max-width: 767px) {
    .rollbar {
        display: none!important;
        opacity: 0;
    }
}

@-webkit-keyframes flashing {
    0% {
        opacity: 1
    }

    45% {
        opacity: 0
    }

    90% {
        opacity: 1
    }
}

@keyframes flashing {
    0% {
        opacity: 1
    }

    45% {
        opacity: 0
    }

    90% {
        opacity: 1
    }
}

4.打开“wp-content/themes/ripro-v2/inc/options/admin-options.php”搜索“底部设置”（RiPro-V2 V3.5大约在2518-2579行，其他版本可能位置有所变化） 替换为如下代码:

        // rollbar
        array(
            'id'      => 'site_footer_rollbar',
            'type'    => 'group',
            'title'   => '全站右下角菜单（返回顶部+）',
            'max'     => '10',
            'fields'  => array(
                array(
                    'id'      => 'title',
                    'type'    => 'text',
                    'title'   => '菜单名称',
                    'default' => '首页',
                ),
                array(
                    'id'    => 'icon',
                    'type'  => 'icon',
                    'title' => '图标',
                ),
                array(
                    'id'      => 'is_blank',
                    'type'    => 'switcher',
                    'title'   => '新窗口打开',
                    'default' => true,
                ),
                array(
                    'id'      => 'href',
                    'type'    => 'text',
                    'title'   => '链接地址',
                    'desc'    => '比如用户中心，填写' . home_url('/user'),
                    'default' => home_url(),
                ),

            ),
            'default' => array(
                array(
                    'title' => '客服',
                    'icon'  => 'fab fa-qq',
                    'href'  => 'http://wpa.qq.com/msgrd?v=3&uin=963020001&site=qq&menu=yes',
                ),
                array(
                    'title' => '群聊',
                    'icon'  => 'far fa-user-graduate',
                    'href'  => 'https://jq.qq.com/?_wv=1027&k=uFqQjYHi',
                ),
                array(
                    'title' => '会员',
                    'icon'  => 'fa fa-diamond',
                    'href'  => home_url('/user?action=vip'),
                ),
                array(
                    'title' => '我的',
                    'icon'  => 'far fa-user',
                    'href'  => home_url('/user'),
                ),
            ),
        ),

5.操作完成后去“底部设置”→“重置选区”（注意备份资料），完成后重新设置一下，到前台刷新即可看到效果！如果没有更新，请清除浏览器缓存或CDN缓存。