コーディング
塗装会社様サイトWordPressコーディング
11月の依頼実績とは別の塗装会社様のコーディングとなります。
PSDファイルを頂いて、WordPressでコーディングをしました。
お問い合わせフォームは「ContactForm7」だとスパムが多いとのことだったので「WP MV Form」で作成しました。
合計11ページを7日で納品しました。
タイ古式マッサージサイトコーディング
PSDファイルを頂いて、html/cssの静的コーディングで行いました。
お問い合わせフォームは「mailformpro」を使用しました。
1ページ(8200px)を2日で納品しました。
ページビルダーのLPをWordPressの固定ページで作り直し
WordPressで作り替えるため、Lightboxのライブラリを使用せず、jQueryに作り替えました。
デザインは元のページを参考にしてコーディングしました。
1ページ(約16000px)を3日で納品しました。
wordファイルからWordPress固定ページの作成
1ページ(約48000px)を3日で納品しました。
デザインがシンプルで主に下記の作業のみだったのでpxが多い割に工数は少ないです。
- hタグやpタグなどのタグづけ
- wordファイルから画像を取り出してメディアライブラリへアップロード
- 画像とテキスト横並びの部分はflexboxで再現
- 矢印はcssで再現
実装
メガメニュー
メガメニューのサンプルをご覧ください。
PC画面でメガメニュー、スマートフォンではアコーディオンメニューにしてあります。
PCの検証ツールを用いてスマートフォンの状態を確認する場合は
スマートフォン幅にしてから一度画面を更新してください。
メガメニューの仕様
- スクロールするとメガメニューが非表示になります。
- メニューの外をクリックするとメガメニューが非表示になります。
アコーディオンメニューの仕様
- お客様のご要望で親メニュー(メニュー3)をクリックすると大カテゴリーまで開く仕様になっています。
Lightbox
Lightboxのサンプルをご覧ください。
Lightboxの仕様
- 画像をクリックするとモーダルが開いて画像が拡大します。
- 画像拡大後、×か画像の外の部分をクリックするとモーダルが閉じます。
- PC画面では画像拡大後、モーダル内でスクロールをさせることができます。
Google reCAPTCHAの設定
ContactForm7のスパム対策でGoogle reCAPTCHAを設定しました。
設定後は全ページの右下にプライバシーポリシーが表示されるので
プライバシーポリシーの文言をお問い合わせフォームに表示させることで、
ページの右下に表示させないようにしました。
ブログ記事に目次を追加
プラグインを使用しても良いとのことだったので、「Table of Contents Plus」というプラグインを使用しました。
有料テーマにはあると思いますが、自作テーマには目次を追加する機能はないですし、
記事の数が多くても関係なく、目次が自動で追加されたので便利なプラグインでした。
もっと見るアコーディオン
もっと見るアコーディオンのサンプルをご覧ください。
cssのみで実装してあります。
画像切り替えアニメーション
画像切り替えアニメーションのサンプルをご覧ください。
実際のページではキービジュアルのアニメーション終了後にキービジュアルを非表示にし、
固定ページ遷移用のバナーを表示させるという実装をしました。
修正
ContactForm7のラジオボタンが押せないエラーの修正
作られた方がラジオボタンのデザインの変更のみしていて押せなくなったものを押せるようにしました。
PHPMailerのフォームに入力項目の追加とメールチェック
実務経験があるお問い合わせフォーム一覧
- WP MW Form
- ContactForm7
- WP Forms
- elementerのお問い合わせフォーム
- PHPMailer
- mailformpro
- PHP工房のMailForm01
