wordpress テーマの作成(ヘッダーの作成)

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

ヘッダーの読み込み

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

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

homeの記入今度はテンプレートの一覧から「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コード」または単に「コード」と呼んでいます。ここではルールと呼び名だけ覚えておいてください。

ABOUT ME
moja
昭和47年生まれ。生まれた時からカープファン。 姫路生まれ姫路育ち。現在は相生市矢野町榊。 パソコン販売・修理・組立、出張サポート、ホームページ制作・WEBデザインなど。 奥さん1人と4男の父 真宗門徒
にほんブログ村 地域生活(街) 関西ブログ 姫路情報へにほんブログ村 子育てブログへにほんブログ村 野球ブログ 広島東洋カープへ