张戈博客成功启用移动端主题: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 : 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 端主题时,它就显示你上图设置的【简洁版】,反之则为电脑版(推荐使用)!

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

 

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

<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 这个分类导航了吧!希望大家都可以调整到自己想要的效果,有任何问题可以给我留言。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇