WordPressテーマのCocoonでは、パソコンとモバイルで同じロゴが表示されます。
しかし、デザインの関係上「パソコンとモバイルで別のロゴを表示したい」という場合もあると思います。
今回は、Cocoonの子テーマを編集して「PCとモバイルで表示するロゴを変える」方法をご紹介します。
テーマの編集は必ずバックアップを取って行うようにしてください。
Cocoonの設定をバックアップ
Cocoonの設定のバックアップを取っておきます。
管理画面から「Cocoon設定」→「バックアップ」→「バックアップファイルの取得」とクリックしていきましょう。
ファイルがダウンロードされるので、必要であれば名前を変えるなどしておいてください。
ロゴをアップロードする
管理画面の「メディア」欄からモバイルで使うロゴの画像をアップロードしておきます。
アップロードした画像の詳細画面の右下に「ファイルのURL」という項目があります。
こちらを後で使います。
子テーマ cocoon-child-master を編集する
基本的な子テーマの使い方はこちらで解説しています。
コードの変更はテーマフォルダをダウンロードしてPC上で行ってください。
子テーマ cocoon-child-masterに親テーマからtmpフォルダをコピーしておきます。（フォルダごとがおすすめ）
子テーマのtmpフォルダ内のmobile-logo-button.phpを開くと下の方に以下のようなコードがあります。
<!-- ロゴボタン -->
<li class="logo-menu-button menu-button">
<a href="<?php echo esc_url($home_url); ?>" class="menu-button-in"><?php
//ロゴが存在する場合は画像
if ($logo_url): ?><img class="site-logo-image" src="<?php echo esc_url($logo_url); ?>" alt="<?php echo esc_attr($site_logo_text); ?>"<?php echo $width_attr; ?><?php echo $height_attr; ?>><?php else: ?><?php echo $_MENU_CAPTION ? $_MENU_CAPTION : $site_logo_text; ?><?php endif; ?></a>
</li>
赤文字の部分を先ほどアップロードしたロゴのURL（先ほどのファイルのURL）に書き換えます。
<!-- ロゴボタン -->
<li class="logo-menu-button menu-button">
<a href="<?php echo esc_url($home_url); ?>" class="menu-button-in"><?php
//ロゴが存在する場合は画像
if ($logo_url): ?><img class="site-logo-image" src="https://ｘｘｘｘ.com/wp-content/uploads/xxxxx.jpg" alt="<?php echo esc_attr($site_logo_text); ?>"<?php echo $width_attr; ?><?php echo $height_attr; ?>><?php else: ?><?php echo $_MENU_CAPTION ? $_MENU_CAPTION : $site_logo_text; ?><?php endif; ?></a>
</li>
保存して、編集した子テーマをアップロードして適用すれば完成です。
まとめ
今回はCocoonでロゴをPCとモバイルで変える方法をご紹介しました。
子テーマのPHPを編集するので、少し難しいかもしれませんが、子テーマで色々編集できるとデザインの幅が広がるので、チャレンジしてみてください。
