こんにちは、ユウトです。
先日から、賢威のカスタマイズを始めており、ヘッダーテキストを画像に変更する方法について備忘録のためにまとめておきます。
まずは、ワードプレスの管理画面の「メディア」からヘッダーに使う画像を挿入します。
続いて、ワードプレス管理画面の「外観」から「テーマの編集」と進み、「ヘッダー（header.php）」を開きます。
そして、以下のようなコードが記述されている部分を見つけてください。
【変更前のコード】
<!–▼ヘッダー–>
<div id="header">
<div id="header-in">
<div id="header-title">
<p class="header-logo"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></p>
<h1><?php h1_keni(); ?></h1>
</div>
<div id="header-text">
<p><?php echo the_excerpt_keni(); ?></p>
</div>
</div>
</div>
<!–▲ヘッダー–>
上記のコードを以下のように変更し、「ここにヘッダー画像URLを入れる」と書かれた箇所に、先ほど挿入したヘッダー用画像のURLを入力してください。URLはメディアで対象の画像をクリックすればわかります。
※コードを変更する前に、必ずバックアップを取っておきましょう。
【変更後のコード】
<!–▼ヘッダー–>
<div id="header">
<div id="header-in">
<div id="header-title">
<h1><a href="<?php bloginfo('url'); ?>"><img src="ここにヘッダー画像URLを入れる" alt="<?php bloginfo('name'); ?>"></a></h1>
</div>
</div>
</div>
<!–▲ヘッダー–>
コードを変更したら、テーマ編集のファイルを更新ボタンをクリックします。トップページを表示させ、ヘッド画像が正しく挿入されていることを確認してください。
