WordPress ヘッダー画像を追加
ブログのヘッダー画像といえば、お店の看板みたいなものですよね。
私のブログは、画像を載せずにタイトルだけ表示している
シンプルなヘッダーだったので、画像を追加してみました。
ヘッダー画像をアップロード
まずは、ブログに載せるヘッダー画像を準備します。
今回は、横960px、縦50pxのサイズで、ブログロゴを作りました。
この画像を自分のテーマフォルダへアップロードします。
header.phpを編集
WordPress管理画面から[外観]⇒[テーマの編集]を選択し
header.phpを編集します。
今回、ヘッダー画像の中にブログタイトルが書かれているので、
今までブログタイトルを出力していたbloginfo(‘name’);の箇所をコメントアウトします。
そして、新しくimgタグを追加し、先ほどアップロードした画像を指定します。
この時、画像を入れたテーマフォルダのURLは、
get_template_directory_uri();で取得します。
また、ヘッダー画像をクリックした時に、トップページへリンクするように、aタグで囲みます。
|
1 2 3 |
<!-- <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1> --> <a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri();?>/header3.jpg" width="960" height="50" alt=""></a> <p><?php bloginfo( 'description' ); ?></p> |
※get_template_directory_uri()・・・テーマフォルダのURLを取得
※home_url()・・・トップページのURLを取得
※bloginfo( ‘name’ )・・・サイト名を取得
※bloginfo( ‘description’ )・・・サイトの説明を取得
ファイルを更新を押して、ページを確認してみます。
イメージどおりにヘッダー画像が表示されました。
まとめ
以上、ヘッダー画像の追加方法でした。
参考になれば幸いです。
スポンサーリンク
飲食店用WordPress無料テーマ「InomaRestaurantBasic」
飲食店用の無料WordPressテーマを作成しました。
店のコンセプト、メニュー、アクセスなど
飲食店に必要な最低限の機能を搭載しました。
これから飲食店のホームページを開設したい方、
この無料テーマを是非活用してみてください。
ブログ用WordPress無料テーマ「chameleon(カメレオン)」
WordPressテーマ（chameleon）は、「WordPressで手軽・気軽にブログ始められる」をコンセプトに制作しました。 初めてWordPressでブログを始める方、是非シンプルなテーマchameleon「カメレオン」を使ってみてください！
士業用WordPress無料テーマ「InomaExpertBasic」
士業用の無料WordPressテーマを作成しました。
もちろん、一般的なビジネスサイトに活用できます。
自分でサイト更新したい方、
これからホームページを立ち上げようとする方、
自分でWordPressテーマを作ってみたい方、
この無料テーマを是非活用してみてください。
