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

ちょっと思うところあり、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が完了しました。
 

カテゴリーごとに表示するためのページを作成する

サイドバーなどに表示されたカテゴリをクリックしたときに、
そのカテゴリーがつけられた記事を一覧で表示する場合のページを作成していきます。

現在完成しているサイトでも、カテゴリーをクリックすれば、
その記事が表示されるようになっていますが、古い記事を見るためのリンクがないなど、
そのままでは不便な個所がありますので、使い勝手がよくなるよう、コードを追加していきます。

まずは、index.phpファイル(メインインデックスのテンプレート)の、
コンテンツブロック内に、下記のソースを追加して、カテゴリー名を表示させます。

---------------------
<!– カテゴリーページタイトル –>
<?php if(is_category()): ?>
<p id="pagetitle"><?php single_cat_title(‘カテゴリー:’); ?></p>
<?php endif; ?>
<!– カテゴリーページタイトル閉じ –>

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

 
次に、コンテンツブロックの一番下に、下記のソースを追加して、
カテゴリーページの新旧記事に行けるよう、リンクを作成します。

---------------------
<!– カテゴリーページの新旧記事へのリンク –>
<?php if(is_archive()): ?>
<p class="pagelink">
<span class="oldpage"><?php next_posts_link(‘&laquo; 古い記事’); ?></span>
<span class="newpage"><?php previous_posts_link(‘新しい記事 &raquo;’); ?></span>
</p>
<?php endif; ?>
<!– カテゴリーページの新旧記事へのリンク閉じ –>

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

 
同時に、style.cssファイル(スタイルシート)に、以下のCSSタグを追加して、
表示させるカテゴリー名の見た目を整えていきます。

---------------------
/* カテゴリーページタイトル */
p#pagetitle { font-weight: bold; color: #FFFFFF; background-color: #4682B4; text-align: center; letter-spacing: 0.3em; padding: 10px 0px; margin-top: 0px; }

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

リンクの見た目は、以前に作成したCSSをそのまま使いまわしますので、
今回はスタイルシートの追加修正はありません。

この作業で完成した画面が↓こちらです。

 

 
これで、WordPress レッスンブック 3.x対応のSTEP4-4が完了しました。
 

サイドバーを表示させる

さて、WordPress レッスンブック 3.x対応のテキストも、Chapter4に入りました。
ここでは、WEBページやブログでは、ほとんどお約束となっている、
カテゴリーや、最新記事などを、サイドに表示するため、サイドバーを追加します。

まずは、index.phpファイル(メインインデックスのテンプレート)の、
コンテンツブロックの下、フッターブロックの上に、下記のソースを追加します。

---------------------
<!– サイドバー –>
<div id="sidebar">
<ul>
<?php dynamic_sidebar(); ?>
</ul>
</div>
<!– サイドバー閉じ –>

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

 

 
次に、style.cssファイル(スタイルシート)に、以下のCSSタグを追加して、
サイドバーの段組みを整えていきます。

---------------------
/* サイドバー */
div#sidebar { width: 275px; float: right; }

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

既に入力済みのコンテンツ部分に、widthとfloatを追加します。

---------------------
/* コンテンツ*/
div#content{ padding-bottom: 10px; width: 570px; float: left; }

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

すると、サイドバーが画面に表示されるようになりました。

 

 
注:ここでは、WordPress レッスンブック 3.x対応のSTEP4-1を実践中ですが、
二度手間にならないよう、先にSTEP4-2を作業済みにしてあります。
ここでサイドバーが画面に表示されない方は、「ウィジェットが使用できるよう
ファンクションファイルを追加する
」を参考に、STEP4-2を実践してください。

  
さてしかし、サイドバーの見た目がまだ素のままですので、
更にstyle.cssファイル(スタイルシート)に、以下のCSSタグを追加して、
サイドバーの見た目を整えていきます。

---------------------
/* サイドバー */
div#sidebar { width: 275px; float: right; }

div#sidebar ul { margin: 0px; padding: 0px; }
div#sidebar li { list-style-type: none; }
div#sidebar li li { font-size: 0.75em; margin-bottom: 4px; padding-left: 8px; }
div#sidebar li li a { text-decoration: none; color: #FFFFFF; }
div#sidebar .widget { background-color: #4682B4; padding: 16px; margin-bottom: 10px; }
div#sidebar h2 { font-size: 0.75em; color: #FFFFFF; border-bottom: solid 1px #FFFFFF; padding-bottom: 8px; margin: 0px 0px 10px; }

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

するとサイドバーは、↓こんな感じのデザインになります。

 

 
これで、WordPress レッスンブック 3.x対応のSTEP4-1と、STEP4-3が完了しました。