建站以来,总是忙于 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 端主题时,它就显示你上图设置的【简洁版】,反之则为电脑版(推荐使用)!
第二种:写死的链接,如下编写后放到你要切换的位置,鸟哥的就是这样做的(不智能,懒得推荐)。
<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='); ?>
简单说明:参考上面参数,很容易就得出原版主题分类输出格式为:不显示分类文章数-以清单显示-按分类名排序-关闭子分类的层级显示-显示所有有文章的分类。
未修改之前,这个分类输出格式不对我的胃口,比如:
下面就是我 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 这个分类导航了吧!希望大家都可以调整到自己想要的效果,有任何问题可以给我留言。