☆Yuus Memo☆
非エンジニアの方でも業務を効率化できるプログラムを紹介します！
Web開発

【WordPress】Katawaraで本格的な会社ホームページを超高速で作る！！　第2回目

 
Katawara-Wordpress

皆さん、こんにちは！！
前回からビジネスサイト制作に、今一押しのWordPressのテーマ【Katawara】を使用して、サンプルコーポレートサイトを作るという記事を書いています。


前回は、Lightningのデモサイトを再現するデータを利用してサイトのベースを作り上げました。

Katawara-Wordpress
【WordPress】Katawaraで本格的な会社ホームページを超高速で作る！！　第１回目 皆さん、こんにちは！！今日はWordPressで企業サイトを作るのにお勧めの【Katawara】を使用して、企業サイトを爆速で、しかも...

今回は、このサイトを少しずつオリジナルになるように手を掛けていきたいと思います。

Lightningデモデータで修正必須な箇所

修正必須箇所
  1. 新しい管理ユーザーを設定する
  2. デフォルトのユーザーを削除・新規作成
  3. 元々のユーザー（vektor）を削除
  4. 管理者用のメールアドレスを変更
  5. お問い合わせフォームのメール送信先の変更
  6. パーマリンクを保存
  7. テーマ・プラグインを最新状態に更新
  8. プライバシーポリシーページの変更
  9. 各種設定

上のリストの項目の修正は必須です。
自社のサイトに合わせて変更してください。

もし分からない場合、公式サイトのクイックスタートをご覧ください。

お問合せフォームのカスタマイズ

デモデータを再現すると、「Contact Form 7」というプラグインがインストールされているかと思います。

Contact Form 7 は複数のコンタクトフォームを管理できてその上フォームとメールの内容を簡単なマークアップで柔軟にカスタマイズしたりもできます。Ajax によるフォーム送信、CAPTCHA、Akismet スパムフィルタリング等々サポートしています。

https://ja.wordpress.org/plugins/contact-form-7/

Contact FormはWordPressで、お問合せフォームを作成する場合、一番使われているプラグインです。

お問合せに「確認画面」「送信完了画面」を付ける

Contact Formは非常に優秀なプラグインなのですが、デフォルトではフォームの確認画面が無いため、お問合せをしてくれるユーザーの方が内容を確認できずに送信されてしまいます。

そのままだと問い合わせを行うユーザーが、質問内容を確認できないまま送信完了になってしまいますので、入力誤りが発生してしまうこともあるでしょう。

それはサイト運営者にとっても、折角お問合せをくれたユーザーにとってもデメリットでしかありません。

【Contact Form 7 add confirm】の追加

以下の手順でプラグインを探して、インストールと有効化を行ってください。

  1. プラグイン 
  2.  新規追加
  3. 検索バーに「Contact Form 7 add confirm」と入力
  4. インストール、有効化

【Contact Form 7】に「確認」「戻って編集」ボタンを付ける

プラグインの有効化がうまくいくと、コンタクトフォームの編集ページのフォームテンプレートの項目に、「確認ボタン」「戻って編集ボタン」という2つのボタンが追加されます。

フォームの内容を次の様に変更してください。

お名前<small class="text-danger">（必須）</small>
[text* your-name]

ふりがな<small class="text-danger">（必須）</small>
[text* kana-name]

メールアドレス<small class="text-danger">（必須）</small>
[email* your-email]

御社名<small class="text-danger">（必須）</small>
[text* company]

電話番号<small class="text-danger">（必須）</small>
[text* tel]

お問い合わせ内容<small class="text-danger">（必須）</small>
[textarea* your-message]

<p class="center">
<p class="center">[confirm class:btn btn-info class:btn-lg class:btn-block "確認画面へ"]</p>
<p class="center">[back class:btn-warning class:btn-lg class:btn-block "戻って編集"]</p>
<p class="center">[submit class:btn class:btn-primary class:btn-lg class:btn-block "送信"]</p>

ボタンの順番がポイントです。
必ず上からこの順番になるように配置してください。

「確認ボタン」→「戻って編集ボタン」→ 「送信ボタン」

実際にお問合せフォームを入力して、確認してください。
確認画面等の確認が出来るかと思います。

このままでも良いのですが、折角なのでもう少しこだわってカスタマイズしてみたいと思います。

お問合せフォームにステッププログレスバーの表示

ステッププログレスバーとは、下図の様な進捗状況を表すものです。
よくECサイトなどのカートシステムで目にするのではないでしょうか？


これがあると、フォームを入力する方の分かりやすさが格段に変わるので、これを作りたいと思います。

JavaScriptで作っても良いのですが、難易度が上がってしまうので今回はCSSで実装します。

ステッププログレスバーを実装するためにCSSを書く必要があるので、分かりにくい部分があったらお気軽にコメント下さい。

ステッププログレスバーの作り方

ステッププログレスバーの仕組みはとても単純で次の簡単なサンプルを見ていただければ理解できるかと思います。

次の様なHTMLがあるとします。

<ol class="stepBar">
    <li class="visited"><span>1</span><br>入力</li>
     <li><span>2</span><br>確認</li>
     <li><span>3</span><br>完了</li>
</ol>

CSSは次の様に実装します。
class=”visited”が付いたHTMLの色が変わります。

.stepBar {
  display: flex;
  max-width: 400px;
  position: relative;
  margin: 20px auto;
  text-align: center;
}
.stepBar li {
  font-size: 12px;
  list-style: none;
  position: relative;
  width: 33.333%;
}
.stepBar li:after {
  background: #D0E1F9;
  content: "";
  width: calc(100% - 24px);
  height: 4px;
  position: absolute;
  left: calc(-50% + 12px);
  top: 10px;
}
.stepBar li:first-child:after {
  display: none;
}
.stepBar li span {
  background: #D0E1F9;
  color: #ffffff;
  display: inline-block;
  height: 24px;
  margin-bottom: 5px;
  line-height: 24px;
  width: 24px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.stepBar .visited:after {
  background: #4D648D;
}
.stepBar .visited span {
  background: #4D648D;
}

これを踏まえてフォームを編集します。
難しい方は、コピペも問題ありません。

お問合せフォームの編集

まずは、CSSをお問合せフォームだけに適用させるために、フォームのHTMLを編集し、それぞれClassを付けます。

下記の様に、フォームを編集してください。

<div id="wrap_contact">
    <ol class="step-bar step3 wpcf7c-elm-step1">
        <li class="step current">入力</li>
        <li class="step">確認</li>
        <li class="step">完了</li>
    </ol>
    <ol class="step-bar step3 wpcf7c-elm-step2">
        <li class="step">入力</li>
        <li class="step current">確認</li>
        <li class="step">完了</li>
    </ol>
    <ol class="step-bar step3 wpcf7c-elm-step3">
        <li class="step">入力</li>
        <li class="step">確認</li>
        <li class="step current">完了</li>
    </ol>
    <h3 class="wpcf7c-elm-step1">
        通常3営業日以内に担当者より、ご連絡いたします。<br />
        お問合せの内容によっては、返答が遅れる場合がありますので予めご了承ください。
    </h3>
    <h3 class="wpcf7c-elm-step2">
        ご入力内容をご確認後、「送信する」ボタンを押してください。
    </h3>
    [response]
    <div class="wpcf7c-elm-step3">
        <h3 class="member_txt_sent">お問合せありがとうございます。</h3>
        <p class="member_txt_sent">
            ご入力いただいたメールアドレスへ受付確認メールを送信させていただきました。<br />
            確認メールが届かない場合、
            迷惑メールフォルダや削除済みアイテム等にメールが届いていないか、ご確認をお願いいたします。
        </p>
        <p class="member_txt_sent">
            お問い合わせの内容によっては、回答をお電話でさせていただく場合や、<br />
            回答をさしあげるのにお時間をいただくこともございますので、ご了承ください。
        </p>
        <h4 class="member_txt_sent">サンプル株式会社</h4>
        <p class="member_txt_sent"><a href="http://localhost/wordpress">トップページへ戻る</a></p>
    </div>

    <table border="0" cellspacing="0" cellpadding="0">
        <tbody>
        <tr>
            <th>お名前<small class="text-danger">（必須）</small></th>
            <td>
                [text* your-name]
            </td>
        </tr>
        <tr>
            <th>ふりがな<small class="text-danger">（必須）</small></th>
            <td>
                [text* kana-name]
            </td>
        </tr>
        <tr>
            <th>住所<small class="text-danger">（必須）</small></th>
            <td>
                <p class="member_txt wpcf7c-elm-step1">郵便番号(ハイフンなし)</p>
                [text* Postalcode id:zip post class:p-postal-code]
                <p class="member_txt wpcf7c-elm-step1">住所</p>
                [text* add01 id:addr]
            </td>
        </tr>
        <tr>
            <th>メールアドレス<small class="text-danger">（必須）</small></th>
            <td>
                [email* your-email]
            </td>
        </tr>
        <tr>
            <th>電話番号<small class="text-danger">（必須）</small></th>
            <td>
                [tel* tel]
            </td>
        </tr>
        <tr>
            <th>お問い合わせ内容<small class="text-danger">（必須）</small></th>
            <td>
                [textarea* your-message]
            </td>
        </tr>
        </tbody>
    </table>

    <p class="wpcf7c-elm-step1">
        当サイトは、個人情報保護のため、SSL(SecureSocketsLayer)暗号化通信を採用しております。
        <a href="#" target="_blank">プライバシーポリシー</a>にご了承いただき、送信してよろしければ下の「確認画面へ」ボタンを押して下さい。
    </p>
    <div class="form_btn">[back "戻る"][submit "送信する"]</div>
    <div class="form_btn">[confirm "確認する"]</div>
</div>

普段HTMLを書かない方には、面食らってしまうかもしれませんが、大した内容ではなく、先程のフォームをテーブル（表）形式に変更しただけです。

後はCSSで進捗を示すためのClass付けなどをしています。
先程のHTML＋CSSの例と同じですね。

お問合せフォームのCSSを設定

追加CSS画面を開きCSSを記述していきます。

外観→カスタマイズ→追加CSSの順にメニューを進んでください。

フォームのスタイルをCSSで記述します。
大分長いので、コピペしていただければよいと思います。
このスタイルをあてる事で、HTMLのステッププログレスバーの現在状態とフォームの表示を変更しています。

#wrap_contact {
        width: 100%;
        margin: 0 auto;
    }

    @media screen and (max-width: 1100px) {
        #wrap_contact {
            width: 100%;
        }
    }

    #wrap_contact table {
        width: 100%;
        border-collapse: collapse;
        border: solid #ccc;
        border-width: 1px 0;
        margin: 50px auto;
    }

    @media screen and (max-width: 768px) {
        #wrap_contact table {
            width: 100%;
            border-width: 0 0 1px 0;
        }
    }

    #wrap_contact table tr th, #wrap_contact table tr td {
        text-align: left;
        vertical-align: middle;
        border: solid #ccc;
        border-width: 1px 0;
    }

    #wrap_contact table tr th {
        width: 35%;
        background: #eee;
        padding: 0 2em;
    }

    @media screen and (max-width: 1100px) {
        #wrap_contact table tr th {
            padding: 0 1em;
        }
    }

    @media screen and (max-width: 768px) {
        #wrap_contact table tr th {
            width: auto;
            padding: 1em 5%;
            border-width: 0;
        }
    }

    #wrap_contact table tr td {
        padding: 2em 2em 1em 2em;
    }

    @media screen and (max-width: 1100px) {
        #wrap_contact table tr td {
            padding: 1em 1em 0em 1em;
        }
    }

    @media screen and (max-width: 768px) {
        #wrap_contact table tr td {
            border-width: 0;
            width: auto;
            padding: 1em 5%;
        }
    }

    @media screen and (max-width: 768px) {
        #wrap_contact table, #wrap_contact table tbody, #wrap_contact table tr, #wrap_contact table tr th, #wrap_contact table tr td {
            display: block;
        }
    }

    #wrap_contact form.sent table {
        display: none;
    }

    @media screen and (max-width: 768px) {
        #wrap_contact form.sent table {
            display: none;
        }
    }

    div.wpcf7-response-output {
        margin: 2em 0 0 0;
        padding: 0;
        border: none;
        color: #dc0003;
        font-weight: bold;
    }

    div.wpcf7-mail-sent-ok {
        border: none;
        color: #000;
        font-weight: bold;
        font-size: 1.3em;
        margin-bottom: 2em;
    }

    h4.member_txt_sent {
        margin: 2em 0;
    }

    div.wpcf7-mail-sent-ng, div.wpcf7-aborted {
        border: none;
        color: #dc0003;
        font-weight: bold;
    }

    div.wpcf7-spam-blocked {
        border: none;
        color: #dc0003;
        font-weight: bold;
    }

    div.wpcf7-validation-errors, div.wpcf7-acceptance-missing {
        border: none;
        color: #dc0003;
        font-weight: bold;
    }

    span.wpcf7-not-valid-tip {
        color: #dc0003;
        font-size: 0.8em;
        font-weight: bold;
        display: block;
        margin: -0.8em 0 1em 0;
    }

    .wpcf7-not-valid {
        background: #ffd0d1;
    }

    #wrap_contact table .post {
        margin: 0;
        padding: 0;
    }

    .member_txt {
        padding: 0 0 5px 0;
    }

    h3.wpcf7c-elm-step1, h3.wpcf7c-elm-step2, h3.wpcf7c-elm-step3 {
        margin: 3em 0 0 0;
        font-weight: normal;
        font-size: 1em;
        line-height: 1.7em;
    }

    #wrap_contact input[type="text"], #wrap_contact input[type="tel"], #wrap_contact input[type="email"], #wrap_contact input[type="number"], #wrap_contact textarea {
        padding: 0.7em;
        width: 90%;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-bottom: 1em;
    }

    @media screen and (max-width: 768px) {
    }

    #wrap_contact input[type="text"].wpcf7c-conf, #wrap_contact input[type="tel"].wpcf7c-conf, #wrap_contact input[type="email"].wpcf7c-conf, #wrap_contact input[type="number"].wpcf7c-conf, #wrap_contact textarea.wpcf7c-conf {
        background-color: #fff;
        color: black;
        border: 1px solid #fff;
        outline: none;
    }

    #wrap_contact .form_btn {
        display: flex;
        justify-content: center;
    }

    @media screen and (max-width: 768px) {
        #wrap_contact .form_btn {
            display: block;
            text-align: center;
            width: 250px;
            margin: 0 auto;
        }
    }

    .sent table {
        display: none;
    }

    #wrap_contact input[type="button"].wpcf7-confirm, #wrap_contact input[type="button"].wpcf7-back, #wrap_contact input[type="submit"] {
        -webkit-appearance: none;
        background: #ee5656;
        height: 60px;
        font-size: 20px;
        letter-spacing: 0.1em;
        width: 250px;
        font-weight: bold;
        cursor: pointer;
        color: #fff;
        border: 0;
        border-radius: 5px;
        outline: none;
        margin: 0.5em 1em;
    }

    @media screen and (max-width: 768px) {
        #wrap_contact input[type="button"].wpcf7-confirm, #wrap_contact input[type="button"].wpcf7-back, #wrap_contact input[type="submit"] {
            margin: 0.5em 0;
        }
    }

    #wrap_contact input[type="button"].wpcf7-back {
        background: #666;
    }

    #wrap_contact table th span {
        color: #fff;
        background: #dc0003;
        padding: 3px 3px 4px 5px;
        font-size: 12px;
        margin-left: 10px;
        border-radius: 3px;
        letter-spacing: 0.2em;
    }

    div.wpcf7 .ajax-loader {
        background-image: none;
        vertical-align: baseline;
    }

    div.wpcf7 .ajax-loader::after {
        content: "\f110";
        font-family: "Font Awesome 5 Free", sans-serif;
        font-weight: 900;
        animation: rotation 1s linear infinite;
        display: inline-block;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

    .step-bar {
        position: relative;
        list-style: none;
        margin: 0 0 1em;
        padding: 0;
        text-align: center;
        width: 100%;
        overflow: hidden;
        *zoom: 1;
    }

    .step-bar .step {
        position: relative;
        float: left;
        display: inline-block;
        line-height: 40px;
        padding: 0 40px 0 20px;
        background-color: #eee;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }

    .step-bar .step:before, .step-bar .step:after {
        position: absolute;
        left: -15px;
        display: block;
        content: '';
        background-color: #eee;
        border-left: 4px solid #fff;
        width: 20px;
        height: 20px;
    }

    .step-bar .step:after {
        top: 0;
        -moz-transform: skew(30deg);
        -ms-transform: skew(30deg);
        -webkit-transform: skew(30deg);
        transform: skew(30deg);
    }

    .step-bar .step:before {
        bottom: 0;
        -moz-transform: skew(-30deg);
        -ms-transform: skew(-30deg);
        -webkit-transform: skew(-30deg);
        transform: skew(-30deg);
        box-shadow: none;
        top: initial;
        border-radius: initial;
    }

    .step-bar .step:first-child {
        -moz-border-radius-topleft: 4px;
        -webkit-border-top-left-radius: 4px;
        border-top-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        -webkit-border-bottom-left-radius: 4px;
        border-bottom-left-radius: 4px;
    }

    .step-bar .step:first-child:before, .step-bar .step:first-child:after {
        content: none;
    }

    .step-bar .step:last-child {
        -moz-border-radius-topright: 4px;
        -webkit-border-top-right-radius: 4px;
        border-top-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        -webkit-border-bottom-right-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    .step-bar .step.current {
        color: #fff;
        background-color: #25ade0;
    }

    .step-bar .step.current:before, .step-bar .step.current:after {
        background-color: #25ade0;
    }

    .step-bar.step3 .step {
        width: 33.333%;
    }

    .step-bar.step3 .step br {
        display: none;
    }

    @media screen and (max-width: 1100px) {
        .step-bar.step3 .step br {
            display: block;
        }

        .step-bar .step {
            height: 50px;
            font-size: 13px;
            position: relative;
            float: left;
            display: inline-block;
            line-height: 18px;
            padding: 7px 30px 5px 10px;
            background-color: #eee;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .step-bar .step:before, .step-bar .step:after {
            height: 25px;
        }

        .step-bar .step:nth-of-type(3) {
            padding-top: 17px;
        }
    }

いかがでしょうか。
使いやすいフォームを作れたのでは無いでしょうか。

これで、フォームの設定を終わります。
Lightningのデモサイトデータでは、もう一つ問い合わせフォームがあるので、ご自身でカスタマイズしてみてください。

【おまけ】お問い合わせ完了画面（サンクスページ）へ遷移させるパターン

基本的に私は一画面で完了まで表示するのが好きなので、上で紹介した方法をいつも使っているのですが、中には「完了画面へ移動させたい。」という要望もあります。

この機能は、【Contact Form 7 add confirm】がインストール済みであれば簡単に実装できます。

サンクスページへの遷移が不要な方は実装しなくて構いません。

必要な設定は下記の3つです。

  1. サンクスページの新規作成
  2. 「functions.php」に完了画面を表示させるコードを追加
  3. Contact form 7 の送信後のメッセージ調整

まず、普通に固定ページで追加して、本文に「お問合せありがとうございました。」などの文章とトップページへのリンクなどを入れてください。

「functions.php」に下記を追加します。
functions.phpは現在のテーマディレクトリの中にあります。

add_action( 'wp_footer', 'add_thanks_page' );
function add_thanks_page() {
echo <<< EOD
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
  location = 'http://localhost/thanks/';  // 完了ページのURLを入れる
}, false );
</script>
EOD;
}

functions.phpの編集でエラーのあるコードを書くと、画面が真っ白になります。（Internal Error 500）

もし、真っ白になったら編集した内容を元に戻せば良いので焦らずに編集を元に戻してください。

また、テーマのアップデートを行うとファイルが上書きされるので、子テーマを作成してから編集することをお勧めします。

functions.phpを更新したら、画面の遷移は出来るようになっているはずです。

ただ、このままだとContact form 7 の完了ページに遷移する前に一瞬フォーム下に「メッセージが正常に送信された」際に表示されるメッセージが出て、その後完了ページに移動するので気持ち悪いです。

Contact formのメッセージの下図の赤で囲った部分を「送信中…」などに変更すればOKです。

これで、お問い合わせフォームのカスタマイズの解説は終わりです。
お疲れ様でした。

Katawara-Wordpress
【Wordpress】おすすめテーマ「Katawara」WordPressのテーマ「Katawara」のご紹介！ 企業サイトに特にお勧めです！...

まとめ

【Katawara】のカスタマイズの2回目として書き始めましたが、Contact formのカスタマイズだけになってしまいました。

WordPressのプラグインやテーマは便利なものが多いですが、今回の様に自力でカスタマイズする必要があるものも多いです。

簡単なHTML＋CSSを理解しておくと、カスタマイズが楽しくなってくるかと思います。
更にPHPやJavaScriptの知識を学習すると出来る事の幅が大きく広がります。

Web-book
WEB開発の学習におすすめの書籍 皆さんこんにちは！WEB開発をこれから初めていきたい人が読むのにおすすめの書籍などを紹介します。 WEB開発は、一つのプログラム...

併せて学習してみてください！
それでは、次回をお楽しみに！！

Katawaraの購入はこちらからどうぞ。
シンプルで非常に美しいテーマなので、どんな業種の企業にもお勧めです！！

Vektor WordPress Solutions
Katawara wordpress
あわせて読みたい

コメントを残す