初心者必見!WordPressで0からブログを作ってみよう!WordPressで問い合わせページを作ろう編

このエントリーをはてなブックマークに追加

前回までで、基本的なブログとしての機能は満たしていますね。今回は、問い合わせページを作ります。それには固定ページ用のテンプレートを作ればOKなんです。さらに、問い合わせ用のプラグインContact Form 7のご紹介もしますね。

こんなブログサイトを作る

一緒に作っていくブログサイトは以下のようなものになります。ほとんどこのブログと同じ感じですけど、一般的なブログを作るという意味ではいいのかなと思います。
こんなブログを作ろう

作れるようになるまでの流れ

実際に作っていく手順としては以下のように進めていこうかと思っています。HTML,CSSできるよってかたは3番のWordPressテーマ作成編から進めていただくといいかもしれません。

1. HTMLの入門編
2. CSSの入門編
3. WordPressテーマ作成編
4. カテゴリメニュー・パンくずリスト・ページャー作成編
5. 検索できるようにしよう編
6. WordPressで問い合わせページを作ろう編 ←いまここ
7. レスポンシブでスマートフォンにも対応させよう編
8. 作ったブログをサーバーにアップしてみよう編

上記以外にも、CSSの管理をしやすいようにSassやGulpを使ってみたり、WordPressのショートコードを作ってみたり、Javascriptでフォームのバリデーションも、その他応用編として記事にしてみようかなと思っています。

今回の作業するにあたって必要なデータ

固定ページのテンプレートを作ろう

まずは固定ページ用のテンプレートとして「page.php」を新規で作ります。今回はタイトルと本文が表示されるようにしましょう。

<?php
/*
Template Name: 固定ページの新規テンプレート1
*/
?>
<?php get_header(); ?>
	
<div class="wrapper clearfix">
	<div class="main-content">
		<?php
		if(have_posts()): while(have_posts()): the_post();?>
		<article class="article">
			<header>
				<h2 class="title title--h1">
						<?php the_title(); ?>
				</h2>
			</header>
			<div class="content">
				<?php the_content(); ?>
			</div>
		</article>
		<?php endwhile; endif; ?>
	</div>

	<?php get_sidebar(); ?>
	
</div>

<?php get_footer(); ?>

ポイントとなるのは「Template Name」の部分ですね。これはこのテンプレートの名前になります。固定ページ用のテンプレートはいくつも作ることができて、かつ管理画面でどのテンプレートを使うか選択することができます。

WordPressの管理画面で固定ページ作成

管理画面左メニュー > 固定ページ > 新規作成

入力サンプル

タイトル、本文、テンプレート選択、URLを今回は設定します。

タイトル:お問い合わせ
本文:適当になにか

と入力をしましょう。この辺は記事投稿と同じですね。次に、どのテンプレートを使うか選択をします。
先ほど作った「固定ページの新規テンプレート1」を使いたいですね。

ページの右側に ページ属性 > テンプレートとあるドロップダウンメニューから「固定ページの新規テンプレート1」選んでください。

次に、タイトルのしたに出てくるURLのボックスがあるとおもいます。そこがタイトルの「お問い合わせ」となってしまっていると思うので、「contact」としておきましょう。

ここまでできたらブラウザでページ確認してみてください。

パンくずリストを修正する

ブラウザで確認すると一見よさそうに見えますが、パンくずリストが「お問い合わせ」が表示されていないですね。固定ページでもパンくずリストが機能するように修正します。

以下コードをbreadcrumb.phpに追加します

<?php }elseif(is_page()){ ?>
	<li class="breadcrumb__list"><?php echo $title; ?></li>

breadcrumb.php

<?php if(!is_home()&&!is_admin()){
	if(is_category()){
	?>
		<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,false,''); ?></li>
	<?php } elseif(is_single()){ ?>
		<li class="breadcrumb__list"><?php echo get_category_parents($postcate[0]->term_id,true,''); ?></li>
		<li class="breadcrumb__list"><?php echo $title; ?></li>
	<?php }elseif(is_search()){ ?>
			<li class="breadcrumb__list">「<?php echo get_search_query(); ?>」で検索した結果</li>
	<?php }elseif(is_page()){ ?>
			<li class="breadcrumb__list"><?php echo $title; ?></li>
	<?php }; ?>
<?php }; ?>

これで、固定ページでもパンくずリストが機能しますね。

Contact Form 7でフォームをつくろう

次に、お問い合わせの機能といえば、フォームですよね。メールアドレスや件名、本文を入力して送信する機能です。WordPressでは便利なプラグインがたくさんあります。お問い合わせフォームを作りたい場合は迷わず「Contact Form 7」を使うのをおすすめします。

僕もお仕事でよく使います。本当に設置が楽だし、カスタマイズも簡単にできるのですごく重宝しているプラグインの一つです。

まずは、インストールをしてプラグインを有効にしてくださいね。

インストールして有効化まで完了すると「お問い合わせ」が追加されています。

管理画面左メニュー お問い合わせ > 新規追加

コンタクトフォーム

上記のような画面になっていますね。
ここで、フォームのタイトルとフォームの本体を作ります。

タイトル:お問い合わせ
本文は以下のように入力しましょう。

<dl class="contact">
<dt class="contact__title">お名前(必須)</dt>
<dd class="contact__input"> </dd>
<dt class="contact__title">メールアドレス(必須)</dt>
<dd class="contact__input">[email* your-email placeholder "メールアドレス"] </dd>
<dt class="contact__title">題名</dt>
<dd class="contact__input"> </dd>
<dt class="contact__title">内容</dt>
<dd class="contact__input">[textarea your-message placeholder "内容を入力してください"] </dd>
</dl>
<p class="contact__sbumitWrap"><button class="wpcf7-form-control wpcf7-submit btn" type="submit">送信する</button></p>

ここまでできたら保存を押すと「ショートコード」が作成されます。コピーをして固定ページ「お問い合わせ」の本文部分にペーストしましょう。

お問い合わせページ

これでフォームがでてきました。あとはCSSでデザインの調整をすればOKですね。

CSSで調整

/* contact
--------------------------------------------------------- */
input[type=email],input[type=password],input[type=text],textarea {
    margin: 0;
    padding: 5px 10px;
    border: 1px solid #ccc;
     -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
.contact {
    margin-bottom: 32px
}

.contact__form {
    width: 100%
}

.contact__title {
    font-size: 1.6em;
    margin-top: 32px
}

.contact__input {
    margin-bottom: 8px
}

.contact__input input,.contact__input textarea {
    font-size: 1.4em;
    width: 100%;
    padding: 16px 8px
}

.contact__sbumitWrap {
    position: relative
}

.contact__sbumitWrap .ajax-loader {
    position: absolute;
    top: -30px;
    left: 50%;
    width: 16px;
    margin-left: -8px!important
}

完成例としてこのような見た目になっていればOKです
完成例

Footerのメニューからリンクを設定しよう

現状お問い合わせページはどこの部分からもリンクがないので、ページに飛ぶ手段がないですね。URLを直接打ち込まなければいけません。これではユーザーにとってとても不親切なので、フッターにある「お問い合わせ」からリンクを設定しましょう。

WordPress特有のページIDを調べる

WordPressにはパーマリンクと言われるURLを設定します。その際に、固定ページそれぞれに割り振られているIDを設定するんですね。

管理画面でお問い合わせページの編集画面で調べます。

ページタイトルのすぐ下に「短縮URLを取得」をクリックします。
短縮URL

「http://localhost/study_wp/?p=30」環境によっても多少違うと思いますがこのように表示されますね。ポイントは、「p=」のあとの数字です。僕の環境だと「30」になっています、これがお問い合わせページのIDになります。

おそらくみなさんの環境によってIDは違うのでご自分で確認してくださいね。ここまで確認したら「キャンセル」をおしてウィンドウ画面は閉じます。

次に、footer.phpでリンクの設定をします。

footer.php

<li class="footer__list"><a href="#">お問い合わせ</a>

となっているので、下記のように変更してくださいね。

<li class="footer__list"><a href="<?php echo get_permalink(30); ?>">お問い合わせ</a>

get_permalinkのあとの部分に先ほどのidをいれればそれだけでお問い合わせページとリンクできます。

ではブラウザで確認をしてちゃんとリンクできているかみてくださいね。

おわりに

これで、お問い合わせページを作ることができましたね。ブログであれば読者からご意見をもらうことなどができますね。ちなみに、WordPressはブログだけではなくコーポレートサイトを作ることができます。その際にはこう言ったお問い合わせページがあるととてもいいですね。なかのフォームもContact Form 7で簡単に実装できるので、いろいろ試したりカスタマイズしてみてくださいね〜

今回の完成例

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

このエントリーをはてなブックマークに追加

同じカテゴリーの記事

ページの先頭へ