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

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

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

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

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

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


调度插件

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

使用说明:

主题需配合Wordpress移动设备检测插件:

Any Mobile Theme Switcher

wordpress mobile pack

Device Theme Switcher

安装并启用上述任何一款移动设备检测插件都可以

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

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

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

在设置的最下面有这样一段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 张戈博客成功启用移动端主题:Mobile Pack

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

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

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

 

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

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

首页文章数

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

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

导航设置

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

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

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

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

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

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

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

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

发表评论

gravatar

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

刷新评论

目前评论:86   其中:访客  48   博主  38

  1. 小新 5 来自天朝的朋友 未知浏览器 Unknow Os 江苏省宿迁市沭阳县 电信

    不错 样式不错 排版也干净利落。看来是去掉一块心病啊 评论” alt=”[哈哈]” title=”[哈哈]” class=”ds-smiley” />

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      评论” alt=”[嘻嘻]” title=”[嘻嘻]” class=”ds-smiley” />

  2. 潮流台 2 来自天朝的朋友 未知浏览器 Unknow Os 安徽省淮南市 电信

    评论” alt=”[嘻嘻]” title=”[嘻嘻]” class=”ds-smiley” /> 俺用的国外的主题,自动适应啊

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      我这个也是自适应的,可以试试点下面的简洁版试试~

      • 潮流台 2 来自天朝的朋友 未知浏览器 Unknow Os 安徽省淮南市 电信

        评论” alt=”[挤眼]” title=”[挤眼]” class=”ds-smiley” /> 我知道,我以前用过鸟哥的这个主题

        • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

          评论” alt=”[嘻嘻]” title=”[嘻嘻]” class=”ds-smiley” /> 回家有WIFI再去看看你的~

  3. 彼岸时光网 4 来自天朝的朋友 未知浏览器 Unknow Os 云南省昆明市 电信

    博主做的不错,现在手机端已经迫在眉睫了啊。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      以后将是移动端时代。~ 评论” alt=”[哈哈]” title=”[哈哈]” class=”ds-smiley” />

      • 彼岸时光网 4 来自天朝的朋友 未知浏览器 Unknow Os 云南省昆明市 电信

        评论” alt=”[抱抱]” title=”[抱抱]” class=”ds-smiley” /> 是啊,呵呵,向移动端靠近啊!

      • 爱知识 2 来自天朝的朋友 未知浏览器 Unknow Os 河北省沧州市 联通

        自适应呢

        • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

          这个主题思自适应的。

  4. 孟园和唐秋婉 1 来自天朝的朋友 未知浏览器 Unknow Os 湖北省襄阳市 电信

    晚上,默默的路过

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      暗夜幽魂么~~

  5. 爱知识 2 来自天朝的朋友 未知浏览器 Unknow Os 河北省沧州市 联通

    我其实很纠结手机版和自适应这两种技术的选择,我感觉手机版还能把选择权交给用户,而自适应完全看用户设备了,

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      所以只好弄2个主题了,用调度插件来实现切换,PC的主题能自适应的还真不多。

  6. 博客互推联盟 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 宽带通

    自适应现在是大趋势了,咱们大家都得往移动领域多放些心思,不能仅仅在PC博客领域固步自封。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      恩,确实要注重下移动端的体验了,比如微博,微信都是手机端的用户多。

  7. 宿迁波仔博客 3 来自天朝的朋友 未知浏览器 Unknow Os 江苏省南京市 联通

    移动端,准备如何推广啊

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      从来没想过推广呢~~这个博客真的只是记录工作经验而已。。。我这种类型的博客也不好推广,感兴趣的人真心不多。

  8. 我爱集分宝 1 来自天朝的朋友 未知浏览器 Unknow Os 湖北省宜昌市远安县 电信

    移动端看到好多站是用这个主题,手机体验非常好

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      鸟哥做的东西还是不错的,这主题还是一年前做的。

  9. PHP二次开发 6 来自天朝的朋友 未知浏览器 Unknow Os 山东省济南市 联通

    不错不错。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      评论” alt=”[嘻嘻]” title=”[嘻嘻]” class=”ds-smiley” />

  10. 百家网络博客 3 来自天朝的朋友 未知浏览器 Unknow Os 广东省广州市 联通

    移动版加入站点统计,加载有难度。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      可能是某些浏览器对js的支持不好,回头研究下有没有替代方法。

  11. 王英学博客 5 来自天朝的朋友 未知浏览器 Unknow Os 北京市 联通

    你默认的是移动端得么?一登陆跳转到移动端得界面。。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      加入了调度插件,自动判断的~你可以细看文章。

      • 王英学博客 5 来自天朝的朋友 未知浏览器 Unknow Os 北京市 联通

        我打算今晚回去研究研究你这篇文章。你可以自己用新账号登陆看看效果哦,感觉那样对用户体验不好

  12. 王英学博客 5 来自天朝的朋友 未知浏览器 Unknow Os 北京市 联通

    我用的就是wptouch。看来我也要重新弄一下了,还是你那个好看

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      这个更简洁,WPtouch的太复杂了,影响速度。

  13. 王英学博客 5 来自天朝的朋友 未知浏览器 Unknow Os 河北省秦皇岛市 电信

    在次来了,认真看了一遍,过几天就可以看到我的了哦

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      倒是记得发文通知,俺一定前去支持。

  14. 草陌 3 来自天朝的朋友 未知浏览器 Unknow Os 广西柳州市 电信

    的确要弄一下移动版的了

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      是啊,微博以及其他社区分享过去的话,还是手机端的用户最多啊,别人发现打开要半天,而且还因为不自适应看不清,肯定不会再来了。

  15. 51onb分享网 | 51onb.com 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 铁通

    挺好的,但是大前端的主题移动端的总是感觉怪怪的!

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      是么?我都没注意过D8的移动版,我待会去瞅瞅~

  16. 美丽的民工 1 来自天朝的朋友 未知浏览器 Unknow Os 陕西省西安市 电信

    不错啊 ,学习了!!

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      评论” alt=”[握手]” title=”[握手]” class=”ds-smiley” />

  17. 互传分享站 0 来自天朝的朋友 未知浏览器 Unknow Os 广西南宁市 电信

    学习啦!!!!!!

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      评论” alt=”[握手]” title=”[握手]” class=”ds-smiley” />

  18. Youth.霖 4 来自天朝的朋友 未知浏览器 Unknow Os 吉林省长春市 吉林大学

    原来是插件,再好多个地方看到过

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      明显不是插件。。。
      只是用了调度插件判断是否是移动设备而已,主题是鸟哥的Mobile Pack

      • Youth.霖 4 来自天朝的朋友 未知浏览器 Unknow Os 吉林省长春市 吉林大学

        啊!不是插件!我错了

        • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

          哈哈,灌水被抓了吧

      • Youth.霖 4 来自天朝的朋友 未知浏览器 Unknow Os 吉林省长春市 吉林大学

        用响应式主题就不需要了哇啊哈哈

        • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

          嗯,确实。等闲下来了再研究下。

  19. 电子商务文摘 3 来自天朝的朋友 未知浏览器 Unknow Os 浙江省杭州市 电信

    赞一个

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      多谢支持

  20. 蚂蚁笔记 2 来自天朝的朋友 未知浏览器 Unknow Os 北京市 宽带通

    看望博主,现在移动端自适应确实很重要,对网站排名都有一定的影响了!学习了!

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      评论” alt=”[握手]” title=”[握手]” class=”ds-smiley” /> 以后应该就是移动端的天下了。发展太快了。

  21. Cyclone 0 来自天朝的朋友 未知浏览器 Unknow Os 广西桂林市 电信

    主题感觉挺清爽干净的,支持下,我现在用这Zanblog的主题,自适应也不错的

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      感谢支持~ 评论” alt=”[握手]” title=”[握手]” class=”ds-smiley” />

  22. 周良 2 来自天朝的朋友 未知浏览器 Unknow Os 湖南省长沙市 电信

    哇哦 很赞

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      矮哟,不错哦~ 评论” alt=”[嘻嘻]” title=”[嘻嘻]” class=”ds-smiley” />

      • 周良 2 来自天朝的朋友 未知浏览器 Unknow Os 湖南省长沙市 电信

        我在想要不要弄一个 但是 貌似几乎没人在移动端访问我的站 评论” alt=”[思考]” title=”[思考]” class=”ds-smiley” />

        • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

          不会啊,你想想,分享到微博、微信、QQ空间的文章,大多数都是手机段用户呢。

          • 周良 2 来自天朝的朋友 未知浏览器 Unknow Os 湖南省长沙市 电信

            也是 不过 分享的少

  23. 网赚沙龙 1 来自天朝的朋友 未知浏览器 Unknow Os 河南省信阳市固始县 电信

    博主,安装你的方法设置好了,但是我用手机浏览我博客的时候还是显示的是电脑的主题啊,不能用啊

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 电信

      联系我的邮箱ge@marsge.cn’获取QQ

  24. 网赚沙龙 1 来自天朝的朋友 未知浏览器 Unknow Os 河南省信阳市固始县 电信

    手机检测不到手机主题,显示的还是电脑端的主题,Mobile Pack和Any Mobile Theme Switcher都安装了还是不行,请教你了,如何跟博主取得联系啊?

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      你的在电脑里面看都是手机主题呢。。。

  25. Alick.Li 4 Singapore 未知浏览器 Unknow Os 新加坡 电信

    好多技术文章 支持了 !手机版不错哦

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      鸟哥做到主题,还行。

      • Alick.Li 4 Singapore 未知浏览器 Unknow Os 新加坡 电信SINGNET

        来盖楼了!

  26. 吴晓阳博客 4 来自天朝的朋友 未知浏览器 Unknow Os 浙江省宁波市 电信IDC机房

    技术类博客比较受欢迎

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      不对哦~技术类的最没人看了,不过建站类的还行~~那啥linux的,一般人不会看,做这行的呢也不会来我这~~~o(︶︿︶)o 唉,还好我做博客不是为了网络营销,只是记录工作,否则还真没动力做下去呢。

  27. 电子商务文摘 3 来自天朝的朋友 未知浏览器 Unknow Os 浙江省杭州市 电信

    不错啊 赞一个

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      评论” alt=”[握手]” title=”[握手]” class=”ds-smiley” />

  28. 周小姐‘ 3 来自天朝的朋友 未知浏览器 Unknow Os 河南省郑州市 移动

    w我的移动端有bug

  29. 梦轩丽人 6 来自天朝的朋友 未知浏览器 Unknow Os 广西南宁市 电信

    我还在用WPtouch插件呢,不懂如何入手移动端主题,打算不管它了。

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      你按照我这个来,相当简单了。。

      • 梦轩丽人 6 来自天朝的朋友 未知浏览器 Unknow Os 广西南宁市 电信

        看过去都是英文的,等哪天有空再到这里研究研究。

  30. 梁小小 3 来自天朝的朋友 未知浏览器 Unknow Os 广东省广州市 电信

    对的 鸟哥这个手机主题很不错

    • 张戈 [博主] 来自天朝的朋友 未知浏览器 Unknow Os 广东省深圳市 联通

      要是谁能弄个JS主题调度就好了,就可以不受缓存的影响了。。。

  31. leiboy 5 来自天朝的朋友 未知浏览器 Unknow Os 北京市西城区 联通

    我直接用的响应式主题,就不用这么麻烦了

  32. wordpress初学 1 来自天朝的朋友 谷歌浏览器 Windows XP 河南省许昌市 联通

    我也在用Mobile Pack这款移动主题,可是最近我才发现,点击导航菜单却无法显示分类目录下的内容。比如我测试发现的:点击“分类目录一、或分类目录二”提示“你迷路了?”我看了主题文件,没有找到category.php文件,不知道是不是这个原因,向您请教下为什么点击分类目录会无法找到此分类下的内容呢?

    • 张戈 [博主] 来自天朝的朋友 谷歌浏览器 Windows 7 广东省深圳市 联通

      2种可能:要么就是伪静态,要么就是代码错误。

      • wordpress初学 1 来自天朝的朋友 谷歌浏览器  Che2-UL00 Build/HonorChe2-UL00) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 河南省许昌市 联通

        这个主题我是从知更鸟官网下载的,代码难道也会有错吗?我的链接形式是伪静态,是这个原因引起的吗?
        如果博主方便,能否把你正用的或修改过的这个移动主题发到我邮箱,我好比较查看是哪里出了错,先谢谢了。1731956779@qq.com
        最后,想再问一下:您的博客主题很不错,请问用的是什么主题?

        • 张戈 [博主] 来自天朝的朋友 Safari浏览器  Android 4.4.2 NX40X Build/KOT49H 广东省广州市 移动

          你网站都不填写感觉没啥诚意。我之前用的也是同一个地方下载的,代码应该没问题,现在用的主题和这个mobile 也出自同一个地方,付费主题,建议用这款,省的折腾移动站。

  33. island 0 这家伙可能用了美佬的代理 谷歌浏览器 Windows 7 美国 圣安娜Krypt机房

    按照方法折腾了下,结果出现了大问题。难道是我下载的有代码问题,因为官方的没有找到,在网上找的。望指教

  34. 三月鸟 0 这家伙可能用了美佬的代理 谷歌浏览器 Windows 10 美国 Microsoft公司

    资源占用怎么样。。。我开了插件mysql就会因为内存不足被杀掉。。。

  35. 麻布兜 1 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信

    博主我想问问,这个简洁版的主题,怎么设置手机域名啊?这个插件好像没有填二级域名的选项

    • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

      WordPress Mobile Pack 是这个插件

      • 麻布兜 1 来自天朝的朋友 谷歌浏览器 Windows 7 四川省成都市 电信

        Any Mobile Theme Switcher,博主那这两个你一起用吗

        • 张戈 [博主] 来自天朝的朋友 QQ浏览器 Windows 7 广东省广州市 电信

          为什么要2个一起用?WordPress Mobile Pack 一个足矣。

加载中,请稍候...