1月からの案件で、プラグインを使った既存フォームをプラグインを使わない形に改良する予定なので、自学として簡易的なお問い合わせフォームを、ローカルからサーバー反映まで通しで作ってみました。
わからないところはChat GPTに聞いたりしながら無我夢中で作ったので、おかしいところがあればコメントお願いします
1.Local by flywheelでローカル環境構築
2.GitHubでリポジトリ作成
その後、ターミナルにて、
cd /themes
git init
git clone https://~
これで、ローカルとGitHubの連携完了
3.コード作成
まずは、最低限必要なindex.phpとctyle.css（header.phpとfooter.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(); ?>
style.css
/*
Theme Name: wp-practice
Author: admin
Description: 自作テーマ
Version: 1.0
*/
続いて、フォームに関わるpage-contact.phpとfunctions.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(); ?>
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にレイアウトを書く
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での設定
1.page-contact.phpを読み込ませるため、リンクを/contactに（パーマリンクを投稿名に設定するのも必要）
2.テンプレートでお問い合わせを選ぶ
すると
このようなお問い合わせ画面を実装できます
5.Mailpitでメール送信テスト
ターミナルで
brew install mailpit
mailpit
と入力すると、
このような画面が出てきます。（Local上にもMailpitがありますが、ポート番号が10050なので、8025となるこのやり方にしました。もっといいやり方があると思うので、探します。
フォームに必要事項を入力して、送信すると、
ローカル環境でメールテストができます！
6. サーバー環境へ移行
今回は、会社で使用しているXserverを使用させていただけることになったので、そちらを使います
1.functions.phpを修正
// wp_mailによるメール送信処理
$to = '送信先メールアドレス'; // サーバー使用時に送りたいメールアドレス
$headers = ['From: WordPress <no-reply@wp-practice.local>']; //サーバーアップ時は@以降をサーバーのドメインに変更
の部分
2.FTPにテーマファイルをコピー
3.サーバーでお問い合わせのページを作成
4.実行
結果、、、
Gmailに送信することができました！
感想
トータル5時間くらいかかりました
コードを書いている時、うまくいかないと絶望しかないですが、うまく行った時の達成感はその分すごくて、病みつきになります（笑）
この経験が1月以降の案件に活きることを願うばかりです