ごけたです。
手持ちの画像が少ないからといって増やす気持ちには。
目次
はじめに
WordPress Twenty Sixteen カスタマイズ その8-2
今回は「ヘッダー」の続きです。
具体的にはヘッダー内にある「ヘッダー画像の位置移動」です。
※「続き」となっていますが、説明上の「続き」を意味します。
ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。
※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。
ヘッダー画像を表示してみる
ヘッダー画像を移動するので、事前準備としてヘッダー画像を表示します。
ヘッダー画像の表示設定はWordpressの管理画面のメニューから
「外観」→「ヘッダー」を選択クリックします。
左枠の説明では1200×280ピクセルを推奨しています。
推奨は無視して5504×3096ピクセルの画像を使用するとどうなるか試してみました。
点線の切り取り部分は、画像の全体を選択でき、表示も可能でした。
5504×3096ピクセルの画像容量は6.25MBでした。
その分ページの読み込みに時間がかかります。
容量を減らして保存すれば、多少読み込み時間の改善は可能です。
ヘッダー画像はどのページにも表示されます。
ピクセル数が大きい画像を使用する際は注意が必要です。
長くした画像を使用することにしました。
事前準備
これから「テーマの編集」画面内の「header.php」ファイルの
ソースコードを切り張りします。
一度に切り取るソースコードの量が多いので、
張り付ける場所の間違えてエラーを出すのを避けるために、
切り取ったソースコードを一旦テキストエディタに貼り付けておきます。
1:ヘッダー画像を一番上に表示する 説明編
ヘッダー画像を実際に表示すると、右上にメニュー、左上にサイトタイトル、
その下にヘッダー画像が表示されています。
今回はヘッダー画像を一番上にして、その下に右にメニュー、
左にサイトタイトルの設定を行います。
但し、設定自体は「その8-1」を受け継いでいません。
「header.php」ファイルの準備方法は「その8-1」の「事前準備」をご覧下さいませ。
「header.php」ファイルにはサイトロゴ、サイトタイトル、キャッチフレーズ、
メニュー、ヘッダー画像の順番でソースコードが入力されています。
「ヘッダー画像」のソースコードを
「ヘッダー枠」のソースコードの前に移動させるとヘッダー画像が一番上に表示出来ます。
2:ヘッダー画像を一番上に表示する ソースコード編
上記の説明を元に実際に「header.php」ファイル内の
「ヘッダー画像」のソースコードを「サイトロゴ」の前に移動させます。
2-1:ヘッダー画像を先頭のソースコードを確認する
各設定のソースコードの入力数が多いので、いきなり移動する前に
各設定のソースコードの先頭と最後尾を確認します。
先頭や最後尾を間違えると、正しく表示されなかったりエラーが出ます。
まずは「ヘッダー画像のソースコード」の先頭を確認します。
Wordpressの管理画面のメニューから「外観」→「テーマの編集」画面内の
「＜?php if ( get_header_image() ) : ?＞」がヘッダー画像の先頭になります。
2-2:ヘッダー画像を最後尾のソースコードを確認する
続けてヘッダー画像の最後尾のソースコードも確認します。
1 2 3 4 5 6 7 | </div> <!– .header-image –> <?php endif; // End header image check. ?> </header> <!– .site-header –> |
「header.php」ファイルの101行目前後から103行目前後にある
「ヘッダー画像」のソースコードの最後尾を確認します。
「＜?php endif; // End header image check. ?＞」です。
「＜?php if ( get_header_image() ) : ?＞」から
「＜?php endif; // End header image check. ?＞」までのソースコードを切り取ります。
ソースコードの入力量が多いので「事前準備」で開いておいた
テキストエディタに一旦、張り付けます。
2-3:ヘッダー枠内の先頭を確認する
「ヘッダー画像」のソースコードをペーストする「ヘッダー枠内」の先頭を確認します。
1 2 3 4 5 | <header id="masthead" class="site-header" role="banner"> <div class="site-header-main"> <div class="site-branding"> |
「header.php」ファイルの29行目前後から31行目前後にある
ヘッダー画像のソースコードの先頭を確認します。
＜div class=”site-header-main”＞です。
その下の「＜div class=”site-branding”＞」の間に
テキストエディタに一旦ペーストしておいたヘッダー画像の
ソースコードをペーストします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
ヘッダー画像が一番上に表示されているか確認します。
3:「heade.php」ファイルのソースコードを確認してみる
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <header id="masthead" class="site-header" role="banner"> /* ヘッダー枠内の先頭 */ <div class="site-header-main"> /* ヘッダー画像の先頭 */ <?php if ( get_header_image() ) : ?> <?php /** * Filter the default twentysixteen custom header sizes attribute. * * @since Twenty Sixteen 1.0 * * @param string $custom_header_sizes sizes attribute * for Custom Header. Default ‘(max-width: 709px) 85vw, * (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px’. */ $custom_header_sizes = apply_filters( ‘twentysixteen_custom_header_sizes’, ‘(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px’ ); ?> <div class="header-image"> <a href="<?php echo esc_url( home_url( ‘/’ ) ); ?>" rel="home"> <img src="<?php header_image(); ?>" srcset="<?php echo esc_attr( wp_get_attachment_image_srcset( get_custom_header()->attachment_id ) ); ?>" sizes="<?php echo esc_attr( $custom_header_sizes ); ?>" width="<?php echo esc_attr( get_custom_header()->width ); ?>" height="<?php echo esc_attr( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>"> </a> </div> <!– .header-image –> /* ヘッダー画像の最後尾 */ <?php endif; // End header image check. ?> /* ヘッダー枠内の一番下 */ <div class="site-branding"> /* サイトロゴの先頭 */ <?php twentysixteen_the_custom_logo(); ?> |
「/* ヘッダー枠内の先頭 */ ＜div class=”site-header-main”＞」 から
「/* ヘッダー枠内の一番下 */ ＜div class=”site-branding”＞」までを
コピペしても問題有りませんが、その際は「/* ヘッダー枠内の先頭 */」などの
「説明タイトル」は全て削除してから「テーマの編集」画面一番下の「ファイルを更新」
ボタンをクリックしてください。
「説明タイトル」を削除しないで「ファイルを更新」ボタンをクリックしても
エラーは出ませんが、説明タイトルが表示されてしまいます。
コピペする際は
「/* ヘッダー枠内の先頭 */ ＜div class=”site-header-main”＞」 から
「/* ヘッダー枠内の一番下 */ ＜div class=”site-branding”＞」までの
ソースコードを、一旦テキストエディタにペーストします。
「header.php」ファイル内の
「/* ヘッダー枠内の先頭 */ ＜div class=”site-header-main”＞」 から
「/* ヘッダー枠内の一番下 */ ＜div class=”site-branding”＞」までを削除します。
削除した部分に一旦テキストエディタにペーストしたソースコードをコピペします。
「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。
この設定のまま、「その8-3」へと続きます。
「その8-3」ではヘッダー画像と上部との余白、
ヘッダー画像とサイトタイトルやメニューとの余白調整を行っています。
さいごに
ヘッダー内の変更も「style.css」ファイルで用足りると思っていたので
「header.php」ファイルの大量のソースコードを入れ替える際は緊張しました。
先頭と最後尾と見つけるまでは何度かエラーを出ました。
その度に親の「header.php」ファイルをコピペしては入れ替えの繰り返しでした。
カスタイマイズの途中で、取り敢えずの区切りで一度ログアウト、
再度ログインした時に「Wordpress」自体のバージョンアップ告知は
何度も見てもヒヤヒヤします。
バックアップして、Wordperssのバージョンアップ、表示や諸々に問題がないか確認。
子テーマ用の「header.php」ファイルも一応入れ替えて、再度同じ設定を行ってから
カスタマイズの再スタートですから参ります。
最後までお合い下さいまして有難うございました。