根據用戶是移動用戶還是桌面用戶顯示不同的標題圖像？ （WordPress，“二十七歲”）

Question

對不起，這可能是一個愚蠢的問題。 我在背景圖片上發現了很多東西，但是Wordpress“ twentyseventeen”使用了“頁眉媒體”，這是我想基於台式機/移動設備進行更改的內容。

基本上，如果使用移動設備，則獲取“ 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是移動的

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);