WordPressテーマ制作-ステップ5-ヘッダーのテンプレート化

投稿日:

Pocket

前のステップでヘッダー、フッター、サイドバーをテンプレート化しましたが、いまのテンプレートのままでは固定のHTMLが出力されるだけです。

ここからはそれぞれ作成したテンプレートファイルにWordpressのテンプレートタグを記述していきます。

まずはheader.phpにテンプレートタグを入れていきます。テンプレートタグに置き換えることで、表示されたページにあわせたタイトルなどが出力されます。

ここで記述されている旧コードについては、storehouseの元のhtmlを作成したときのコードです。作成者の環境によってかわってきますので、それぞれの環境にあわせて読み直してください。

1.言語の設定をします。

旧コード

<html>

新コード

<html <?php language_attributes();?>>

 2.文字コードの設定をします。

旧コード

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

新コード

<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset');?>" />
<meta http-equiv="Content-Type" content="text/html; charset=<?php bloginfo('charset');?>" /><br />

  3.タイトルの設定をします。 タイトルは「現在のページ名」、「サイトタイトル」、「サイト説明」を”|”区切りで出力する設定にします。 旧コード

<title>Storehouse|VPS設定貯蔵庫-VPS,Apache,Wordpress</title>

新コード

<title><?php
  wp_title('|',true,'right');
  bloginfo('name');
  echo '|';
  bloginfo('description');
?></title>

4.wp_head関数を記述します。 </head>タグの前にwp_head関数を記述します。(必須)これはプラグインがJavaScriptなどを出力するときに必要になります。 追加

<?php wp_head();?>

5.body_class関数を設定します。

旧コード

<body>

新コード

<body <?php body_class(); ?>>

  6.サイト説明を出力します。キャッチフレーズに入力されている内容が出力されます。

旧コード

<h1>STOREHOUSE&nbsp;~&nbsp;VPS,Apache,Wordpress設定貯蔵庫&nbsp;~</h1>

新コード

<h1><?php bloginfo('description'); ?></h1>

このサイトにはロゴマークとタイトル画像が設定されていますが、画像の代替文字を変更します。

旧コード

<img alt="Storehouseロゴマーク" src="<?php bloginfo( 'template_url' ); ?>/images/logo.png" />
<img alt="Storehouseタイトル" src="<?php bloginfo( 'template_url' ); ?>/images/logo.png" />

新コード

<img alt="<?php bloginfo( 'name' ); ?>ロゴマーク" src="<?php bloginfo( 'template_url' ); ?>/images/logo.png" />
<img alt="<?php bloginfo( 'name' ); ?>タイトル" src="<?php bloginfo( 'template_url' ); ?>/images/logo.png" />

headerについては次の記事で、グローバルメニューのお話をします。

Pocket

カテゴリー:WordPress タグ: , , ,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です