您好!欢迎来到黑域吧资源网!本站资源24小时自动发货,请放心选购,一次付费,终身下载,售后请联系客服!

RiPro 主题美化教程(第三章)

作者 : 黑域吧 本文共6645个字,预计阅读时间需要17分钟 发布时间: 2020-02-10 共7.35K人阅读

本章教程:幻灯片美化,搜索框美化,添加统计模块,添加VIP角标,修改首页五列布局(可选)

效果展示:

幻灯片美化教程:

1. ripro – > parts -> home-mode -> slider.php 文件,找到如下代码

<div class="section pt-0 pb-0">
    <div class="module slider big diy owl <?php echo esc_attr( $mode_slider['autoplay'] ? ' autoplay' : '' ); ?>">
    <?php foreach ($mode_slider['diy_data'] as $key => $item) {
        echo '<article class="post lazyload visible" data-bg="'.esc_url( $item['_img'] ).'">';
          echo '<div class="container">';
          echo '<h2 class="slider-title">'.$item['_title'].'</h2>';
          echo '<h3 class="slider-desc">'.$item['_desc'].'</h3>';
          echo '<a'.( $item['_blank'] ? ' target="_blank"' : '' ).' class="u-permalink" href="'.esc_url( $item['_href'] ).'"></a>';
          echo '</div>';
        echo '</article>';
    }?>
    </div>
</div>

2. 将如上代码替换为

<div class="section">
 	<div class="container">
    	<div class="module slider big owl nav-white <?php echo esc_attr( $mode_slider['autoplay'] ? ' autoplay' : '' ); ?>">
      <?php foreach ($mode_slider['diy_data'] as $key => $item) {?>
        	<article class="post lazyload visible" data-bg="<?php echo esc_url( $item['_img'] );?>">
            <div class="container">
               <a target="_blank" class="u-permalink" rel="noopener noreferrer">"></a>
            </div>
        	</article>
      <?php } ?>
    	</div>
   </div>
</div>

3. ripro -> assets -> css-> diy.css 添加如下样式

.section {padding-top: 20px;}

搜索框美化教程:

1. ripro – > parts -> home-mode -> search.php 文件,找到如下代码

<div class="section pt-0 pb-0">
   <div class="row">
      <div class="home-filter--content lazyload" data-bg="<?php echo esc_url( @$home_search_mod['bgimg'] ); ?>">
         <div class="container">
            <h3 class="focusbox-title"><?php echo $title = ($home_search_mod['title']) ? $home_search_mod['title'] : '搜索本站精品资源' ;?></h3>
            <p class="focusbox-desc"><?php echo $desc = ($home_search_mod['desc']) ? $home_search_mod['desc'] : '本站所有资源均为高质量资源,各种姿势下载。' ;?></p>
             <form class="mb-0" method="get" autocomplete="off" action="<?php echo home_url(); ?>">
                 <div class="form-box search-properties">
                     <div class="row">
                         <div class="col-xs-12 col-sm-6 col-md-9">
                             <div class="form-group mb-0">
                                 <input type="text" class="home_search_input" name="s" placeholder="<?php echo $mode_search['tips'];?>">
                             </div>
                         </div>
                         <div class="col-xs-12 col-sm-6 col-md-3">
                             <input type="submit" value="搜索"  class="btn btn--block">
                         </div>
                     </div>
                     <div class="home-search-results"></div>
                 </div>
             </form>
         </div>
      </div>
   </div>
</div>

2. 将如上代码替换为

<div class="section bgcolor-fff search_section">
   <div class="container">
      <div class="row">
         <div class="home-filter--content">
            <form class="mb-0" method="get" autocomplete="off" action="<?php echo home_url(); ?>">
               <div class="form-box search-properties mb-0">
                   <div class="row">
                       <div class="col-xs-12 col-sm-6 col-md-9">
                           <div class="form-group mb-0">
                               <input type="text" class="home_search_input" name="s" placeholder="请输入关键词搜索。。。">
                               </div>
                           </div>
                       <div class="col-xs-12 col-sm-6 col-md-3">
                           <input type="submit" value="搜索"  class="button transparent home_search">
                       </div>
                   </div>
                   <div class="home-search-results"></div>
               </div>
            </form>
         </div>
      </div>
   </div>
</div>
.row,.navbar .menu-item-mega>.sub-menu{margin-left:-10px;margin-right:-10px;}
.home-filter--content:before{background-color:rgba(91,91,91,0);}
.home-filter--content {background: linear-gradient(to right, #f6f6f6, #f6f6f6, #f6f6f6);}
.ripro-dark .home-filter--content {background: linear-gradient(to right, #232425, #232425, #232425);}
.home-filter--content .form-box{margin-right:10%;margin-left:10%;}
.button,input[type="submit"],button[type="submit"],.navigation .nav-previous a,.navigation .nav-next a{width:100%;}

添加统计模块教程:

1. ripro – > parts -> home-mode 目录新建 census.php 文件,并添加如下代码

<?php
$count_posts = wp_count_posts();
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");
ob_start(); ?>
<div class="section text-center pb-0" style="padding-top:20px; height:75px;">
  <div class="container">
    <div class="alert alert-modern alert-dark">
      <div class="alert-content">
        <span class="type_icont_2"><i class="fa fa-bell-o"></i> 博主统计</span>
        <span class="description-17codesign">
          <p>&nbsp;&nbsp;资源总数:<?php echo $published_posts = $count_posts->publish;?>个&nbsp;&nbsp;&nbsp;๑&nbsp;&nbsp;&nbsp;注册用户:<?php echo $users; ?>位&nbsp;&nbsp;&nbsp;๑&nbsp;&nbsp;&nbsp;本周更新:<?php echo get_week_post_count(); ?>篇&nbsp;&nbsp;&nbsp;๑&nbsp;&nbsp;&nbsp;今日更新:<?php echo WeeklyUpdate();?>篇&nbsp;&nbsp;</p>
        </span>
      </div>
    </div>
  </div>
</div>

注:小编查看了网上美化者的效果,皆为修改“分类块展示-风格2”,若不喜欢添加为新模块,请直接查看如下修改教程

附“分类块展示-风格2”添加统计模块教程:1. ripro -> parts – home-mode -catbox2.php 在 “ob_start();”前添加如下代码

$count_posts = wp_count_posts();
$users = $wpdb->get_var("SELECT COUNT(ID) FROM $wpdb->users");

附“分类块展示-风格2”添加统计模块教程:2. ripro -> parts – home-mode -catbox2.php 在 “<div class=”section bgcolor-fff”>”前添加如下代码

<div class="section text-center pb-0" style="padding-top:20px; height:75px;">
  <div class="container">
    <div class="alert alert-modern alert-dark">
      <div class="alert-content">
        <span class="type_icont_2"><i class="fa fa-bell-o"></i> 博主统计</span>
        <span class="description-17codesign">
          <p>&nbsp;&nbsp;资源总数:<?php echo $published_posts = $count_posts->publish;?>个&nbsp;&nbsp;&nbsp;๑&nbsp;&nbsp;&nbsp;注册用户:<?php echo $users; ?>位&nbsp;&nbsp;&nbsp;๑&nbsp;&nbsp;&nbsp;本周更新:<?php echo get_week_post_count(); ?>篇&nbsp;&nbsp;&nbsp;๑&nbsp;&nbsp;&nbsp;今日更新:<?php echo WeeklyUpdate();?>篇&nbsp;&nbsp;</p>
        </span>
      </div>
    </div>
  </div>
</div>

2. ripro -> functions.php 文件,在最后添加如下代码

// 每周更新
function get_week_post_count(){
    $date_query = array(
        array(
            'after'=>'1 week ago'
        )
    );$args = array(
        'post_type' => 'post',
        'post_status'=>'publish',
        'date_query' => $date_query,
        'no_found_rows' => true,
        'suppress_filters' => true,
        'fields'=>'ids',
        'posts_per_page'=>-1
    );
    $query = new WP_Query( $args );
    return $query->post_count;
}
// 每周日新
function WeeklyUpdate() {
    $today = getdate();
    $query = new WP_Query( 'year=' . $today["year"] . '&monthnum=' . $today["mon"] . '&day=' . $today["mday"]);
    $postsNumber = $query->found_posts;
    echo $postsNumber;
}

3. ripro -> assets -> css-> diy.css 添加如下样式

.pb-0{background:#fff;padding:0;}
.alert-dark{background-color:#f0f4ff;color:#0e3686;}
.type_icont_2{background:linear-gradient(90deg,#ffc107,#ff7365,#ff82ea,#ffc107);background-size:1400% 300%;animation:mymove 10s ease infinite;-webkit-animation:mymove 10s ease infinite;-moz-animation:mymove 10s ease infinite;color:#fff;border:none;}
.description-17codesign{display:inline-block;font-size:12px;line-height:24px;color:#6b798e;}
@keyframes mymove{0%{background-position:0% 0%;}50%{background-position:50% 100%;}100%{background-position:100% 0%;}}

添加VIP角标教程:

1.  ripro -> inc -> theme-functions.php 文件,搜索“// 获取图片高度”,在“<div class=”entry-media”>”后面添加如下代码

暂无优惠

已有0人支付

提示:
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!邮箱:(332547532@qq.com)
2. 分享目的仅供大家学习和交流,请不要用于商业用途!QQ群: 10563080
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务 请大家谅解!
5. 如有链接无法下载、失效或广告,请点击右下方联系站长,可领回失去的金币,并额外有奖!
6. 如遇到加密压缩包,默认解压密码请在"下载框架提示方寻找",如遇到无法解压的请联系管理员!
黑域吧资源网 » RiPro 主题美化教程(第三章)

发表评论

售后服务:

  • 售后服务范围 1、商业模板使用范围内问题免费咨询
    2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
    3、单价超过200元的模板免费一次安装,需提供服务器信息。
    付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
    2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
    3、服务器环境配置(一般 ¥50-300)
    4、网站中毒处理(需额外付费,500元/次/质保三个月)
    售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
    免责声明 本站所提供的源码等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 332547532@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者
开通SVIP 享更多特权,建议使用 QQ 登录
喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡