ヘッダー画像をPCとモバイルで変更する方法

はじめに

Cocoon設定→ヘッダー→ヘッダーロゴの設定は、PCとモバイルで共通です。

しかし、モバイルボタンは表示領域の高さが50pxしかないため、横長の画像でない場合、ヘッダーロゴが小さく表示されてしまいます（図1参照）。

そこで、PCとモバイルでヘッダーロゴ画像を切り替えて表示します。

この記事では、この方法について説明します。

完成イメージ

実装手順

以下のコードをfunctions.phpに追加します。
これにより、モバイルで表示されるヘッダーロゴを指定します

add_filter('cocoon_part__tmp/mobile-logo-button', function ($content) {
  $url = 'モバイル用ロゴ画像URL';

  $w = new WP_HTML_Tag_Processor($content);

  // 対象CSSクラスを指定
  $w->next_tag([
    'tag_name'   => 'img',
    'class_name' => 'site-logo-image'
  ]);

  // モバイル用ロゴ画像を変更
  $w->set_attribute('src', $url);

  return $w->get_updated_html();
});

参考：CSSで実装する場合

PHPを使わずに、CSSのみでモバイル用のロゴを切り替えることも可能です。
以下のコードをstyle.cssに追加します。

.logo-menu-button {
  /* モバイルロゴ表示を非表示 */
  .site-logo-image {
    display: none;
  }

  /* 疑似要素で別のロゴを表示 */
  .menu-button-in {
    &::before {
      background-image: url(モバイル用ロゴ画像URL);
      background-repeat: no-repeat;
      background-size: contain;
      content: '';
      display: block;
      height: 60px; /* モバイル用ロゴ画像の高さ */
      width: 200px; /* モバイル用ロゴ画像の幅 */
    }
  }
}

さいごに

紹介した方法を使えば、PCとモバイルで異なるヘッダーロゴを簡単に変更できます。
これにより、ユーザーの端末に応じて最適なロゴが表示され、より一貫性のあるデザインを提供できます。