本美化时ripro主题 首页轮播另外增加一个模块。 增加一个统计风格模块 可以直接在后台修改 与官方模块一样的,拖拽 修改 都可以在后台进行。
本美化不是那种 写死的代码,必须在代码里修改的那种,,,这个是加到后台的。。。 嗯哼
话不多说 上图
[wm_notice]下图是 新增加的幻灯片 命名为 幻灯片2 ,新增加的统计模块 命名为 统计模块-风格2 可以进行拖拽 移动位置 和官方模块一样一样的[/wm_notice]
[wm_notice]下图是 新增加的幻灯片 背景图和文字图替换 要展示的分类选择功能[/wm_notice]
[wm_notice]下图是 新增加的统计模块 第三个模块的文字和背景图修改功能[/wm_notice]
好了 本次美化的功能已经介绍完毕,接下来 上干货。。。 当然 不是免费的哈。 购买后 如果有问题 可以加群
[rihide]
添加新的幻灯片模块:
1. ripro – > inc -> codestar-framework -> options -> taxonomy.theme.php 第37行“ ),” 后面添加如下代码
array(
'id' => 'category_img',
'type' => 'upload',
'title' => '分类图片',
),
2. ripro – > inc -> codestar-framework -> options -> options.theme.php 文件,搜索“home_mode”在“会员开通引导”后换行添加如下代码
'slider2' => '幻灯片2',
3. ripro – > inc -> codestar-framework -> options -> options.theme.php 文件,搜索“// 搜索条”,在其上方添加如下代码
// 幻灯片2
array(
'id' => 'mode_slider2',
'type' => 'fieldset',
'title' => '幻灯片2',
'fields' => array(
array(
'id' => '_img',
'type' => 'upload',
'title' => '幻灯片',
'library' => 'image',
'placeholder' => 'http://',
'default' => get_stylesheet_directory_uri() . '/assets/images/pic.jpg',
),
array(
'id' => '_imgtext',
'type' => 'upload',
'title' => '幻灯片文字',
'library' => 'image',
'placeholder' => 'http://',
'default' => get_stylesheet_directory_uri() . '/assets/images/text.png',
),
array(
'id' => 'cat_id',
'type' => 'select',
'title' => '要展示的分类',
'placeholder' => '(分类下必须有文章)',
'chosen' => true,
'multiple' => true,
'options' => 'categories',
),
),
),
4. ripro – > parts -> home-mode 目录,新建“slider2.php”文件,并录入如下代码 (slider2.php代码 有问题 请点这里下载slider2.php文件 https://cdn.okmg.cn/cdn/slider2%20%281%29.zip)
<?php
$mode_slider2 = _cao('mode_slider2');
$slugs = ($mode_slider2['cat_id']) ? $mode_slider2['cat_id'] : array(1,1,1,1);
// Its same.
ob_start(); ?>
<div class="toptu">
<div class="item scroll">
<img class="scroll-image lazyloaded" src="<?php echo $mode_slider2['_img']; ?>" data-lazy-src="<?php echo $mode_slider2['_img']; ?>g" data-was-processed="true">
<img class="scroll-image lazyloaded" src="<?php echo $mode_slider2['_img']; ?>" data-lazy-src="<?php echo $mode_slider2['_img']; ?>" data-was-processed="true">
<div class="sc-1wssj0-17 hVBrzU">
<img src="<?php echo $mode_slider2['_imgtext']; ?>" data-lazy-src="<?php echo $mode_slider2['_imgtext']; ?>" class="lazyloaded" data-was-processed="true">
</div>
</div>
<?php if ($mode_slider2['cat_id'] != null):?>
<div class="cl static htkYRs">
<div class="container">
<ul class="flex">
<?php foreach ( $slugs as $cat_id ) : ?>
<li class="st_one">
<?php $category = get_category( $cat_id );
$args = array( 'cat' => $cat_id, 'posts_per_page' => 3 );
$category_posts = get_posts( $args );
$thumbnails = array();
$index = 0;
foreach ( $category_posts as $category_post ) :
$thumbnail_url = _get_post_thumbnail_url( $category_post);
if ($thumbnail_url) {
$thumbnails[] =$thumbnail_url;
}else{
$thumbnails[] = _the_theme_thumb();
}
$index++;
endforeach; ?>
<a target="_blank" href="<?php echo esc_url( get_category_link( $category->cat_ID ) ); ?>">
<img class="lazy card-main lazyloaded" alt="<?php echo esc_html( $category->cat_name ); ?>" src="<?php echo get_term_meta( $category->cat_ID, 'category_img', true ); ?>" data-lazy-src="<?php echo get_term_meta( $category->cat_ID, 'category_img', true ); ?>" data-was-processed="true">
<h5 class="active-card-title"><?php echo esc_html( $category->cat_name ); ?></h5>
</a>
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endif; ?>
</div>
5. ripro -> assets -> css-> diy.css 添加如下样式
.toptu{background-color:#fff;}
.ripro-dark .toptu{background-color:#1d1e1f;}
.item.scroll{left:0px;width:100%;height:420px;background-size:auto 100%;pointer-events:none;background-position:center center;background-repeat:no-repeat;transition:opacity 0.3s ease 0s;white-space:nowrap;overflow:hidden;position:relative;font-size:0;background:#000;word-wrap:break-word;box-sizing:border-box;outline:none;}
.item.scroll .scroll-image{position:relative;height:100%;transform:translateX(0px);animation:banner 40s linear infinite;opacity:0.5;border:0;-ms-interpolation-mode:bicubic;vertical-align:middle;}
.hVBrzU{position:absolute;top:70px;left:0px;right:0px;text-align:center;font-size:16px;white-space:normal;width:100%;margin:auto;}
.static{position:static;margin-top:-76px;padding-left:16px;padding-right:16px;margin-left:auto;margin-right:auto;}
.static .flex{padding:0;margin:0;display:flex;}
.static li.st_one{flex:1;margin-right:10px;border-radius:6px;overflow:hidden;position:relative;box-shadow:0 2px 5px rgba(0,0,0,.2);list-style:none;transition:all .3s ease-out;}
.static li.st_one:hover{transform:translateY(5px);}
.static .st_one .card-main{width:100%;}
.static .active-card-title{position:absolute;bottom:0;color:#fff;background:-webkit-gradient(linear,left bottom,left top,color-stop(0,rgba(0,0,0,.7)),to(transparent));width:100%;padding:12px 20px;font-size:16px;margin:0;}
@media screen and (max-width:900px){.item.scroll{height:200px;margin-top:-54px;}}
.sc-1wssj0-17 img{display:inline-block;}
@-webkit-keyframes banner{from{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}
@keyframes banner{from{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);}to{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);}}
.item img{display:inline-block;height:auto;max-width:100%;vertical-align:middle;}
.ripro-dark .post-grid{background-color:#232425;border:1px solid #232425;}
.post-grid .entry-media img{margin:0 auto;width:100%;border-radius:4px;}
.entry-media .placeholder{background-color:unset;}
6. 所需图片,请自行下载,放入 ripro -> assets -> images 目录下
https://www.okmg.cn/wp-content/themes/ripro/assets/images/pic.jpg
https://www.okmg.cn/wp-content/themes/ripro/assets/images/text.png
添加新的统计模块:
1. ripro – > inc -> codestar-framework -> options -> options.theme.php 文件,搜索 “home_mode”在“会员开通引导”前换行添加如下代码
'census2' => '统计模块-风格2',
2. ripro – > inc -> codestar-framework -> options -> options.theme.php 文件,搜索“// 网格文章展示”在其前换行添加如下代码
// 统计模块2
array(
'id' => 'mode_census2',
'type' => 'fieldset',
'title' => '统计模块-2',
'fields' => array(
array(
'id' => '_title',
'type' => 'text',
'title' => '模块标题',
'default' => 'VIP可免费下载全站资源',
),
array(
'id' => '_button',
'type' => 'text',
'title' => '按钮文字',
'default' => '立即了解详情',
),
array(
'id' => '_img',
'type' => 'upload',
'title' => '模块背景图',
'default' => get_stylesheet_directory_uri() . '/assets/images/background/census2.jpg',
),
),
),
3. ripro – > parts -> home-mode 目录,新建“census2.php”文件,并录入如下代码
<?php
$mode_census = _cao('mode_census2');
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
$week_post_num = $published_posts - get_week_post_count();
$today_post_num = $published_posts - WeeklyUpdate();
ob_start(); ?>
<div class="index-bottom-tip">
<div class="index-md-bg container">
<div class="index-bottom-box">
<div class="index-gradient-btn index-m3-box-btn">
<div class="index-m3-box">
<div class="index-m-box">
<div class="index-m-box-column">
<div><span class="index-new-num"><?php echo $week_post_num; ?></span></div>
<div>
<span class="index-new-j"><sup>+</sup><?php echo get_week_post_count(); ?></span>
<span class="index-new-wk">自上周以来</span>
</div>
</div>
<svg class="index-svg index-svg-v" tabindex="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 7.8" role="img" aria-label="Arrow right">
<path d="M25 3.2H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7H25c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7z"></path>
<path d="M24.4 4.7V.4c0-.4.3-.6.6-.3l1.2 1.1c.3.3.9.8 1.2 1.1l1.2 1.1c.3.3.3.8 0 1.1l-1.2 1.1c-.3.3-.9.8-1.2 1.1l-1.2.9c-.3.3-.6.2-.6-.3V4.7z"></path>
</svg>
</div>
<div class="index-m3-name">Update This Week </div>
</div>
</div>
</div>
<div class="index-bottom-box">
<div class="index-gradient-btn index-bottom-btn-bg">
<div class="index-m3-box">
<div class="index-m-box">
<div class="index-m-box-column">
<div><span class="index-new-num"><?php echo $today_post_num; ?></span></div>
<div>
<span class="index-new-j"><sup>+</sup><?php echo WeeklyUpdate(); ?></span>
<span class="index-new-wk">自昨天以来</span>
</div>
</div>
<svg class="index-svg index-svg-v" tabindex="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 7.8" role="img" aria-label="Arrow right">
<path d="M25 3.2H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7H25c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7z"></path>
<path d="M24.4 4.7V.4c0-.4.3-.6.6-.3l1.2 1.1c.3.3.9.8 1.2 1.1l1.2 1.1c.3.3.3.8 0 1.1l-1.2 1.1c-.3.3-.9.8-1.2 1.1l-1.2.9c-.3.3-.6.2-.6-.3V4.7z"></path>
</svg>
</div>
<div class="index-m3-name">Update Today</div>
</div>
</div>
</div>
<div class="index-bottom-box-new">
<div class="index-bottom-c-column">
<img class="index-bottom-c-pic" src="<?php%20echo%20$mode_census['_img'];%20?>" alt="">
<div class="index-bottom-c-box">
<h4 class="index-bottom-c-h4"><?php echo $mode_census['_title']; ?></h4>
<a class="index-bottom-c-red" href="/user?action=vip"><span><?php echo $mode_census['_button']; ?></span>
<svg class="index-svg index-bottom-c-btn" tabindex="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28.9 7.8" role="img" aria-label="Arrow right">
<path d="M25 3.2H.7c-.4 0-.7.3-.7.7 0 .4.3.7.7.7H25c.4 0 .7-.3.7-.7 0-.4-.3-.7-.7-.7z"></path>
<path d="M24.4 4.7V.4c0-.4.3-.6.6-.3l1.2 1.1c.3.3.9.8 1.2 1.1l1.2 1.1c.3.3.3.8 0 1.1l-1.2 1.1c-.3.3-.9.8-1.2 1.1l-1.2.9c-.3.3-.6.2-.6-.3V4.7z"></path>
</svg>
</a>
</div>
<a class="index-bottom-c-pay" href="/user?action=vip"></a>
</div>
</div>
</div>
</div>
4. 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;
return $postsNumber;
}
5. ripro -> assets -> css-> diy.css 添加如下样式
/**统计模块2**/
.index-bottom-tip {padding-top: 80px;background: #fff;}
.ripro-dark .index-bottom-tip {background: #1e1e1f;}
.index-gradient-btn:before {content: "";position: absolute;z-index: 0;border-radius: 5px;top: 1px;right: 1px;bottom: 1px;left: 1px;background-color: #fff;-webkit-transition: opacity .25s ease-in-out;transition: opacity .25s ease-in-out;opacity: 0;}
.index-m3-box {z-index: 1;text-align: left;font-weight: inherit;font-style: inherit;letter-spacing: 0;font-size: 12px;line-height: 18px;font-weight: 400;padding: 30px;-ms-flex-item-align: center;align-self: center;min-height: 130px;color: #fff;}
.index-gradient-btn {position: relative;border-radius: 6px;text-align: center;color: #282828;display: -webkit-box;display: -ms-flexbox;display: flex;}
.index-m-box {-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}
.index-m3-box, .index-m-box {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;display: -webkit-box;display: -ms-flexbox;display: flex;}
.index-m-box-column {display: -webkit-box;display: -ms-flexbox;display: flex;}
.index-new-num {font-weight: inherit;font-style: inherit;letter-spacing: 0;font-family: Montserrat,sans-serif;font-size: 42px;line-height: 40px;font-weight: 600;letter-spacing: -.015em;display: block;color: #fff;-webkit-transition: all .25s ease-in-out;transition: all .25s ease-in-out;margin-bottom: 5px;}
.index-new-j {font-weight: inherit;font-style: inherit;letter-spacing: 0;font-family: Montserrat,sans-serif;font-size: 16px;line-height: 24px;font-weight: 600;letter-spacing: .025em;letter-spacing: .075em;color: #00dcaf;display: block;margin: 0 0 -5px 5px;}
.index-new-wk {display: inline-block;opacity: .6;line-height: 1em;margin-left: 5px;color: #fff;}
.index-svg-v {font-size: .6em;margin-left: 5px;opacity: .6;}
.index-svg {fill: currentColor;height: 1em;stroke-width: 0;}
.index-m3-name {font-weight: inherit;font-style: inherit;letter-spacing: 0;font-family: Montserrat,sans-serif;font-size: 12px;line-height: 18px;font-weight: 600;letter-spacing: .075em;text-transform: uppercase;letter-spacing: .16em;line-height: .9em;opacity: .6;position: absolute;bottom: 30px;left: 30px;color: #fff;}
.index-bottom-c-h4 {font-weight: inherit;font-style: inherit;letter-spacing: 0;font-family: Montserrat,sans-serif;font-size: 14px;line-height: 20px;font-weight: 600;letter-spacing: .075em;text-transform: uppercase;letter-spacing: .16em;display: block;margin: 0;color: #fff;}
.index-bottom-tip, .index-bottom-tip * {box-sizing: inherit;}
.index-bottom-c-column{padding:30px;position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:stretch;-ms-flex-pack:stretch;justify-content:stretch;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;border-radius:6px;overflow:hidden;text-align:center}
.index-bottom-c-column:hover .index-bottom-c-pic{-webkit-transform:scale(1.02);transform:scale(1.02)}
@media (min-width:1350px){.index-bottom-c-column{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;text-align:left}}
.index-bottom-c-pic{position:absolute;top:0;left:0;min-width:100%;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.index-bottom-c-column img{max-width: initial;}
.index-bottom-c-box{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:space-evenly;-ms-flex-pack:space-evenly;justify-content:space-evenly;position:relative}
@media (min-width:1350px){.index-bottom-c-box{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}
.index-bottom-c-red{color:#eee}
.index-bottom-c-pay{position:absolute;top:0;right:0;bottom:0;left:0}
.index-bottom-column{margin:auto;padding-left:10px;padding-right:10px;width:95%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
@media (min-width:750px){.index-bottom-column{width:95%;max-width:95%;padding-left:5px;padding-right:5px;margin-left:auto;margin-right:auto}}
@media (min-width:1000px){.index-bottom-column{width:95%;max-width:95%;padding-left:0;padding-right:0;margin-left:auto;margin-right:auto}}
@media (min-width:1200px){.index-bottom-column{width:1440px;max-width:95%;margin-left:auto;margin-right:auto}}
.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0}
.index-bottom-box:last-child{margin-right:0}
@media (max-width:749px){.index-bottom-box:nth-child(2){display:none}}
@media (min-width:750px){.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:48.90511%;flex-basis:48.90511%;margin-right:2.18978%;display:block}.index-bottom-box:last-child{margin-right:0}}
@media (min-width:750px) and (max-width:999px){.index-bottom-box:nth-child(2):nth-child(n){margin-right:0}}
@media (min-width:1000px){.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:31.87331%;flex-basis:31.87331%;margin-right:2.18978%}.index-bottom-box:last-child{margin-right:0}}
@media (min-width:1350px){.index-bottom-box{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:23.35767%;flex-basis:23.35767%;margin-right:2.18978%}
.index-bottom-box:last-child{margin-right:0}}
.index-bottom-box-new{display:none}
@media (min-width:1000px){.index-bottom-box-new{-ms-flex-item-align:stretch;align-self:stretch;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:31.87331%;flex-basis:31.87331%;margin-right:2.18978%}.index-bottom-box-new:last-child{margin-right:0}}
@media (min-width:1350px){.index-bottom-box-new{-ms-flex-preferred-size:100%;flex-basis:100%;min-width:0;-ms-flex-preferred-size:48.90511%;flex-basis:48.90511%;margin-right:2.18978%}.index-bottom-box-new:last-child{margin-right:0}}
.index-bottom-tip:after{content:"";display:block;height:30px;}
.index-md-bg{margin-top:-50px;display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;-webkit-box-align: start;-ms-flex-align: start;align-items: flex-start;}
.index-bottom-c-btn{font-size: 10px; width: 30px; height: 8px; margin-left: 6px;}
.index-m3-box-btn {background: -webkit-linear-gradient(315deg,rgba(109,71,217,.92),rgba(249,61,102,.92));background: linear-gradient(135deg,rgba(109,71,217,.92),rgba(249,61,102,.92));}
.index-bottom-btn-bg {background: -webkit-linear-gradient(315deg,rgba(71,114,217,.92),rgba(0,220,175,.92));background: linear-gradient(135deg,rgba(71,114,217,.92),rgba(0,220,175,.92));}
/*88*/
sup {top: -0.5em;}
/*77*/
sub, sup {font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;}
/*105*/
svg:not(:root) {overflow: hidden;}
6. 附上所需图片,请自行下载,放入 ripro -> assets -> images 目录下(请重命名为census2.jpg)
https://www.okmg.cn/wp-content/themes/ripro/assets/images/background/census2.jpg
[/rihide]
评论(0)