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

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

はじめに

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

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

「/* ヘッダー枠内の先頭 */ <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」ファイルも一応入れ替えて、再度同じ設定を行ってから
カスタマイズの再スタートですから参ります。

最後までお合い下さいまして有難うございました。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク