ユーザーがモバイルかデスクトップかによって異なるヘッダーイメージを表示しますか？ （Wordpress、 "TwentySeventeen"）

Question

これは愚かなばかげた質問かもしれません、残念です。私は背景にの画像をたくさん見つけましたが、Wordpressの "twentyseventeen"は "ヘッダーメディア"を使用しています。これはデスクトップ/モバイルに基づいて変更したいものです。

基本的に、モバイルの場合、デスクトップの場合は「header-a.jpg」、デスクトップの場合は「header-b.jpg」となります。

私はCSSソリューションがあると思いますが、私はそれを見つけることができません！

私を助けてくれてありがとう！

Answer 1

をチェックしてください。この関数は、ヘッダーで使用されるイメージタグを構築します。関数の最後に、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); 

Answer 2

私は単語プレスコードの下で試してみましたが、このコードではモバイル版やデスクトップ版のウェブサイトの読み込みが検出された場合、このコードはタブレットをモバイルと見なしています。

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

    /* header-a.jpg */ 

} 
else{ 
    /*desktop specific stuff*/ 


    /* header-b.jpg */ 

} 
?> 

それはデフォルトのテーマですので、あなたが見てみたい機能がget_header_image_tag()で、リンクの下に

wp is mobile