柒比贰美化首页cms布局样式修改教程

一直有人问我首页怎么修改的,我惭愧的说是扒拉别人网站的。我看到有些网站还需要付费购买才行,我就在这里免费给大家分享一下吧,毕竟是很好扒的东西,喜欢本网站就收藏一下吧!

本次教程是将首页cms布局和小标题美化放一起了,代码直接全部放出!

效果图:

柒比贰美化首页cms布局样式修改教程

修改步骤:

  • 修改前现在后台将 PC端默认文章展现形式改成为 网格

必须要先学会引用阿里巴巴矢量图标,不然会错位,需要引用的代码引用了之后再进行后面的步骤,不然肯定错位,已经弄过的就算了,看下面教程地址

 

wordpress或网站中调用阿里巴巴矢量图标库引用图标教程

比如我的首页顶部菜单,文章分类菜单的彩色图标就是引用的字体图标。当然我是将字体图标下载下来引用然后修改css控制变色的,不算真正的彩色字体图标。下面我…

0172

 1、PHP代码修改

修改位置:主题目录index.php文件

具体位置看下图:

柒比贰美化首页cms布局样式修改教程

上图解释:

1、阿里巴巴矢量图标

2、分类标题

3、标题边上的小图标,注意 :是倒序的,自己到时候就知道了

4、“更多”链接

5、指定分类ID和调用数量。

将以下代码插入到index.php内,替换<main></main>内的所有代码,自己可以看一下代码的开头和结尾就知道了。

 <!--分类项目-->             <div class="syfl">        <section class="home_title"><section class="title"><h3><svg aria-hidden="true" class="icon"><use xlink:href="#icon-image"></use></svg>网站源码          <a class="index_fenlei " href="/category/wangzhanyuanma/jianzhanmuban"  target="_blank">建站模板</a>           <a class="index_fenlei " href="/category/wangzhanyuanma/wp2"  target="_blank">wp主题插件</a>               <a class="index_fenlei  " href="/category/wangzhanyuanma/yingshicms"  target="_blank">影视CMS</a>          <a class="index_fenlei" href="/category/wangzhanyuanma/weiqing"  target="_blank">微擎微赞</a>          <a class="index_fenlei index_fenlei1" href="/category/wangzhanyuanma/jingpinyuanma"  target="_blank">精品源码</a>                             <div class="fwq_fenlei_title"></div>          </h3></section> <section style="text-align: right; background-color: rgb(255, 255, 255); padding-left: 20px;"><a href="/category/wangzhanyuanma" title="查看更多" target="_blank" style="top: 2px; position: relative; color: rgb(51, 51, 51); font-size: 14px; font-weight: 300;">更多<i class="iconfont zrz-icon-font-more"></i></a></section></section>  	<?php  	if ( have_posts() ) :  		$args = 'cat=315&posts_per_page=8'; //指定文章和数量  		query_posts( $args );   		echo '<div ref="postList" class="'.(zrz_get_theme_style() === 'pinterest' ? 'grid-bor' : '').'">';  		/* Start the Loop */  		while ( have_posts() ) : the_post();  			get_template_part( 'formats/content');  		endwhile;  		echo '</div>';  	else :  		get_template_part( 'template-parts/content', 'none' );  	endif; wp_reset_query();?>  	</main><!-- #main -->

 2、css修改

将一下代码放进柒比贰子主题style.css里面,或者主题目录里面的style.css都可以。

/*cms样式布局*/    @media (min-width: 992px) {      .post-list.content-card .cart-list {          -webkit-transition: all 0.3s ease;          -moz-transition: all 0.3s ease;          -o-transition: all 0.3s ease;          transition: all 0.3s ease;      }      .post-list.content-card .cart-list:hover {          transform: translateY(-6px);          -webkit-transform: translateY(-6px);          -moz-transform: translateY(-6px);          box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);          -webkit-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);          -moz-box-shadow: 0 26px 40px -24px rgba(0, 36, 100, 0.3);          -webkit-transition: all 0.3s ease;          -moz-transition: all 0.3s ease;          -o-transition: all 0.3s ease;          transition: all 0.3s ease;      }  }    .content-card .post-info {      margin-left: -2px;  }    .post-list.content-card .cart-list:hover {      box-shadow: 0 0 15px #ddd;      transform: translateY(-5px)  }    .home_title {      display: -moz-flex;      display: -ms-flex;      display: -o-flex;      display: -webkit-box;      display: -ms-flexbox;      display: flex;      padding: 12px 10px;      white-space: nowrap;      border-bottom: 10px solid #e7e7e7;      background: white;  }    .home_title>section {      -webkit-box-align: center;      -ms-flex-align: center;      align-items: center  }    .home_title .title {      display: -o-flex;      display: -webkit-box;      display: -ms-flexbox;      display: flex;      -webkit-box-flex: 1;      -ms-flex-positive: 1;      flex-grow: 1;      padding-right: 20px;      display: block;      white-space: nowrap;      text-overflow: ellipsis;      overflow: hidden;      width: 100%;      width: calc(100% - 48px);  }    .home_title .title h3 {      font-size: 18px;      color: #333;      margin-right: 8px;      display: inline-block;      vertical-align: bottom  }    .home_title .title span {      font-size: 12px;      color: #999;      font-weight: 300  }    .home_title .title span b {      color: #2C74E6;      margin: 0 4px  }    .syfl .grid-bor {      padding: 14px;      background: white;  }    .syfl .grid-bor .cart-list {      box-shadow: none;  }    @media screen and (max-width:873px) {      .home_title {          border-bottom: 3px solid #e7e7e7;      }      .syfl {          margin-top: 10px;      }      .content-card .post-info {          margin-left: -6px;      }  }    /*?¨??3?*/    .blur {    /*子主题用户中心空白  position: relative;*/      -webkit-filter: blur(2px);      -moz-filter: blur(2px);      -ms-filter: blur(2px);      filter: blur(2px);  }    .blur:before {      content: "";      position: absolute;      display: block;      height: 100%;      width: 100%;      left: 0;      right: 0;      top: 0;      bottom: 0;      z-index: 1;  }  /*cms样式布局结束*/    /*标题边上小标题*/  .zuixinlist{overflow:hidden;text-overflow:ellipsis}  .index_fenlei{float:right;font-size:.75rem;font-weight:400;color:#878787;margin-top:4px;display:block;padding:3px 0;border-radius:5px;line-height:16px}  .syfl .home_title .title h3 a:after{display:inline-block;padding:0 .5rem;content:'/';color:#eee;vertical-align:middle;position:relative;top:-.2rem}  .syfl .home_title .title .fwq_fenlei_title:after{display:inline-block;padding:0 .5rem;content:'/';color:#6cb5fe;vertical-align:middle;position:relative;top:-.3rem;left:-17px;font-weight:600}  .syfl .home_title .title .fwq_fenlei_title:before{display:inline-block;padding:0 .5rem;content:'/';color:#ff7979;vertical-align:middle;position:relative;top:-.3rem;font-weight:600}  .syfl .home_title .title .fwq_fenlei_title{float:right;display:block;padding:3px 0;width:18px;height:24px;line-height:24px}  @media (max-width:767px){.index_fenlei{display:none}  }  .index_fenlei:hover{color:#1e6be3}  .index_fenlei1{margin-left:20px}  .adad{padding-top:25px}  .adad1{padding-top:25px;padding-bottom:20px;background:#fff}  .yinyan:before{content:"e642";display:block;position:relative;top:.35em;margin-bottom:.81em;color:#f13b03;font-family:fw!important;font-size:2em;line-height:.3}  blockquote:before{content:"e642";display:block;position:relative;top:.35em;margin-bottom:.81em;color:#f13b03;font-family:fw!important;font-size:2em;line-height:.3}  .yinyan p{color:rgba(0,0,0,.5);padding-top:12px}  /*小标题结束*/

© 版权声明
THE END
喜欢就支持以下吧
点赞0 分享
评论 抢沙发
图片正在生成中,请稍后...