css - wordpress 上移动设备的不同 header.php？

Question

首先:抱歉我的英语不好，我来自德国。

我的 wordpress 主页在移动设备上出现了一个大问题。网站是:www.hd-sign.de

如果你在电脑上打开这个页面，一切看起来都很好，但是如果我在移动设备上打开这个页面，左边的文本框在“HD - Sign”文本上面，看起来很糟糕。

你可以在“am i responsive”上明白我的意思。

我将移动设备检测插件安装到 Wordpress 并将其添加到我的 custom.css 文件中:

include Mobile_Detect.php;
$detect = new Mobile_Detect;
if( ! $detect->isMobile() {
include "mobile_header.php";
}

else {
include "header.php";
}

但它不会起作用。可以肯定的是，我将 header.php 和 mobile_header.php(没有加框文本)安装到我的主主题文件夹中。

我在过去的 5 个小时里尝试了很多不同的方法，但我仍然无法解决这个问题。

非常感谢您的每一个回答!

编辑:

感谢您的每一个回答，实际上我得到了以下代码:

include Mobile_Detect.php;
$detect = new Mobile_Detect;
if( ! $detect->isMobile() ) : {
function get_header( 'mobile' );
}
else : {
function get_header();
endif;
}

我不确定这段代码是否正确，也绝对不确定我是否必须将代码放在“general-template.php”或我的自定义 css 中。很抱歉这个愚蠢的问题，但我刚刚开始使用 html 和 css。如果有人能告诉我必须将(正确的？)代码放在哪里，那就太好了!

谢谢!

Answer 1

像这样命名你的文件:

header.php
header-mobile.php

并使用 WordPress 约定来调用您的标题:

// default
get_header();

// mobile
get_header( 'mobile' );

除此之外，我强烈建议研究响应式网页设计和媒体查询。当页面第一次加载时，您的标题将加载一次。当您使用此技术调整浏览器窗口大小时，它不会改变。

资源:

get_header() 的 WordPress 函数引用 - http://codex.wordpress.org/Function_Reference/get_header