RiPro4.9 主题美化教程_添加底部波浪,添加友情链接自助申请,添加VIP角标,修改右侧悬浮导航
效果演示(一)

效果演示(一)

教程一、添加底部波浪效果
第一步:主题目录 -> footer.php 在“</footer>”后添加如下代码
<div class = "waveHorizontals mobile-hide" > <div id= "waveHorizontal1" class = "waveHorizontal" ></div> <div id= "waveHorizontal2" class = "waveHorizontal" ></div> <div id= "waveHorizontal3" class = "waveHorizontal" ></div> </div> |
第二步:主题目录 -> assets -> css -> diy.css 添加如下样式
.waveHorizontals { width : 100% ; height : 20px ; position : relative ; overflow : hidden ; z-index : 1 ; background-color : #fff !important } .ripro-dark .waveHorizontals { width : 100% ; height : 20px ; position : relative ; overflow : hidden ; z-index : 1 ; background-color : #181616 !important } #waveHorizontal 1 { -webkit-mask: url (../images/augsc_ 01 .svg); mask: url (../images/augsc_ 01 .svg); animation-delay: -2 s; animation-duration: 12 s; } #waveHorizontal 1 , #waveHorizontal 2 , #waveHorizontal 3 { background-color : #f9b015 !important ; } .ripro-dark #waveHorizontal 1 { background-color : #f1f1f1 !important ; } .ripro-dark #waveHorizontal 2 { background-color : #f1f1f1 !important ; } .ripro-dark #waveHorizontal 3 { background-color : #f1f1f1 !important ; } .waveHorizontal { width : 200% ; height : 100% ; display : block ; position : absolute ; left : 0 ; bottom : 0 ; background-repeat : repeat-x ; background-position : left bottom ; background- size : 350px 100% ; transform-origin: 0 100% 0 ; animation-name: move ; animation-timing-function: linear; animation-iteration-count: infinite; } @keyframes move { 0% {transform:translate( -175px , 0px ) scale( 1 , 1 )} 50% {transform:translate( -87px , 0px ) scale( 1 , 0.5 )} 100% {transform:translate( 0px , 0px ) scale( 1 , 1 )}} #waveHorizontal 2 { -webkit-mask: url (../images/augsc_ 02 .svg); mask: url (../images/augsc_ 02 .svg); animation-delay: -2 s; animation-duration: 5 s; } #waveHorizontal 3 { -webkit-mask: url (../images/augsc_ 03 .svg); mask: url (../images/augsc_ 03 .svg); animation-delay: -1 s; animation-duration: 3 s; } |
教程二、添加友情链接效果
第一步:主题目录打开 functions.php ,在最后添加如下代码
/*开启wordpress友情链接管理*/ add_filter( 'pre_option_link_manager_enabled' , '__return_true' ); |
第二步:主题目录 -> footer.php ,在“<?php if ( _cao( ‘cao_copyright_text’, ” ) != ” ) : ?>”前添加如下代码
<div class = "codesign-dw" > <div class = "col-xs-12 friend-links" > <ul class = "codesign-fl" > <li class = "codesign-fl-title" >友情链接:</li> <?php wp_list_bookmarks( 'title_li=&categorize=0&orderby=name&show_images=0' ); ?> </ul> </div> </div> |
第三步:主题目录 -> assets -> css -> diy.css 添加如下样式
.col-xs -12 .friend-links { padding : 14px ; } .codesign-fl { display : flex; list-style : none ; padding : 0 ; margin : 0 ; font-size : 13px ; } .codesign-fl li{ margin-left : 10px ; } .codesign-fl a{ color : #949494 ; } .codesign-fl a:hover{ color : #058ff9 ; } .codesign-dw{ border : 1px dashed #ccc ; background-color : #f7f8fa ; text-shadow : #fff 0px 1px 0px ; } .ripro-dark .codesign-dw{ border : 1px dashed #444444 87; background-color : #2d2d2d ; text-shadow : #000 0px 1px 0px ; } |
教程三、添加友情链接自助申请界面
第一步:主题目录打开 functions.php ,搜索“pages/tags.php”(跟着教程走的童鞋请搜索“pages/vip.php”),换行添加如下代码
'pages/links.php' => array ( '自助友链' , 'links' ), |
解释:默认自动添加页面,页面标题为“自助友链”,页面地址为“links”
第二步:主题目录 -> pages 目录下添加“links.php”,并在“links.php”中添加如下代码
<?php /** * Template name: 自助友链 * Description: A Friendship link page */ get_header(); ?> <?php if ( isset( $_POST [ 'blink_form' ]) && $_POST [ 'blink_form' ] == 'send' ){ global $wpdb ; // 表单变量初始化 $link_name = isset( $_POST [ 'blink_name' ] ) ? trim(htmlspecialchars( $_POST [ 'blink_name' ], ENT_QUOTES)) : '' ; $link_url = isset( $_POST [ 'blink_url' ] ) ? trim(htmlspecialchars( $_POST [ 'blink_url' ], ENT_QUOTES)) : '' ; $link_description = isset( $_POST [ 'blink_lianxi' ] ) ? trim(htmlspecialchars( $_POST [ 'blink_lianxi' ], ENT_QUOTES)) : '' ; // 联系方式 $link_target = "_blank" ; $link_visible = "N" ; // 表示链接默认不可见 // 表单项数据验证 if ( empty ( $link_name ) || mb_strlen( $link_name ) > 20 ){ wp_die( '连接名称必须填写,且长度不得超过30字' ); } if ( empty ( $link_url ) || strlen ( $link_url ) > 60 || !preg_match( "/^(https?:\/\/)?(((www\.)?[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)?\.([a-zA-Z]+))|(([0-1]?[0-9]?[0-9]|2[0-5][0-5])\.([0-1]?[0-9]?[0-9]|2[0-5][0-5])\.([0-1]?[0-9]?[0-9]|2[0-5][0-5])\.([0-1]?[0-9]?[0-9]|2[0-5][0-5]))(\:\d{0,4})?)(\/[\w- .\/?%&=]*)?$/i" , $link_url )) { //验证url wp_die( '链接地址必须填写' ); } $sql_link = $wpdb ->insert( $wpdb ->links, array ( 'link_name' => '【待审核】--- ' . $link_name , 'link_url' => $link_url , 'link_target' => $link_target , 'link_description' => $link_description , 'link_visible' => $link_visible ) ); $result = $wpdb ->get_results( $sql_link ); wp_die( '亲,友情链接提交成功,【等待站长审核中】!<a href="' . $_SERVER ["REQUEST_URI "].'" >点此返回</a>', '提交成功' ); } get_header(); ?> <div id= "main" > <div class = "container" > <div class = "card-header bg-transparent" > <h3 class = "mb-0" style= "text-align: center;" >申请友情链接</h3> </div> <div class = "srcdict-yqlj" > <div class = "col-lg-6 col-12" > <!--表单开始--> <form method= "post" class = "mt20" action= "<?php echo $_SERVER[" REQUEST_URI "]; ?>" > <div class = "form-group" > <label for = "blink_name" ><font color= "red" >*</font> 链接名称:</label> <input type= "text" size= "40" value= "" class = "form-control" id= "blink_name" placeholder= "请输入链接名称" name= "blink_name" > </div> <div class = "form-group" > <label for = "blink_url" ><font color= "red" >*</font> 链接地址:</label> <input type= "text" size= "40" value= "" class = "form-control" id= "blink_url" placeholder= "请输入链接地址" name= "blink_url" > </div> <div class = "form-group" > <label for = "blink_lianxi" >联系QQ:</label> <input type= "text" size= "40" value= "" class = "form-control" id= "blink_lianxi" placeholder= "请输入联系QQ" name= "blink_lianxi" > </div> <div> <input type= "hidden" value= "send" name= "blink_form" > <button type= "submit" class = "btn btn-primary" >提交申请</button> <button type= "reset" class = "btn btn-default" >重填</button> (提示:带有<font color= "red" >*</font>,表示必填项~) </div> </form> <!--表单结束--> </div> <div class = "col-lg-6 col-12" > <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article class = "col-md-10 mt20 col-md-offset-2 view clearfix" > <?php if (function_exists( 'cmp_breadcrumbs' )) cmp_breadcrumbs();?> <p class = "mt20" >欢迎同类站点与本站交换友情链接,要求有权重有排名,收录良好的,内容健康,内容相关更佳。</p> <!--根据自身修改--> <p class = "mt20" ><strong>友链自助申请须知</strong></p> <p>✔ 申请前请先加上本站链接;</p> <p>✔ 稳定更新,每月至少发布1篇文章,最好是建站半年以上;</p> <p>✔ 禁止一切产品营销、广告联盟类型的网站,优先通过同类原创、内容相近的网站;</p> <p class = "mt20" ><strong>本站链接信息</strong></p> <?php echo sprintf( '<p>名称: %s</p>' ,esc_attr(get_bloginfo( 'name' ))); ?></p> <?php echo sprintf( '<p>网址: %s</p>' ,esc_attr(get_bloginfo( 'url' ))); ?></p> </article> </div> </div> </div> </div> <?php endwhile ; else : ?> <?php endif ; ?> </div> <?php get_footer(); ?> |
第三步:主题目录 -> assets -> css -> diy.css 添加如下样式
/*自助申请友情链接*/ @media screen and ( max-width : 750px ) { .container .row .card { width : 100% } } .container .row .pricing-deco .deco-layer { -webkit-transition: -webkit-transform 0.5 s; transition: transform 0.5 s; } .container .row .pricing-deco:hover .deco-layer- -1 { -webkit-transform: translate 3 d( 15px , 0 , 0 ); transform: translate 3 d( 15px , 0 , 0 ); } .container .row .pricing-deco:hover .deco-layer- -2 { -webkit-transform: translate 3 d( -15px , 0 , 0 ); transform: translate 3 d( -15px , 0 , 0 ); } .srcdict-yqlj{ margin-left : -10px ; margin-right : -10px ; display : flex; background : #fff ; border : 1px solid rgba( 0 , 0 , 0 , 0.05 ); border-radius: 6px ; box-shadow: 0 4px 12px 0 rgba( 52 , 73 , 94 , 0.1 ); } .clearfix{ color : #fff ; background-color : #fc7c5f ; margin-top : 1 rem; padding : 1 rem 1.5 rem; border : 1px solid transparent ; border-radius: . 375 rem; max-width : 100% ; } .mt 20 { margin-top : 20px ; margin-bottom : 15px ; } .ripro-dark .article-copyright { background : #f0f0f0 ;; border : 1px dashed #232425 ; } .ripro-dark # help h 2 , #down h 2 ,.ripro-dark # help dt{ color : #eee ; } .card-header { padding : 1.25 rem 1.5 rem; font-size : 1.0625 rem; background-color : #fff ; } .card-header:first-child { border-radius: calc(. 375 rem - 1px ) calc(. 375 rem - 1px ) 0 0 ; } |
教程四、添加资源VIP角标
第一步:主题目录 -> inc -> theme-functions.php ,搜索“// 获取图片高度”,在“<div class=”entry-media”>”后添加如下代码
<?php if ((_get_post_shop_hide()) ||(_get_post_price()!=0)&& _cao( 'grid_is_price' ,true)){ echo '<i class="vwip30"></i>' ; } else { echo '<i class="vwip10"></i>' ; }?> |
第二步:主题目录 -> assets -> css -> diy.css 添加如下样式
.vwip30 { background-position: -40px 0 } .vwip10,.vwip30 { position: absolute; z-index: 10; border-radius: 5px 0 0 0 } .vwip10,.vwip30{ display: inline-block; background-image: url(../images/tuyiyi_vip4_1.png); background-size: auto 40px; vertical-align: middle; height: 40px; width: 40px; } .vvip10,.vwip10 { background-position: 0 0 } |
第三步:主题目录 -> assets -> images 放入如下图片

教程五、修改右侧悬浮导航
第一步:主题目录打开 footer.php ,修改如图所示内容
<!--右侧跟随导航开始--> <link rel= "stylesheet" href= "//at.alicdn.com/t/font_1444248_u240hsu9sns.css" > <div class = "float-box" > <ul class = "float-ul float-radius float-text" > <li> <?php if (_cao( 'is_qiandao' , '1' )) : ?> <div class = "author-qiandao" > <?php if (_cao_user_is_qiandao()) { echo '<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到"><i class="iconfont icon-Sign"></i><br>已签 </a>' ; } else { echo '<a class="click-qiandao srcdict_qd_1" href="javascript:void(0);" etap="to_top" title="签到"><i class="iconfont icon-Sign"></i><br>签到</a>' ; } ?> </div> <?php endif ; ?> </li> </ul> <ul class = "float-ul float-radius float-text" > <li> <a class = "qq float-border float-text" href= "javascript:void(0);" > <i class = "iconfont icon-qq" ></i><br>客服 <div class = "float-alert-box float-radius float-qq-box" style= "display: none;" > <h6>工作时间</h6> <p>工作日:9:00 - 18:00<br>节假日:9:00 - 18:00</p> <div class = "float-qq-btn float-radius" >点击咨询客服</div> </div> </a> </li> </ul> <ul class = "float-ul float-radius float-text" > <li> <a class = "fankui float-border float-text" href= "https://wpa.qq.com/msgrd?v=3&uin=<?php echo _cao('site_kefu_qq');?>&site=qq&menu=yes" target= "_Blank" ><i class = "iconfont icon-fankuijianyi" ></i><br>反馈</a> </li> <li> <a class = "float-border float-text" href= "javascript:void(0);" etap= "to_full" title=" 点击全屏"> <i class = "iconfont icon-quanping" ></i><br>全屏 </a> </li> <li> <a class = "float-border float-text tap-dark" href= "javascript:void(0);" etap="tap- dark " title=" 夜间模式"> <i class = "iconfont icon-ios-sunny" ></i><br>切换 </a> </li> </ul> <ul class = "float-ul float-radius float-text" > <li> <a class = "float-border float-text" href= "javascript:void(0);" etap= "to_top" title= "返回顶部" > <i class = "iconfont icon-top1" ></i><br> </a> </li> </ul> </div> <script> $( ".qq" ).hover( function () { $(this).children( ".float-qq-box" ).show() }, function () { $(this).children( ".float-qq-box" ).hide() }); $( ".weixin" ).hover( function () { $(this).children( ".float-weixin-box" ).show() }, function () { $(this).children( ".float-weixin-box" ).hide() }); </script> <!--右侧跟随导航结束--> |
第二步:主题目录 -> assets -> css -> diy.css 添加如下样式
/* 跟随开始 */ @media ( max-width : 767px ) { .search-form{ display : none } } .showscaidan:before { content : "\eaf1" ; } .shows { font-family : "show" !important ; font-size : 16px ; font-style : normal ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @font-face { font-family : "iconfont" ; src : url ( '//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161' ); /* IE9 */ src : url ( '//at.alicdn.com/t/font_1380870_o08dhovorbr.eot?t=1567357317161#iefix' ) format ( 'embedded-opentype' ), /* IE6-IE8 */ url ( '//at.alicdn.com/t/font_1380870_o08dhovorbr.woff2?t=1567357317161' ) format ( 'woff2' ), url ( '//at.alicdn.com/t/font_1380870_o08dhovorbr.woff?t=1567357317161' ) format ( 'woff' ), url ( '//at.alicdn.com/t/font_1380870_o08dhovorbr.ttf?t=1567357317161' ) format ( 'truetype' ), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url ( '//at.alicdn.com/t/font_1380870_o08dhovorbr.svg?t=1567357317161#iconfont' ) format ( 'svg' ); /* iOS 4.1- */ } .iconfont { font-family : "iconfont" !important ; font-size : 16px ; font-style : normal ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-QQqun:before { content : "\e600" ; } .icon-weixin:before { content : "\e7e5" ; } .icon-qqq:before { content : "\e623" ; } .icon-qqqun 2: before { content : "\e721" ; } .icon-qq:before { content : "\e607" ; } .icon-qqq 1: before { content : "\e601" ; } .icon-QQmian:before { content : "\e630" ; } .icon-fankui:before { content : "\e61e" ; } .icon-rijianmoshi:before { content : "\e626" ; } .icon-qqqun 1: before { content : "\e679" ; } .icon-quanping 2: before { content : "\e6e2" ; } .icon-qqqun:before { content : "\e603" ; } .icon-dingbu:before { content : "\e643" ; } .icon-gongzhonghao:before { content : "\e618" ; } .icon-VIPx:before { content : "\e628" ; } .icon-quanping:before { content : "\e682" ; } .icon-VIP:before { content : "\e6b2" ; } .icon-quanping 1: before { content : "\e887" ; } .icon-yewan:before { content : "\e669" ; } .icon-huabanfuben-copy:before { content : "\e6b5" ; } .icon-Fill:before { content : "\e6bd" ; } .iconfont { font-family : "iconfont" !important ; font-size : 16px ; font-style : normal ; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .float-radius{-moz-border-radius: 4px ;-webkit-border-radius: 4px ;border-radius: 4px ;} .float-text{ color : #f9b015 } /* 字体颜色 */ .ripro-dark a.float-text{ color : #f9b015 } /* 夜晚模式字体颜色 */ .float- icon { color : #f9b015 } /* 图标颜色 */ .float-hover{ color : #f9b015 } /* 鼠标掠过字体颜色 */ .flost-hover-bg{ background-color : #f9b015 } /* 鼠标掠过背景颜色 */ .float-border{ border-color : #ececec !important } /* 边框颜色 */ .float-box{ width : 68px ; /* 宽度 修改之后要修改float-alert-box里的right值,right值计算方式:此数值减去(5*2+2) */ padding : 5px ; /* 按钮框边缘留出像素 */ font-size : 14px ; /* 按钮字体大小 */ position : fixed ; right : 0 ; top : 75% ; z-index : 9997 ; margin-top : -303px ; /* 自身高度的一半 */ _position : absolute ; _top :expression(eval(document.documentElement.scrollTop+ 100 )); /* 兼容低版本IE */ } .float-ul,.float-ul li{ margin : 0 ; padding : 0 ;} .float-ul{ margin-top : 5px ; text-align : center ; line-height : 1.2 ; list-style : none ; background-color : #FFF ;box-shadow: 0 2px 5px #e6e6e6 ;} .float-ul .iconfont{ font-size : 22px ; line-height : 22px ;} .float-ul li a{ display : block ; width : 100% ; padding : 10px 0 ; line-height : 18px ;} .float-ul li a:hover{ background : linear-gradient( -125 deg, #f9b015 0% , #f7b832 100% );box-shadow: 0 8px 10px rgba( 32 , 160 , 255 ,. 3 ); color : #FFF ;} .float-ul li a.qq{-moz-border-top-left-radius: 4px ;-moz-border-top-right-radius: 4px ;border-top-left-radius: 4px ;border-top-right-radius: 4px ; position : relative ;} .float-ul li a.weixin{ position : relative ;} .float-ul li a.fankui{-moz-border-bottom-left-radius: 4px ;-moz-border-bottom-right-radius: 4px ;border-bottom-left-radius: 4px ;border-bottom-right-radius: 4px ;} .float-ul li a.fankui .iconfont{ font-size : 22px ; line-height : 22px ;} .float-alert-box{ width : 180px ; height : 185px ; background-color : #FFF ; border : 1px solid #ececec ; position : absolute ; right : 56px ; top : 0 ; z-index : 9998 ; display : none ;} .srcdict_qd_ 1: hover { background : #ffffff ; box-shadow: 0 8px 10px rgba( 32 , 160 , 255 ,. 3 ); color : #0295f9 ; } .srcdict_qd_ 1 { background : linear-gradient( -125 deg, #f9b015 0% , #f7b832 100% ); box-shadow: 0 8px 10px rgba( 32 , 160 , 255 ,. 3 ); color : #FFF ; } .float-qq-box{ padding : 20px 15px ;} .float-weixin-box{ padding : 15px ;} .float-weixin-box img{ margin : 0 auto ;} .float-weixin-box p{ font-weight : 600 ; color : #f9b015 ; margin-bottom : 5px ;} .float-alert-box h 6 { font-size : 20px ; color : #f9b015 ;} .float-alert-box p{ line-height : 24px ;} .float-ul li .float-qq-box{ color : #666 ;} .float-ul li .float-weixin-box{ color : #666 ; top : -61px ;} .float-qq-btn{ padding : 10px ; background-color : #f9b015 ; color : #FFF ;} @media screen and ( max-width : 639px ){.float-box{ display : none ;}} /* 跟随结束 */ |
教程转自52破解@死神的泪谁懂
免责声明:
本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。
侵删请致信站长
西楼网 » RiPro4.9 主题美化教程_添加底部波浪,添加友情链接自助申请,添加VIP角标,修改右侧悬浮导航
侵删请致信站长
西楼网 » RiPro4.9 主题美化教程_添加底部波浪,添加友情链接自助申请,添加VIP角标,修改右侧悬浮导航