WordPress header部分のカスタマイズ方法（左右の真ん中部分に「ブロック要素（新たな枠）」を作りたい。）

2018/08/05 2018/09/24

目　次

1 1 WordPress　テーマ　stinger＋のheader部分をカスタマイズ
2 2 WordPress　Theme　stinger＋のデフォルトのheader構造
3 3 新たに　heade-cを作り、文字群を入れたい
4 4 header.phpを変更する。
5 5 「header-l」と「header-r」の間に「header-c」を設け、両者間に新たな「ブロック要素枠」を作る。
6 6 ダッシュボードで管理しているサイトの説明（descr）は、header-lの一番下（左のbox）で表記されるように、header-lの中に入れておく。
7 7 htmlを吐き出す元のheader.phpの変更が終わったら次は、CSSの変更です。
8 8 CSSの変更
9 9 スマホ対応の命令を忘れずに…
10 10 実際のサイトでは…
11 11 スマホ対応でも…しっかりと

1 WordPress　テーマ　stinger＋のheader部分をカスタマイズ

WordPress　テーマ　stinger のヘッダー部分をカスタマイズして、左右の真ん中部分に「ブロック要素（新たな枠）」を作りたい。そんな要望に応えるための方法です。
この方法は、ヘッダー以外のフッターや固定ページ、投稿ぺージでも応用できるはずなので、その方法を記載します。

2 WordPress　Theme　stinger＋のデフォルトのheader構造

3 新たに　heade-cを作り、文字群を入れたい

4 header.phpを変更する。

　まず最初にheader.php内に、<div id=“header-wrap”>をつくる。
　下図のようにハンバーガーメニュー（スマホ枠の際に表示される）を枠の外に出すことが重要。今回の作業範囲の影響からハンバーガーメニューが影響しないようにする。

5 「header-l」と「header-r」の間に「header-c」を設け、両者間に新たな「ブロック要素枠」を作る。

6 ダッシュボードで管理しているサイトの説明（descr）は、header-lの一番下（左のbox）で表記されるように、header-lの中に入れておく。

7 htmlを吐き出す元のheader.phpの変更が終わったら次は、CSSの変更です。

　header,phpに記載した新たな大枠　「header‐wrap」や「header-l」、「header-c」、「header-l」を既存のfloatプロパティーの命令ではなく、「header‐wrap」はtableタグ、「header-l」、「header-c」、「header-l」はその中にあるtable―cellタグとして位置づけ、table内で横整列される命令に変更する。