元の記事
テンプレートを理解しよう! – WordPressテンプレートシステムの基本【前編】
すべての固定ページが同じレイアウトで表示されていませんか?本記事では、テンプレート階層の仕組みとその優先順位を理解しながら、ページの内容や目的に応じて適切なテンプレートを使い分けるための第一歩を丁寧に解説します。今後の柔軟なデザイン展開に向けた基盤を築きましょう。
この記事では、以下の投稿で作成した成果物をまとめて確認することができます。
ご自身の環境と見比べて反映漏れがないかなど、ご確認用にご活用ください。
は今回新規追加したものです。
は今回変更したものです。
目次
| タイトル | スラッグ | 順序 | テンプレート | 備考 | |
|---|---|---|---|---|---|
| ようこそ | sample-page | 100 | トップページ | ||
| 会社概要 | about | 200 | |||
| 沿革 | history | 100 | |||
| アクセス | access | 200 | |||
| サービス | service | 300 | |||
| お問い合わせ | contact | 400 |
| タイトル | カテゴリ | テンプレート | 備考 | |
|---|---|---|---|---|
| Hello World!! | WPが自動生成 |
現時点のテーマファイルはありません
| ファイル名 | 用途 | 備考 | |
|---|---|---|---|
| index.php | |||
| page.php | 固定ページ用テンプレート | ||
| style.css |
現時点のコードは以下の通りです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>マイ・オリジナルテーマ</title>
</head>
<body>
<header>
<h1><?php the_title(); ?></h1>
<ul>
<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
<li><a href="<?php echo home_url('about'); ?>">会社概要</a>
<ul>
<li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
<li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
</ul>
</li>
<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>
</header>
<main>
<?php the_content();?>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html><!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php the_title(); ?></title>
</head>
<body>
<header>
<h1><?php the_title(); ?></h1>
<ul>
<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
<li><a href="<?php echo home_url('about'); ?>">会社概要</a>
<ul>
<li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
<li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
</ul>
</li>
<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
</ul>
</header>
<main>
<?php the_content(); ?>
<p>※このページは page.php テンプレートで表示されています</p>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>/*
Theme Name: マイ・オリジナルテーマ
*/現時点のプラグインはありません
| プラグイン名 | 作者 | 備考 | |
|---|---|---|---|
| Admin Columns | Codepress |
WordPressを効率よく確実に学ぶためには、学習の順序が大切です。知識が自然に積み上がるよう、学習ステップに沿って記事を順番に並べています。
学習ストーリー第40話まで掲載中