3-2.中身のPHP化(header.php)

header.phpはこの状態。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title">サイトのタイトルだよー</h1>
   <div id="search">検索?<input type="text" size="10" /></div>
   <div id="desc">サイトの説明文が入ったりします</div>
  </div>

テンプレートタグ – WordPress Codex 日本語版を参考に進める。

  • 変更点01:titleタグ
    <title>TEST CONTENT</title>

    bloginfoでブログ名の表示、wp_titleで記事タイトルを表示できるようなのでコレを使う。
    google等の表示に合わせたいので「記事タイトル – ブログタイトル」の表示形態で。

    <title><?php wp_title(' - ', true, 'right'); ?><?php bloginfo('name'); ?></title>
  • 変更点02:CSSリンク
    <link rel="stylesheet" type="text/css" href="style.css" />

    ここでもbloginfoを使う。

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

    これで、使用中のメインCSSファイルのURLに変換できる。

  • 変更点03:headタグ終了部分直前
    </head>

    headの中身はここに書いてあるだけしか使わない!という事なら必要ないんだけど、
    プラグイン入れたりすると必要に応じてheadの中身を追加されたりするので
    「追加するならここによろしく」
    という意味合いで。

    <?php wp_head(); ?>
    </head>
  • 変更点04:サイトのタイトル
    <h1 id="title">サイトのタイトルだよー</h1>

    サイトのタイトルをbloginfoから持ってくる。
    ついでにリンクになっていると便利なのでこれもbloginfoから持ってきてAタグで囲む。

    <h1 id="title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
  • 変更点05:サイトの説明
    <div id="desc">サイトの説明文が入ったりします</div>

    サイトの説明文もbloginfoから持ってくる。

    <div id="desc"><?php bloginfo('description'); ?></div>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title><?php wp_title(' - ', true, 'right'); ?><?php bloginfo('name'); ?></title>
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
   <div id="search">検索?<input type="text" size="10" /></div>
   <div id="desc"><?php bloginfo('description'); ?></div>
  </div>

こんなかな?