Iconic One主题手机端面包屑导航折腾记录

发表于 分类于
Iconic One主题手机端面包屑导航不显示的折腾过程，试过CSS方案但效果不理想，最后改用一行PHP代码解决。

Iconic One 是一个设计比较清新的免费 WordPress 主题，布局简洁，加载也快，适合内容型博客。用这个主题的时候遇到一个问题：面包屑导航在桌面端显示正常，切到手机屏幕就不见了。

第一反应是用 CSS 强制显示，思路是用媒体查询针对手机屏幕单独写样式，加上 display: block !important 和 visibility: visible !important 强制让面包屑容器显示出来，顺带统一链接颜色。代码写了一大段，涉及媒体查询、容器定位、内部元素的 inline-block 处理，看起来挺完整的。

实际效果不理想，手机端显示出来但样式乱，不同手机屏幕宽度下表现不一致，花时间调了几次还是没调好。复杂方案搞不定，最后决定放弃这条路。

换了一个思路，不用CSS控制显示，改用PHP直接输出面包屑结构。

具体实现参考一行代码给wp添加面包屑导航，一行PHP输出首页链接、当前分类和文章标题，不带任何预设样式。

这段代码输出的是最基础的面包屑结构，首页链接加上当前文章的分类和标题，不带任何预设样式，手机端和桌面端都能正常显示，不需要媒体查询，也不需要 !important 强制覆盖。样式完全自己控制，想怎么改就怎么改，反而比复杂的CSS方案更灵活。

把这段代码加到主题的 single.php 或者 header.php 里合适的位置就行，具体放哪里取决于你想让面包屑出现在页面的哪个位置。不需要装任何插件，也不依赖主题本身有没有内置面包屑功能。

Iconic One 主题本身设计上没什么大问题，清新简洁，适合内容为主的博客，手机端自适应也做得不错，面包屑这个问题算是个小瑕疵。如果你也在用这个主题遇到类似问题，直接用这个PHP方案比折腾CSS省事得多。CSS版本的实现可以参考css的方式一行代码给wordpress添加面包屑导航，样式部分已经写好，直接套用。