ぱそこん生活感。のTOPへ

WPテーマ自作 > 1.基礎編 >

2012.04.16

モジュール式のテーマテンプレートファイルにする

　今回は、前回と一転して「形式」にこだわってみます。
　

サンプルテーマ06の狙い

　index.phpをモジュール式のテンプレートファイルとして分割します。
　

サンプルテーマ06に切り替えてみる

　それでは管理画面の外観＞テーマ頁にて「PCSK sample themes 06」に切り替えて見てください。ブログ画面を新タブで表示すると、、、サンプルテーマ05と同じ画面になるはずです。そうです。今回は見た目はテーマ05と変わりません。
　

サンプルテーマ06の中身

　さて、それではテーマ06のファイルはどうなっているのでしょう。テーマ
フォルダpcsk-s06内には次の５つのファイルが入っています。

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

これまでは、style.cssとindex.phpの２つだけでしたから、モジュール化によって３ファイル増えています。
　

モジュール化とは

　モジュール化とはある役目ごとにパーツを分けることです。今回は下に示す様に、記事本文以外を他の３つのファイルに分割しています。
　

＜テンプレートファイルのモジュール化＞
・ヘッダー部分　　→　header.php
・ブログ記事本文　→　index.php
・サイドバー部分　→　sidebar.php
・フッター部分　　→　footer.php

ではindex.phpの中を確認して見ましょう。

<?php get_header(); ?>　　←　ヘッダー部分呼び出し

<div id="main-bu">
メイン部分 start<br />

<div id="honbun">
サンプルテーマ０６　本文<br />
（省略）
↓ここから記事を表示<br />

<?php if (have_posts()) :  while (have_posts()) : the_post(); ?>
　（メッセージループ内　省略）
<?php endif; ?>

<p><?php posts_nav_link(); ?></p>

</div><!-- /honbun -->

<div id="retu2-right">
<?php get_sidebar(); ?>　　←　サイドバー部分呼び出し
</div><!-- /retu2-right -->

<div class="float-clear"></div>

メイン部分 end
</div><!-- /main-bu -->

<?php get_footer(); ?>　　←　フッター部分呼び出し

分割した分、index.phpがすっきり簡潔になっています。サンプルテーマ06における新規追加テンプレートタグはまず、先頭の

<?php get_header(); ?>

ですが、これは実はテンプレートインクルードタグと呼ばれるものです。
　

テンプレートインクルードタグとは

　テンプレートインクルードタグは、テンプレートファイルの中から他のテンプレートファイルを実行する場合に使うものです。テーマ06で使ったのは下の３つです。

＜サンプルテーマ06で使用したテンプレートインクルードタグ＞
・<?php get_header(); ?>　→　header.php　を呼び出して実行する
・<?php get_sidebar(); ?>　→　sidebar.php　を呼び出して実行する
・<?php get_footer(); ?>　→　footer.php　を呼び出して実行する

　
　それでは、呼び出した先のファイルの中身も確認しておきましょう。header.phpを下に示します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html <?php language_attributes('xhtml'); ?>>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>

<div id="header">
<br /><br />
<h1><a href="<?php echo get_option('home'); ?>/">　<?php bloginfo('name'); ?></a></h1>
　　　<?php bloginfo('description'); ?><br /><br />
</div><!-- #header -->

やはりと言うか、テーマ05のindex.phpでのヘッダー部分そのままですね。他のsidebar.php、footer.phpにおいてもそれぞれの部分を単に移しただけです（あなたもファイルを開いて確認してみて下さい）。
　

何故モジュール化するのか

　以上見てきたようにモジュール化を行いましたが、内容そのものが同じであるなら何故わざわざファイルを分割するのでしょうか？その理由は↓です。

＜モジュール化のメリット＞

  1. メンテナンス性の向上
  2. バリエーションを増やし易い

　
　１番目はメンテナンスのし易さ、管理上の問題です。今後、カテゴリー別とか固定ページ、個別記事用など複数のテンプレートファイルを必要に応じ作っていきます。その時にそれぞれのファイルがヘッダーやフッターを持っていたのでは仕様変更の際に大変です。ヘッダー部等を独立させておけば修正は１ファイルで済むので非常に楽チンです。
　
　２番目はバリエーション、複数仕様の面です。例えば、カテゴリー別にサイドバーを３種類持ちたいなと思った場合にモジュール化していれば便利です。sidebar-a.php、sidebar-b.php、sidebar-c.phpという様にサイドバー部のみを作り分けすれば用が足ります（実際に振り分け使用するには条件分岐とかが必要になってはきますが）。
　

まとめ

　今回はモジュール化を行いました。これらはややこしいかもしれませんが難しくは無いので今後慣れていって下さい。
　
　次回はコメントを表示できるようにしてみようと思います。

次は: コメント欄を表示する

Posted at 21:44 | Category: 1.基礎編 | コメントは受け付けていません。






    国の金融政策