虽然说 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的兼容选项，所以只需要以上几步就可以解决这个问题。

打赏分享