«
»

【改訂版】07.共通部分の中身を書き換える　header.php

2013年09月10日 追記・変更

各パーツファイルの中身を編集していこう

ファイル分割が完了したと思うので、それでは次にそれぞれのファイルの中身を編集していく。
今現在の状態では、まだWordPressの情報を出力出来ていない。
前回作成した、header.php、loop.php、sidebar.php、footer.phpを編集していこう。

具体的にはサイト名をWordPressで設定したサイト名と連動させるため、WordPressテンプレートタグを使用して書き換えていく。
テンプレートタグ全てを覚える必要はない。どのタグを使えば何が出来るかを把握していれば問題ない。
参考：覚えるべきWordPressテンプレートタグ

共通部分の書き換え header.php

まずはheader.phpから書き換えていく事にする。
覚えるべきWordPressテンプレートタグ
テンプレートタグ
条件分岐タグ
上記ページを参考にしながら、書き換えていこう。

現在の記述 header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="このサイトはサンプルサイトです。" />
<meta name="keywords" content="サイト,サンプル,テストサイト" />
<link rel="stylesheet" href="style.css" type="text/css" />

<title>サンプルブログサイト</title>
</head>

<body>
<div id="wrapper">




	<!-- header -->
   <div id="header">
      <h1><a href="index.html">サンプルブログサイト</a></h1>
   </div>
	<!-- /header -->

	<!-- menu -->
   <div id="menu">
      <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="about.html">ABOUT</a></li>
      <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
   </div>
	<!-- /menu -->

WordPressテンプレタグと、phpで書き換えた記述 header.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<meta name="description" content="<?php bloginfo('description'); ?>" />

<meta name="keywords" content="テスト,サンプル,テストサイト" />

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

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

<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>

<?php wp_head(); ?>
</head>

<body>
<div id="wrapper">

	<!-- header -->
   <div id="header">
      <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
   </div>
	<!-- /header -->

	<!-- menu -->
   <div id="menu">

<?php wp_nav_menu(); ?>

   </div>
	<!-- /menu -->

【ソース解説】WordPressテンプレタグと、phpで書き換えた記述 header.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<!--
管理画面の「設定」→「一般」のキャッチフレーズを表示するために
bloginfo('description');を使用する。
-->
<meta name="description" content="<?php bloginfo('description'); ?>" />

<!--
WordPressの管理画面では、metaタグ内のkeywords入力欄が存在しない。
そのため、ここはテンプレタグを使わずに直接記述する必要がある。
また、もしページ毎にkeywordsを変更したいならば、if文とテンプレタグを駆使する。
もしくはプラグインを利用する。
-->
<meta name="keywords" content="テスト,サンプル,テストサイト" />

<!--
style.cssまでの絶対パスを出力するテンプレタグ
bloginfo('stylesheet_url');
-->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

<!--
サイト名を出力するテンプレタグは bloginfo('name');

■wp_title( '|', true, 'right' );の解説
wp_title();は各ページのタイトル名を出力するテンプレタグ。
もしタイトル名を出力しないといけないページの場合、
タイトル名と一緒に「right」（右）に「|」を出力する。
-->
<title><?php wp_title( '|', true, 'right' ); bloginfo('name'); ?></title>


<!--
WordPressのコメント欄で使用するJavaScriptファイルを読み込む記述。
-->
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>

<!--
wp_head();を忘れずに</head>の前に記述する。
■wp_head();の解説
プラグインを使用する際などに必要な記述
-->
<?php wp_head(); ?>
</head>

<body>
<div id="wrapper">

	<!-- header -->
   <div id="header">

<!--
サイト名を出力するテンプレタグは bloginfo('name');
サイトURLを出力するテンプレタグは bloginfo('url');
-->
      <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
   </div>
	<!-- /header -->

	<!-- menu -->
   <div id="menu">

<!-- ナビゲーションを出力するWordPressテンプレタグ -->
<?php wp_nav_menu(); ?>

   </div>
	<!-- /menu -->

header.phpの書き換えた内容を保存してサイトを確認

タグを書き換えた事で、サイトがどう表示されたのか確認をする。
orijinal7_1
スタイルシートのファイルへのパスが正しく設定されているため、デザインが崩れずに表示されている。
余談だが、このオリジナルテーマ作成にあたり、Instant WordPressを利用してみた。

表示されたサイトのheadr.phpの部分のページソースの確認

記述したテンプレートタグがどう変わったのかを確認して、テンプレタグの働きを把握してもらいたい。
<!-- ヘッダー読み込み header.phpを読み込んでくれる -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

<!--
管理画面の「設定」→「一般」のキャッチフレーズを表示するために
bloginfo('description');を使用する。
-->
<meta name="description" content="Your Local WordPress Installation" />

<!--
WordPressの管理画面では、metaタグ内のkeywords入力欄が存在しない。
そのため、ここはテンプレタグを使わずに直接記述する必要がある。
また、もしページ毎にkeywordsを変更したいならば、if文とテンプレタグを駆使する。
もしくはプラグインを利用する。
-->
<meta name="keywords" content="テスト,サンプル,テストサイト" />

<!--
style.cssまでの絶対パスを出力するテンプレタグ
bloginfo('stylesheet_url');
-->
<link rel="stylesheet" href="http://127.0.0.1:4001/wordpress/wp-content/themes/test/style.css" type="text/css" />

<!--
サイト名を出力するテンプレタグは bloginfo('name');

■wp_title( '|', true, 'right' );の解説
wp_title();は各ページのタイトル名を出力するテンプレタグ。
もしタイトル名を出力しないといけないページの場合、
タイトル名と一緒に「right」（右）に「|」を出力する。
-->
<title>Instant WordPress</title>


<!--
WordPressのコメント欄で使用するJavaScriptファイルを読み込む記述。
-->

<!--
wp_head();を忘れずに</head>の前に記述する。

■wp_head();の解説
プラグインを使用する際などに必要な記述
-->
<link rel='stylesheet' id='admin-bar-css'  href='http://127.0.0.1:4001/wordpress/wp-includes/css/admin-bar.css?ver=3.4.2' type='text/css' media='all' />
<script type='text/javascript' src='https://127.0.0.1:4001/wordpress/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://127.0.0.1:4001/wordpress/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://127.0.0.1:4001/wordpress/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.4.2" />
<style type="text/css" media="print">#wpadminbar { display:none; }</style>
<style type="text/css" media="screen">
	html { margin-top: 28px !important; }
	* html body { margin-top: 28px !important; }

</style>
</head>

<body>
<div id="wrapper">

	<!-- header -->
   <div id="header">

<!--
サイト名を出力するテンプレタグは bloginfo('name');
サイトURLを出力するテンプレタグは bloginfo('url');

-->
      <h1><a href="http://127.0.0.1:4001/wordpress">Instant WordPress</a></h1>
   </div>

	<!-- /header -->

	<!-- menu -->
   <div id="menu">

<!-- ナビゲーションを出力するWordPressテンプレタグ -->
<div class="menu"><ul><li class="page_item page-item-54"><a href="http://127.0.0.1:4001/wordpress/about/">About</a></li><li class="page_item page-item-22"><a href="http://127.0.0.1:4001/wordpress/links/">Links</a></li><li class="page_item page-item-26"><a href="http://127.0.0.1:4001/wordpress/news/">News</a></li><li class="page_item page-item-2"><a href="http://127.0.0.1:4001/wordpress/sample-page/">Sample Page</a></li><li class="page_item page-item-20"><a href="http://127.0.0.1:4001/wordpress/support/">Support</a></li></ul></div>

   </div>

	<!-- /menu -->

ページナビゲーションを元々のHTMLファイルと同一にする

元々のHTMLファイルと同一内容にするために管理画面から記事の編集を行う。
現在、ページナビゲーション（固定ページ表示部分）は下記のように表示されてしまっている。

現在のページナビゲーションの表示

既にWordPressに入力された記事が表示されている。
orijinal7_2

元々のHTMLファイルのページナビゲーションの表示

orijinal7_3

新規固定ページの作成と、既存ページの削除

管理画面の「固定ページ」→「固定ページ一覧」で全ページを削除して、「ABOUT」と「お問い合わせ」を新規追加する。

「ABOUT」のページ入力内容

タイトル：ABOUT
本文：このサイトの説明ページです。このサイトはHTMLで製作されたサンプルサイトです。
orijinal7_4

「お問い合わせ」のページ入力内容について

「お問い合わせ」のページでは、プラグイン「Contact Form 7」を利用する。
これはサイトに問い合わせフォームを手軽に追加出来るプラグインだ。
プラグインの追加方法は、Contact Form 7プラグイン導入方法を参照。

「お問い合わせ」のページ入力内容

タイトル：お問い合わせ
本文：[contact-form-7 id="78" title="コンタクトフォーム 1"]
orijinal7_10 ※まだこの段階では、お問い合わせページは表示されない。
WordPressの管理画面上で入力をしたコンテンツを表示するための記述を行っていないため、現在は固定ページの内容は表示されない。

ページナビゲーションの表示を確認する

現在のページナビゲーションの表示

orijinal7_11

元々のHTMLファイルのページナビゲーションの表示

orijinal7_3 まだナビゲーションメニューの項目が足りていないのが分かるだろうか？
この段階では、固定ページが一覧表示されているだけなので「HOME」が存在しない。
「HOME」を表示するには「ナビゲーションメニュー」ではなく「カスタムナビゲーションメニュー」を利用する必要がある。
詳しくは、カスタムナビゲーションメニューの追加と設定方法のページを参照してもらいたい。
「HOMEリンクの追加は、カスタムリンクで「URL」を「サイトURL」に。「ラベル」を「HOME」とすれば良い。

カスタムナビゲーションの設定をする

テキストエディタ等で下記を記述してfunctions.phpとして保存

<?php
register_nav_menus(array(
		'main_navigation' => 'Primary Navigation'
	)
);
?>

管理画面の「外観」→「メニュー」でナビゲーションメニューで表示する内容を変更する。

orijinal7_12

変更後のページナビゲーションの表示

orijinal7_13
元々のHTMLファイルと同じ表示となった。
これでheader.phpファイルの編集は終了。

管理画面からサイト名を変更する

現在、「Instant WordPress」となっているので「サンプルブログサイト」に変更する。
orijinal7_14
必ず「変更を保存」をクリック。

サイトの表示を確認する

まだページナビゲーションのリンクをクリックしても、個別ページ等は表示されないが、header.phpの部分の置き換えが完了した。
orijinal7_15

関連記事

【改訂版】05.新テーマを有効化した後の表示内容を知る 【改訂版】06.共通部分を分割して別ファイルとしてインクルード 【改訂版】09.共通部分の中身を書き換える　sidebar.php 【改訂版】10.共通部分の中身を書き換える　footer.php 【改訂版】01.オリジナルテーマとは？ HTMLをWordPressテーマ化 【改訂版】08.共通部分の中身を書き換える　loop.php PHPでメールフォームサンプルプログラム 【改訂版】02.WordPressテーマの動作を知れば、全体像が見えてくる

この記事が気に入ったら下のボタンをクリック

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る