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

Posted 2023-03-06

【中文标题】根据用户是移动设备还是桌面设备显示不同的标题图像？ （Wordpress，“二十七”）

【英文标题】：Display a different header image depending on if the user is mobile or desktop? (Wordpress, "TwentySeventeen")

【发布时间】：2018-05-03 07:15:12

【问题描述】：

这可能是个愚蠢的问题，对不起。我在 background 图片上找到了很多，但 Wordpress “twentyseventeen” 使用“header media”，这就是我想根据桌面/移动设备更改的内容。

基本上，如果是移动设备，它们会得到“header-a.jpg”，如果是桌面设备，它们会得到“header-b.jpg”。

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

非常感谢您帮助我！

【参考方案1】：

由于它是默认主题，因此您要查看的功能是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);

【讨论】：

谢谢，是不是只要把这段代码加到我的子主题functions.php中就这么简单？抱歉这个完全愚蠢的问题，但是我在“在此处插入自定义标题图像标签”中的输入具体是什么样的？

@Ads 是的。如果您将其上传到 WordPress 媒体库，“在此处插入自定义标题图像标签”将类似于 <img src="http://yourdomain.com/wp-content/uploads/2017/11/filename.jpg"/>。

谢谢，但是它给了我这个错误：由于文件 wp-content/themes/twentyseventeen-child/functions.php 的第 619 行出现错误，您的 PHP 代码更改已回滚。请修复并再次尝试保存。语法错误，意外 ''custom_header_image_tag, 10, ' (T_ENCAPSED_AND_WHITESPACE)

忽略这一点，这只是一个缺失的 ' THANK YOU 完美工作

【参考方案2】：

我尝试了下面的 word press 代码，它对我有用，它可以检测网站是否加载到移动设备或桌面，如文档中所述，此代码将平板电脑视为移动设备。

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

    /* header-a.jpg */


else
    /*desktop specific stuff*/


    /* header-b.jpg */


?>

查看下面的链接，

wp is mobile

【讨论】：

谢谢，但它没有检测到我遇到问题的手机。如果检测到移动设备，我希望它提供不同的标题图像。这就是问题所在，一旦检测到移动设备，我不知道如何告诉它该怎么做。