Wordpressでプラグインを使わずにお問い合わせフォームを実装してみた

1月からの案件で、プラグインを使った既存フォームをプラグインを使わない形に改良する予定なので、自学として簡易的なお問い合わせフォームを、ローカルからサーバー反映まで通しで作ってみました。
わからないところはChat GPTに聞いたりしながら無我夢中で作ったので、おかしいところがあればコメントお願いします:bow_tone1:
# 1\.Local by flywheelでローカル環境構築
![スクリーンショット 2024-12-21 16.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/aec1ac2f-6d38-c13e-790c-56cbaf142e8a.png)
# 2\.GitHubでリポジトリ作成
![スクリーンショット 2024-12-21 16.11.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/eef2a4ed-ec37-29ba-29f6-85671ae29615.png)
その後、ターミナルにて、
```terminal
cd /themes
git init
git clone https://~
```
これで、ローカルとGitHubの連携完了:ok_hand_tone1:
# 3\.コード作成
まずは、最低限必要なindex.phpとctyle.css（header.phpとfooter.phpも作りましたが今回は省略）
```php:index.php
<?php get_header(); ?>
<main>
    <?php 
    if (have_posts()):
        while (have_posts()): the_post(); ?>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
    <?php 
        endwhile;
    else: ?>
        <p>記事がありません。</p>
    <?php endif; ?>
</main>
<?php get_footer(); ?>
```
```css:style.css
/*
Theme Name: wp-practice
Author: admin
Description: 自作テーマ
Version: 1.0
*/
```
続いて、フォームに関わるpage-contact.phpとfunctions.php
```php:page-contact.php
<?php
/* Template Name: お問い合わせ */
get_header();
?>

<main>
    <section>
        <h1><?php the_title(); ?></h1>
        <form action="<?php echo esc_url(home_url('/contact/')); ?>" method="post">
            <p>
                <label for="name">お名前 (必須)</label><br>
                <input type="text" id="name" name="name" placeholder="名前" required>
            </p>
            <p>
                <label for="email">メールアドレス (必須)</label><br>
                <input type="email" id="email" name="email" placeholder="メールアドレス" required>
            </p>
            <p>
                <label for="message">お問い合わせ内容</label><br>
                <textarea id="message" name="message" placeholder="お問い合わせ内容" required></textarea>
            </p>
            <button type="submit">送信</button>
        </form>
    </section>
</main>

<?php get_footer(); ?>
```
```php:functions.php
<?php

// CSSを読み込む
function enqueue_custom_styles() {
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/assets/css/style.css', array(), '1.0', 'all');
}
add_action('wp_enqueue_scripts', 'enqueue_custom_styles');

// ローカルテスト用のコード（サーバーアップ時はコメントアウト）
add_action('phpmailer_init', function($phpmailer) {
    $phpmailer->isSMTP();
    $phpmailer->Host = '127.0.0.1'; // Mailpitのホスト
    $phpmailer->Port = 1025;        // Mailpitのポート
    $phpmailer->SMTPAuth = false;  // 認証不要
});

// メール送信用コード
add_action('template_redirect', function() {
    if ($_SERVER["REQUEST_METHOD"] === "POST") {
        // データの処理（例: メール送信）
        $name = sanitize_text_field($_POST['name']);
        $email = sanitize_email($_POST['email']);
        $message = sanitize_textarea_field($_POST['message']);
        
        // wp_mailによるメール送信処理
        $to = '送信先メールアドレス'; // サーバー使用時に送りたいメールアドレス
        $subject = "お問い合わせフォーム: $name 様";
        $headers = ['From: WordPress <no-reply@wp-practice.local>']; //サーバーアップ時は@以降をサーバーのドメインに変更
        $body = "お名前: $name\nメールアドレス: $email\n\n$message";
        
        if (wp_mail($to, $subject, $body, $headers)) {
            // リダイレクトを追加
            wp_safe_redirect(home_url('/contact/')); // リダイレクト先を指定
            exit;
        } else {
            echo '<p>メール送信に失敗しました。</p>';
        }
    }
});
```
assets/css/style.cssにレイアウトを書く
```css:assets/css/style.css
@charset "utf-8";

/* メインセクションのスタイル */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #f9f9f9;
    font-family: 'Arial', sans-serif;
    padding: 20px;
}

section {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
    max-width: 500px;
    width: 100%;
}

/* 見出しスタイル */
h1 {
    font-size: 24px;
    margin-bottom: 20px;
    color: #333;
    text-align: center;
}

/* フォームスタイル */
form p {
    margin-bottom: 15px;
}

label {
    font-weight: bold;
    color: #555;
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s;
}

input:focus, textarea:focus {
    border-color: #007BFF;
    outline: none;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

/* 送信ボタンスタイル */
button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #007BFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
}

button:hover {
    background-color: #0056b3;
}

/* スマートフォン向けレスポンシブデザイン */
@media (max-width: 768px) {
    section {
        padding: 15px;
    }

    h1 {
        font-size: 20px;
    }
}
```
# 4\.Wordpressでの設定
![スクリーンショット 2024-12-21 15.13.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/1b5792b1-3980-714e-cc65-7af0e0d6c294.png)
1\.page-contact.phpを読み込ませるため、リンクを/contactに（パーマリンクを投稿名に設定するのも必要）
2\.テンプレートでお問い合わせを選ぶ
すると
![スクリーンショット 2024-12-21 16.48.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/246015b3-ad54-0a2c-2fb6-3f5dc06f92cd.png)
このようなお問い合わせ画面を実装できます:ok_hand_tone1:
# 5\.Mailpitでメール送信テスト
ターミナルで
```terminal
brew install mailpit
mailpit
```
と入力すると、
![スクリーンショット 2024-12-21 16.53.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/946b2c7b-3077-ea58-0f56-d86f790d02d3.png)
このような画面が出てきます。（Local上にもMailpitがありますが、ポート番号が10050なので、8025となるこのやり方にしました。もっといいやり方があると思うので、探します。
フォームに必要事項を入力して、送信すると、
![スクリーンショット 2024-12-21 16.56.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/9e3e6138-3a60-4710-f241-d84a307f50cf.png)
ローカル環境でメールテストができます！
# 6\. サーバー環境へ移行
今回は、会社で使用しているXserverを使用させていただけることになったので、そちらを使います
1\.functions.phpを修正
```php
// wp_mailによるメール送信処理
$to = '送信先メールアドレス'; // サーバー使用時に送りたいメールアドレス
$headers = ['From: WordPress <no-reply@wp-practice.local>']; //サーバーアップ時は@以降をサーバーのドメインに変更
```
の部分
2\.FTPにテーマファイルをコピー
3\.サーバーでお問い合わせのページを作成
4\.実行
結果、、、
![スクリーンショット 2024-12-21 17.20.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3882527/0f8124c4-2b69-be96-f946-a3471d47fd82.png)
Gmailに送信することができました！:clap_tone1:

# 感想
トータル5時間くらいかかりました:sweat_drops:
コードを書いている時、うまくいかないと絶望しかないですが、うまく行った時の達成感はその分すごくて、病みつきになります（笑）
この経験が1月以降の案件に活きることを願うばかりです:pray_tone1: