WordPressでオリジナルテーマを作成するには、テンプレートファイルを理解し、それぞれの役割に応じた内容を作成することが重要です。この記事では、初心者向けにテンプレートファイルの作り方をわかりやすく解説します。
1. index.php – メインテンプレートファイル
index.phpは、すべてのページで最終的に使用される基本のテンプレートファイルです。他に専用のテンプレートがない場合にこのファイルが利用されます。
基本的なコード例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php bloginfo('name'); ?></title>
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
</header>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_title('<h2>', '</h2>');
the_content();
endwhile;
else :
echo '<p>No content found</p>';
endif;
?>
</main>
<footer>
<p>© <?php echo date('Y'); ?> My Custom Theme</p>
</footer>
</body>
</html>
2. style.css – テーマのスタイルシート
style.cssはデザイン全般をコントロールするファイルで、テーマ情報を含むヘッダーコメントを記載する必要があります。
必須ヘッダーコメント
/*
Theme Name: My Custom Theme
Author: Your Name
Description: A custom theme for WordPress.
Version: 1.0
*/
/* 簡単なスタイル例 */
body {
font-family: Arial, sans-serif;
line-height: 1.6;
margin: 0;
padding: 0;
}
header {
background: #333;
color: #fff;
padding: 1rem;
text-align: center;
}
3. header.php – ヘッダーファイル
header.phpはページ全体の共通ヘッダー部分を定義するファイルです。index.phpや他のテンプレートから呼び出します。
基本的なコード例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php wp_title('|', true, 'right'); ?></title>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1><?php bloginfo('name'); ?></h1>
<nav>
<?php wp_nav_menu(array('theme_location' => 'primary')); ?>
</nav>
</header>
4. footer.php – フッターファイル
footer.phpはフッター部分を定義するファイルで、index.phpや他のテンプレートの最後で呼び出します。
基本的なコード例
<footer>
<p>© <?php echo date('Y'); ?> My Custom Theme</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
5. single.php – 投稿ページ用テンプレート
投稿の個別ページを表示する際に使用されるテンプレートファイルです。
基本的なコード例
<?php get_header(); ?>
<main>
<?php
if (have_posts()) :
while (have_posts()) : the_post();
the_title('<h1>', '</h1>');
the_content();
endwhile;
endif;
?>
</main>
<?php get_footer(); ?>
6. page.php – 固定ページ用テンプレート
固定ページを表示する際に使用されます。single.phpと似ていますが、固定ページ専用に作成します。
基本的なコード例
<?php get_header(); ?>
<main>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>
7. 404.php – エラーページテンプレート
ページが見つからない場合に表示されるエラーページ用のテンプレートです。
基本的なコード例
<?php get_header(); ?>
<main>
<h1>404 - Page Not Found</h1>
<p>The page you are looking for does not exist.</p>
</main>
<?php get_footer(); ?>
まとめ
これらのテンプレートファイルを順番に作成し、WordPressのオリジナルテーマを構築してみましょう。それぞれのテンプレートの役割を理解することで、より効率的なテーマ作成が可能になります。まずは基本から始め、少しずつカスタマイズを加えていきましょう！