张戈博客成功启用移动端主题:Mobile Pack

建站以来,总是忙于 PC 端主题的折腾,移动端主题只是偷懒的使用了 WPtouch 插件。现在 PC 端主题已完善七七八八了,是时候折腾下移动端自适应主题了,毕竟 WPtouch 设计得太复杂,感觉稍有累赘。

早就见过了不少不错的移动主题,鉴于兼容性,我还是选择了与 PC 端主题一致的鸟哥制作的 Mobile Pack 主题,最主要的原因就是延续了对高亮代码的支持!用别的主题,我还得重新折腾和 HotNewsPro 一样的高亮样式,人懒不拆啊。先来张折腾后的预览图:

当然,你还可以点击DEMO实时预览。

鸟哥这款 Mobile Pack 用起来也很简单,直接下载后上传至 Themes 目录,然后安装一个主题调度插件即可。既然是写博文,还是得来点有用的经验,才对得起支持玛思阁的读者。所以,下面分享一下我的折腾过程以及经验,供各位参考!


调度插件

在移动主题页面,有如下使用说明:

使用说明: 主题需配合 WordPress 移动设备检测插件: Any Mobile Theme Switcher wordpress mobile pack Device Theme Switcher 安装并启用上述任何一款移动设备检测插件都可以

鸟哥说安装任意一款主题调度插件即可,经过我测试,如果想要实现页脚主题切换按钮,那就应该安装第一个:Any Mobile Theme Switcher,如果你不要这个切换功能,那就随意装哪个都行。我个人比较喜欢这个【手机版—电脑版】可随意切换的功能,所以最终安装的是第一个。

安装之后,设置一看就懂,就不多说了,贴下设置界面,供参考:

在设置的最下面有这样一段 Tips:

 Theme Switch Shortcode Use the following shortcode 【show_theme_switch_link】in templates to show the theme switch link. Example: <?php echo do_shortcode('【show_theme_switch_link】'); ?> You can also add Switch Mobile Theme link to your Menus from Custom Links section under Appearance > Menus. Example: Url : http://zhangge.net/?am_force_theme_layout=desktop (For Mobile Theme) Url : http://zhangge.net/?am_force_theme_layout=mobile (For Desktop Theme) Label : As you wish

不难发现,这段英文是告诉咱们切换主题的连接代码有 2 种:

第一种:自动切换链接:当前为 PC 端主题时,它就显示你上图设置的【简洁版】,反之则为电脑版(推荐使用)!

  1. <?php echo do_shortcode('[show_theme_switch_link]'); ?>  //Ps:中括号[]已改为全角显示

第二种:写死的链接,如下编写后放到你要切换的位置,鸟哥的就是这样做的(不智能,懒得推荐)。

<a href="http://zhangge.net/?am_force_theme_layout=desktop">桌面版</a>   
<a href="http://zhangge.net/?am_force_theme_layout=mobile">移动版</a>

我认为第一种最适合我的胃口,将其贴到 Mobile Pack 主题下的 footer.php 相应位置即可实现【简洁版】—【电脑】自动显示。对于 footer 的其他微调,每个人都有自己的喜好,我就不啰嗦了,有什么疑问留言问我好了。

首页文章数

首页文章默认显示 16 篇,如果你要修改这个数字,可以打开主题下的首页模板 (index.php),找到第 5 行:

<?php $posts = query_posts($query_string . '&orderby=date&showposts=16'.'&caller_get_posts=10');?>

修改代码中的 16 为你希望初始显示的篇数即可。

导航设置

重点来了,如果之前你没遇到过,估计真的要认真看看这一段关于这个主题分类导航的设置:

这个移动主题的分类导航,鸟哥用的是 WordPress 的 wp_list_cats 函数,输出分类的代码位于主题下的 header.php、index.php 以及 archive.php 中,搜索关键字 wp_list_cats 即可定位。我们要 DIY 这个分类导航就必须了解每个参数的意思,然后再根据自己的喜好自由组合,下面我就先贴上这个函数的所有参数:

WordPress wp_list_cats函数的参数说明:   
    
sort_column   
ID 或 name,预设为 ‘ID   
分别为依 ID 值或分类名称排序   
  
sort_order   
asc 或 desc,预设为递增 asc   
排序递增或递减   
  
list   
0 或 1,预设为以清单方式显示: 1   
设定是否以清单方式显示?   
将会在分类上加上    
<ul> <li>  
  
optiondates   
0 或 1,预设为不显示: 0   
设定是否显示每个分类下最新发表文章的发表日期?   
  
optioncount   
0 或 1,预设为不显示: 0   
是否显示分类所拥有的文章计数?   
  
hide_empty   
0 或 1,预设为隐藏: 1   
设定是否隐藏无文章的分类?   
  
use_desc_for_title   
0 或 1,预设为显示成分类说明: 1   
设定分类连结的title是否显示为分类说明?    <a title="分类说明" href="…>  
children   
0 或 1,预设为显示: 1   
是否显示子分类   
  
hierarchical   
0 或 1,预设为层级方式显示: 1   
子分类是否以层级方式显示   
  
child_of   
无预设值   
只显示某项分类(ID)的子分类   
child_of=分类ID值   
有设定此项目的话,hide_empty要设为0   
  
exclude   
无预设值   
设定不要显示的分类ID,可为复数   
如 exclude=ID1,ID2,ID3,…..   
  
feed   
无预设值   
设定分类 RSS 的显示文字   
如 feed=RSS  
如果这个项目有设定的话,分类之後将会显示分类Feed的连结   
  
feed_image   
无预设值   
设定分类 RSS 的图片路径   
如 feed=images/rss.gif   
如果同时有设定 feed_image 与 feed,则将以 feed_image 为主

这个主题原版的分类输出代码如下:

<?php wp_list_cats('show_count=0&list=1&sort_column=name&hierarchical=0&exclude='); ?>

简单说明:参考上面参数,很容易就得出原版主题分类输出格式为:不显示分类文章数-以清单显示-按分类名排序-关闭子分类的层级显示-显示所有有文章的分类。

未修改之前,这个分类输出格式不对我的胃口,比如:

  • 我想显示顶级分类【系统运维】,但因为这个分类下并不是直接包含文章,所以不会显示。因此,我必须加上 hide_empty=0;
  • 我想以 ID 递增的方式来排序,所以我加上了 sort_column=id、sort_order=desc;
  • 我需要显示子分类,所以我还加上了 children=1;
  • 我要隐藏某些不想显示的分类,因为最后还要考虑到排版整齐的问题。

下面就是我 DIY 之后的分类调用代码,供参考:

<?php wp_list_cats('show_count=0&list=1&hide_empty=0&sort_column=id&hierarchical=0&children=1&sort_order=desc&exclude=6,10,127,125,126,3,69'); ?>

看到这里,应该都会自己 DIY 这个分类导航了吧!希望大家都可以调整到自己想要的效果,有任何问题可以给我留言。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏有趣的django

博客园美化终极版-(自定义导航栏)----什么CSDN、简书、腾讯云专栏、个人博客和微信公众号都弱爆了

6880
来自专栏QQ音乐技术团队的专栏

web实时长图实践

本文将介绍几种浏览器端和服务器端 web 实时生成图片的方案,欲知详情请看文章详情。

1.3K8
来自专栏陈满iOS

[iOS学习笔记]·第三方网络图片处理框架:SDWebImage(官方文档翻译篇)

该库提供了具有缓存支持的异步图像下载器。为方便起见,我们为UI元素例如UIImageView,UIButton,MKAnnotationView等类添加了cat...

3122
来自专栏進无尽的文章

绘图-iOS在OC项目中集成Charts绘制图表框架

引入完成之后,编译一下,如果有错,Clean一下再次编译,编译没有错误说明导入成功.

1.4K2
来自专栏花叔的专栏

教你做个手绘板小程序码

话说上一条群发,我发了一个旅行青蛙相关的图,底部有个手绘的小程序码 ? 有些细心的同学惊奇第发现那个“”手绘“”的小程序码竟然是可以长按识别的,觉得特别神奇。 ...

2914
来自专栏微信公众号:Java团长

你们都在用IntelliJ IDEA吗?或许你们需要看一下这篇博文

以前一直用的elipce,如今入坑IntelliJ IDEA,没想到啊。深深的爱上了它,强大到无所不能;

1653
来自专栏葡萄城控件技术团队

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在线...

1.5K6
来自专栏Golang语言社区

【图解】Web前端实现类似Excel的电子表格

本文将通过图解的方式,使用纯前端表格控件 SpreadJS 来一步一步实现在线的电子表格产品(例如可构建Office 365 Excel产品、Google的在...

5209
来自专栏冰霜之地

WWDC2016 Session笔记 - Xcode 8 Auto Layout新特性

Incrementally Adopting Auto Layout是什么意思呢?在我们IB里面布局我们的View的时候,我们并不需要一次性就添加好所有的con...

863
来自专栏JackieZheng

可视化工具solo show-----Processing Prefuse show

  继上篇《可视化工具solo show》罗列出一些主要基于Java开发的软件、插件之后,又仔细揣摩了下哪些可以为我所用。   一番端详之后,准备挑出其中Pro...

2086

扫码关注云+社区

领取腾讯云代金券