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>
・固定ページをサイトトップに表示する場合: front-page.php を使用します。
・投稿一覧をサイトトップに表示する場合: home.php を使用します。
4.front-page.php
– サイトのフロントページ用テンプレート
front-page.php はサイトのホームページを固定ページとして設定する場合に使用されるテンプレートです。
<?php get_header(); ?>
<main>
<h1>Welcome to My Website</h1>
<section class="hero">
<p>Discover the latest updates and news.</p>
</section>
<section class="recent-posts">
<h2>Recent Posts</h2>
<?php
$recent_posts = new WP_Query(array(
'posts_per_page' => 5,
));
if ($recent_posts->have_posts()) :
while ($recent_posts->have_posts()) : $recent_posts->the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile;
wp_reset_postdata();
else : ?>
<p>No recent posts available.</p>
<?php endif; ?>
</section>
</main>
<?php get_footer(); ?>
5.home.php
– ブログ投稿一覧のテンプレート
home.php はブログ投稿一覧ページを表示するためのテンプレートです。デフォルトで投稿が指定された場合、このファイルが使用されます。
<?php get_header(); ?>
<main>
<h1>Blog</h1>
<?php if (have_posts()) : ?>
<div class="post-list">
<?php while (have_posts()) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p class="post-meta">
Posted on <?php echo get_the_date(); ?> by <?php the_author(); ?>
</p>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
<?php else : ?>
<p>No posts found.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>
6. footer.php
– フッターファイル
footer.phpはフッター部分を定義するファイルで、index.phpや他のテンプレートの最後で呼び出します。
基本的なコード例
<footer>
<p>© <?php echo date('Y'); ?> My Custom Theme</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>
7. 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(); ?>
8. page.php
– 固定ページ用テンプレート
固定ページを表示する際に使用されます。single.phpと似ていますが、固定ページ専用に作成します。
基本的なコード例
<?php get_header(); ?>
<main>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</main>
<?php get_footer(); ?>
9. 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のオリジナルテーマを構築してみましょう。それぞれのテンプレートの役割を理解することで、より効率的なテーマ作成が可能になります。まずは基本から始め、少しずつカスタマイズを加えていきましょう！