根据用户是移动用户还是桌面用户，显示不同的标题图像？ （Wordpress，“TwentySeventeen”）

Question

这可能是一个愚蠢的愚蠢问题，对不起。我在背景图像上找到了很多，但Wordpress“二十一岁”使用“标题媒体”，这就是我想基于桌面/移动设备进行更改。

基本上，如果移动他们得到“header-a.jpg”，如果桌面“header-b.jpg”。

我认为有一个CSS解决方案，但我找不到它！

非常感谢你帮助我！

Answer 1

我已经尝试了下面的单词新闻代码，它正在为我工​​作，检测网站是否加载到移动设备或桌面，如文档中所述，此代码将平板电脑视为移动设备。

<?php
if ( wp_is_mobile() ) { 
    /*mobile specific stuff*/

    /* header-a.jpg */

}
else{
    /*desktop specific stuff*/


    /* header-b.jpg */

}
?>

请查看以下链接，

wp is mobile

Answer 2

由于它是默认主题，因此您要查看的功能是get_header_image_tag()。此函数构造要在标头中使用的图像标记。在功能结束时，您可以使用get_header_image_tag过滤器更改其输出内容。

你需要添加一些PHP代码。因此，要么创建子主题并将代码添加到主题的functions.php文件中，要么创建自定义插件并在其中添加代码。代码应该是这样的：

function custom_header_image_tag( $html, $header, $attr ) {
    if(strstr($_SERVER['HTTP_USER_AGENT'],'Android') || strstr($_SERVER['HTTP_USER_AGENT'],'webOS') || strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') ||strstr($_SERVER['HTTP_USER_AGENT'],'iPod') || strstr($_SERVER['HTTP_USER_AGENT'],'iPad') || strstr($_SERVER['HTTP_USER_AGENT'],'Windows Phone') || wp_is_mobile()){
        $html = "insert custom header image tag here";
    }
    return $html;
}
add_filter( 'get_header_image_tag', 'custom_header_image_tag, 10, 3);