虽然说 Forece 的主题模板支持 Responsive ,也就是对移动端可以自动缩放。中文叫什么来的,好像是响应式的主题设计。但是哥觉得模板太丑了,而且手机模板并不需要那么多功能。于是就找到了这个插件 - WPtouch。
OK,安装后完美实现了移动端使用另一套模板。如果大家喜欢好看的模板,那么需要自行购买,或者自己修改。
PS: 目前 Forece 测试的 WPtouch 版本是:4.3.19 ,可能以后升级版本代码会有所变动。请自行查找或者留言给 Forece
WPtouch分为免费版和收费版,免费版的功能对于一般的博客已经够用了,只是之后作者版本升级去掉了广告支持的功能,这对于玩广告的博主来说无疑是一大损失。如果WPtouch免费版加上广告功能就两全其美了。
那么接下来要考虑的就是如何在模板中加各种需要的代码了。比如 Google Adsense 广告代码、比如打赏代码、分享代码之类的。
和普通主题一样,我们直接进入 WPtouch 主题的自带模板中,修改代码即可。不过此方法的唯一缺点就是:插件升级的话修改的内容就被覆盖掉了,需要重新添加广告代码。
1、进入WPtouch插件的主题目录:/wp-content/plugins/wptouch/themes/bauhaus/default/
2、根据需要修改目录下的文件,我这里修改index.php和single.php两个文件,一个是主页面,一个是文章页面。
index.php 主页面添加广告方法:
1 2 3 4 5 6 7 8 | <?php get_header(); ?> <!-- 广告代码片段--> <?php if ( !bauhaus_if_carousel_view_enabled() && bauhaus_should_show_featured() ) { ?> <?php bauhaus_featured_slider(); ?> <?php } ?> <div id="content"> <!-- 广告代码片段--> |
single.php 文章页面添加广告方法:
1 2 3 4 5 6 7 8 9 | <!--广告代码片段--> <div class="post-page-content"> <?php if ( bauhaus_should_show_thumbnail() && wptouch_has_post_thumbnail() ) { ?> <div class="post-page-thumbnail"> <?php the_post_thumbnail('large', array( 'class' => 'post-thumbnail wp-post-image' ) ); ?> </div> <?php } ?> <?php wptouch_the_content(); ?> <!-- 广告代码片段--> |
最后提醒一下安装了缓存插件的朋友,如果大家装了缓存插件的话,有可能会出现移动端及电脑端都显示移动主题的问题,这是什么原因呢?其实是缓存插件将移动端的主题给缓存起来了,结果电脑端的用户访问的时候显示的是缓存页面。解决该问题有两种方法。
一、直接删除缓存
这个方法治标不治本,可能以后还会出现类似的状况。
二、修改缓存插件设置
先启用wptouch插件
选择设置 -> WP Super Cache
在Advance mode下勾选Mobile device support并保存
按照提示点击”Update Mod_Rewrite Rules”
插件兼容模式下启用WPTouch并保存
由于wp-super-cache提供了针对wptouch的兼容选项,所以只需要以上几步就可以解决这个问题。