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缓存。
还不错,资料挺全的,对于高二高三来说实用!可以借鉴学习。