搜索到
2
篇与
的结果
-
网站手机移动端添加下边栏导航菜单 手机端访问的时候，给网站手机移动端添加下边栏，非常简单的实现方式，下面直接上教程。 本站有两个版本，一个是图片版本，一个是icon图标版本。 图片版本 本站以前所使用的版本，主要修改两个文件： 修改footer.php 首先，在页脚文件foot.php或者footer.php文件的最下面放入以下代码：<nav class="nav-shouji"> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/category/default/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj1.png"></a> </div> </div> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/category/web/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj2.png"></a> </div> </div> <a class="nav-item"> <div class="img"> <a href="https://chenyu.me/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj.png"></a> </div> </a> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/photo/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj3.png"></a> </div> </div> <div class="nav-item"> <div class="img"> <a href="https://chenyu.me/dh/"><img src="https://chenyu.me/My/photo/ysni-sj/ysni-sj4.png"></a> </div> </div> </nav>以上代码中的菜单链接和图标可以自行更改,图标分辨率为48x48。 修改joe.min.css 然后在CSS文件 JOE 4.7.7及以下老版：CSS文件是在assets/css/joe.min.css）里最下面放入以下代码即可。 JOE 7.X.X及以上新版：joe.global.min.css或joe.normalize.min.css最下面加入。 当然，最好的操作是以上文件的同名.scss文件里编辑然后生成.min.css的文件！（这句话看不懂的可以略过！）/*手机端底部菜单*/ @media (min-width: 768px) { .nav-shouji { display: none !important; } } .nav-shouji{ display: flex; position: fixed; bottom:0; z-index:99; height: 55px; width: 100%; background: var(--background); flex-shrink: 0; font-size: 14px; } .nav-shouji .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--main); } .nav-item:nth-child(3) { transform: translateY(-20px); background: var(--background); border-radius: 50%; height: 75px; width: 75px; flex-shrink: 2; box-shadow: 0 -3px 4px rgba(0,0,0,.1); } .nav-shouji .nav-item .img { height: 24px; overflow: hidden; } .nav-item:nth-child(3)>.img{ height: 30px; margin-bottom: 5px; } .nav-shouji .nav-item img { width: 24px; height: 24px; overflow: hidden; }icon图标版本 本站现在所使用的版本，手机访问本站即可看见！ 1.修改footer.php 首先，在页脚文件foot.php或者footer.php文件的最下面放入以下代码：<div id="mobile-footer"> <ul id="mobile-menu"> <li> <a href="https://chenyu.me/"> <span class="cyicon chenyu-yu"></span> 首页 </a></li> <li> <a href="https://chenyu.me/about/"> <span class="cyicon chenyu-106collect"></span> 关于 </a></li> <li> <a href="https://chenyu.me/whisper/"> <span class="cyicon chenyu-weiyuqiang-"></span> 微语 </a></li> <li> <a href="https://chenyu.me/navigation/"> <span class="cyicon chenyu-ganxie"></span> 排行榜 </a></li> <li> <a href="https://chenyu.me/dh/"> <span class="cyicon chenyu-daohang"></span> 导航 </a></li> </ul> </div>2.修改include.php 在/usr/themes/Joe/public/include.php的19-29行之间新增如下代码：<link rel="stylesheet" href="<?php $this->options->themeUrl('assets/css/cysjdh.css'); ?>">3.新增cysjdh.css 在/usr/themes/Joe/assets/css/路径下新增cysjdh.css文件，内容如下：@import url("//at.alicdn.com/t/font_2611504_8nq4wp1bmb3.css"); @media screen and (min-width:767px){#mobile-footer{display:none}} #mobile-footer{height:50px;background:#fafafa;position:fixed;bottom:0;left:0;border-top:0;width:100%;z-index:9999999} #mobile-menu{display:block} #mobile-menu:after{content:'';display:block;height:0;clear:both} #mobile-menu>li{width:20%;float:left;border-top:1px solid #e6e6eb;height:100%} #mobile-menu>li>a:hover{color:#000;} #mobile-menu>li>.active{color:#000;} #mobile-menu>li>a{text-align:center;color:#777;display:block;line-height:12px;height:100%} #mobile-menu>li>a>span{font-size:20px;display:block;line-height:30px} -
给WordPress加上当前位置，相当是面包屑导航 当前位置，举例来说，就是像“首页 > 分类 > 子分类 > 第二层子分类 > … > 第 N 层子分类 > 文章”这样的效果，给读者一个清晰的网站结构导航。有了它, 访客就可以方便地访问同类的文章, 并明确文章的所属, 对提高用户体验和网站的 PV 值都很有帮助。在主题里加入当前位置的方法有两种：1. 不包含父级分类的文章导航这里用到 the_category() 方法的默认模式, 会调用 get_the_category_list() 生成最后一层的子分类 (分类可能不只一个) 组成的 HTML 字符串并打印到页面上。代码如下：<a title="Go to homepage" href="<?php echo get_settings('home'); ?>/">Home</a> <!-- 首页链接 --> > <?php the_category(', '); ?> <!-- 每个分类以逗号分隔 --> > <?php the_title(); ?> <!-- 文章链接 -->2. 包含父级分类的文章导航我们要用的是 the_category() 方法的 multiple 模式, 而他会调用 get_the_category_list() 和 get_category_parents() 两个方法生成一个包含所有父分类的 HTML 字符串并打印到页面上。代码如下：<a title="Go to homepage" href="<?php echo get_settings('home'); ?>/">Home</a> <!-- 首页链接 --> > <?php the_category(' > ', 'multiple'); ?> <!-- 每个分类以 > 分隔, 父级分类在前, 子分类在后 --> > <?php the_title(); ?> <!-- 文章链接 -->打开主题里面的 single.php ，找到以下代码，一般是第4行：<?php while ( have_posts() ) : the_post(); ?>在后面加上上面的任意一种代码即可实现效果了。来源：http://www.cookseo.com/506.html
