カスタムヘッダー機能を利用できるようにする

ちょっと思うところあり、WordPress レッスンブック 3.x対応のSTEP4-4まで終わったところで、
間をずいずいずい~っと飛ばして、STEP7-1にある、
管理画面でヘッダー画像を変更できるようにするという作業を先に実践したいと思います。

ヘッダー画像は、「ヘッダーに画像を入れてデザインする」でおこなった方法で、
直接テンプレートファイルに、画像をアップロードして表示させることができます。
しかし、いちいちFTPなどを利用しなくても、ワードプレスの管理画面から画像が読み込めるように、
カスタムヘッダー機能が使えるようにしたほうが便利なので、その作業をしていきます。

まずは、functions.phpファイル(テーマのための関数)に、
下記のソースを追加します。

---------------------
//カスタムヘッダー
add_custom_image_header(”,’admin_header_style’);
function admin_header_style() {
?>
<style type="text/css">#heading { width: 860px!important }</style>
<?php
}
define(‘NO_HEADER_TEXT’,true);
define(‘HEADER_IMAGE’,'%s/default_header.jpg’);
define(‘HEADER_IMAGE_WIDTH’,860);
define(‘HEADER_IMAGE_HEIGHT’,200);

---------------------

次に、index.phpファイル(メインインデックスのテンプレート)の、
ヘッダーブロックを、下記のソースのように修正します。

---------------------
<!– ヘッダー(タイトル部分) –>
<div id="header">
<h1><a href="<?php echo home_url(); ?>">
<?php bloginfo(‘name’); ?></a></h1>
<p id="desc"><?php bloginfo(‘description’); ?></p>
<p id="headerimage"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" /></p>
</div>
<!– ヘッダー(タイトル部分)閉じ –>

---------------------

すると、ワードプレスのデフォルトテーマ、Twenty Ten、Twenty Elevenのように、
管理画面の「外観」→「ヘッダー」から、ヘッダー画像をアップロードして張り替えたり、
ランダム表示したりすることができるようになります。

 

 
今回は、WordPress レッスンブック 3.x対応のSTEP7-1が完了しました。
 

コメントを残す