WordPressでヘッダー画像の追加

WordPressでテーマの作成/その4

今日は、ナビゲーションバーの下にヘッダー画像を挿入したいと思います。

ヘッダー画像を表示する

今回もカスタムヘッダーの機能を利用してヘッダー画像を表示します。『functions.php』ファイルを開き、カスタムメニューの次に下記のコードを入力します。

//カスタムヘッダー
add_custom_image_header('','admin_header_style');
function admin_header_style() {}

define('NO_HEADER_TEXT',true);
define('HEADER_IMAGE','%s/header_imaage.jpg');
define('HEADER_IMAGE_WIDTH',920);
define('HEADER_IMAGE_HEIGHT',250);

『header.php』ファイルを開き、ナビゲーションバーの下にコードを追加します。

<!-- ヘッダー画像 -->
<?php if(get_header_image()): ?>
<div id="image"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></div>
<?php endif; ?>
<!-- /ヘッダー画像 -->

ダッシュボードを開き、『外観』→『ヘッダー』を開き、自分のコンピュータからあらかじめ用意しておいた920×250ピクセルの画像を選択し、『アップロード』ボタンをクリックすると、画像(相変わらず夜景好きの私は、またもレインボーブリッジの画像です)がアップされます。

それでは、ブラウザで確認してみましょう。

コードの解説

それでは、今日のコードを解説していきたいと思います。

add_custom_image_header()

これは、カスタムヘッダー機能をONにする関数です。カスタムヘッダーを動作させるためには、以下の4つの定数を定義する必要があります。

define(‘HEADER_TEXT_COLOR’,’文字色’);
define(‘HEADER_IMAGE’,’%s/デフォルトのヘッダー画像のパス’);
define(‘HEADER_IMAGE_WIDTH’,ヘッダー画像の幅);
define(‘HEADER_IMAGE_HEIGHT’,ヘッダー画像の高さ);

尚今回は、『define(‘HEADER_TEXT_COLOR’,’文字色’);』ではなくて、

define(‘NO_HEADER_TEXT’,true);

を使用しています。この違いは何でしょうか。

『define(‘HEADER_TEXT_COLOR’,’文字色’);』は、画像の中に文字を表示し、『define(‘NO_HEADER_TEXT’,true);』は、非表示であると言うことです。

header_image()

この関数は、カスタムヘッダーの画像のアドレスを出力します。

本日はここまでにします。

タグ

このページの先頭へ