2013-04-23 36 views
14

我想为我的移动版本的网站设置一个不同的静态主页。 这不是一个真正的额外的移动版本,但它是响应。如何为移动版本设置不同的静态主页? (wordpress)

我有一个全屏图像滑块现在设置为静态主页。由于网站的重构性,这扩大了屏幕尺寸,但在移动设备(如iPhone)上看起来不太好。所以当我在移动设备上查看网站时,我想使用其他主页模板。

这可以通过任何插件来完成,还是应该通过编码完成?我不想使用主题切换器或类似的东西,我只想为移动设备设置不同的静态页面。

任何人都知道如何做到这一点?

回答

10

你可以使用wp_is_mobile检查手机,如果检测到移动钩到template_redirect加载不同的模板:

function so16165211_mobile_home_redirect(){ 
    if(wp_is_mobile() && is_front_page()){ 
     include(get_template_directory() . '/home-mobile.php'); 
     exit; 
    } 
} 
add_action('template_redirect', 'so16165211_mobile_home_redirect'); 
+0

我可能是错的(我希望我是因为我想也喜欢使用这个),但我知道'wp_is_mobile'还包括它将应用重定向到的设备列表中的平板电脑?你是否一直在使用这个,你能证实吗? +1 – McNab 2013-04-24 09:10:52

+1

代码不完美,您可能会发现这个讨论很有趣:http://wordpress.stackexchange.com/questions/73273/wp-is-mobile-function – diggy 2013-04-24 09:41:10

+0

非常有用的链接,谢谢:) – McNab 2013-04-24 10:18:15

0

你可以尝试使用detectmobilebrowsers脚本。

正如我记得它只是一个PHP文件,并有一个功能,要求如何处理不同的移动设备(iPhone,iPad,Android,Windows手机,黑莓和Palm设备)。

您可以通过转至此function generator页面更好地了解脚本的工作原理。

9

我将包括Mobile-Detect到自己的文件夹为主题,在的header.php的开头添加以下代码:

if(is_front_page()){ 

    include_once('mobile-detect/Mobile_Detect.php'); 
    $detect = new Mobile_Detect(); 

    if ($detect->isMobile() || $detect->isTablet()) { 
     $redirect_url = 'http://example.com/mobile_home'; 
     header('Location: ' . $redirect_url); // Redirect the user 
    } 
} 

您可以自定义该解决方案的工作,就像你想要的。我已经将这个用于几个相似的解决方案。

+0

我用过这在几个项目上也是如此 - 它工作的很好,而且很容易定制。 – gscharles 2013-05-03 15:31:29

0

这很简单,不需要编写任何代码。从wordpress存储库安装“重定向”插件。 1.转到设置页面。 2.在默认桌面主页上输入“源URL” 3.在“匹配”选项上,在“操作”选项中选择“URL和用户代理”&选择“重定向到URL”。点击“添加重定向”。 4.将出现新的配置选项。给你想要的任何标题。 “源URL”必须是空白的(表示这是您的基本主页)。在“用户代理”选项中,选择iPhone或Android。在“匹配”选项中,为移动主页设置所需的重定向。

完成!

您肯定可以根据您之前使用该插件设置的重定向来区分桌面设备和移动设备上的主页。但是,您不能使用相同的网址名称(例如:www.abcde.com用于移动设备的桌面& www.abcde.com/mobilehomepage)。

0

这应该工作:(在functions.php的插入)

//* Redirect homepage on mobile 
 
add_action('wp_head', 'wps_params', 10); 
 
function wps_params() { 
 
    ?> 
 
    \t <script> 
 
\t if (window.location.pathname == '/' && jQuery(window).width() <= 480) { 
 
\t window.location = "/webshop/"; 
 
\t } 
 
\t </script> 
 

 
    <?php 
 
}

替换 “/网店/” 与您的移动网页的链接。

0

这对我来说是很大的:

function so16165211_mobile_home_redirect(){ 
    if(wp_is_mobile() && is_front_page()){ 
     include(get_template_directory() . '/home-mobile.php'); 
     exit; 
    } 
} 
+0

也许扩大这个答案与代码应该去哪里,它做什么以及如何使用它? – Clonkex 2017-06-14 00:26:50

0

添加以下到您的functions.php应该做的伎俩:

//* Redirect homepage on mobile 

add_action('wp_head', 'wps_params', 10); 

function wps_params() { 
?> 

<script> 
if (window.location.pathname == '/' && jQuery(window).width() <= 480) { 
    window.location = "/webshop/"; 
} 
</script> 

<?php 
} 
相关问题