RiPro主题美化教程+源码(一期)

本期内容:添加底部波浪效果,友情链接添加友情链接自助申请界面,添加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 添加如下样式

教程二、添加友情链接效果

第一步:主题目录打开 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 添加如下样式

教程三、添加友情链接自助申请界面

第一步:主题目录打开 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>&#10004; 申请前请先加上本站链接;</p>
                                        <p>&#10004; 稳定更新,每月至少发布1篇文章,最好是建站半年以上;</p>
                                        <p>&#10004; 禁止一切产品营销、广告联盟类型的网站,优先通过同类原创、内容相近的网站;</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 添加如下样式

教程四、添加资源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 添加如下样式

第三步:主题目录 -> 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 添加如下样式

给TA买糖
共{{data.count}}人
人已赞赏
wordpress教程

QQ邮箱WordPress SMTP配置教程

2020-2-2 22:59:24

wordpress

RiPro 主题美化教程+源码 (二期)

2020-2-3 17:06:30

⚠️
Golurending上的部份代码及教程来源于互联网,仅供网友学习交流,未经Golurending作者或上传书面授权,请勿作他用。
若您的权利被侵害,请联系站长 邮箱codesns#163.com(#-@) 或 点击右侧 私信:管理员 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索