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

投稿日：2013年7月22日

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

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

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

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

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

旧コード

Code example
1	`<html>`

新コード

Code example
1	`<html` `<?php language_attributes();?>>`

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

旧コード

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

Code example
1 2	`<meta` `http-equiv="Content-Type"` `content="text/html; charset=UTF-8"` `/>` `<meta` `http-equiv="Content-Type"` `content="text/html; charset=UTF-8"` `/>`

新コード

Code example<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 />

Code example
1 2	`<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.タイトルの設定をします。タイトルは「現在のページ名」、「サイトタイトル」、「サイト説明」を”|”区切りで出力する設定にします。旧コード

Code example<title>Storehouse｜VPS設定貯蔵庫-VPS,Apache,Wordpress</title>

Code example
1	`<title>Storehouse｜VPS設定貯蔵庫-VPS,Apache,Wordpress</title>`

新コード

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

Code example
1 2 3 4 5 6	`<title><?php` `wp_title('\|',true,'right');` `bloginfo('name');` `echo '\|';` `bloginfo('description');` `?></title>`

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

Code example
1	`<?php wp_head();?>`

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

旧コード

Code example
1	`<body>`

新コード

Code example
1	`<body` `<?php body_class(); ?>>`

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

旧コード

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

Code example
1	`<h1>STOREHOUSE ～ VPS,Apache,Wordpress設定貯蔵庫 ～</h1>`

新コード

Code example
1	`<h1><?php` `bloginfo('description'); ?></h1>`

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

旧コード

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

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

新コード

Code example<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" />

Code example
1 2	`<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については次の記事で、グローバルメニューのお話をします。

カテゴリー:WordPress タグ: PHP, WordPress, テーマ, テンプレートタグ

« WordPressテーマ制作-ステップ4-共通部分のテンプレート化 WordPressテーマ制作-ステップ6-functions.phpの作成 »

IT知識の貯蔵庫