WordPressレッスン記録｜Git／GitHubの基礎導入 & WPループを理解する（2026年4月27日）

今回のレッスンでは、現場でも必須のバージョン管理ツール「Git／GitHub」の基礎セットアップと、WordPressの核心である「WPループ」の仕組みを学びました。

📌 今回の進捗確認

教科書59〜80ページまで進行中。エラーが出た箇所は都度修正しながら前進しています。

🐙 Git／GitHubの基礎セットアップ

GitHubアカウント登録とリポジトリ作成

GitHubにGoogleアカウントでサインイン
「リポジトリ」＝ファイルを管理する倉庫のこと
リポジトリ名「WORDPRESS」でパブリックで作成

GitHub Desktopのインストール

Intel Mac用をダウンロード
ダウンロードフォルダではなくアプリケーションフォルダに移動してからインストール
VSCodeも同様にアプリケーションフォルダに整理

ローカルリポジトリの作成とコミット

GitHub Desktop でローカルにリポジトリ（書類フォルダ内）を作成
リポジトリフォルダ内に隠しフォルダ「.git」が生成される＝監視カメラの役割
ファイルの変更をGitHub Desktopが検知 → コミット（変更の記録）する

GitHubへのプッシュ（公開）

「Publish Repository」でGitHub.comへアップロード
最初はPrivateになっていたため SettingsのDanger Zone → Change Visibilityでパブリックに変更
バージョン履歴（ヒストリー）で過去の状態に戻せることを確認

🔄 WordPressデータの共有フロー

WordPress管理画面 → All-in-One WP Migrationでバックアップ作成・ダウンロード
ダウンロードしたファイルをGitHubリポジトリフォルダに移動
GitHub Desktopでコミット → GitHubへプッシュ
先生側でHTTPS URLからダウンロード → ローカルのWordPressにインポート

🔁 WPループの仕組みを理解する

教科書75ページのWordPressループについて、single.phpを使って解説しました。

<?php if (have_posts()): ?>
  <?php while (have_posts()) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" <?php post_class('post'); ?>>
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
    </article>
  <?php endwhile; ?>
<?php endif; ?>

have_posts()：投稿があるかチェック
the_post()：その回の投稿データをセット
the_content()：管理画面の投稿内容を呼び出して表示
テンプレートはほぼ毎回同じコード。流れを覚えれば使い回せる

🔌 テンプレート確認プラグインの導入

「現在どのPHPテンプレートが使われているか」を画面上の黒帯に表示するプラグインを導入。

トップページ → index.php
投稿個別ページ → single.php
カテゴリーページ → category.php（次回課題）

🐞 single.phpのデバッグ

single.phpに3つのバグが見つかり修正しました。

行	バグ内容	修正内容
60行目	articleタグの閉じ > が抜けている	post_class('post'); ?> の後に > を追加
65行目	timeタグのダブルクォートとタグ閉じが抜けている	datetime属性を正しく閉じ、表示テキストを分離
68行目	src属性の先頭に「.」が余分についている	先頭の「.」を削除

📝 次回までの課題

教科書 82〜93ページ（投稿一覧ページ＝category.phpの作成）
CHAPTER 2 完了を目標に

📅 次回レッスン

5月7日（水）10:00〜

TAG