日主题美化教程(转自APE驿站)

导航颜色修改

第一步:打开日主题的inc / options.theme.php文件,找到第153行后面添加

阵列(  
2.'id'=>'is_header_white',  
3.'type'=>'切换器',  
4.'title'=>'顶部导航白色背景',  
5.'label'=>'',  
6.'default'=> false,  
7.),

添加后,刷新后台设置框架的“顶部设置”发现多了一项(默认是关闭状态)

第二步:打开日主题目录下的header.php,把第18行改成

1. <header class =“header <?php echo $ navclass =(_ huhui('is_header_white'))?'white':'';?>”>

第三步:打开日主题style.css文件

找到下面对应的样式并修改如下

.header.white .site-navbar> ul> li> a {color:#555;}

增加一行

1. .header.white .wel .wel-item-btn>​​ a {color:#fff}

搜索栏美化

/rizhuti/home-module/module-banner.php(整页替换)

<?php if(!$ paged || $ paged === 1){?>
<div class =“focusbox”id =“focsbox-true”style =“background-image:url(<?php echo _hui('search_bgimg')?>); background-attachment:fixed;”>
	<div class =“focusbox-image-overlay”> </ div>
	<div class =“container”>
		<h3 class =“focusbox-title”> <?php echo _hui('banner_title'); ?> </ H3>
			<form class =“form-inline”id =“fh5co-header-subscribe”method =“get”action =“<?php echo esc_url(home_url('/'))?>”>
				<div class =“form-group”>
					<input type =“text”class =“form-control”id =“email”name =“s”placeholder =“输入要查找关键字”>
					<button type =“submit”class =“btn btn-default”style =“top:7px; right:12px; border-radius:64px!important; background:#ffffff; padding:8px 12px; color:#3b3b3b; background :#fafcff;“> <i class =”iconfont“></ i> </ button>
			   <div class =“tag_cloud”style =“text-align:left; margin-top:10px;”> <a href =“https://www.apeyizhan.com/archives/tag/建站/”class =“tag -cloud-link tag-link-35 tag-link-position-1“style =”font-size:14px;“>建站</a>
					<a href =“https://www.apeyizhan.com/archives/tag/渗透/”class =“tag-cloud-link tag-link-9 tag-link-position-2”style =“font-size: 14px的;“>渗透</A>
					<a href =“https://www.apeyizhan.com/archives/tag/破解/”class =“tag-cloud-link tag-link-13 tag-link-position-3”style =“font-size: 14px的;“>破解</A>
					<a href =“https://www.apeyizhan.com/archives/tag/PHP/”class =“tag-cloud-link tag-link-3 tag-link-position-4”style =“font-size: 14px的;“> PHP </A>
					<a href =“https://www.apeyizhan.com/archives/tag/工具/”class =“tag-cloud-link tag-link-5 tag-link-position-5”style =“font-size: 14px的;“>工具</A>
					<a href =“https://www.apeyizhan.com/archives/tag/WordPress主题/”class =“tag-cloud-link tag-link-15 tag-link-position-6”style =“font-size :14px;“> WordPress主题</a>
					<a href =“https://www.apeyizhan.com/archives/tag/源码/”class =“tag-cloud-link tag-link-8 tag-link-position-7”style =“font-size: 14px的;“>源码</A>
                    <a href =“https://www.apeyizhan.com/archives/tag/小程序/”class =“tag-cloud-link tag-link-8 tag-link-position-7”style =“font-size :14px;“>小程序</a> </ div>	
              </ DIV>
           
	</ FORM>
	</ DIV>
  <style> .tag_cloud a {margin-left:10px;} </ style>
</ DIV>
<?php}?>

2,在后台自定义CSS中加入如下样式

/ **搜索banner * /
.tag_cloud a {
颜色:#8a9197!重要;
}
.tag_cloud a:悬停{
颜色:#f0f4f8!重要;
}

.focusbox .form-group {
身高:60px;
背景:#fafcff;
border-radius:4px;
border:2px solid#ebeef7;
}
#fh5co-header-subscribe button {

上:-2px;
右:-2px;
填充:18px 30px;
}
.form-group input {
身高:100%!重要;
背景:没有!重要;
font-size:12px!important;
}

3,最终效果

分类推荐美化

最终目标:

1,/ rizhuti /家庭模块/模块catbox.php(整页替换)

<?php if(!$ paged || $ paged === 1){ 
$ module_catbox = _hui('catbox');
?>
<section class =“container-white home1”>
	<div class =“container”>
		<div class =“row block-wrapper”>
			<?php if(!$ module_catbox){?>
		        <h2 style =“text-align:center; margin:0 auto; padding:60px;”>请前往后台新分类推荐模块!</ h2>
		    <?php} else {?>
				<?php foreach($ module_catbox as $ key => $ value){?>
				<?php if($ value ['cat_id']){?>
				<div class =“cms-category”>
					
					<div class =“category-tile”> <div class =“category-tile__wrap”>
						<div class =“background-img”style =“background-image:url(<?php echo get_term_meta($ value ['cat_id'],'cat-img',true)?>)”> </ div>
				            <div class =“category-tile__inner”>
			                	<div class =“category-tile__text inverse-text”>
			                    	<?PHP 
									 	$ home_special_catid = $ value ['cat_id'];
					   					$ home_special__name = get_category($ home_special_catid) - > name;
					   					$ home_special__link = get_category_link($ home_special_catid);
					   					$ home_special__num = get_category($ home_special_catid) - > count;
									    echo' <a class="category-tile__name cat-theme-bg" href="'.$home_special__link.'" title="view(,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, $。$ home_special__name。'< / A>';
									   echo'<div class =“category-tile__description”>'。$ home_special__num。'<span class =“work-num”>'。'个'。'</ span> </ div>';
									?>
			                    </ DIV>
			                </ DIV>
					    </ DIV>
					</ DIV>
                  <div class =“work-box”>
						<?PHP 
				            $ args = array(
				                'cat'=> $ home_special_catid,//自定义文章类型名称
				                'showposts'=> 4,//输出的文章数量,这个可以是缺省值,不用设置
				            );
				            $ my_query = new WP_Query($ args);
				            if($ my_query-> have_posts()){
				                while($ my_query-> have_posts()):$ my_query-> the_post(); ?>
				                    
				                        <div class =“work”>
				                            <a class="FreeUID" href="<?php the_permalink() ?>“title =”<?php the_title()?>“> <img src =”<?php the_post_thumbnail_url('thumbnail')?>“alt =“<?php the_title()?>”> </a>
				                        </ DIV>
				                    
				                <?php endwhile;
				            wp_reset_query(); //重置查询查询
				        }?>
			        </ DIV>
				</ DIV>
				<?php}?>
				<?php}?>
			<?php}?>
		</ DIV>
	</ DIV>
</节>
<?php}?>

2,在后台自定义CSS中加入样式

.cms-category .category-tile {
	box-shadow:0 -4px 10px rgba(0,0,0,.04),0 1px 2px rgba(0,0,0,.08)!important;
	border-radius:8px!important;
	背景:#fff!important;
}
.cms-category .category-tile__wrap {
	位置:相对!重要;
	保证金:0!重要;
	border-radius:4px!important;
	身高:240px!重要;
}
.cms-category .category-tile__inner {
	位置:相对!重要;
	显示:-webkit-box!important;
	显示:-moz-box!important;
	显示:盒子!重要;
	display:-webkit-flex!important;
	显示:-moz-flex!important;
	显示:-ms-flexbox!important;
	display:flex!important;
	最小高度:240px!重要;
	-webkit-box-align:center!important;
	-moz-box-align:center!important;
	box-align:center!important;
	-webkit-align-items:center!important;
	-moz-align-items:center!important;
	-ms-align-items:center!important;
	-o-align-items:center!important;
	align-items:center!important;
	-ms-flex-align:center!important;
}

.cms-category .category-tile  -  sm .category-tile__inner {
	最小高度:120px!重要;
}
.cms-category .category-tile .link-overlay {
	z-index:1!important;
}
.cms-category .category-tile__text {
	位置:绝对!重要;
	填充:20px 20px 15px!重要;
	宽度:100%!重要;
	text-align:center!important;
	顶部:-10px!重要;
}
.cms-category .category-tile__name {
	display:inline-block!important;
	最大宽度:100%!重要;
	border-radius:2px!important;
	颜色:#5f6367!重要;
  背景:rgba(0,0,0,0)!important;
	text-transform:uppercase!important;
	font-size:.8571rem!important;
	-webkit-transition:所有.15s缓出0!重要;
	-moz-transition:所有.15s缓出0!重要;
	过渡:所有.25s缓解0s!重要;
}
a.category-tile__name.cat-theme-bg:hover {
	颜色:#1789fa!重要;
}
.cms-category .category-tile__description {
	颜色:#ffc01f!important;
	font-family:DINBold,Arial,Microsoft Yahei,5FAE8F6F96C59ED1,Hiragino Sans GB,5B8B4F53!important;
	font-size:28px!important;
  margin-top:-7px!important;
	font-weight:700!important;
}
.cms-category .category-tile:hover .background-img:after {
	不透明度:.8!重要;
}
.background-img {
	位置:绝对!重要;
	顶部:0!重要;
	对:0!重要;
	底部:0!重要;
	左:0!重要;
	溢出:隐藏!重要;
}
装置技术领域-IMG,
.has-cover-bg-img {
  border-radius:4px!important;
	背景位置:50%50%!重要;
	background-size:cover!important;
	background-repeat:no-repeat!important;
	background-attachment:scroll!important;
	顶部:70px!重要;
	底部:60px!重要;
}
.cms-category .background-img:after {
	位置:绝对!重要;
	顶部:0!重要;
	对:0!重要;
	底部:0!重要;
	左:0!重要;
	宽度:100%!重要;
	background-color:#001529!important;
	内容:''!重要;
	不透明度:.6!重要;
	-webkit-transition-timing-function:ease!important;
	-moz-transition-timing-function:ease!important;
	transition-timing-function:ease!important;
	-webkit-transition-duration:.3s!important;
	-moz-transition-duration:.3s!important;
	过渡期:.3s!important;
	-webkit-transition-property:all!important;
	-moz-transition-property:all!important;
	过渡财产:全部!重要;
}
.cms-category {
	margin-right:20px!important;
	宽度:25%!重要;
	位置:相对!重要;
}
.cms-category:nth-​​child(4n){
	margin-right:0!important;
}
span.work-num {
	font-size:12px!important;
	margin-left:8px!important;
	颜色:#5f6367!重要;
}
.work-box {
	display:flex!important;
	位置:绝对!重要;
	底部:0!重要;
}
.work {
	flex:1 1 25%!important;
	保证金:4px!important;
	溢出:隐藏!重要;
	-webkit-transition:所有.3s轻松!重要;
	-moz-transition:所有.3s轻松!重要;
	-o-transition:所有.3s轻松!重要;
	过渡:所有.3s轻松!重要;
}
.work-box .work img {
	身高:50px!重要;
	宽度:100%!重要;
	object-fit:cover!important;
	border-radius:4px!important;
	border:1px solid#f5f3f3!important;
}
.work:悬停{
	变换:translateY(-6px)!important;
	-webkit-transform:translateY(-6px)!important;
	-moz-transform:translateY(-6px)!important;
	box-shadow:0 6px 16px -10px rgba(0,36,100,.3)!important;
	-webkit-box-shadow:0 6px 16px -10px rgba(0,36,100,.3)!important;
	-moz-box-shadow:0 6px 16px -10px rgba(0,36,100,.3)!important;
	-webkit-transition:所有.3s轻松!重要;
	-moz-transition:所有.3s轻松!重要;
	-o-transition:所有.3s轻松!重要;
	过渡:所有.3s轻松!重要;
}
.cms-category {
	-webkit-transition:所有.3s轻松!重要;
	-moz-transition:所有.3s轻松!重要;
	-o-transition:所有.3s轻松!重要;
	过渡:所有.3s轻松!重要;
}
.cms-category:悬停{
	变换:translateY(-6px)!important;
	-webkit-transform:translateY(-6px)!important;
	-moz-transform:translateY(-6px)!important;
	box-shadow:0 26px 40px -24px rgba(0,36,100,.3)!important;
	-webkit-box-shadow:0 26px 40px -24px rgba(0,36,100,.3)!important;
	-moz-box-shadow:0 26px 40px -24px rgba(0,36,100,.3)!important;
	-webkit-transition:所有.3s轻松!重要;
	-moz-transition:所有.3s轻松!重要;
	-o-transition:所有.3s轻松!重要;
	过渡:所有.3s轻松!重要;
}

分类CMS标题美化

如图1所示,首先还是加入样式:

<link rel =“stylesheet”href =“// at.alicdn.com/t/font_1169899_l2kpvs37ys.css”>
/ **头标签* /
.section-info {
填充:10px 15px 60px 15px!重要;
}
.section-info h2 {
font-weight:400!important;
font-size:1.5rem!important;
背景:#fff;
}
.section-info h2 {
float:left!important;
text-align:left!important;
填充:10px;
border-radius:4px;
}
.section-info .postmode-description {
字母间距:2px!important;
颜色:#9E9E9E!重要;
位置:相对!重要;
顶部:17px!重要;
左:18px!重要;
float:left!important;
}
/ **追加的标签* /
.hh_home_zuixinlist_title {
    漂浮:对;
    padding-top:4px;
}
.hh_home_zuixinlist_title_item {
    向左飘浮;
    显示:块;
    margin-left:10px;
    填充:10px;
    border-radius:4px;
    背景:#fff;
}
.kan {
    font-family:“kan”!important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:灰度;
}
.kanmingcheng:在{之前
    位置:相对;
    上:1.5px;
}

2,/ rizhuti /家庭模块/模块postlist.php(还是全部替换吧)

<! - 最新文章 - >
<section class =“container”>
	<?php if((!$ paged || $ paged === 1)){?>
	<div class =“section-info”> 
		<h2 class =“postmodettitle”> <span> <i class =“icon-new”> </ i> <?php echo _hui('mo_postlist_title')?> </ h2> 
		<div class =“postmode-description”> <?php echo _hui('mo_postlist_desc')?> </ div> 
         <div class =“hh_home_zuixinlist_title”>
           <a href="/hot" target="_blank" class="hh_home_zuixinlist_title_item hh_hide"> <i class =“kan kanicon”> </ i>热门精选</a>
              <a href="/tags" target="_blank" class="hh_home_zuixinlist_title_item hh_hide"> <i class =“kan kanmingcheng”> </ i>素材标签</a>
             <a href="/likes" target="_blank" class="hh_home_zuixinlist_title_item hh_hide"> <i class =“kan kantubiao”> </ i>点赞最多</a>
          </ DIV>
	</ DIV>
	<?php}?>
	<?PHP 
		$ paged =(get_query_var('paged'))?get_query_var('paged'):0;

		$ args = array(
            'ignore_sticky_posts'=> 0,// 1改为0置顶生效,默认不生效是怕和下面的CMS模块文章太多重复,不需要刻意不理不是BUG
            'paged'=> $ paged
		);
		$ mo_postlist_no_cat = _hui('mo_postlist_no_cat');
		
		如果($ mo_postlist_no_cat){
			// var_dump(implode($ mo_postlist_no_cat,', - '));
			$ args ['cat'] =' - '。implode($ mo_postlist_no_cat,', - ');
		}
		query_posts($参数);

		get_template_part('摘录','家');
	?>
</节>
<! - 最新文章end  - >

最终效果:

分类CMS列表美化

1,加入小标签:效果如下

/rizhuti/excerpt-item.php

echo''。get_the_tag_list('<p class =“desc”> <span>','</ span> <span>','</ span> </ p>')。'';

在后台自定义CSS中加入样式:

/ **标签字体* /
.excerpt> p.desc {display:flex; flex-wrap:wrap; align-content:flex-start; height:36px; padding:0 10px 0 10px; overflow:hidden; text-overflow:ellipsis;}
.excerpt> p.desc> span:before {content:''; position:absolute; width:6px; height:6px; border:2px solid#b4c8ff; border-radius:50%; left:0px; top:34% ;}
.excerpt> p.desc> span {padding-left:8px; margin-right:10px; font-size:12px; position:relative; line-height:18px;}
.excerpt> p.desc> span> a {color:#bebebe; transition:.25s;}
@media(最大宽度:544px)
.excerpt> p.desc {
填充:0!重要;
}
.excerpt> p.desc> span> a:悬停{color:#118cfe!important;}

分页按钮美化

在后台自定义CSS中加入央视:

/ ** *分页/
.pagination ul li.next-page a {
背景:线性渐变(-125deg,#0295f9 0%,#2f49fd 100%)!important;
颜色:#fff!important;
}
.pagination ul li a,.pagination ul li span {
display:inline-block!important;
填充:.35rem 1.5rem!important;
border-radius:16px!important;
}
.pagination ul li.active span {
背景颜色:#353535!重要;
颜色:#fff!important;
}

关于我们美化

/rizhuti/home-module/module-about.php(整页替换)

TIM截图20190519184949.png

<style> span.counter {
    font-size:35px;
    font-weight:700;
    颜色:#fff;
    背景:#1890ff;
    填充:5px 20px;
    border-radius:4px;
}
.home2 h3 {
    margin-bottom:0;
    填充:1.8rem;
    颜色:#fff;
    text-align:center;
}
.home2 p {
    margin-bottom:1.8rem;
    text-align:center;
    font-size:30px;
}
</样式>

<?php if((!$ paged || $ paged === 1)){?>
  <! -  about  - >
  <section class =“container-white home2”style =“background-image:url(https://ws3.sinaimg.cn/large/005BYqpgly1g1ykeok8x2j31hc0u04a3.jpg)”>
    <div class =“container”>
      <h3> <?php echo _hui('about_title')?> </ h3>
      <p>目前为止我们有<span class =“counter”> <?php $ users = $ wpdb-> get_var(“SELECT COUNT(ID)FROM $ wpdb-> users”); echo $ users; ?> </ span>位会员,还有<span class =“counter”> <?php echo $ publish_posts = wp_count_posts() - > publish;?> </ span>个精品资源!</ p>
      <a href="<?php echo _hui('about_btn_href') ?>“class =”btn btn-wiht“> <?php echo _hui('about_btn')?> </a>
    </ DIV>
  </节>
<?php}?>

修改前:

TIM截图20190519184726.png

修改后:

TIM截图20190519184855.png

 

底部加入友情链接

在/rizhuti/footer.php/加入如下代码

 <div class =“col l12 m12 s12”>
   <ul class =“flinks-text”>
	 <span class =“flinks”style =“color:#555; font-weight:500”>友情链接:</ span>
	 <?php wp_list_bookmarks('&categorize = 0'); ?>
   </ UL>
 </ DIV>

增加样式:

.border-top:1px solid rgba(172,172,172,0.1);
.flinks-text {margin-top:10px; text-align:left;}
.flinks-text> li {float:left; margin-left:10px;}
.flinks {float:left; font-weight:400}
.excerpt-freeuid {margin-bottom:2%; padding:0; overflow:hidden;}
.excerpt-freeuid h2 {padding:0 10px 0 10px; text-shadow:-1px 1px 0 rgba(0,0,0,.1); font-weight:300;}
.excerpt-freeuid> p.desc {padding:0 10px 0 10px;}
.excerpt-freeuid> footer {padding:0 10px 10px 10px;}
.linkcat>:first-child {display:none;}
.blogroll> * {float:left; margin-right:14px;}
.footer-links {
填充:20px 0;
border-top:1px solid rgba(172,172,172,0.1);
}

个人中心美化

先来看效果:

这个样式比较多比较麻烦所以替换吧/rizhuti/pages/user.php

会员开通页面整改

会员页面内容比较多,请参考www.apeyizhan.com如需修改请加qq2263669745(切忌是免费)

页面滚动条美化

在后台自定义CSS顶部加入如下样式:

本网站收集资源来源于网上和博主自己敲击,本站不接受任何非当地法律法规的投诉和申诉,如有侵权,请附上贵司或个人著作权、商标权及其他申明权利加盖公章,发送至zhattyt@gmail.com,我们将在3个工作日内对内容进行审核,对版权流氓的申诉一律不接受,如:maketing。
新路程博客 » 日主题美化教程(转自APE驿站)

发表评论