元の記事
オリジナルテーマを作ってみよう！ – WordPressテーマの仕組みを理解する
WordPressのテーマとは何かを、実際に最小限のオリジナルテーマを作成しながら学びます。ファイル構造やテーマの役割、wp-contentやthemesフォルダの意味、style.cssとindex.phpの基本など、WordPressの仕組みを根本から理解する第一歩に最適な内容です。
［成果物］オリジナルテーマを作ってみよう！ – WordPressテーマの仕組みを理解する
この記事では、以下の投稿で作成した成果物をまとめて確認することができます。
ご自身の環境と見比べて反映漏れがないかなど、ご確認用にご活用ください。
は今回新規追加したものです。
は今回変更したものです。
目次
固定ページ一覧
| タイトル | スラッグ | 順序 | テンプレート | 備考 | |
|---|---|---|---|---|---|
| ようこそ | ようこそ | タイトル変更 |
投稿一覧
| タイトル | カテゴリ | テンプレート | 備考 | |
|---|---|---|---|---|
| Hello World!! | WPが自動生成 |
テーマファイル一覧
現時点のテーマファイルはありません
| ファイル名 | 用途 | 備考 | |
|---|---|---|---|
| index.php | |||
| style.css |
コード
現時点のコードは以下の通りです。
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<title>マイ・オリジナルテーマ</title>
</head>
<body>
<header>
<h1>サンプルテーマ</h1>
</header>
<main>
<section>
<h2>WordPressテーマ作成</h2>
<p>このページは<strong>index.php</strong>ファイルで作成されています。</p>
<p>PHPファイルですが、HTMLを書くことができます。</p>
</section>
<section>
<h2>学習のポイント</h2>
<ul>
<li>PHPファイルでもHTMLが書ける</li>
<li>普通のWebページと同じように表示される</li>
<li>次回はWordPress関数を学習予定</li>
</ul>
</section>
</main>
<footer>
<p>© 2025 マイ・オリジナルテーマ</p>
</footer>
</body>
</html>style.css
/*
Theme Name: マイ・オリジナルテーマ
*/プラグイン
現時点のプラグインはありません
| プラグイン名 | 作者 | 備考 | |
|---|---|---|---|
