【ripro美化】给ripro主题添加一个首页快讯公告栏模块 可随意调整位置

好多小伙伴问我有没有美化的教程,今天他来了

ripro是一个很好的主题,本站也是用的ripro搭建的

站长亲自二开了ripro的子主题,市面上也有很多美化,今天给你们放一个最新很火的美化版吧,好了不多说了下面放教程,嘻嘻 稍微意思意思5元人民币不多

忘了说一嘴了这个,美化包适用于6.x版本

教程开始:

1、找到/ripro/fuctions.php 在最后面添加以下代码:

//新建快讯功能 
add_action('init', 'my_custom_init');
function my_custom_init()
{ $labels = array( 
'name' => '快讯',
'singular_name' => '快讯', 
'add_new' => '发表快讯', 
'add_new_item' => '发表快讯',
'edit_item' => '编辑快讯', 
'new_item' => '新快讯',
'view_item' => '查看快讯',
'search_items' => '搜索快讯', 
'not_found' => '暂无快讯',
'not_found_in_trash' => '没有已遗弃的快讯',
'parent_item_colon' => '', 'menu_name' => '快讯' );
$args = array( 'labels' => $labels,
'public' => true, 
'publicly_queryable' => true,
'show_ui' => true,
'show_in_menu' => true, 
'exclude_from_search' =>true,
'query_var' => true, 
'rewrite' => true, 'capability_type' => 'post',
'has_archive' => true, 'hierarchical' => false, 
'menu_position' => null, 'supports' => array('editor','author','title', 'custom-fields') );
register_post_type('kuaixun',$args); 
}
//快讯功能固定链接
add_filter('post_type_link', 'custom_book_link', 1, 3);
function custom_book_link( $link, $post = 0 ){
    if ( $post->post_type == 'kuaixun' ){
        return home_url( 'kuaixun/' . $post->ID .'.html' );
    } else {
        return $link;
    }
}

add_action( 'init', 'custom_book_rewrites_init' );
function custom_book_rewrites_init(){
    add_rewrite_rule('kuaixun/([0-9]+)?.html$','index.php?post_type=kuaixun&p=$matches[1]','top' );
    add_rewrite_rule('kuaixun/([0-9]+)?.html/comment-page-([0-9]{1,})$','index.php?post_type=kuaixun&p=$matches[1]&cpage=$matches[2]','top');
}

// 每周更新的文章数量
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 get_today_post_count(){
	$date_query = array(
		array(
			'after'=>'1 day 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 copyright_year(){
    $now_year = date('Y');
    $open_date = _cao('site_open_date', $now_year);
    $open_year = substr($open_date, 0, 4);
    return $open_year . '-' . $now_year . '  ';
}

2、放入JS文件,找到/ripro/assets/js文件夹将附件内的sinabeta.js放进去。

下载链接放到百度网盘,亲购买后即可下载

3、引入js,找到/ripro/footer.php 搜索 在上面一行添加以下代码:

<script src="<?php echo get_template_directory_uri() ?>/assets/js/sinabeta.js"></script>

4、添加CSS,/ripro/assets/css/diy.css 添加以下代码:

/**快讯模块**/
.deanggwrap{width:100%;flex-wrap: wrap;display:flex;justify-content:center;align-items:center;}
.deangg {width:750px;line-height:30px;background:#eee;padding:10px 0;border-radius:30px;}
.ripro-dark .deangg{background: #1e1e1f;}
.ripro-dark .deanggc ul li a,.ripro-dark .deanggc ul li .notice,.ripro-dark .deanggc ul li .notice_time,.ripro-dark .deanchartdiv span,.ripro-dark .deanchartdiv em{color: #fff;}
.deanggc i {padding-top: 8px;display:block;float:left;font-size:14px;color:#f60;margin-left:15px;margin-right:6px;}
.announce-wrap {height:30px;overflow:hidden;}
.announce-wrap ul{padding-left: 0px;}
.deanggc ul li {font-size:14px;width:90%;display:block;clear:both;height:30px;}
.deanggc ul li a {color:#f60;}
.deanggc ul li a:hover {color:#f60;text-decoration: blink;}
.deanggc ul li .notice {margin-left: 1%;float: none;color: #f60;}
.deanggc ul li .notice_time {float:right;color:#999;font-size:12px;}
.deanchart {float:right;height:50px;width:330px;color:#999;margin-left: 20px;}
.deanchart ul{width:460px;list-style:none;margin:0;padding:0;word-wrap:break-word;}
.deanchart ul li {float:left;height:100%;margin-right:20px;font-size:14px;}
.deanchart ul li i {display:block;float:left;width:35px;height:35px;margin-top:8px;background:url(../images/ico.png) 0 0 no-repeat;background-position: 0 0;}
.deanchart ul li.deanchart2 i {background-position: -35px 0;}
.deanchart ul li.deanchart3 i {background-position: -70px 0;}
.deanchart ul li.deanchart4 i {background-position: -105px 0;}
.deanchartdiv {float:left;margin-left:8px;margin-top:6px;text-align:center;}
.deanchartdiv em {font-size:12px;color:#999;    font-style: inherit;}
.deanchartdiv span {font-size:12px;color:#999;}
.deanchartdiv a {font-size:12px;color:#999;}
.aligncenter{display:block;margin-left:auto;margin-right:auto;}
.aligncenter p.wp-caption-text{display:block;margin-left:auto;margin-right:auto;text-align:center;}

.pricing-title .iconfont {
    font-size: 22px;
    color: #089;
}
.center {
	text-align: center;
    box-sizing: border-box;
    max-width: 1440px;
    margin: 0 auto;
}
.section .cat-posts-wrapper{
	margin-top:20px;
}
.products-category .pricing-title {
    color: #000;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .51px;
    position: relative;
    line-height: 1;
}
.products-category .category-num {
    margin-left: 5px;
    padding: 1px 10px;
    background: #ff5780;
    border-radius: 8px;
    font-size: 14px;
    font-style: normal;
    color: #fff;
}
/**快讯模块**/

5、\ripro\parts\home-mode\ 新建空白文件并命名为:kuaixun-mokuai.php,添加以下代码:

<div class="section deanbox">
<div class="container">
<div class="deanggwrap">
		<div class="deangg comfff wow fadeInUp">
			<div class="deanggc"><i class="fa fa-volume-up"> 网站公告:</i>
				<div class="announce-wrap">
				
					<ul class="announce-list line" style="margin-top:0">
								
					<?php 

$args = array(
    
    'post_type'           => 'kuaixun',
     'post_status'         => 'publish',
     'showposts'           => '5',
);
$the_query = new WP_Query( $args );


?>

 
<?php if ( $the_query->have_posts() ) : ?>

    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
            
 <li class="notice_active_ch"><a href="<?php echo esc_url( get_permalink() ); ?>" target="_blank"><span class="notice"><?php the_title(); ?></span></a><span class="notice_time"><?php the_time('Y.n.j'); ?></span></li>
                                                  
                        
    <?php endwhile; ?>

 
    <?php wp_reset_postdata(); ?>
 
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>
										</ul>
										
				</div>
			</div>
			<div class="clear"></div>
		</div>
		<div class="deanchart">
			<ul>
				<div id="portal_block_396_content" class="dxb_bc">
				<li><i></i>
				<div class="deanchartdiv"><span>今日发布</span>
				<div class="clear"></div>
				<em id="num4"><?php echo get_today_post_count(); ?></em></div>
				<div class="clear"></div>
				</li>
				<li class="deanchart2"><i></i>
				<div class="deanchartdiv"><span>本周发布</span>
				<div class="clear"></div>
				<em id="num6"><?php echo get_week_post_count(); ?></em></div>
				<div class="clear"></div>
				</li>
				<li class="deanchart3"><i></i>
				<div class="deanchartdiv"><span>资源总数</span>
				<div class="clear"></div>
				<em id="num3"><?php echo  wp_count_posts()->publish;?></em></div>
				<div class="clear"></div>
				</li>
				</div>
				<!--[/diy]-->
				<div class="clear"></div>
				</ul>
			</div>
			<div class="clear"></div>
		</div>
		</div>
		</div>

6、找到 \ripro\inc\codestar-framework\options\options.theme.php 搜索’slider’ => ‘幻灯片’, 在下一行添加以下代码:

'kuaixun-mokuai' =>'快讯模块'

7、在主题根目录下新建一个/single-kuaixun.php 文件,放入以下代码:

<?php
	$sidebar = cao_sidebar();
	$column_classes = cao_column_classes( $sidebar );
	get_header();
?>

<div class="container">

	
	<div class="row">
		<div class="<?php echo esc_attr( $column_classes[0] ); ?>">
			<div class="content-area">
				<main class="site-main">
					<?php while ( have_posts() ) : the_post();
						get_template_part( 'parts/template-parts/content', 'single' );
					endwhile; ?>
				</main>
			</div>
		</div>
		<?php if ( $sidebar != 'none' ) : ?>
			<div class="<?php echo esc_attr( $column_classes[1] ); ?>">
				<?php get_sidebar(); ?>
			</div>
		<?php endif; ?>
	</div>
</div>
<?php
  get_template_part( 'parts/related-posts' );
?>

<?php get_footer(); ?>

8、到网站后台-主题设置-首页设置-首面布局,右上角有一个“重置当面分区” 千万不要手贱去点击重置全部,然后拖动快讯模块到你想要的位置保存就OK了。

好了今天的教程就到这里了以后多给大家更新教程,感谢大家的支持

版权须知:
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系微氪字节官方技术团队!admin@wkbyte.cn
2. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 本站不保证所提供下载的资源的准确性、安全性和完整性,源码仅供下载学习之用!
8. 如用于商业或者非法用途,与本站无关,一切后果请用户自负!
9. 如遇到加密压缩包,默认解压密码为"www.wkbyte.cn",如遇到无法解压的请联系管理员!

微氪字节 » 【ripro美化】给ripro主题添加一个首页快讯公告栏模块 可随意调整位置

发表评论

提供最优质的资源集合

立即查看 了解详情