lightningでのヘッダーの追加方法

ヘッダー画面がない

lightningは、インストールした状態のままでは、ヘッダーを追加する機能がありません。
そのため、ヘッダーを挿入する機能を追加する必要があります。
ファイルサーバを開く

ヘッダー機能を追加するために、funciton.phpとheader.phpを触ります。
そのため、ファイルサーバにアクセスします。
自分は、Xserverを使用しているので、Xserverのファイルマネジャーにログインします。
※使用されているファイルサーバに置き換えてください。
ファイルサーバを開く

ログインすると、使用しているドメイン名のフォルダが表示されます。
対象のドメインのフォルダをクリックします。
自分の場合は、このサイトのドメイン「kagakuma.net」をクリックします。
それから、public_html→wp-content→themesとクリックしていきます。
lightning-childフォルダを開く

そうすると、子テーマをインストールしたときに、作成されたフォルダ「lightning_child_sample」があるので、これをクリックします。
funciton.phpを開く

funciton.phpの左ボックスにチェックを入れて、編集をクリックします。
ヘッダーカスタムを追加する

ヘッダーカスタムを追加します。
add_theme_support( ‘custom-header’, $defaults );
上記をコピー&ペーストし、保存をクリックします。
自分は、一番下の行に入れました。
ヘッダーが表示された

左のメニューバーの外観の下に、「ヘッダー」が表示されます。
これだけでは、うまく機能しないので、header.phpを触ります。
header.phpは、lightningの子テーマの中には存在しません。そのため、親テーマの中にあるheader.phpを子テーマのフォルダ内にコピーします。
lightning-childフォルダを開く

lightning_child_sampleフォルダがある画面まで戻ります。

lightning_child_sampleフォルダをクリックして表示すると、一覧の中に、header.phpがありません。
lightning-childフォルダを開く

親テーマのlightningフォルダがある画面まで戻ります。
lightningフォルダをクリックします。
header.phpをダウンロード

header.phpをクリックすると、header.phpがダウンロードされます。
header.phpをアップロード

ダウンロードしたheader.phpをアップロードします。
header.phpを開く

そうすると、lightning_child_sampleフォルダの中に、アップロードしたheader.phpが入ります。
アップロードしたheader.phpを、開きます。
header.phpにコマンドを入力する

ヘッダーが機能するように、header.phpの中にコピー&ペーストし、保存をクリックします。
下記サイトの「トップページのみにヘッダー画像を表示する(header.php)」からコピーします。
https://www.nishi2002.com/10421.html

ヘッダー画像が小さい

ヘッダー画像を準備し、ヘッダーを挿入すると中途半端な長さになっています。
※準備するヘッダー画像や、環境によって変わるかもしれません。
ヘッダー画像を画面いっぱいに広げる

目次ページの下にある、カスタムCSSのところに、下記をコピー&ペーストします。
.header-image{
width:100%;
}

ヘッダー画像を画面いっぱいに広げる

ヘッダー画像が、画面サイズいっぱいに、横に広がります。

引用・参考文献:西沢直木のIT講座(WordPress)、「カスタムヘッダー画像に非対応のテーマに「ヘッダー」メニューを組み込む」
https://www.nishi2002.com/10421.html

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です