建站以来，总是忙于 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 : https://zhang.ge/?am_force_theme_layout=desktop (For Mobile Theme)
Url : https://zhang.ge/?am_force_theme_layout=mobile (For Desktop Theme)
Label : As you wish :)

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

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

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

<a href="/?am_force_theme_layout=desktop">桌面版</a>   
<a href="/?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 这个分类导航了吧！希望大家都可以调整到自己想要的效果，有任何问题可以给我留言。