【初心者向け】ウジェットで問い合わせを入れる方法

ウジェットとは？

ドモドモさん
ドモドモさん

ウジェットで問い合わせをいれるといいですよ

ニコニコばばあ
ニコニコばばあ

ウジェットで問い合わせを入れる？
何ぞや？
ウジェットは聞いたことあるけど・・・

ドモドモさん
ドモドモさん

西川さん
わかってないようですね。
勉強しましょうね。

自分で勉強して入れてみましょうねーってことですね。

ウィジェットとは、WordPressのサイドバーやフッターなどに小さなパーツ（コンテンツ）を追加できる機能のこと。
テキストや画像、ボタン、問い合わせフォームなどを配置できます。

ウジェットの使い方

最近は便利ですねー

AIさんに聞いてみましょう？

ウジェットで問い合わせフォームを入れるってどうやるの

gemini
gemini

まずconact Form7などのお問合せプラグインが必要です

contact Form7は使っています

gemini
gemini

管理画面にログイン：WordPressのダッシュボードにアクセスします。

ウィジェット画面を開く：「外観」 → 「ウィジェット」をクリックします。

ウィジェットエリアの選択：画面右側に表示されている「メインサイドバー」「フッター」などのウィジェットエリアから、追加したい場所を選びます。

なるほど「ウジェット」で入れたい場所に入れるのね。

そういえば、最初のころこれ触ってたなーーー

私は本文の後にお問合せを入れたいから「投稿本文下」を選ぶのね

ウジェットの画面

ここにね！いれるのね

gemini
gemini

特定のページに入れたい場合：そのページの編集画面で「カスタムHTML」や「テキスト」を埋め込めるブロックに、コードを貼り付けます。

なるほど「カスタムHTML」ってもんを選んでContact Form7で作った問い合わせのコードを入れればいいのね

ウジェットの画面のテキストを入れるところ

入れて「保存」を押すとどうなったかな？

あ！そうか！お問合せそのものがバーンとはいっちゃうのか！

問合せをボタンで入れたい

フォームを直接表示するだけでなく、
「お問い合わせはこちら」ボタンを設置してリンクで飛ばしたい！

私
私

あの、ボタンで問い合わせフォームをいれたいのですが

gemini
gemini

こちらのHTMLを例に貼り付けるとボタンでお問い合わせができます
<a href=”https://あなたのサイト.com/contact/” class=”inquiry-button”> お問い合わせはこちら </a>

わかりました！コピペして貼り付けます！

「あなたのサイト」はお問い合わせのURLを入れればいいのね

さあどうでしょう？

ありゃさびしい・・・・

すみません四角で囲んだボタンでセンタリングで５０％くらいの長さにしてください

gemini
gemini

かしこまりました。ではこちらでどうでしょう？
<div style=”text-align: center;”> <a href=”【ここに問い合わせページのURLを入れてください】” style=”width: 50%;”>お問合せ・ご相談” </a></div>

できた！

これで、いちいちページの最後にお問合せを入れる手間は省けました！

お問合せのボタンのスタイルを変えたい！

で、この後、この色ちょっと変えたいなーとかいろいろなお願いをしてGeminiさんと喧嘩することになりました！Geminiと戦う気力がなくなったので、こんどはchatGTPさんへ

「にこにこばばあ」にもお問合せやご意見を入れたいと思うのですが、上記の黒いボタンでは味気ない。さきほどのGemini との会話でちょっと考えましょう。
どう質問するか（これをプロンプトと言うらしいが「質問」でいいじゃない！）

Geminiの質問の入力場所は「Geminiへのプロンプトを入力」
もうここで、「何！何！」と怖くなって入力できなくなるのよ、素人は！

ChatGTPは「質問してみましょう」
あー優しい。年寄りにはChatさんかも

で、チャットさんに

私
私

お願いします。ワードプレスのcocoonのスキン手書きノート（ホワイトバナナ）を使っています。ウジェットで本文下にボタンを設置しています。しかしこのボタンはスキンのイメージとちょっと違うので統一性のあるボタンにしたいのですが、何かいい方法はありませんか？

Chat GTP
Chat GTP

なるほど 👍
Cocoonの「手書きノート（ホワイトバナナ）」スキンは、全体的にラフで手書き風のテイストがあるので、デフォルトの「btn btn-border」だと少し浮いて見えてしまいますね。

これはいかがでしょう？

これから、いろいろと質問を重ねて、

できました！

できた、スキンに合わせたボタン。

こちらにはCCSと言うものを入れるとこのようになります。

✅ 追加CSSの入れ方（Cocoonの場合）

  1. 管理画面 → 外観 → カスタマイズ をクリック
    （テーマカスタマイザー画面が開きます）
  2. 左のメニューの一番下あたりに 「追加CSS」 があります
    そこをクリックして入れるのです。

ウジェットの場所に入れるんだと思ったら違ってた！
そうなんだ！