wordpress テーマの作成（ヘッダーの作成）moja.asia

それでは実際にサイトを作って行きます。サイトの構成は左の図のように「ヘッダー」と「左サイドバー」「コンテンツ」「フッター」に分かれた2カラムのサイトを作って行きます。
wordpressでは、ヘッダーの内容は「header.php」にフッターの内容は「footer.php」にサイドバーの内容は「sidebar.php」に別々に記載してそれをすべてのページで共通項目として読み込むように作成して行きます。

そしてTOPページには「index.php」か「home.php」を使いますが今回は「home.php」を使用します。

ヘッダーの作成

まずは「header.php」に以下のコードを書き込んでみます。

[php]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title> <?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
</head>
<body>

<div id="container">

<div id="header">
<h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
<p id="desc"><?php bloginfo('description'); ?></p>
</div>
[/php]

書き方は先ほどと同じように管理画面のメニューから「外観」＞「テーマの編集」を開き、左の「テンプレート」から「ヘッダー（header.php)」を選択します。上部に「ヘッダー（header.php)と表示されている事を確認して、真ん中に白紙のエディター内が表示されていますので上記のコードを（コードの所でダブルクリックすればコードを選択できる。）コピーして貼り付けします。最後は必ず「ファイルを更新」ボタンを押しましょう。一番上に「ファイルの編集に成功しました」と表示されればOKです。

ヘッダーの読み込み

先ほど作ったヘッダーをTOPページに表示させてみます。
「home.php」を開き次のコードをコピーして貼り付けてみましょう。

[php]
<?php get_header(); ?>
[/php]

今度はテンプレートの一覧から「home.php」を選択してエディタを切り替えます。先ほどと同じように最初は白紙です。そこへ上記のコードを記入（コピー・貼り付けでもどちらでも可）してみます。できたら画面下の「ファイルを更新」をクリック。画面上部に「ファイルの編集に成功しました」が表示されます。成功すればそのままさらに画面右上の家のマークのところの「サイト名」が表示されている（写真では「wordpress」）その「サイト名」をクリックします。

見事サイトが表示されました。
これがTOPページになります。そして今表示されているのは「header.php」から読み込まれた、自分で登録した「サイト名」と「Just another WordPress site」の文字。これは「WordPressの管理画面から最初の設定」の「一般設定」で設定した「サイトのタイトル」と「サイトのキャッチフレーズ」が表示されています。

phpコードについて

それではどうしてこのような表示がでたのでしょうか？まず最初に「header.php」の内容をみてみます。
5行目と13行目に＜?php bloginfo('name'); ?＞のコードがあります。これがタイトルを呼び出して表示するための命令文になります。最初は必ず＜?php の形ではじまり、命令文があり命令文の最後は必ず　;（セミコロン）で閉じて　最後は必ず ?＞の形で閉じられるのが絶対のルールです。ここでは5行目の＜?php bloginfo('name'); ?＞でブラウザのタブに表示されている「サイト名」と13行目でヘッダーに表示される「サイト名」を呼び出しています。また14行目の「＜?php bloginfo('description'); ?＞」でサイトのキャッチフレーズを呼び出しています。

そして、これらをTOPページに表示するために書いたのが「home.php」に書いた＜?php get_header(); ?＞「ヘッダーを呼び出す」という意味のコードになります。

これらの?phpで囲まれた命令文を「phpコード」または単に「コード」と呼んでいます。ここではルールと呼び名だけ覚えておいてください。