wordpress的7b2主题网址导航页面优化
1.9k°
  • 发布时间
  • 大小
    5000kb
  • 格式
    zip
  • 提示
    仅供个人交流学习禁止商用!
当前位置:首页网站教程7B2主题美化wordpress的7b2主题网址导航页面优化

wordpress的7b2主题网址导航页面优化

原版导航不是很喜欢,搜了搜官网圈子里的各类教程,瞄到了胖子哥的美化,感觉甚合我意。

wordpress的7b2主题网址导航页面优化

原教程地址:https://www.ourule.com/document/89.html

不过还有些要折腾的地方,于是就折腾了一下午……由于今天搞这个代码太累了,就线弄出来这些,感觉好像也没改啥。

下个版本想替换图标,比如热门啥都弄个小火苗,搞个页面背景,导航条一类,修改内页啥的,反正怎么好看怎么来吧。基本也是参考别人的了,自己也没啥审美。

由于我只玩网页端,手机端没有过多注意,而且很多地方需要你自己改,毕竟我是照着自己网站改的,可能跟你的会有出入,样式冲突等等,宽度大小啥的很可能要你去F12改。

所以着急正式用的大佬,还是等别的大佬搞个更好的吧,我的只能拿来玩玩。

上代码

此部分为子主题CSS部分代码(由于是编程小白,全程靠百度,所以写的比较辣鸡,勿喷)

/*导航页面*/
/*修改导航标题并且置顶*/
.links-home .b2-tab-links h1{
    padding-top:0px!important ;
    line-height: 80px;
}
/*让标题居中,然后删除右侧margin*/
.links-home h1{
    text-align: center;
    margin-right: 0px;
}
/*给标题加个logo*/
.h1-logo{
    width: 55px;
    height: 55px;
    float: left;
    margin-left: 27px;
    margin-top: 10px;
    
}
.h1-logo img {
    width: 100%;
    height: auto;
    
}
/*修改导航标题下面的统计样式*/
.link-total{
    margin-top: 15px;
    margin-right: 35px;
    font-weight: 600;                 
	font-size: 13px;                 
	font-family: "黑体";                 
	color: #8c888b;                 
	background: -webkit-linear-gradient(45deg, #1b4042, #5a3828, #5d5b54, #392b61, #1e324e);             
	color: transparent;                 
/*设置字体颜色透明*/                 
	-webkit-background-clip: text;
/*背景裁剪为文本形式*/
	animation: ran 30s linear infinite;
}
@keyframes ran {
	from {
		backgroud-position: 0 0;
	}
	to {
		background-position: 2000px 0;
	}
}
/*设置导航菜单样式*/
.b2-tab-links .toc-list{
    text-align: center;
    font-size: 16px;
}
.toc-list li:after {
  
  transition: 0.3s;
  content: "";
  width: 0;
  left: 50%;
  bottom: 0;
  height: 3px;
  background: #f7f7f7;
}
.toc-list li:hover {
  cursor: pointer;
}
.toc-list li:hover:after {
  width: 100%;
  left: 0;
}
/*导航字体高度*/
.b2-tab-links a.toc-link{
    height: 40px;
    line-height: 40px;
    padding: 0px 50px;
}
.b2-tab-links .toc-list{
    margin-right: 0px;
}
/*申请入驻样式*/
.link-join{
    text-align: center;
    margin-right: 0px;
}
/*侧边置顶*/
.inner-wrapper-sticky{
  top:0px!important;  
  margin-top: 20px;
}
/*列表友链logo样式(暂不生效)*/
/*.link-img:hover {*/
/*	opacity: 1;*/
/*	filter: alpha(opacity=70);*/
/*	transition: all 0.2s linear;*/
/*	-moz-transition: all 0.2s linear;*/
/*	-o-transition: all 0.2s linear;*/
/*	-webkit-transition: all 0.2s linear;*/
/*	-webkit-transform: scale(1.12);*/
/*	-moz-transform: scale(1.12);*/
/*	-o-transform: scale(1.12);*/
/*	-m-transform: scale(1.12);*/
/*	transform: scale(1.12);*/
/*}*/
/*友情页面大图*/
.links-banner {
    position: absolute;
    left: 286px;
    margin: 10px 0;
    width: 82%;
}
.banner-img {
    width: 100%;
    
}
.banner-img img{
    width: 100%;
    height: 70px;
}
/*他胖子站代码https://www.ourule.com/document/89.html*/
/*导航页面更新*/
.archive .content-area.links-home{
	margin-top:-10px; 
}
.links-home .b2-tab-links{
	width:240px;
	background:#fff;
	border-top: 1px solid #f5f6f7;
}
.links-home .home-links-right{ 
	max-width:1545px;
	margin:110px auto 0;
}
 
.links-home .link-top h2{
	font-size:16px;
	line-height:1.5715;
	height:auto;
	font-weight:normal;
}
 
.links-home .link-desc{
	font-size:12px;
	color:rgba(0,0,0,0.45)
}
 
.links-home .link-img{
	width:70px;
	height:70px;
}
 
.links-home .link-in{
	border:1px solid #e3e8f0;
}
 
.links-home .link-box .cat-box{
	font-size:20px;
	font-weight:500;
	padding-left: 24px;
}
 
.links-home .link-title h2::before{
	width:8px;
	height:8px;
	border-radius:50%;
	border:2px solid var(--b2color);
	background:#fff;
	top:10px;
}
 
.links-home .link-title .link-more i{
	font-size:24px;
	font-weight:bold;
}
 
.links-home .link-title{
	padding:0 0 24px;
}
 
.links-home .b2-tab-links h1{
	font-size:24px;
	font-weight:500;
   padding-top:10px;
       box-shadow: 0px 1px 1px 0px rgba(17,58,93,.1);
      
}
 
 
 
 
 
/*手机模式下样式修复*/
@media screen and (min-width:768px) {
	.site .top-style .wrapper{
		width:100%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .link-box-0 .link-list li{
		width:25%
	}
}
 
 
@media (min-width:768px) and (max-width:992px) {
	
	.links-home .b2-tab-links{
		display:none
	}
}
 
/*平板式下样式修复*/
@media screen and (min-width:992px) {
	.site .top-style .wrapper{
		width:100%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .link-box-0 .link-list li{
		width:33.33333%
	}
}
 
/*小屏显示器模式下样式修复*/
@media screen and (min-width:1200px) {
	.site .top-style .wrapper{
		width:100%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .home-links-right{
		width:1040px;
	}
	.links-home .link-box-0 .link-list li{
		width:25%
	}
}
 
/*全尺寸显示器模式下样式修复*/
@media screen and (min-width:1480px) {
	.site .top-style .wrapper{
		width:95%;
	}
	.links-home .home-links-right{
      padding:0;
	}
	.links-home .home-links-right{
		width:100%;
	}
	.links-home .link-box-0 .link-list li{
		width:20%
	}
}
.b2-document-content .b2-single-content.wrapper{
    width: auto;
}
/*导航页面*/

主题原文件需要替换的Links文件

主题根目录下的archive-links.php文件,覆盖替换。(记得自己备份):此文件内的回到首页部分,里面有个网址(www.xtuku.com)要改成自己的网站地址

主题/b2/Modules/Templates/Modules 目录下的links.php文件,覆盖替换。(记得自己备份)

并且需要在子主题的header.php或footer.php 引入 以下代码

完整代码如下(点击下方‘运行代码’按钮可查看效果!可全选代码自行复制)

<!-- 引入 layui.css -->
<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css" rel="external nofollow" >

请下载替换文件

下载权限
查看
  • 免费下载
    评论并刷新后下载
    登录后下载
  • {{attr.name}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
温馨提示:

文章标题:wordpress的7b2主题网址导航页面优化

文章链接:https://www.xtuku.com/2497.html

更新时间:2022年11月17日

声明:本站大部分内容均收集于网络!若内容若侵犯到您的权益,请发送邮件至:590173@qq.com我们将第一时间处理! 资源所需价格并非资源售卖价格,是收集、整理、编辑详情以及本站运营的适当补贴,并且本站不提供任何免费技术支持。 所有资源仅限于参考和学习,版权归原作者所有,更多请阅读新图酷网网络免责服务协议

给TA赞助
共{{data.count}}人
人已赞助
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
搜索