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

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

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

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

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

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

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

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

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

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

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

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

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

枠だけが残ってしまう

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

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

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

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

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

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

スパムメール対策

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

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

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

reCAPTCHAの導入

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

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

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

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

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

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

 ジュンイチのブログ  18 tweets 8 users

世界中のスパムメールを撲滅！Contact Form7にreCAPTCHAを追加する方法

どうも！ジュンイチです。 WordPressでブログやHPを運営していると、お問合せフォームから来るスパムメール。 迷惑な売り込み、怪しいURLを送りつけてくる場合もあります。 ...

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

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

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

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

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

• WordPressをインストールしたらやっておきたい設定
• ログインユーザー名バレてない？WordPressのセキュリティ対策
• WordPressのデフォルトプラグインについて調べてみた

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