こんにちは。サンチョです。
今回はCocoonでPC版とモバイル版のヘッダー画像を変更する方法を記載いたします。
この記事では「手順」のみ記載します。
後ほど、それぞれの機能なども説明した記事も掲載しようと思っているので興味のある方がお待ちください！
Adobeライセンスを最安で手に入れるなら
デジハリオンライン！
72,336円/年が39,980円/年で購入可能！
Cocoonのヘッダー画像設定について
まず初めに、「そもそもCocoonでどうヘッダー画像登録するの？」
という疑問点から解消していきます。
普段からCocoonを使っている方は既知の項目だと思いますので、読み飛ばしてください。
画像設定方法
下記の手順でヘッダー画像を設定することができます。
- Cocoon設定を押下
- ヘッダータブを選択
- ヘッダーロゴ項目の「選択」ボタンを押下
こちらで設定した画像がPC版・モバイル版のヘッダー画像となります。
今のままだと設定できる画像が1つのみのため、PCとモバイルで画像を変更することができません。
ここから一手間加え、画像を2つ設定できるようにします！
カスタマイズにあたっての注意点
これからファイルの修正手順をご説明していきますが、取り掛かる前に大事なことを言います。
必ずバックアップをとるようにしましょう！！
ミスをすることは誰にでもあります。そのときすぐに元に戻せる準備をしましょう。
今回の手順に限らず、WordPressのファイルに直接手を加えるときはバックアップを取るクセをつけるのが大事です！
バックアップをとるファイルですが、これから説明するファイル（全部で4ファイルです）だけでも大丈夫です。ただし心配な方は、全てのファイルのバックアップを取りましょう。（※私は全て取る派です！）
バックアップの取り方がわからないという方がいらっしゃいましたら、後ほどバックアップの取り方なども記事にしようと考えているため、作業は行わず暫しお待ちください！
修正手順
では本題に入ります。今回はWordPressのテーマエディター機能を用いた修正手順を記載していこうと思います。
修正ファイル一覧
以下の4つのファイルとCSSに修正を加えます。ファイルパスも記載致しますので検索に役立てください。
① html-form.php
→/wp-content/themes/cocoon-master/lib
② header-forms.php
③ header-funcs.php
④ header-posts.php
→/wp-content/themes/cocoon-master/lib/page-settings
⑤ header-posts.php
→/wp-content/themes/cocoon-master/lib/page-settings
それぞれのファイルの修正方法を記載していきます。
header-forms.php
①外観を選択
②テーマエディターを選択
③編集するテーマを『Cocoon』にし、選択ボタンを押下
④『lib』タブを選択
⑤『page-setting』タブを押下
⑥『header-forms.php』を押下
⑦以下のコードを追加
<!-- ヘッダーロゴ モバイル-->
<tr>
<th scope="row">
<?php generate_label_tag(OP_THE_SITE_LOGO_MOBILE_URL, __( 'ヘッダーロゴ(モバイル)', THEME_NAME ) ); ?>
</th>
<td>
<?php generate_upload_image_tag(OP_THE_SITE_LOGO_MOBILE_URL, get_the_site_logo_mobile_url());
generate_tips_tag(__( 'ヘッダー部分(モバイル)に表示する画像を設定します。jpg、jpeg、png形式の画像推奨です。', THEME_NAME ));
?>
</td>
</tr>
header-funcs.php
①外観を選択
②テーマエディターを選択
③編集するテーマを『Cocoon』にし、選択ボタンを押下
④『lib』タブを選択
⑤『page-setting』タブを押下
⑥『header-forms.php』を押下
⑦以下のコードを追加
//サイトロゴ モバイル
define('OP_THE_SITE_LOGO_MOBILE_URL', 'the_site_logo_mobile_url');
if ( !function_exists( 'get_the_site_logo_mobile_url' ) ):
function get_the_site_logo_mobile_url(){
return get_theme_option(OP_THE_SITE_LOGO_MOBILE_URL, '');
}
endif;
header-posts.php
①外観を選択
②テーマエディターを選択
③編集するテーマを『Cocoon』にし、選択ボタンを押下
④『lib』タブを選択
⑤『page-setting』タブを押下
⑥『header-forms.php』を押下
⑦以下のコードを追加
//サイトロゴ モバイル
update_theme_option(OP_THE_SITE_LOGO_MOBILE_URL);
html-form.php
①外観を選択
②テーマエディターを選択
③編集するテーマを『Cocoon』にし、選択ボタンを押下
④『lib』を選択し、『html-forms.php』を押下
⑤以下のコードを追加
$logo_mobile_url = get_the_site_logo_mobile_url();⑥以下のコードを修正
[修正前]
$site_logo_tag = '<img class="site-logo-image '.$img_class.'" src="'.$logo_url.'" alt="'.esc_attr($site_logo_text).'"'.$width_attr.$height_attr.'>';[修正後]
$site_logo_tag = '<img class="site-logo-image '.$img_class.' pc'.'" src="'.$logo_url.'" alt="'.esc_attr($site_logo_text).'"'.$width_attr.$height_attr.'>';⑦以下のコードを追加
$site_logo_mobile_tag = '<img class="site-logo-image '.$img_class.' sp'.'" src="'.$logo_mobile_url.'" alt="'.esc_attr($site_logo_text).'"'.$width_attr.$height_attr.'>';
⑧以下のコードを修正
[修正前]
$all_tag = $logo_before_tag.$site_logo_tag.$logo_after_tag;[修正後]
$all_tag = $logo_before_tag.$site_logo_tag.$site_logo_mobile_tag.$logo_after_tag;
style.css
①外観を選択
②テーマエディターを選択
③以下のコードを追加
.pc {
display: block !important; }
.sp { display: none !important; }
④以下のコードを追加(スマホ用のため834px以下に記載)
.pc { display: none !important; }
.sp { display: block !important; }
ヘッダーロゴの登録
記載したコードの修正が終了したら、管理画面にモバイル版のヘッダー登録項目が追加されます。下記手順を試して、『ヘッダーロゴ（モバイル）』という項目が追加されていることをご確認下さい。
ヘッダーロゴ（モバイル）が表示されていることを確認できましたでしょうか？
問題ないようでしたら、「選択」ボタンを押下していただくことで、モバイル版に表示したい画像を登録することができます！
登録が完了しましたら、PCとモバイルでヘッダー画像が変わることをご確認下さい！！
最後に
今回はCocoonテーマを用いて、ヘッダー画像をレスポンシブにする方法をご紹介致しましたが、いかがだったでしょうか？
もしCocoonテーマを使用したままでレスポンシブデザインにしたい方は是非お試し下さい！！
ただし冒頭にも記載しましたが、実施前には必ずバックアップをとることをお忘れなきようお願いします。
コメント
正にヘッダーをモバイル仕様分も登録したくてこのサイトの通りにやろうとしました。
そうするとheader-funcs.phpの修正がその通りに行きません。
159行目で syntax error, unexpected ‘get_theme_option’ (T_STRING)
となります。
何か原因があるでしょうか。 教えて頂ければ幸いです。
ご質問ありがとうございます。
159行目とのことですが以下の記載部分でお間違いないでしょうか？
return get_theme_option(OP_HEADER_TEXT_COLOR);一度今回追加したコードと159行目のスペースが半角か否かをご確認ください。
全角となっている場合、syntax errorが出てしまうので、半角スペースに治すことで解決するかもしれません。
もしコチラでも解決しなかった場合はご連絡お願い致します。
早速のご回答ありがとうございました。
全角スペースによる不具合でした。
ご指導ありがとうございました。
ヘッダーの画像をレスポンシブにしたく参考にさせて頂きました。
しかしheader-funcs.phpの修正をしてファイル更新ボタンを押すと、
72行目return get_theme_option(OP_THE_SITE_LOGO_MOBILE_URL, ”);の所で
syntax error, unexpected ‘get_theme_option’ (T_STRING)とエラーが出てしまいます。
解決法を教えて頂けないでしょうか？
ご質問ありがとうございます。
一度今回追加したコードのスペースが半角か否かをご確認いただいてもよろしいでしょうか。
全角となっている場合、syntax errorが出てしまうので、半角スペースに治すことで解決するかもしれません。
もしコチラでも解決しなかった場合はご連絡お願い致します。
すみません、もう一点エラーが出ました。
先ほどのheader-funcs.phpを飛ばしてhtml-forms.phpの修正をしましたが、
382行目に入力した $logo_mobile_url = get_the_site_logo_mobile_url();
のエラーが出ました。こちらも対処法を教えて頂けないでしょうか？
下記にエラー記載します。
Uncaught Error: Call to undefined function get_the_site_logo_mobile_url() in wp-content/themes/cocoon/lib/html-forms.php:382
Stack trace:
#0 wp-content/themes/cocoon/tmp/header-container.php(25): generate_the_site_logo_tag()
#1 wp-includes/template.php(732): require(‘/home/c4596995/…’)
#2 wp-includes/template.php(676): load_template(‘/home/c4596995/…’, false, Array)
#3 wp-includes/general-template.php(204): locate_template(Array, true, false, Array)
#4 wp-content/themes/cocoon/tmp/body-top.php(23): get_template_part(‘tmp/header-cont…’)
#5 wp-includes/template.php(732): require(‘/home/c4596995/…’)
#6 wp-includes/template.php(676): load_template(‘/ho
こちらですがheader-funcs.phpが解決していないために起きるエラーとなります。
簡易的に失敗する理由を説明させていただくと、
header-funcs.phpで「get_the_site_logo_mobile_url」を作成し、html-forms.phpはheader-funcs.phpで作成した「get_the_site_logo_mobile_url」を使用する形になっています。
そのためheader-funcs.phpのエラーを先に解決しないと、「get_the_site_logo_mobile_url」が存在していないことになるため、html-forms.phpでエラーが発生してしまいます。
お返事ありがとうございます！
７２行目のスペースを消したところ出来ました！！
モバイルロゴの表示も確認し画像を選択したのですが、
モバイルで表示はされますが画像サイズが大きいままで
どうも画面の大きさによって画像のサイズが変わらず
どうしたものかと悩んでおります。
画面のサイズによって画像のサイズを自動で変わるようにするのは
また違うコードを書かなければいけないのでしょうか？
もしよろしければ教えて頂けないでしょうか？
画面の大きさによって画像のサイズが変わらないというのは、本来画像が全て画面に映っていてほしいのに横が切れて半分しか映らないみたいなイメージでよろしいでしょうか？
状態が不明なため、詳しい説明をすることは難しいのですが、もし上記の状態であれば対象の画像(imgタグ)に「max-width: 100%;」というcssが当たっているかの確認をお願いします。
cocoonを使っている場合、ロゴに限らず基本的には画像は画面の横幅いっぱいいに表示されるようになっているはずです。
デフォルトの設定で動くcssなはずなので、追加したcssなどが悪さをしていないかご確認してみるのが一番近道かもしれません。