IT知識の貯蔵庫
WordPressテーマ制作-ステップ5-ヘッダーのテンプレート化
前のステップでヘッダー、フッター、サイドバーをテンプレート化しましたが、いまのテンプレートのままでは固定の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 ～ VPS,Apache,Wordpress設定貯蔵庫 ～</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については次の記事で、グローバルメニューのお話をします。
広告
コメントを残す