ChatGPTに相談しながらWordPressブログを開設|ConoHa WINGの初期設定

ブログの開設方法を調べていると「WordPressブログは10分で開設できる」という記事を見つけました。

それを見て、正直もっと簡単に終わると思っていました。

実際にConoHa WINGでWordPressを開設するだけなら、10分もかかりませんでした。

ただ、そこでできたのはサイトを表示するところまでです。

WordPressは開設できたものの、ブログを始めるまでに何を設定すればよいのか、その設定をどこでどう進めればよいのかもまったく分かりませんでした。

そこでChatGPTに相談しながら一つずつ初期設定を進め、ブログを始められる状態まで整えました。およそ40分くらいでできたと思います。

  • 問い合わせフォームを設置する
  • メールが本当に届くか確認する
  • 迷惑メール対策をする
  • セキュリティを設定し、バックアップの取得状況を確認する

実際に運営できる状態まで整えようとすると、10分では終わりません。

ChatGPTは分からないことをその場で相談できるので、かなり助かりました。私一人だったらもっと早い段階で詰まり、さらに時間がかかっていたと思います。

一方で、ChatGPTから説明された項目が現在の画面に見当たらなかったり、教えてもらった手順だけでは解決できなかったりすることもありました。

特に詰まったのが、お問い合わせフォームの送信テストです。「送信成功」と表示されたのでメールが届いていると思い込んでいましたが、実際には届いていませんでした。

SMTPの設定やメール認証を一つずつ確認した流れは、別の記事にまとめました。

この記事では、ConoHa WINGの申込画面を最初から順番になぞることはしません。すでに分かりやすく解説してくれている記事がたくさんあるので、開設手順を知りたい方はそちらを参考にしてください。

代わりにこの記事では、テーマ、お問い合わせフォーム、スパム対策を設定し、ChatGPTの説明と実際の画面が違ったときにどう進めたのかを書いていきます。

実際に行った設定と、迷った点、最後に何を確認したのかをまとめます。

ChatGPTは分からないことを相談しながら進める相手として、とても便利でした。

ただし、回答をそのまま信じて設定を終えるのは危険です。

聞く → 試す → 結果を確認する。

うまくいかなければ聞き方を変えて、もう一度試す。

このサイクルを繰り返せば、WordPressに詳しくなくても一つずつ問題を解決しながら進められます!

1. CocoonとCocoon Child、どちらを有効化すればいい?

まずはテーマの確認です。今どんなテーマになっているかをWordPress管理画面の「外観 → テーマ」から確認したところ、標準テーマの「Twenty Twenty-Five」が有効になっていました。

初期設定のままでもいいですが、ChatGPTにテーマについて相談したら、Cocoonが無料でおすすめだというので、今回は「Cocoon」に変えました。

ConoHa WINGの「サイト管理 → サイト設定 → WordPressテーマ」からCocoonをインストールし、WordPress管理画面の「外観 → テーマ」へ戻ります。ここに「Cocoon」と「Cocoon Child」の2つが表示されます。

名前が似ており、どちらを有効化すればよいのか分からないためChatGPTに確認したところ、Cocoonが親テーマで、Cocoon Childが子テーマとのことでした。名前の通りです。

親テーマにはCocoon本体の機能が入っており、子テーマは、デザインの調整や追加したコードなどの変更を残しやすくするために使うもののようです。

親テーマのファイルを直接編集すると、テーマを更新したときに変更内容が上書きされる可能性があるそうで、子テーマを使っておけば、親テーマを更新しても子テーマ側に加えた変更を残せるようです。

ということで、CocoonとCocoon Childの両方をインストールし、Cocoon Childを有効化しました。

ここで大切なのは、Cocoon Childだけを残せばよいわけではないことです。子テーマは親テーマの機能を利用して動くため、Cocoon本体もインストールしたままにしておく必要があります。

最終的には、次の状態になっていることを確認しました。

  • Cocoonがインストールされている
  • Cocoon Childがインストールされている
  • 有効になっているテーマはCocoon Child
  • Cocoon本体は削除せずに残している

サイトの見た目がCocoonに変わり、Cocoon Childが有効になっているところまで確認できたので、テーマの設定は完了です。

Cocoon Childが有効で、親テーマのCocoonもインストールされているテーマ画面
CocoonとCocoon Childをインストールし、Cocoon Childを有効化しました。

2. Contact Form 7でお問い合わせフォームを作る

次はお問い合わせフォームを作ります。

WordPressには最初からお問い合わせフォームが用意されているわけではないため、プラグインを追加する必要があります。

お問い合わせフォームのプラグインはいくつかありましたが、今回は「Contact Form 7」を使いました。ChatGPTに相談したところ、今回のようなシンプルなお問い合わせフォームであればContact Form 7で十分とのことでした。

WordPress管理画面の「プラグイン → 新規プラグインを追加」から「Contact Form 7」を検索し、インストールして有効化します。

有効化すると、管理画面に「お問い合わせ」という項目が追加されました。

「お問い合わせ → コンタクトフォーム」を開くと、最初から「コンタクトフォーム1」が作成されています。初期状態でも名前やメールアドレスなどの項目は用意されていましたが、今回は次の内容に調整しました。

  • お名前(必須)
  • メールアドレス(必須)
  • 件名(必須)
  • お問い合わせ内容(必須)
  • プライバシーポリシーへの同意(必須)
  • 送信ボタン

お問い合わせ内容は任意ではなく必須に変更し、送信前にプライバシーポリシーへの同意が必要になるようチェックボックスも追加しました。

同意欄は、Contact Form 7の「フォーム」タブにある「承諾確認」から追加できます。承諾確認の中には、次のようにプライバシーポリシーへのリンクを設定しました。

[acceptance privacy-consent] <a href="https://amakusatoka.com/privacy-policy/" target="_blank" rel="noopener">プライバシーポリシー</a>に同意します [/acceptance]

URLは、ご自身のプライバシーポリシーページのURLに置き換えてください。

これで「プライバシーポリシー」の文字を押すと、作成済みの「プライバシーポリシー・免責事項」ページへ移動できます。

必須の入力項目、プライバシーポリシーへの同意欄、送信ボタンを設定したContact Form 7の編集画面。
お問い合わせ内容を必須にし、プライバシーポリシーへの同意欄を追加しました。

フォームを保存したら、次は表示するための固定ページを作ります。

WordPress管理画面の「固定ページ → 固定ページを追加」から「お問い合わせ」というページを作成し、本文にContact Form 7のブロックを追加しました。

ブロックの選択欄から、先ほど作成したお問い合わせフォームを指定します。ショートコードを直接貼り付けても表示できますが、今回はContact Form 7のブロックを使いました。

プレビューを開き、次の項目を確認しました。

  • 入力欄がすべて表示されている
  • 必須項目が分かる
  • お問い合わせ内容を入力できる
  • プライバシーポリシーのリンクが開く
  • 同意しないと送信できない
  • 送信ボタンが表示されている

ここまでで、お問い合わせフォームの作成と固定ページへの設置は完了です!

ただ、フォームが表示されて送信ボタンを押せるだけでは設定完了とは言えません。スパム送信を防ぐ設定と、送信したメールが実際に相手へ届くことの確認が必要です。

次はCloudflare Turnstileを設定し、お問い合わせフォームのスパム対策を行います。

3. Cloudflare Turnstileを設定してスパム対策を行う

お問い合わせフォームを設置したら、次はスパム対策です。

フォームをそのまま公開すると、自動送信プログラムから迷惑なメッセージが送られてくる可能性があります。そこで今回は、Contact Form 7と連携できる「Cloudflare Turnstile」を設定しました。

Cloudflare Turnstileは、フォームを操作しているのが人間か自動送信プログラムかを判定するサービスです。画像を選ばせる認証を毎回表示するのではなく、訪問者の操作をなるべく邪魔せずにスパム送信を減らすための仕組みです。

Contact Form 7の管理画面にもTurnstileの案内が表示されていましたが、すぐに有効化できるわけではありませんでした。WordPressの外部にあるCloudflareでアカウントを作成し、連携に必要なキーを取得する必要があります。

アカウントを作成したら、Cloudflareの管理画面からTurnstileを開きます。管理画面は英語だったため、ブラウザの自動翻訳で日本語にしたら、Turnstileが「回転式改札機」と翻訳されて困惑しました。(改札通れなくて電車に乗れなさそう)

Turnstileの画面から「ウィジェットを手動で追加する」を選び、次の内容を設定しました。

  • ウィジェット名:amakusatoka-contact
  • ホスト名:amakusatoka.com
  • ウィジェットモード:管理
  • 事前認証:オフ

ウィジェット名は管理用なので、あとから見て用途が分かる名前にしています。ホスト名には、Turnstileを使用するサイトのドメインを登録しました。

ウィジェットモードは、Cloudflareがアクセス状況に応じて認証方法を判断する「管理」を選びました。Cloudflareの画面でも推奨されていたため、今回は初期設定のままです。

ホスト名にamakusatoka.comを登録し、Managedを選択したCloudflare Turnstileの設定画面。
Turnstileにamakusatoka.comを登録し、ウィジェットモードは「Managed(管理)」を選びました。

設定を保存すると、次の2つのキーが発行されます。

  • サイトキー
  • シークレットキー

サイトキーはWebサイト上にTurnstileを表示するために使い、シークレットキーは送信時の認証結果をサーバー側で確認するために使います。特にシークレットキーは、パスワードと同じように外部へ公開しないよう注意が必要です。

キーを取得したら、WordPress管理画面へ戻ります。

「お問い合わせ → インテグレーション」を開き、Turnstileの設定欄にCloudflareで発行されたサイトキーとシークレットキーを入力して保存しました。

Contact Form 7のインテグレーション画面に「Turnstile はこのサイト上で有効化されています」と表示されている状態。
Contact Form 7でTurnstileが有効化されていることを確認しました。

最初は「インテグレーション」がどこにあるのか分かりませんでしたが、WordPress管理画面の左側にある「お問い合わせ」の中に表示されています。

連携が完了すると、Contact Form 7のフォームにTurnstileが自動で追加されます。フォームの編集画面へ専用のコードを追加する必要はありませんでした。

実際のお問い合わせページを開き、次の項目を確認しました。

  • Turnstileがフォーム内に表示されている
  • 認証が「成功しました」と表示される
  • 各入力欄へ問題なく入力できる
  • プライバシーポリシーへの同意ができる
  • 送信処理が完了する
  • 送信後に完了メッセージが表示される

ここまで確認できたので、お問い合わせフォームのスパム対策は完了です!

Turnstileの認証成功表示、4つの必須入力欄、プライバシーポリシーへの同意欄、送信ボタンがあるお問い合わせフォーム。
Turnstileの認証表示と、入力欄・同意欄・送信ボタンを確認したお問い合わせフォーム。

ただ、Turnstileが正常に動き、画面に「メッセージは送信されました」と表示されても、メールが相手の受信箱まで届いたとは限りません。実際に受信箱を確認する必要があります。

私の場合も画面上では送信に成功しましたが、設定したメールアドレスにメールが届いていませんでした。

この続きは、「送信成功」と表示されたのにメールが届かず、WP Mail SMTPやSPF・DKIM・DMARCを設定した記事に詳しくまとめました。

4. ChatGPTの説明と実際の画面が違う場合

今回の初期設定では、分からないことが出るたびにChatGPTへ相談しました。

その場で質問できるので助かりましたが、教えてもらった手順が毎回そのまま使えたわけではありません。

「画面の左側にある○○を開いてください」と説明されても、その項目が見当たらないことがあります。

探してもない…

最初は自分が違う画面を開いているのかと思いました。

しかし、WordPressやプラグイン、ConoHa WINGの画面は更新されることがあります。ChatGPTが別のバージョンや似たサービスの画面を参考にしている可能性もあります。

説明された項目が見つからないときは、近い名前の項目を自分の判断で押すのはちょっとためらわれたので、現在の画面に何が表示されているかをChatGPTへ伝えました。

特に分かりやすかったのが、ConoHa WINGのWAF設定を確認したときです。

ChatGPTからWAFの除外URLを確認するよう説明されましたが、どこに一覧があるのか分かりませんでした。

似たような設定画面がいくつもあり、どれを見ればよいのか判断できなかったため、表示されている画面をまとめて送りました。

画面を確認してもらうと、WAFの「ログ」と「除外中」を切り替える場所が見つかりました。

ConoHa WINGのWAFログ画面。検知履歴が並び、各行に「除外」ボタンが表示されている。
「ログ」画面には各行に「除外」ボタンがありますが、除外済みという意味ではありません。
ConoHa WINGのWAFで「除外中」を選択した画面。一覧は空で、除外設定が登録されていない。
「除外中」の一覧は空で、除外設定がないことを確認しました。

「除外中」を開いて確認したところ、登録されている項目はありませんでした。

WAFのログには「除外」というボタンも表示されています。

名前だけを見ると確認用のボタンにも見えますが、これは、選んだ攻撃内容に対するWAFの遮断を除外するための操作です。

意味が分からないまま押していたら、必要のない除外設定を追加していたかもしれません…

このときは、何も変更せずに確認だけで終わりました。

画面が違ったときにChatGPTへ伝えたこと

説明と実際の画面が違う場合は、次の内容を伝えるようにしました。

  • 説明された項目が見当たらないこと
  • 現在開いている画面の名前
  • 画面に表示されている項目
  • 使用しているWordPressやプラグインのバージョン
  • どこまで操作したのか
  • 操作後に何が表示されたのか

文章だけで説明するのが難しい場合は、画面の画像を送るのが一番早かったです。

「この画面で合っていますか?」と確認すれば、違う画面を開いていた場合も、その時点で修正できます。

ただし、画像を送る前には次の情報が写っていないか確認する必要があります。

  • パスワード
  • シークレットキー
  • WordPressのログインURL
  • 管理者のメールアドレス
  • 個人情報
  • サーバーへ接続するための情報

必要な部分だけを残して画像を切り取るか、見せたくない情報を隠してから送ります。

ChatGPTから回答が返ってきても、すぐに設定完了とは考えませんでした。

説明を確認する
↓
実際に試す
↓
画面やメールの結果を確認する
↓
違っていたら、結果を伝えてもう一度相談する

この流れを繰り返します。

ChatGPTは、一度質問すれば必ず正解を出してくれる相手ではありません。

それでも、分からない画面を一緒に確認し、結果を伝えながら一つずつ修正する相手としては、とても便利でした。

回答をそのまま信じるのではなく、実際の画面と結果を確認しながら進めることが大切です。

ブログを始める前に確認した項目は、別の記事でチェックリストとしてまとめました。

5. まとめ

ConoHa WINGでWordPressを開設するだけなら、10分もかかりませんでした。

ただ、ブログを始められる状態まで整えるには、テーマを変更し、お問い合わせフォームを作り、スパム対策まで確認する必要があります。

この記事では、次の状態まで確認しました。

  • CocoonとCocoon Childをインストールし、Cocoon Childを有効化した
  • Contact Form 7でお問い合わせフォームを作り、固定ページに設置した
  • Cloudflare Turnstileを連携し、スパム対策を設定した
  • ChatGPTの説明と実際の画面が違う場合は、画面と操作結果を伝えて確認した

ChatGPTへ相談しながら進めれば、何を設定すればよいのか分からない状態でも、一つずつ確認できます。

ただし、回答をそのまま信じるのではなく、実際の画面と結果を確認することが大切です。

この続きは、次の2記事にまとめました。

タイトルとURLをコピーしました