はい、こんにちは。自分のドッペルゲンガーは浅香航大だと思いこんでいる「たったかのたか」です。
一時期似ていると言われていたので調子に乗っています。
さて。
今日は先日作った最小構成のWordPressテーマを少しだけ手直ししてみようと思います。
流用する部分をテンプレートに分割して、色んな場所で使えるようにしてみます。
なぜテンプレートファイルに分割するの？
多くのサイトでは、複数のページで共通のヘッダー、フッター、サイドバーを使用していることが一般的です。これらのコードを全ページに同じように記述していると、修正が必要になった際に、すべてのページを個別に修正しなければならないため、メンテナンスが非常に煩雑になります。このようなメンテナンス性の悪さを回避するために、共通部分を別ファイルにまとめ、必要に応じて呼び出すという方法が、WordPressテーマ開発では一般的に採用されています。
分割前のindex.phpを見てみる。
まずは分割前のindex.phpを載せます。
<?php
/**
* index.php
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="l-wrapper">
<header id="header" class="l-header"></header>
<div id="content" class="l-content">
<div class="l-content__body">
<!--ここまでheader.php-->
<main id="main" class="l-main"></main>
<!--ここからfooter.php-->
<aside id="sidebar" class="l-sidebar"></aside>
</div><!--end l-content__body-->
</div><!--end l-content-->
<footer id="footer" class="l-footer"></footer>
<?php wp_footer(); ?>
</div>
</body>
</html>このコードのうち、「ここまでheader.php」のコメントまでがheader.phpに分割する部分です。
そして「ここからfooter.php」から下がfooter.phpに分割する部分です。
このコードを元にファイルをheaderとindexとfooterに分割してみます。
index.htmlを分割してみる。
index.phpを分割して、header.phpとfooter.phpを作成しました。この分割によって、テンプレートの管理がより簡単になり、共通部分であるヘッダーやフッターの編集を効率よく行うことができます。index.phpには、それぞれのテンプレートパーツを呼び出すためのコードを追加し、構造をより整理された形に改善しました。これにより、複数のテンプレートで共通する部分を一元管理でき、テーマ全体の開発効率が向上します。
さらに、各テンプレートファイルの先頭には、直接ファイルにアクセスされることを防ぐためのセキュリティコードを追加しています。具体的には、header.phpやfooter.phpなどのファイルにif ( ! defined( 'ABSPATH' ) ) exit;というコードを挿入しました。これにより、WordPressを介さずにこれらのファイルに直接アクセスしようとした場合には、即座にスクリプトの実行が停止され、セキュリティリスクを軽減することができます。
header.php
<?php if ( ! defined( 'ABSPATH' ) ) exit;
/**
* header.php
*/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class="l-wrapper">
<header id="header" class="l-header">ヘッダー</header>
<div id="content" class="l-content">
<div class="l-content__body">footer.php
<?php if ( ! defined( 'ABSPATH' ) ) exit;
/**
* footer.php
*/
?>
<aside id="sidebar" class="l-sidebar"></aside>
</div><!--end l-content__body-->
</div><!--end l-content-->
<footer id="footer" class="l-footer">フッター</footer>
<?php wp_footer(); ?>
</div>
</body>
</html>
footer.phpに関してはsidebar.phpにさらに分割しようと思います。
index.php
<?php if ( ! defined( 'ABSPATH' ) ) exit;
/**
* index.php
*/
?>
<?php get_header();?>
<main id="main" class="l-main">index.php</main>
<?php get_footer();?>テンプレート呼び出し用のコード、get_header()とget_footer()をそれぞれのテンプレートがあった箇所に記述しています。
footer.phpをさらに分割してみる
footer.phpには
<aside id="sidebar" class="l-sidebar"></aside>というサイドバーを記述するコードがあるので、ここも分割しておきましょう。
サイドバーをsidebar.phpに記述し、footer.phpには呼び出し用のget_sidebar()を記述します
sidebar.php
<?php if ( ! defined( 'ABSPATH' ) ) exit;
/**
* sidebar.php
*/
?>
<aside id="sidebar" class="l-sidebar">サイドバー</aside>footer.php
<?php if ( ! defined( 'ABSPATH' ) ) exit;
/**
* footer.php
*/
?>
<?php get_sidebar();?>
</div><!--end l-content__body-->
</div><!--end l-content-->
<footer id="footer" class="l-footer">フッター</footer>
<?php wp_footer(); ?>
</div>
</body>
</html>
まとめ
現在、index.phpを分割して、header.php、footer.phpを作成しました。さらに、footer.phpからはsidebar.phpを分離し、テンプレートの構造をよりモジュール化しました。この構造は、単にindex.phpだけでなく、single.phpやpage.php、さらにはアーカイブページなどでも使用する、共通の基本的なテンプレート構造となります。
今後は、header.phpやfooter.phpといった共通パーツからも、他のテンプレートファイルを柔軟に呼び出せるようにし、サイト全体のテンプレート管理をさらに効率化していきたいと考えています。これにより、サイト全体でデザインや機能の一貫性を保ちながら、メンテナンスがしやすい形を実現することが目標です。
例えば、ナビゲーションやウィジェットエリアのような要素を、header.phpやfooter.php内でさらに細分化し、別のテンプレートファイルとして切り分けることで、特定のパーツを簡単にカスタマイズできるようにします。また、必要に応じて条件分岐を追加し、特定のページや投稿タイプに応じたカスタマイズも柔軟に行えるように設計したいと考えています。
コメント