レッスン記録｜フォーム設定・GitHub連携・WordPress記事投稿の実装（2026年5月30日・Nさん）

お問い合わせフォームのGmail連携が完成し、WordPress記事投稿とトップページ表示の設計まで話が進んだレッスンの記録です。

今回の内容

• FormSpreeを使ったお問い合わせフォームの設定確認
• GmailへのメールフォワードとWordPress・HTMLの両対応
• GitHubを通じたサイト更新の確認
• WordPress記事投稿機能の実装方針
• トップページに新着情報を表示するデザイン案

FormSpreeでGmailにメールを届ける仕組み

フォームに入力された内容をGmailで受け取れるよう、FormSpreeの設定が完了しました。

フォーム送信 → FormSpree → Gmail に転送

この仕組みの良い点は、WordPressだけでなく通常のHTMLページ（index.html）にも同じフォームを使えることです。GitHubでHTMLを更新すればそのままフォームが動きます。

GitHubを通じたサイト更新フロー

コードをGitHubにプッシュすることで、公開サイトに反映される構成になっています。

VSCodeで編集 → GitHubにプッシュ → サイトに反映

WordPressとGitHub管理のHTMLを並行して運用している場合、この二本立てが一つの標準フローになります。

WordPress記事投稿の実装方針

「見た目は整った。次は記事投稿ができれば完璧」という段階まで来ました。

AIを使った記事投稿の効率化

HTMLパーツが多いWordPressサイトでは、AIに指示を出して記事を組み立てる方法が実用的です。

「このHTMLを使って記事を作って」→ AIが構造を整える → 投稿

Codexなどのドキュメントと組み合わせると、即席でも高品質な記事ページが作れます。

トップページに新着情報を表示する

メインビジュアルの近くに「最新記事の更新情報」を表示するデザインの話が出ました。

これはWordPressのループ処理を使って実現します。過去のコーディング課題「WordPress上級」でも取り組んだ内容で、最新記事のタイトルとリンクをトップページに自動表示する仕組みです。

// 最新記事を取得して表示するイメージ
$args = array( 'posts_per_page' => 3 );
$posts = get_posts( $args );
foreach ( $posts as $post ) {
    echo '<a href="' . get_permalink($post) . '">' . $post->post_title . '</a>';
}

このデザインを採用すると、記事を投稿するたびにトップページが自動更新される「生きたサイト」になります。

関連記事

• WordPressカスタマイズはfunctions.phpとカスタムプラグインどちらに書くべきか
• レッスン記録｜Webデザイン就活戦略・ポートフォリオ・CSSレスポンシブ実践
• Claude CodeでWordPressテーマ＆ゲームページを1セッションで本番リリースした話