WordPressの無料テーマ「Xeory Extension」をカスタマイズした話【3】

WordPressの無料テーマ「Xeory Extension」をカスタマイズした話【3】

会社サイトで利用した無料テーマの「Xeory Extension」カスタマイズ忘備録第3弾です。

すでに稼働している状態のサイトにテーマをインストールし、夜中から明け方まで掛けて作業してなんとか形になったサイト。
終わったー!」と歓喜して、そのまま布団に潜り込みました。
そんな喜びも束の間、目が覚めたあとにはいろいろな問題がわたしを待っていました。

自宅で作業すると、修正点とかすぐに言われちゃうからしんどいですよね……。それが良いこともあるのですが、疲れてるときはツライ。
弱音を吐いている場合でもないので、張り切って対策しました。

発生した問題点と対処とカスタマイズ

「Xeory Extension」はTOPページの下部にお問い合わせフォームが設置されています。

Xeory Extension:TOPページの下部のお問い合わせフォーム

とっても目立つ問い合わせフォームもコーポレートサイトっぽくてお気に入りです。

だがしかし。
ものすごい量のスパムメールが……!!

スパムに次ぐスパムメール

とりあえず、我が社の社長である夫が疲弊していました。
1分おきくらいにスパムメールが届くんです。
波があって、1分ごとのスパムメール→1時間間が空く→1分ごとのスパムというような感じだったらしいです。
メールボックスがスパムで埋め尽くされていくのは、いろいろと支障が出るのでちょっと避けたいところ。

TOPページからお問い合わせフォームを外す

TOPページの目立つお問い合わせフォーム、好きだったのですが仕方なく非表示にすることに。
TOPページのお問い合わせフォーム自体は、管理画面でショートコードを入力するだけで簡単に設定できました。

Xeory Extension:お問い合わせフォーム

まずはここに入力した情報を全て消しました。

枠だけが残ってしまう

Xeory Extension:お問い合わせフォームの枠だけ残る

お問い合わせフォームをなくすことはできましたが、お問い合わせフォームがあった枠部分だけが残ってしまって表示が美しくありません。

ソースを見ると、お問い合わせフォームのidが「front-contact」だったので、表示させないようstyle.cssに下記コードを追記しました。

これで、お問い合わせの枠自体が非表示となりました。

お問い合わせフォームは別に設置

お問い合わせフォームは固定ページで作成し直して、TOPページからリンクさせるように変更することに。

Xeory Extension:サービス紹介部分にお問い合わせフォーム設置

TOPページのどこに設置しようか悩みましたが、デフォルトでは「サービス紹介」となっている箇所に決定。業務の予約ページがあるので、「お問い合わせ」「予約」として並びで掲載します。

スパムメール対策

正直、これで大丈夫かな?という心配もあったので、問い合わせフォームにスパムロボット対策することにしました。

スパムメール対策

フォーム送信時によく見る「私はロボットではありません」のチェックボックス。これを追加します。

会社サイトでは、お問い合わせフォームプラグインの「Contact Form 7」を使っています。
管理画面に記載されているように、「reCAPTCHA」というサービスを使用します。
「reCAPTCHA」はGoogleが提供している無料サービスなので、Googleアカウントが必要です。

reCAPTCHAの導入

突貫で作業したためキャプチャーが一切残っていませんが、作業自体はとても簡単です。
下記の順で設定を行いました。

  • reCAPTCHAにアクセス
  • 「My reCAPTCHA」をクリックしてGoogleアカウントを選択
  • 設定画面入力
    1. Label:わかりやすい名前を入力
    2. reCAPTCH v2を選択
    3. Domain:使用するサイトのドメインを入力
    4. 下ふたつのチェックボックスにチェックを入れる
  • Site keyとSecret keyが発行される

reCAPTCHAでのキー発行が終わったら、後はWordPressの管理画面の操作です。
お問い合わせの「インテグレーション」でキーを設定しましょう。

reCAPTCHAのキー設定

設定が完了すると、コンタクトフォームの新規作成、編集画面に「reCAPTCHA」のボタンが追加されます。

「reCAPTCHA」のボタンが追加される

[submit “送信”]の上くらいにタグを挿入しましょう。
ボタンを押すと設定ダイアログが開きますが、特に何もせず「タグ挿入」ボタンを押すだけでOKです。

「reCAPTCHA」のボタンを押すと設定ダイアログが開く

デザインやサイズを変えたり、CSSで調整したい場合には属性を入力したり、デフォルトから変更したい場合は任意で入力しましょう。

設定の際は下記記事を参考にさせていただきました。とてもわかりやすくて助かりました。ありがとうございます!

設定完了後に問題が発生することもある

設定終わったー!できたー!と思っていても、その後に問題が発生するのもよくあることです。
トラブルでなくとも、もっとこうした方がいいという案がいろいろ出てきたりもしますしね。
サイトは実際に稼働してみないとわからない部分がたくさんあります。
細かなカスタマイズはまだもう少しあるので、あともう1回くらいは記事にすると思います。

カスタマイズしたことはちゃんとまとめておきたい

実際のリニューアル作業から少し時間が経ってからこういった記事を書いてるわけですが……思った以上に実際に作業したことを忘れてる。
あんなに苦労したはずなのに、「できた!」と思った瞬間に頭から抜け出ていくのでしょうか。

WordPressのカスタマイズに関しては、後々の自分のためにもやっぱりちゃんとまとめておこうと思いました。
WordPressをインストールした際に「最初に何するんだったっけ?」と、自分で書いた下記記事にはお世話になっています。ひょっとしたら、わたしが1番見ているのかもしれません。

ただ、こういった記事が、同じようなことで悩む自分以外の誰かの役に立つかもしれません。
自分自身の忘備録としてだけでなく、誰かのためにもなればいいなと思います。
それって幸せですよね。うん。