2025/6/25の記録です。
講師：大浜先生
テーマ作成
バージョン
ソフトウェアやアプリの「バージョン番号」が3桁で表記されるのには、実は暗黙のルールがあります。これは「セマンティックバージョニング（Semantic Versioning）」と呼ばれる考え方に基づいています。
たとえば「Ver.2.3.1」のような表記があった場合、それぞれの数字には次のような意味があります：
- メジャーバージョン（2）：大規模な変更や互換性を壊すようなアップデートのときに更新されます。
- マイナーバージョン（3）：新機能の追加など、互換性を保ったままの中規模な変更。
- パッチバージョン（1）：バグ修正や軽微な変更など、小さなアップデート。
この3桁の構成は「小数点で区切られている」ように見えますが、実際にはそれぞれ独立した整数であり、たとえば「1.9.9」の次は「1.9.10」であって「2.0.0」ではありません。
また、暗黙のルールとして以下のような慣習もあります：
- 下位バージョンは上位バージョンが上がるとリセット（例：1.2.9 → 1.3.0）
- ゼロパディング（例：01.02.03）は使わない
- 欠番を作らない（1.0.1 → 1.0.2 → 1.0.3…）
テーマ情報（style.css）
UTF-８Nで保存する
絶対パス
WordPressでは、絶対パス（または絶対URL）での記述が推奨されているというのが実情です。ただし、これは「絶対にそうしなければならない」という厳密な決まりではなく、WordPressの設計思想や互換性の観点からのベストプラクティスとされています。
なぜ絶対パスが推奨されるのか？
- テーマやプラグインの読み込みが安定する：WordPressは
ABSPATHという定数を使って、どこからでもファイルを正確に読み込めるようにしています。 - URLの整合性が保たれる：特にメディアファイルやリンクなどは、絶対パスで記述することで、どのページからでも正しくアクセスできます。
- SEO対策：Googleなどの検索エンジンは、絶対URLの方がクロールしやすいとされています。
WordPressオリジナルテーマの作り方
1. 開発環境を整える
まずはローカル環境でWordPressを動かせるようにしましょう。
- Local by Flywheel や XAMPP/MAMP を使ってローカルサーバーを構築
- WordPress本体をインストール
2. テーマフォルダを作成
wp-content/themes/ に新しいフォルダを作成（例：mytheme）
3. 必須ファイルを用意
最低限必要なのはこの2つ：
style.css（テーマ情報とCSSを書く）index.php（メインテンプレート）
/* style.css の冒頭 */
Theme Name: My Original Theme
Author: あなたの名前
Description: オリジナルテーマの説明
Version: 1.0
*/
4. テンプレートファイルを追加
必要に応じて以下のファイルを追加していきます：
header.php（ヘッダー）footer.php（フッター）functions.php（機能追加）single.php（投稿ページ）page.php（固定ページ）sidebar.php（サイドバー）404.php（エラーページ）
5. WordPress関数を使って動的化
HTMLの中にPHPのテンプレートタグを使って、WordPressの投稿やページを表示できるようにします。
<h1><?php the_title(); ?></h1>
<p><?php the_content(); ?></p>
よく使う関数一覧
| 関数名 | 内容 |
|---|---|
the_title() |
投稿のタイトル |
the_content() |
投稿の本文 |
the_permalink() |
投稿のURL |
get_header() |
ヘッダーを読み込む |
get_footer() |
フッターを読み込む |
6. PHPはHTMLにどう書く？
PHPは .php ファイルの中で、HTMLと混ぜて書きます。
.html のままだとPHPは動かないので、必ず .php に拡張子を変更しましょう。
<!-- index.php -->
<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('name'); ?></title>
</head>
<body>
<h1><?php echo "こんにちは！"; ?></h1>
</body>
</html>
7. テーマを有効化してテスト
WordPress管理画面の「外観 → テーマ」から自作テーマを有効化して、表示を確認！
