ページ下部の問い合わせフォームが機能するように設定します。 また、仕上げに各パーツの微調整も行いましょう。
1.問い合わせフォームを追加
サイトからメールを送信できるように、プラグイン「Contact Form 7」をインストールしてBootstrapフォームと合体させましょう。 まずはContact Form 7をインストール＆有効化してください。
※「Contact Form 7」のインストールや基本的な使い方は WORDPRESS基礎講座【後編】-11.プラグイン をご確認ください。
①フォームを読み込ませる
新規追加でフォームテンプレートを１つ作ってください。
↓
一旦、フォームの中身は触らずにそのまま保存してみましょう。 ショートコードが表示されます。
コピーしてfront-page.phpの<form>タグの上に貼り付けてください。
しかし、この状態ではショートコードを読み込んでくれません。 ショートコードを読み込み・出力するためのタグの中に入れます。
<?php echo do_shortcode( 'ここにショートコードを入れる' ); ?>
保存して、ブラウザで見てみましょう。 Bootstrapで組んだフォームの上に、プラグインが出力したフォームが表示されます。
②フォームを調整する
プラグインで出力されるフォームに、Bootstrapのクラスを加えていきましょう。
「コンタクトフォームの編集」画面は初期状態で下図のようになっています。
（バージョンによって“氏名”が“お名前”表記になるなど、多少の違いがあります）
ここに、フォームを囲うdivやクラスを打ち込んで形を整えていきます。 最初に各パーツを囲むdivタグを追加してみましょう。 氏名/メールアドレスなど、枠外に表示される部分は不要なので削除します。
inputタグ内についているクラスなどの属性を加えます。 Contact Form 7公式ページで紹介されているタグのルールに従って、classとplaceholderを追加しました。
送信ボタン部分は<input>タグと決められているようなので、[submit Send Message
]をボタンタグで囲ってしまいます。
【確認用フォームタグ】
<div class="form-group pb-3">
[text* your-name class:form-control placeholder "Your Name"]
</div>
<div class="form-group pb-3">
[email* your-email class:form-control placeholder "Your Email"]
</div>
<div class="form-group pb-3">
[text your-subject class:form-control placeholder "Subject"]
</div>
<div class="form-group pb-3">
[textarea* your-message class:form-control placeholder "Message"]
</div>
<div class="col-12 text-center">
<button type="submit" class="btn btn-primary btn-lg button-rouded" value="Send Message">[submit "Send Message"]</button>
</div>
左下の「保存」ボタンをクリックして保存してください。 ブラウザでレイアウトが変わったか、見てみましょう。
ボタンが変ですが、下にある元のフォームと同じようなレイアウトで出力されています。
htmlの時に作ったフォーム部分（<form> ～ </form>）は削除してください。
style.cssでボタンの表示を直します。
これでフォーム部分が完成しました。
【補足】フォームのボタンについて
ボタンのテキスト周辺にスペースが出来てしまう場合があります。
原因A：ボタンのタグ入力
タグ記述時に入れた改行やスペースが文字として認識されているケース。
特に、ボタンの文字よりも上に“空白”や“<br>”が入っている場合は、こちらの可能性が高いです。
「コンタクトフォームの編集」でボタンのコード箇所を、改行やスペースを取り除いた形にしてみてください。
原因B：Ajaxローダーの自動挿入
プラグイン側が自動でAjaxローダー（送信中にくるくる回るローダーアニメーション）を挿入していることが原因で、ボタンの文字下に空白ができているケース。
挿入されないように設定するのは大変ですので、 style.cssの方に下記記述を追記して対応して下さい。
#contact .wpcf7 .ajax-loader {
height: 1px;
width: 1px;
}
他の方法を使って調整しても構いません。
2.ナビバーを調整する
フロントページのヘッダーナビゲーションは、他のページとは違い、ページ内の各セクションへの移動が目的です。
ナビゲーションの各項目が空の方は、それぞれのセクションIDを入れて下さい。
HOMEのみhref="#"にしておきます。
各セクションにIDを振っていない方は、それぞれを区切るsectionタグ（もしくはArticleタグ）にIDも加えて下さい。
ページ内リンクが有効か、ヘッダーナビゲーションの各項目をクリックしてみて下さい。 目的の場所まで移動できればページ内リンクが効いています。
各セクション位置の調整
ヘッダーナビゲーションをクリックしていると、 見出しとナビバーが被る箇所、被らない箇所があるのではないでしょうか？
被ってしまうと美しくないので、被らないように修正します。
検証ツールで原因を探してみましょう。 位置がずれるのは、section部分ではなく見出しを囲うdivにマージンを加えていたためのようです。
各section上部に余白を付けるために、新しいクラス「pt4rem」を作ります。
「pt4rem」クラスにはstyle.cssでpadding-top: 4rem;を指定します。
sectionタグに「pt4rem」クラスを加え、 見出しを囲っているdivに設定している余白のクラスを変更しました。
before
after
これで「Service」をクリックしても、見出しとナビバーが被らない位置で止まるようになりました。 他にもナビゲーションと見出しが被ってしまうセクションがあれば、修正してください。
3.全体のレイアウトを微調整
ここまででfront-page.phpの作成はほぼ完成です。 あとは全体を見て、レイアウトが崩れていそうな箇所があればcssファイルの記述を修正していきましょう。
例えば、解説のコードではページ下部のSNSアイコンがズレていました。
style.cssで調整します。
ここまでのレッスン作成分までが入ったテーマを「レッスン素材一覧」にアップロードしています。 画像フォルダは含まれておりませんので、WordPressでカテゴリーや記事を作成するのレッスンでダウンロードしたimgフォルダを移してご利用ください。
最終調整について
上記のように、他の部分も表示を確認して必要箇所を調整してみて下さい。 （こちらは見本ファイルでは調整されていません）。
スマートフォン幅での表示も確認し、崩れ等が無ければポートフォリオサイトのWPテーマ化は完了です。
次ページ以降では、WordPress側での調整、よりテーマを最適化するTipsをご紹介しています。