最新公告
  • 欢迎您光临旗鱼小站,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • RiPro 主题美化教程+源码 (第五期 完结)

    本期内容:文章页标题美化,添加文章页“常见问题FAQ”

     

    效果展示

     

    1576477942-b39006c63dcd2e5

     

    教程一、文章页标题美化

     

    美化内容:1.添加作者信息(头像和作者名);2.添加发布日期;3.添加浏览次数

    第一步:主题目录(ripro)-> parts -> single-header.php 整体替换为如下内容

    <div class="cao_entry_header">
            <div class="sjblog-avatar"><?php echo get_avatar( get_the_author_meta( 'email' ), '96', null, get_the_author_meta( 'display_name' ) ); ?></div>       
            <div class="sjblog-tgroup">
       
    <?php edit_post_link('[编辑]'); ?>                                            
      <?php if ( ! is_page() ) {
        cao_entry_header( array( 'tag' => 'h1') );
      } else {
        cao_entry_header( array( 'tag' => 'h1', 'link' => false ) );
      }
      get_template_part( 'parts/entry-subheading' );?>
      <header class="entry-header">   
      <span class="sjblog-name">作者 :   
                      <a <?php echo _target_blank(); ?> href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' )) ); ?>"><?php the_author(); ?></a>
                      <span class="sjblog-time"> 发布时间:<i class="fa fa-clock-o"></i> <?php echo the_time('Y-m-j'); ?></span>
                      <span class="sjblog-views"><i class="fa fa-eye"></i><?php echo _get_post_views();?> 人阅读 </span>
      </span>
      </div>
    </div>
    

     

    第二步:主题目录(ripro)-> assets -> css -> diy.css 添加如下内容
    /***文章标题美化***/
    .sjblog-avatar {width: 50px;float: left;}
    .sjblog-avatar img {float: left;width: 50px;height: 50px;border-radius: 50%;margin-right: 20px;}
    .sjblog-tgroup{padding-left: 66px;padding-bottom: 20px;border-bottom: 1px solid #f5f5f5;margin-bottom: 20px;}
    .sjblog-tgroup .entry-header{ margin-bottom: 0 !important;}
    .article-content .entry-header .entry-title{padding-bottom:0;margin-bottom: 0 !important;border-bottom: none;}
    .sjblog-name {padding-top:5px;display: block;font-size: 13px;color: #cdcdcd;}
    .sjblog-name a{color: #cdcdcd;}
    .sjblog-name a:hover{color: #2756fc;}
    .sjblog-time {margin-left: 20px;}
    

     

    教程二、文章页添加“常见问题FAQ”

     

    第一步:主题目录(ripro)-> inc -> codestar-framework -> options -> options.theme.php 搜索“share_poster_img_qrcode”,在第一个“),”后添加如下代码

     

    [PHP] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    array(
                'id'         => 'is_show_faq',
                'type'       => 'switcher',
                'title'      => '是否显示常见问题FAQ',
                'label'      => '文章底部显示常见问题FAQ',
                'default'    => true,
            ),
            
            array(
                'id'     => 'faq_help_field',
                'type'   => 'group',
                'title'  => '常见问题FAQ相关设置',
                'max'         => '6',
                'fields' => array(
                    array(
                        'id'         => '_matter',
                        'type'       => 'text',
                                'title'      => '常见问题',
                                'attributes' => array(
                                    'style' => 'width: 100%;',
                                ),
                        ),
                    array(
                        'id'      => '_answer',
                        'type'    => 'textarea',
                        'title'   => '问题答案',
                    ),
                ),
                'dependency' => array('is_show_faq', '==', 'true'),
                'default' => array(
                        array(
                        '_matter' =>'免费下载或者VIP会员专享资源能否直接商用?',
                        '_answer' => '本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。',
                        ),
                ),
            ),

     

    第二步:主题目录(ripro)-> parts ->author-box.php,在“<div class=”article-footer”>”前添加如下内容
    <?php if (_cao('is_show_faq')) : ?>
    <div id="help" class="m main">
      <h2 class="mt mt20">常见问题FAQ</h2>
      <div class="mb">
        <?php $show_faq = _cao('faq_help_field');if (!empty($show_faq)) {
          foreach ($show_faq as $key => $text) {
            echo '<dl><dt><i></i>'.$text['_matter'].'</dt>';
            echo '<dd style="display: none;"><i></i>'.$text['_answer'].'</dd></dl>';
          }
        } ?>
      </div>
    </div>
    <?php endif; ?>
    

     

    第三步:主题目录(ripro)-> footer.php,在“<?php if (_cao(‘web_js’)) : ?>” 前添加如下内容

     

    [PHP] 纯文本查看 复制代码
    01
    02
    03
    04
    05
    06
    07
    08
    09
    10
    11
    <?php if (_cao('is_show_faq')) : ?>       
    <script>
      var ndt = $("#help dt");
      var ndd = $("#help dd");
      ndd.eq(0).show();
      ndt.click(function () {
        ndd.hide();
        $(this).next().show();
      });
    </script>
    <?php endif; ?>

     

    第四步:主题目录(ripro)-> assets -> css -> diy.css 添加如下内容

     

    [CSS] 纯文本查看 复制代码
    1
    2
    3
    4
    5
    6
    7
    8
    9
    /***常见问题FAQ***/
    #help h2,#down h2{ font-size:18px; line-height:54px; color:#323232; border-bottom:2px solid #4f8af1; width:150px; font-weight:normal;}
    #help dt{cursor:pointer; color:#353535; font-size:18px;margin-bottom:20px; }
    #help dd{ display:none;color:#767676; font-size:14px; padding:10px; border-radius:5px; background:#f0f0f0; margin-bottom:20px;margin-bottom:20px; line-height:25px; letter-spacing:1px;}
    #help dt,#help dd{ margin-left:40px; position:relative;}
    #help dt i,#help dd i{background:url(../images/background/ico.png) no-repeat; width:30px; height:30px; display:block; position:absolute; left:-40px; top:0px;}
    #help dd i{background-position: 0 -35px;}
    .mt20{margin-top: 20px;margin-bottom: 15px;}
    .ripro-dark #help h2, #down h2,.ripro-dark #help dt{color: #eee;}

     

    第五步:主题目录(ripro)-> assets -> images -> background 目录放入如下图片

     

    1576477943-65f034c0f853471

     

    至此RiPro美化教程到此结束,感谢大家

     

    旗鱼小站.我们不生产资源,我们只是大资源的搬运工
    旗鱼小站 » RiPro 主题美化教程+源码 (第五期 完结)

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。

    发表评论

    售后服务:

    • 售后服务范围 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: 1262500034@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!

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

    联系作者
    • 1039会员总数(位)
    • 2023资源总数(个)
    • 17本周发布(个)
    • 6 今日发布(个)
    • 208稳定运行(天)

    提供最优质的资源集合

    免费资源 精品源码