どうも!たら(@hajimetara)です。
ホームページやブログで欠かせないのがお問い合わせフォーム。
今回はプラグイン「Contact Form 7」を使って
プラグイン「Contact Form 7」をインストールする方法
プラグイン→「新規追加」をクリック。
右上に検索ボックスがあるので「contact」と入力します。
Contact Form 7の「今すぐインストール」をクリック。
インストールが終わったら「有効化」をクリック。
画面が切り替わります。
Contact Form 7の「設定」をクリック。
コンタクトフォーム1の「編集」をクリック。
コンタクトフォームの編集画面にある
ショートコード
をコピーしておきます。id=””の数字は表示されている数字です。
コンタクトフォームの編集画面にあるタブも確認しておきましょう。
「メール」タブは
お問い合わせがきたときに、自分のメールに送られてくるアドレスなどが書かれています。
「メッセージ」タブは
お問い合わせしてくれた方が
お問い合わせフォームでメッセージを送信したときに表示されるメッセージです。
メッセージは好きな文に変更してもいいですね。
変更したら「保存」をクリック。
固定ページに「Contact Form 7」を貼り付ける方法
先ほどコピーしたショートコードを
固定ページに貼ります。
固定ページの「新規追加」をクリック。
Gutenbergエディターに貼り付けます。
「タイトルを追加」にお問い合わせと入力して、「文章を入力、または/でブロックを選択」にコードを貼り付けます。
しばらくすると
タイトルの上にパーマリンクが表示されるので「編集」をクリック。
「contact」や「mail」に変更しましょう。
確認して「保存」をクリック。
右上の「下書き保存」をクリックして保存しておきましょう。
Contact Form 7」のシェアボタンと日付を非表示にする方法
コードを貼り付けた画面の右上にある「プレビュー」をクリックしてみると…
お問い合わせの下にシェアボタンと日付が表示されています。
できればないほうがスッキリしますよね。
固定ページの「固定ページ一覧」をクリック。
IDと書かれている場所に数字があるので(この場合は17)メモしておきます。
外観の「テーマエディター」をクリック。
初めてクリックしたときは「注意!」と出ますが「理解しました」をクリック。
コードが書かれている一番下に
/*******************************
* 固定ページの日付非表示
********************************/
.post-○○ .date-tags {
display: none;
}
/*******************************
* 固定ページのSNSシェアボタン非表示
********************************/
.post-○○ .sns-share {
display: none;
}
コピーして貼り付けます。
「○○」の部分は、お問い合わせフォームのIDなので先ほどメモした数字に書き換えてください。
「17」の場合は上のようになります。
「ファイルを更新」をクリック。
もう一度
固定ページの「固定ページ一覧」をクリック。
お問い合わせページのプレビューを見てみると
シェアボタンと日付が消えました。
固定ページの「公開する」をクリック。
グローバルナビメニューに追加する場合はコチラの方法でできます。