Wordpress Twenty Sixteen カスタマイズ 8-2「ヘッダー」編ヘッダー画像上に移動

ごけたです。
手持ちの画像が少ないからといって増やす気持ちには。

はじめに
ヘッダー画像を表示してみる
事前準備
1:ヘッダー画像を一番上に表示する説明編
2:ヘッダー画像を一番上に表示するソースコード編
3:「heade.php」ファイルのソースコードを確認してみる
さいごに

はじめに

WordPress Twenty Sixteen カスタマイズその8-2
今回は「ヘッダー」の続きです。
具体的にはヘッダー内にある「ヘッダー画像の位置移動」です。

※「続き」となっていますが、説明上の「続き」を意味します。

ページ構成
画像、ソースコード、その下に説明文の構成になっています。
画像はクリックすると拡大されて表示されます。
リンクは予告なく削除される場合がございます。
OSはWindows、ブラウザーはchrome、
レンタルサーバーはエックスサーバーです。

※文中に「親」という言葉が度々出てきます。
ここでの「親」とは「子テーマ」ではない、
元々のTwenty Sixteenの各ファイルのことです。
カスタマイズは「子テーマ」で行っているので、
その対比として「親」、「親テーマ」と呼んでいます。

ヘッダー画像を表示してみる

ヘッダー画像を移動するので、事前準備としてヘッダー画像を表示します。
ヘッダー画像の表示設定はWordpressの管理画面のメニューから
「外観」→「ヘッダー」を選択クリックします。

左枠の説明では1200×280ピクセルを推奨しています。

推奨は無視して5504×3096ピクセルの画像を使用するとどうなるか試してみました。

点線の切り取り部分は、画像の全体を選択でき、表示も可能でした。
5504×3096ピクセルの画像容量は6.25MBでした。
その分ページの読み込みに時間がかかります。
容量を減らして保存すれば、多少読み込み時間の改善は可能です。

ヘッダー画像はどのページにも表示されます。
ピクセル数が大きい画像を使用する際は注意が必要です。

今回は画像容量を事前に3.00MBに変更して、切り取り画面で若干縦幅を
長くした画像を使用することにしました。

事前準備

これから「テーマの編集」画面内の「header.php」ファイルの
ソースコードを切り張りします。

一度に切り取るソースコードの量が多いので、
張り付ける場所の間違えてエラーを出すのを避けるために、
切り取ったソースコードを一旦テキストエディタに貼り付けておきます。

今の段階でテキストエディタを新規で開いておきます。

1:ヘッダー画像を一番上に表示する説明編

ヘッダー画像を実際に表示すると、右上にメニュー、左上にサイトタイトル、
その下にヘッダー画像が表示されています。

今回はヘッダー画像を一番上にして、その下に右にメニュー、
左にサイトタイトルの設定を行います。

表示変更は「その8-1」同様に「header.php」ファイルを使用します。
但し、設定自体は「その8-1」を受け継いでいません。

「header.php」ファイルの準備方法は「その8-1」の「事前準備」をご覧下さいませ。

「header.php」ファイルにはサイトロゴ、サイトタイトル、キャッチフレーズ、
メニュー、ヘッダー画像の順番でソースコードが入力されています。

「ヘッダー画像」のソースコードを
「ヘッダー枠」のソースコードの前に移動させるとヘッダー画像が一番上に表示出来ます。

2:ヘッダー画像を一番上に表示するソースコード編

上記の説明を元に実際に「header.php」ファイル内の
「ヘッダー画像」のソースコードを「サイトロゴ」の前に移動させます。

2-1:ヘッダー画像を先頭のソースコードを確認する

各設定のソースコードの入力数が多いので、いきなり移動する前に
各設定のソースコードの先頭と最後尾を確認します。
先頭や最後尾を間違えると、正しく表示されなかったりエラーが出ます。

まずは「ヘッダー画像のソースコード」の先頭を確認します。
Wordpressの管理画面のメニューから「外観」→「テーマの編集」画面内の

「header.php」ファイルの84行目前後にあるソースコード
「＜?php if ( get_header_image() ) : ?＞」がヘッダー画像の先頭になります。

2-2:ヘッダー画像を最後尾のソースコードを確認する

続けてヘッダー画像の最後尾のソースコードも確認します。

</div>

<!– .header-image –>
<?php endif; // End header image check. ?>
</header>

<!– .site-header –>

</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:ヘッダー枠内の先頭を確認する

「ヘッダー画像」のソースコードをペーストする「ヘッダー枠内」の先頭を確認します。

<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-header-main”＞」と
その下の「＜div class=”site-branding”＞」の間に
テキストエディタに一旦ペーストしておいたヘッダー画像の
ソースコードをペーストします。

「テーマの編集」画面一番下の「ファイルを更新」ボタンをクリックします。

ヘッダー画像が一番上に表示されているか確認します。

3:「heade.php」ファイルのソースコードを確認してみる

<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(); ?>

/* ヘッダー枠内の先頭 */

/* ヘッダー画像の先頭 */ <?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’ ); ?>

<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. ?>

/* ヘッダー枠内の一番下 */

/* サイトロゴの先頭 */ <?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」ではヘッダー画像と上部との余白、
ヘッダー画像とサイトタイトルやメニューとの余白調整を行っています。