WordPressでの独自テーマ作成＃4（お問い合わせフォームの作成＋メインビジュアル修正）

今回やること

• お問い合わせ部分を「CF7」(Contact Form 7)を使用して作成
• 表示されていない画像部分の修正

お問い合わせ部分の作成

お問い合わせ項目の準備

「📧お問い合わせ」＞「コンタクトフォーム」から新規追加でお問い合わせ項目を追加します。

今回必要な、「名前」、「メールアドレス」、「お問い合わせ内容」の３項目を追加します。

<div class="c-form__item">
<label for="name">名前</label>[text your-name]
</div>
<div class="c-form__item">
<label for="mail">メールアドレス</label>[email your-email]
</div>
<div class="c-form__item">
<label for="text">お問い合わせ内容</label>
[textarea textarea]
</div>
<div class="c-form__button">
[submit "submit"]
</div>

お問い合わせフォームの表示

front-page.phpを編集します。

<?php echo do_shortcode('[contact-form-7 id="27" title="お問い合わせフォーム"]'); ?>

do_shortcode()の中に、「このショートコードをコピーして、投稿、固定ページ、またはテキストウィジェットの内容にペーストしてください」とタイトルの下に書いてあるので背景が青色部分の文字列をそのままコピーして貼り付けます。

<div class="contact">
    <h2 class="c-heading">お問い合わせ</h2>
    <div class="l-container">
        <div class="c-form">
            <?php echo do_shortcode('[contact-form-7 id="27" title="お問い合わせフォーム"]'); ?>
        </div>
    </div>
</div>

サイトに戻って確認してみてください。

もしデザイン等が崩れていたらWordPress側のお問い合わせフォームのclass等の見直しをしてみてください。

参考サイト：

https://wpdocs.osdn.jp/関数リファレンス/do_shortcode

https://form.run/media/contents/website-lp-creation/contact-form-7/

メインビジュアル画像の表示

front-page.phpのメインビジュアルの画像は、そのままWordPressに移行したままでは画像のパスが通っていないので、「./img/mainvisual.jpg」の前に、テーマ内にあるファイルのパスを返してくれるWordPressのget_theme_file_uri()関数を使います。

 <img src="./img/mainvisual.jpg" alt="">

↑before、↓After

<img src="<?php echo get_theme_file_uri('/img/mainvisual.jpg'); ?>" alt="">

下のコードのようにget_theme_file_uri()を使用します。

確認してみると画面上部にメインビジュアルの画像が表示されます。

さいごに

今回の記事では、お問い合わせ部分をContact Form 7を使用して作成を使って投稿の表示をしました。

次回の記事では、single.php・archive.phpを使って詳細・一覧ページを作成していきます。