2013年09月10日 追記・変更
WordPressのテーマの基本構造の再確認
早速、オリジナルテーマ作成にとりかかっていきたいのだが、まずはファイルを分割する事から始める。「【改訂版】02.WordPressテーマの動作を知れば、全体像が見えてくる」でも説明した通り、WordPressのテーマは、ホームページのヘッダーやサイドバー、ループ、フッターといったパーツを別ファイルに分割して、そのパーツを各ページ用のテンプレートファイルで呼び出している。
例）index.phpの場合
上記のように、index.phpは「header.php」「loop.php」「sidebar.php」「footer.php」を読み込んでいる。
補足だが、index.phpのメイン部分である記事表示の箇所は「loop.php」というファイル名で保存するのがテーマ作成時の慣習となっている。
インクルードとは？
「include関数について」の説明ページも参考にしてもらいたい。php構文でinclude関数というものが存在していて、役割はファイルの読み出し。
本来であれば、include 'ファイル名';という形で使うのだが、WordPressのテンプレートタグではphpの関数を知らずとも、カスタマイズが行えるように用意されたタグが多数存在する。
WordPressタグとは、WordPressがphpの関数などでWordPressが定義したタグ。
つまり、実際はphp自体が裏で処理をしてくれている。
例)header.phpファイルの読み出しのWordPressテンプレートタグ
<?php get_header(); ?>WordPress内でのphpの処理
<?php include('header.php'); ?>
共通部分の作成(1) header.phpを作成する
index.phpをテキストエディタで開いて、ヘッダー部分の記述内容を切り取る。その後、新規のテキストエディタを開いて切り取った内容を貼り付け、新ファイル「header.php」として保存する。
毎回、ファイル保存時は「文字コード」(エンコードの種類)に気をつける事。
必ず文字コードは「UTF-8」で統一する。
ヘッダー部分を切り取って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 -->
共通部分の作成(2) loop.phpを作成する
ここはメイン部分。今回のファイルの記述上、全ページでの共通部分ではない点に注意してもらいたい。index.phpのメイン部分は、loop.phpとして保存するのが慣習。
<!-- main -->
<div id="main">
<h2><a href="php_html.html">phpとhtmlの違いは？</a></h2>
<p>
<img src="sozai/a0002_010858.jpg" align="right">htmlは静的なページとなっているので用意されたページをそのまま表示します。<br />
phpは動的なペーとなっているため、ブラウザ側からページを表示するリクエストがあった場合には、まずサーバー側で処理を行い、動的な部分をブラウザが理解できる情報(HTMLなど)に変換してから、その情報を表示することになります。<br clear="all" />
</p>
<div align="right">
<a href="php_html.html">続きを読む →</a>
</div>
<div class="meta">
投稿日: 2013年7月2日<br />
カテゴリー: <a href="wordpress.html">WordPress</a> | タグ: <a href="#">php</a> <a href="#">html</a> | 投稿者: <a href="#">admin</a>
</div>
<h2><a href="absolutepath_relativepath.html">絶対パスと相対パス</a></h2>
<p>
<img src="sozai/a0055_000859.jpg" align="left">絶対パスとは、サーバのルートからディレクトリ（フォルダ）名を順に書く方法です。<br />
相対パスとは、今表示しているホームページから、ディレクトリの差分だけを書く方法です。<br clear="all" />
<br />
例）<br />
http://www.testsite.com/d1/e1/index.html<br />
から、<br />
http://www.testsite.com/d1/e1/f1/g.html<br />
へリンクする場合、<br />
絶対パスなら、<br />
<A href="/d1/e1/f1/g.html">～</A>のように、、http://～/を除いて、「/」から書き始めます。<br />
<br />
相対パスなら、<br />
<A href="f1/g.html">～</A>のように、今いるフォルダから足りない部分のみを書き足します。「/」で始めてはいけないので注意です。<br />
同じディレクトリなら、ファイル名だけを書けばよく、一つ下に戻りたい場合は「../」のようにコンマを２つつけてスラッシュで一つ下に戻ります。<br />
応用することで、一つ下へ戻りさらに別のフォルダへ一気に指定することも出来ます。「../e2/f.html」のように指定すれば、http://www.testsite.com/d1/e2/f.htmlへリンクします。<br />
</p>
<div align="right">
<a href="absolutepath_relativepath.html">続きを読む →</a>
</div>
<div class="meta">
投稿日: 2013年7月2日<br />
カテゴリー: <a href="elementary.html">基礎知識</a> | タグ: <a href="#">絶対パス</a> <a href="#">相対パス</a> | 投稿者: <a href="#">admin</a>
</div>
<h2><a href="wordpressplugin.html">WordPressのプラグインとは？</a></h2>
<p><img src="sozai/a0002_008425.jpg" align="left">
プラグインは、WordPressの機能を拡張するためのツールです。<br />
WordPress のコアは、柔軟性を保つため、不必要なコードでふくれあがってしまわないように設計されています。<br />
ユーザーそれぞれが特定のニーズに合ったプラグインを利用して簡単に機能を追加できます。<br clear="all" />
</p>
<div align="right">
<a href="wordpressplugin.html">続きを読む →</a>
</div>
<div class="meta">
投稿日: 2013年7月2日<br />
カテゴリー: <a href="wordpress.html">WordPress</a> | タグ: <a href="#">プラグイン</a> <a href="#">ツール</a> | 投稿者: <a href="#">admin</a>
</div>
<div style="width:100%">
<div style="float:left">
<a href="">«前ページ</a>
</div>
<div style="float:right">
<a href="">次ページ»</a>
</div>
</div>
</div>
<!-- /main -->
共通部分の作成(3) sidebar.phpを作成する
ここはサイドバー部分。ウィジェット等を表示させる箇所だ。
<!-- sidebar -->
<div id="sidebar">
<div class="section">
<form role="search" method="get" id="searchform" action="#" >
<label class="screen-reader-text" for="s"></label>
<input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="検索" />
</form>
</div>
<div class="section">
<h2>Category</h2>
<ul>
<li><a href="elementary.html">基礎知識</a></li>
<li><a href="wordpress.html">WordPress</a></li>
</ul>
</div><!-- /.section -->
<div class="section">
<h2>Tag</h2>
<a href="#">タグ</a>
<a href="#">php</a>
<a href="#">html</a>
<a href="#">相対パス</a>
<a href="#">絶対パス</a>
<a href="#">ツール</a>
<a href="#">プラグイン</a>
</div><!-- /.section -->
</div>
<!-- /sidebar -->
共通部分の作成(4) footer.phpを作成する
<!-- footer -->
<div id="footer">
<div class="copyright">Copyright © 2013 サンプルサイト All Rights Reserved.</div>
</div>
<!-- /footer -->
</div><!-- /#wrapper -->
</body>
</html>
現在、index.phpに残った記述の確認
index.phpの中の記述をパーツとして別ファイルに保存したので、index.phpの記述は下記となる。<div id="contents"> </div><!-- /#contents -->
現在のサイト表示
index.phpから共通部分の記述を切り取った状態で、保存するとサイトの表示は下記の状態となる。「http://localhost/wordpress/」を開いて確認する。
当然、真っ白だ。
index.phpに共通ファイルを読み込む記述を追加する
先ほど切り分けた共通ファイルを読み込むための記述を追加する。phpではinclude関数を使用するのだが、WordPressにはファイルを読み込むためのテンプレートタグが用意されているので、それを使用していく。
共通ファイルをインクルードしたindex.phpテンプレート
<!-- ヘッダー読み込み header.phpを読み込んでくれる --> <?php get_header(); ?> <div id="contents"> <!-- メイン部分の読み込み loop.phpを読み込んでくれる --> <?php get_template_part( 'loop' ); ?> <!-- サイドバー読み込み sidebar.phpを読み込んでくれる --> <?php get_sidebar(); ?> </div><!-- /#contents --> <!-- フッター読み込み footer.phpを読み込んでくれる --> <?php get_footer(); ?>
サイト表示
「http://localhost/wordpress/」を開いて確認する。
「【改訂版】05.新テーマを有効化した後の表示内容を知る」のページで説明した際と同じようなサイト表示となるはずだ。
