元の記事
テンプレートを理解しよう! – 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話まで掲載中