WordPressでブログじゃないWebサイトを作るときのいろいろ(サンプル付き)

Posted under - WordPress

341

とても長い記事になってしまいましたが、WordPress を使って、コーポレートサイトのサンプルを作ってみました。WordPress はブログだけじゃなくて、色んな Webサイトが作れますよね!今回は、私が WordPress でサイトを作る時にやっていることをまとめてみました。

WordPress Corporate Site

今までこのブログの中で、いろいろな WordPress の Tips を書いてきました。でも WordPress を使った Webサイトの作り方そのものは、今まで書いた事がありませんでした。そこで今回は、 WordPress を使ってブログじゃない Webサイトをまるごとひとつ作って、私なりの作り方をまとめてみました。

今回のサンプルサイトでは、WordPress の固定ページ機能はもちろん、カスタム投稿タイプカスタムタクソノミー(カスタム分類)を使って作っています。

ページを表示する為に使っているテンプレートファイル(index.php とか single.php とかのこと)の使い方も、私なりの使い方をしています。なので、こんな風に使うもの … というものではありません。あくまで私が仕事で WordPress サイトを作るときのやり方みたいなものをまとめたものです。

もしこの記事の中で、こういう場合はこうした方がいいよー!というような事があったら、教えていただけると嬉しいです。

WordPress でサイト構築:目次

  1. 目標とする Webサイト
  2. WordPress の 固定ページ
  3. トップページを作る
  4. カスタム投稿タイプで「お知らせ」ページを作る
  5. 「お知らせ」カスタム投稿タイプ用の single.php
  6. 「お知らせ」カスタム投稿の一覧を表示しよう
  7. メインループだけを変更する query_posts
  8. 1ページの中で複数のループを使う その1
  9. ブログのトップページを作る
  10. カスタム投稿タイプで「製品」ページを作る
  1. カスタム分類(タクソノミー)
  2. 製品(カスタム投稿)の個別記事用の single.php
  3. 1ページの中で複数のループを使う その2
  4. index.php は何に使うの?
  5. ブログの個別記事 single.php、404ページの404.php
  6. カスタムメニューを使って、ナビゲーションを作る
  7. body_class() がとっても便利!
  8. ループ内でしか使えない関数、ループ外でも使える関数
  9. WordPress で jQuery を読み込む

1. 目標とする Webサイト

Green グリーンコーポレーション

サンプルなので、サイトの会社は実在しません。また、サイト内で使っている画像は、ロイヤリティーフリーの素材集のものです。

目標とするサンプル Webサイトの完成図です。Webサイトはコーポレートサイトで、概要は以下のような感じです。

名前:グリーンコーポレーション
  • 家具の製造販売、インテリアの会社
  • 事業内容や会社案内、店舗案内、製品(家具)の紹介をする
  • お問い合わせフォームをつける
  • 簡単な「お知らせ」を告知したい
  • 「新製品」が出たら更新したい
  • 製品(家具)はお部屋のタイプ、家具の種類で検索できるようにしたい
  • ブログをやりたい

Sample Site

上記のようなコーポレートサイトを作成する事を目標にして、お話を進めていきます。またページを作りながら、そのページで使っているテンプレートファイルやコードも、サイトの概要を示したサイトマップとともに紹介していきますね!

MEMO

また、サンプルサイトでは、そのページに使われているテンプレートファイルを明示してあるので、合わせて見てみてくださいね!

1.1. サンプルサイトのサイトマップ

まずサンプルサイトは、家具の製造、販売などのインテリアの会社のコーポレートサイトです。事業内容会社案内の他、取り扱っている「製品」(家具)を閲覧できたり、簡単な「お知らせ」を Webサイト上で告知できるようにします。また「ブログ」も付けたいと思います。

サイトに掲載する取り扱い製品は、新しいものが出ればブログのように更新していく感じです。

サイトマップ

サイトマップ

「お知らせ」「製品ページ」は、更新っていうより追加って感じですね!ブログを更新するみたいに、新しい製品やお知らせが出来たら更新するっていう意味です。

その他のページに関しては、基本的に内容が変わる事はあんまりなさそうですねー。なので固定ページ(後述しますね!)で作ってしまうことにします。

2. WordPress の 固定ページ

固定ページ … WordPress でブログじゃない Webサイトを作るなら、固定ページ機能を必ずと言っていい程使うと思います。固定ページというのは、いつもその場所に固定されて配置されているページという意味です。

たとえばこのブログ – Webデザインレシピでは、AboutContact という 2つの固定ページがあります。これはヘッダー付近にナビゲーションを作ってあって、いつでもサイト内の特定の場所に固定されて配置されてるって感じです。

2.1. 固定ページの親子関係

ご存知のように WordPress では、ブログ記事とは別に固定ページを簡単に作る事ができますよね!そしてこの固定ページには、親子関係も作れるので、ブログじゃない Webサイトを作るには必須の機能ですよね。固定ページの作り方はご存知だと思うのでここでは省略しますけど、親子関係が作れるという事だけ補足しておきます。

このサンプルサイトでも、いくつか親子関係にある固定ページを作りました。

固定ページの親子機能

固定ページには親子関係をつけることができます。

オフセットされているのが、子ページです。

親子関係を付けるのはとっても簡単です。固定ページの投稿画面の右端、ページ属性から、親になるページを選んであげるだけですね。

固定ページのページ属性

ページ属性で親ページを選ぶだけ

2.2. 使うファイルを選べるテンプレート

また、固定ページはテンプレートを選ぶ事もできます。これについては後述しますね!今回はほとんどのページでデフォルトテンプレートを使っています。

デフォルトテンプレートというのは、テンプレートファイルいうと page.php のこと。これを使って、サイトマップ内の以下のページができてしまいました!

固定ページ(page.php)で作ったページ

page.php で作ったページ

固定ページと親子関係の機能を使って、上記のページを作る事ができました。ここまでは簡単ですね。下記にリンクを少し貼っておくので、どんな感じになるか見てみてください。

基本的には静的な HTML でできたページと同じ様に見えるはずです。とくに動的に更新される部分もないので、作りやすいページだと思います。

固定ページの一例

3. トップページを作る

順番的に 2番目になってしまいましたが、今度はトップページを作ってみます。ブログの場合は、普通 index.php がトップページになりますよね!ブログでは記事を一覧表示してトップページとすることが多いので、index.php でも十分です。でも、ブログじゃない Webサイトの場合は、別にトップページを作った方が良さそうですよねー。

ではトップページはどうやって作ればいいでしょうか?トップページを作る方法の選択肢はふたつありますよね。

  • 固定ページを使う
  • home.php を使う

3.1. トップページに固定ページを使う

まずは固定ページを使う場合です。これは管理画面の 設定 → 表示設定 から、固定ページをフロントページ(ホーム)として選びます。もちろん事前に固定ページ機能を使って、ひとつ固定ページを作っておく必要があります。

表示設定でフロンドページを選択

フロントページの設定

3.2. home.php を使う

もうひとつは home.php というテンプレートファイルを使う方法です。前述した方法で、固定ページをフロントページを指定していない場合、WordPress は基本的に index.php をトップページとして表示します。でも、home.php というテンプレートファイルがテーマ内にあると、WordPress は index.php ではなくて、home.php でトップページを表示してくれるんです!

MEMO

特定のページに対して、使用するテンプレートファイルに優先順位がある感じです。これを WordPress では、テンプレート階層と呼んでいて、トップページだけでなく色んなページに対して、どのテンプレートファイルを使うか?という優先順位が存在します。

トップページのテンプレート階層
  1. home.php
  2. index.php

Attention

Webサイトの構築の仕方によっては、front-page.php を利用できる場合もあります。詳しくは WordPress Codex を参照してみてください。

このテンプレート階層は、もちろん他のページにも存在します。例えば検索結果を表示するページは、以下のような優先順位があります。

検索結果表示ページのテンプレート階層

  1. search.php
  2. index.php

テンプレート階層については、過去記事で詳しく書いたことがあるので参考にしてみてくださいね。また、前述した WordPress Codex も参照してください。

3.3. 固定ページを使う?home.phpを使う?

でも home.php固定ページのどっちを使うか迷う所ですよねー。一体どう違うんでしょう?ふたつのトップページの大きな違いは、管理画面から更新したいコンテンツがあるかどうか?なんです。

どーいう事かというと、固定ページを使った場合は、管理画面の固定ページの編集画面からコンテンツを編集、更新することが出来ますよね?そういったコンテンツがある場合は、固定ページを使います。

今回のサンプルサイトでは、特に更新するコンテンツがないので、home.php を使いました。

Attention

2012年 6月 追記 – 仕様変更して、固定ページで作成し直しました。

トップページ
サイトマップ

home.php でトップページを作成

今のところ使っているテンプレートファイルは、固定ページ用の page.php と、トップページ用の home.php だけですね。

4. カスタム投稿タイプで「お知らせ」ページを作る

さて、サンプルサイトには、簡単なお知らせを告知するための機能を付けたいと思います。ブログのように更新する感じで、ちょっとした短い文章を想定しています。例えば「アルバイト募集のお知らせ」とか、「年末年始の営業のお知らせ」といった感じです。

ん?更新するならブログ機能をそのままつかって、カテゴリーで分ければいいんじゃないの?って声も聞こえてきます。

でも、このサンプルサイトには、ブログも付けなくてはなりませんし、カテゴリー分けするよりも、もっといい方法があるんです!それがカスタム投稿タイプを使う方法です。

4.1. カスタム投稿タイプとは?

このブログでも、何度かカスタム投稿タイプを取り上げた事がありますが、ちょっとここでおさらいです。そもそもカスタム投稿タイプというのは何でしょう?

カスタム投稿タイプは、WordPress 3.0 から新しく加わった機能のひとつ。WordPress 2.9 以前では、ふたつの投稿タイプしかありませんでした。そのふたつの投稿タイプというのは、ブログの投稿(post)と固定ページの投稿(page)です。

  1. ブログの投稿 – post
  2. 固定ページの投稿 – page

カスタム投稿タイプというのは、postpage 以外に、自分で好きな名前で作る投稿のことなんです。ちょっと分かり難いので、下の画像を見てみてください。今回作ったサンプルサイトの管理画面です。

カスタム投稿タイプ

新しく追加した投稿タイプ

従来からあるブログの投稿、固定ページの他に、「お知らせ」「製品」という投稿があります。これがカスタム投稿というもので、こんな風にブログの投稿と同じように、自分の好きな投稿を作る事ができるんです!

で、その投稿のタイプの事を「カスタム投稿タイプ」って呼んでます。ちょっと混乱しますねー … タイプっていうのは何でしょう?

さっきブログは post、固定ページは page と書きました。これが投稿のタイプを示しています。なのでカスタム投稿では、この投稿の名前も自分で好きに付けるんです。

今回は「お知らせ」と「製品」という投稿なので、それぞれ informartionsproducts という名前を付けました。これは WordPress の中で、どの投稿の記事なのかを区別するために使われます。

投稿タイプ
  • post – ブログ記事のこと
  • page – 固定ページの記事こと
  • informartions – お知らせの記事のこと
  • products – 製品の記事のこと

こんな感じです。この投稿タイプの名前は、テンプレートファイルの中、PHP でコードを書く時に使ったります。

4.2. カスタム投稿タイプを作ってみよう!

それでは実際にカスタム投稿タイプを作ってみたいと思います。カスタム投稿タイプは、自分の好きな名前で作るもの。なので WordPress のデフォルトの設定では、カスタム投稿タイプは設定されていません。当たり前ですね!

カスタム投稿タイプを利用するには、functions.php に色々コードを書かなくてはいけなんですが … これが結構めんどくさいんです … X(

functions.php の設定については、過去記事で紹介しているので参考にしてみてください。今回は、簡単にカスタム投稿タイプを作ったり、管理する事が出来る Custom Post Type UI というプラグインを使います。 Custom Post Type UI の使い方については、過去記事に書いた事があるので、そちらを参考にしてみてくださいね!

Custom Post Type UI を使ってカスタム投稿タイプを作ったら、あとはブログと同じように更新するだけです!下の画像のようにブログと同じように更新できるので、特に難しい事は何もありません。また、カスタム投稿は、固定ページのように親子関係を作る事もできます。

カスタム投稿タイプの投稿画面

ブログの編集画面と基本的に同じです

ブログの編集画面と基本的に同じです!

4.3. カスタム投稿タイプを表示してみよう!

今度は先ほど作ったカスタム投稿タイプを表示するページを作っていきます。ここでは「お知らせ」(投稿タイプ – informations)を表示するページを説明していきます。作るページは 2種類。個別の記事を表示するためのページと、お知らせを一覧で表示するページです。

先に個別記事ページを作っていきますが、まずは完成図を見てみましょう。

お知らせの個別ページ

上記のページは「お知らせ」ひとつひとつの個別のページになります。ブログの個別記事みたいな感じですね!

ブログの記事と違う所は、カテゴリーやタグが無い事や、コメント欄が無い事です。もちろんこれらを付ける事もできますけど、簡単な告知をするためのページなので今回は付けませんでした。まずはこの「お知らせ」の個別ページ用のテンプレートファイルを作ります。

5. 「お知らせ」カスタム投稿タイプ用の single.php

ブログの場合、個別記事を表示するのに single.php を使いますよね。カスタム投稿である informations も、個別記事は single.php で表示されます。でも前述した通りカテゴリーやタグは必要ないし、コメント欄も必要ありません。タイトルと日付、コンテンツの 3つが表示できればいいので、ブログの single.php とは別に専用の single.php を作ることにします。

専用の single.php というのは何でしょう?ここでさっきも出てきた、テンプレート階層というのがまた登場します。single.php にも、このテンプレート階層があるんですねー。

single.php のテンプレート階層
  1. single-[post_type].php
  2. single.php
  3. index.php

single.php の場合は、上記のような優先順位でテンプレートファイルが使われます。今回は「お知らせ」用の個別ページ … つまり、投稿タイプ informations の個別ページなので、single-informations.php というテンプレートファイルを作れば、「お知らせ」表示したいとき、普通の single.php よりも優先順位が高くなるんですね!

MEMO

もし single-informations.php を作らなければ、ブログと同じ single.php で表示されますし、single.php が無い場合は、テンプレート階層によって index.php で表示されます。

それでは実際に single-informations.php の中身を見ていきましょう。
(今回は informations という投稿タイプなので single-informations.php という名前ですが、これは作った投稿タイプの名前で変わります。)

5.1. single-informations.php を作ろう

専用の single.php と言っても、基本的には普通の single.php と同じように作ります。ループも single.php と同じです。

single-informations.php という名前によって、投稿タイプ – informations の記事にしか利用されないので、ブログで使ってる single.php から、タグやカテゴリーを表示する部分や、コメント欄の部分を削除するだけで OK です。

ループも WordPress の基本的なループと同じです。

WordPress の基本的なループ

WordPress ループ

single-informations.php のループ
<div class="post">
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); 
    /* ループ開始 */ ?>
		<h3><?php the_title(); ?></h3>
		<p class="post-date"><?php the_time("Y年m月j日") ?></p>
		<?php the_content(); ?>

	<?php endwhile; ?>
<?php else : ?>

		<h3>記事がありません</h3>
		<p>表示する記事はありませんでした。</p>

<?php endif; ?>

Attention

ここでループを取り上げましたが、WordPress をカスタマイズしていくなら、ループを常に意識しなくちゃならないんです。この後も色んなループが出てきますが、どこが違うのかをひとつひとつ説明していきますね!

6. 「お知らせ」カスタム投稿の一覧を表示しよう

お知らせの個別記事は single-informations.php という single.php を使って表示しました。それでは今度は一覧を表示するページを作りましょう。

一覧表示というのは、例えばブログでカテゴリーをクリックすると、そのカテゴリーの記事が一覧表示されますよね!あんな感じでカスタム投稿である「お知らせ」だけを一覧表示するページを作ります。

サンプルサイト:お知らせ一覧ページ

利用するのはさっきも使った固定ページ。でも page.php ではなく、専用のテンプレートファイルを作ります。固定ページはページによって、テンプレートファイルを使い分ける事ができますよね!

固定ページのテンプレート

使用するテンプレートを選択

このテンプレートを利用するには、テンプレートファイルの冒頭部分に、コメントでテンプレートファイルの名前を付けるだけ。上記では Information という名前のテンプレートがありますよね?これはテンプレートファイルの冒頭に、以下のように書く事で利用できるようになります。

PHP
<?php

/* Template Name: Information */

get_header(); ?>

get_header() の前に、コメントで Information という名前をつければ、固定ページのテンプレートで Information が選べるようになります。ファイルの名前自体はなんでも OK です。ここでは information.php という名前で保存しました。

個別ページのテンプレートファイルの作り方については、WordPress Codex 日本語も参照してみてくださいね!

  • WordPress Codex 日本語

    Pages

それでは information.php の中身、特にループの部分を見てみます!さっきの single-informations.php のループと違うところがあるので注意してくださいね。

information.php のメインループ
<?php
$args = array(
     'post_type' => 'informations', /* 投稿タイプを指定 */
     'paged' => $paged,
); ?>
<?php query_posts( $args ); ?>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); 
	/* ループ開始 */ ?>
    <div class="post">
    	<h3><?php the_title(); ?></h3>
    	<p class="post-date"><?php the_time("Y年m月j日") ?></p>
    	<?php the_content(); ?>
    </div>
	<?php endwhile; ?>     
<?php else : ?>
    <div class="post">
		<h3>記事がありません</h3>
		<p>表示する記事はありませんでした。</p>
    </div>
<?php endif; ?>

今回のループでは、if (have_posts()) の前に query_posts() というテンプレートタグが入っていますよね!ここでちょっと query_posts() について、少し詳しく見ていきます。

7. メインループを変更する query_posts

query_posts() は、WordPress のメインループだけを変更する関数です。ループを変更する … というのは、ループに対していろいろな指定をして、細かく設定すること。例えばさっきの information.php を例にしてみましょう。

Attention

2013年3月追記 – 現在は、query_post ではなく、pre get posts フィルターを使用することが強く推奨されています。詳しくは、下記の notnil creation weblog さんの記事で解説されています!

information.php
<?php
$args = array(
     'post_type' => 'informations', /* 投稿タイプを指定 */
     'paged' => $paged,
);
?>
<?php query_posts( $args ); ?>

上記の場合は 2つのパラメータ(配列 $args の中)を指定して、ループを変更しています。

post_type
投稿タイプを指定しています。今回は自分で作った informations を指定しました。例えば page にすれば固定ページ、post にすればブログの記事になります。
paged
これは何ページ目か … ということを指定します。何ページ目というのは、記事が増えてきた時に 1ページでは表示しきれませんよねー。なのでページャーを使って、ページを複数に分ける事があると思います。その「何ページ目」かを指定するパラメータです。
WP Pagenavi のページャー

WP Pagenavi のページャー

今回は WP Pagenavi というプラグインを使ってページャーを付けています。このブログでも使っていますし、人気のプラグインなので、利用している人も多いと思います!

少し横道にそれましたけど、query_post() で指定できるパラメータは、他にもたくさんあります!詳しくは WordPress Codex を参照してみてくださいね。

ATTENTION

ここでとても大事な注意事項があります。query_post() はメインループだけに使えるテンプレートタグだということ。

これから同じページ内で複数のループを使っていきますが、query_posts() はメインループに使います。なので簡単に言ってしまうと、基本的に query_posts() は 1ページに1回しか登場しません。

query_posts() を複数使うと、ページャーが上手く機能しなくなったり、サイドバーでの表示がおかしくなったり … といい事はありません。もともとメインループに使っていいテンプレートタグなので、当然と言えば当然ですねー。

また、カスタマイズしたループをリセットして、もとの WordPress ループに戻す関数、wp_reset_query() も大切です。今回は省略しますけど、合わせてチェックしておきたい関数です。

8. 1ページの中で複数のループを使う その1

さっきはメインのループを、query_posts() を使って変更してみました。でもページによっては、複数のループを表示したいこともあります。例えば今例にあげている「お知らせ一覧」ページでも、複数のループを使っています。

ふたつのループ

ふたつのループ

固定ページで投稿したコンテンツを表示するループと、カスタム投稿「お知らせ」を一覧表示するループ。

8.1. メインループとサブループ

ページ下部のメインループは先ほど説明した部分、カスタム投稿タイプ – informations を一覧表示している部分です。こっちがページャーなどを利用するのでメインループになります。ではページ上部にある固定ページのループというのは何でしょう?

このページは前述した通り固定ページで作られていますから、当然固定ページで投稿した内容が表示できますよねー。なので固定ページのループとは、その部分を表示するためのループのこと。

一覧表示をしたいだけのページなので、個別ページの投稿は空っぽでもいいんですけど、ここに画像を入れたりすればアイキャッチ画像としても使えるかもですね!

8.2. サブループ

それでは固定ページの内容を表示するループ(サブループ)を見てみましょう。サブループで注意するのは、query_posts() を使ってはいけないということでしたね!なので今回は新しいクエリオブジェクトを生成して、もうひとつのループを作ってみます。

サブループ
<?php $loop = new WP_Query('page_id='.$post->ID); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post();
	/* ループ開始 */ ?>
	<div  class="page">
		<?php the_content(); ?>
	</div>
<?php endwhile; ?>

WP_Query に渡してるパラメータ page_id で、表示中の記事の ID(この場合はお知らせ一覧という固定ページ)を指定しています。

また、複数のループは、記事下やサイドバーなどで関連記事を表示したり、いろいろなところで使われます。しつこいようですが、基本的に query_post() はメインループに使うテンプレートタグなので、その他のループ(サブループ)には使わないようにします。

サブループの例(サイドバー)

サイドバー

でも、WordPress Codex のループの項を見てみると、複数のループで query_posts() を使ってる例が載ってるんですよね。

query_posts() での複数ループの例
// going off on my own here
<?php $temp_query = $wp_query; ?>
<!-- Do stuff... -->

<?php query_posts('category_name=special_cat&posts_per_page=10'); ?>

<?php while (have_posts()) : the_post(); ?>
  <!-- Do special_cat stuff... -->
<?php endwhile; ?>

// now back to our regularly scheduled programming
<?php $wp_query = $temp_query; ?>

こんな風にもともとのクエリを一度 $temp_query に代入、サブループが終わった後で $wp_query$temp_query を戻してあげればいいみたいですねー。

ちょっと横にそれましたけど、複数のループを使って、カスタム投稿のお知らせを一覧表示するページができました!

サイトマップ

お知らせ部分は完成!

9. ブログのトップページを作る

今度はさっきの「お知らせ一覧」と同じ要領で、ブログのトップページを作ってみます。

ブログのトップページ

普通ブログのトップページは index.php を使いますよね。でもこのサンプルサイトの場合は、トップページは home.php で作っていますし、ブログのトップページ = Webサイトのトップページではありません。ではどんな風にしてブログのトップページを作ればいいでしょう?

私はさっきの「お知らせ一覧」の時と同じように、専用の固定ページを使ってブログのトップページを作っています。まずはさっきと同じように、固定ページ用のテンプレートファイルをつくります。ファイルの冒頭で、コメントしてテンプレートの名前を付けるのを忘れずに!

PHP
<?php

/* Template Name: Blog */


get_header(); ?>

今回はテンプレート名には「Blog」という名前をつけて、ファイル名には blog.php として保存しました。それではブログの記事を一覧表示するためのテンプレートファイル、blog.php の中身、ループの部分を見てみます。

blog.php
<?php
$args = array(
	'post_type' => 'post', /* 投稿タイプ */
	'paged' => $paged
); ?>
<?php query_posts( $args ); ?>
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); 
	/* ループ開始 */ ?>
	<div class="post">
    		<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
    	<p class="date"><?php the_time("Y年m月j日") ?></p>
		<?php the_post_thumbnail(); /* アイキャッチ */ ?>
    	<?php the_excerpt(); ?>    
        <a class="more-link" href="<?php the_permalink() ?>">続きを読む »</a>
    </div>
	<?php endwhile; ?>       
<?php else : ?>
    <div class="post">          
    	<h3>記事がありません</h3>
    	<p>表示する記事はありませんでした</p>
    </div>
<?php endif; ?>

さっき作った「お知らせ一覧」ページのときと、基本的には同じです。違うのは query_posts() に渡すパラメータの部分。

  • $args = array(
  • 	'post_type' => 'post',
  • 	'paged' => $paged
  • );
  • query_posts( $args );

post_typepost にしてあげれば、ブログの記事だけを表示するループになりますよね!たったこれだけです。ループの中は「お知らせ一覧」のときと違って、アイキャッチ画像を表示したり、続きを読むリンクを表示したりしていますが、基本的な構造は同じです。

これでブログのトップページができちゃいました ;D ブログの個別記事については、普通に single.php を使えばいいので、今回は省略します。

サイトマップ

ブログのトップページの完成

10. カスタム投稿を使って「製品」ページを作る

このサンプルサイトでは、「お知らせ」と「ブログ」の他に、もうひとつ更新型のコンテンツがあります。新製品がでる度に、その「製品」を紹介するページです。これは先ほどの「お知らせ」と同じように、カスタム投稿タイプを使えば問題なさそうですね!

カスタム投稿タイプ「製品」

まずは前述した Custom Post Type UI プラグインを使って、製品というカスタム投稿を作ります。投稿タイプ名は products にしました。

「製品」というカスタム投稿

そして今回は、カスタム分類(カスタムタクソノミー)機能を使って、「ルームタイプ」「家具の種類」という分類も付けています。

11. カスタム分類(タクソノミー)

カスタム分類とは、ブログでいうカテゴリータグみたいな感じです。使い方はブログのカテゴリーやタグと基本的に同じでで、それぞれの製品(家具)を好きなように分類しておけば、あとで一覧表示させるページを作る時にとっても簡単になるんです!

カスタム分類

カスタム分類

ブログでいう「タグ」みたいな感じです!

前半で作った「お知らせ」は特に分類しませんでしたけど、今度の製品は、以下のようになっています。

「白いソファー」という製品の分類は …
  • ループタイプ … リビングルーム
  • 家具の種類 … ソファー
「白いチェア」という製品の分類は …
  • ルームタイプ … リビングルーム、ダイニング
  • 家具の種類 … チェア

という感じで分けておきます。

あ、肝心なカスタム分類の作り方を忘れてました …。カスタム分類も、先ほどのプラグイン Custom Post Type UI を使えば簡単に作る事ができます。以下の過去記事で使い方を書いた事があるので、参考にしてみてくださいね!

11.1. カスタム分類のスラッグ

さて、ここでカスタム分類について、もう少し詳しく見ていきますね!カスタム分類には、スラッグという名前みたいなものがあります。ブログのカテゴリーやタグにも、このスラッグがあるので馴染みのある人も多いと思います。

まずはこのスラッグを、半角英数字にしておきましょう。というのは、このスラッグをパーマリンク(URL)や、PHP のコードの中で使うからなんです。

以下は「家具の種類」というカスタム分類の中の分類(これらひとつひとつのことを「ターム」term と言います)です。スラッグを全部半角英数字にしてあります。

スラッグ

スラッグは半角英数字にしておこう

スラッグは URL や PHP のコードの中で使います。

ちょっと前後しちゃいましたけど、親?であるカスタム分類の名前も合わせてチェックしておきます。こちらも同じようにパーマリンクや PHP のコードの中で使いますので、半角英数字にしておきましょう。(UTF-8 なら日本語でもいいのかな?やったことないんですけど …)

下記は今回作ったふたつのカスタム分類の名前です。「ルームタイプ」と「家具の種類」はラベルで、名前自体は半角英数字になってます。

カスタム分類名も半角英数字で

画面はプラグイン – Custom Post Type UI の管理画面です。

それではここまで出来たら、試しにブラウザで、URL を以下のように入れてアクセスしてみます。

URL の構造は以下のようになっているんです。

http://example.com/カスタム分類名/タームのスラッグ/

11.2. カスタム分類を表示する taxonomy.php

そしてこのカスタム分類を表示しているテンプレートファイルが、taxonomy.php というファイルです。もちろんこれにも、もうお馴染みのテンプレート階層があります。

カスタム分類のテンプレート階層
  1. taxonomy-{taxonomy}-{term}.php
    このサンプルサイトを例にすると taxonomy-item-sofa.php とかになります。
  2. taxonomy-{taxonomy}.php
    このサンプルサイトを例にすると taxonomy-item.php とかになります。
  3. taxonomy.php
  4. archive.php
  5. index.php

今回は「製品」でしかカスタム分類を使っていないので、3番目の taxnomy.php を作って表示させる事にします。

Attention

今気がついたんですけど、1番上と2番目のテンプレートファイルを使うなら、カスタム分類名にハイフン(-)入れない方がいいかもですねー …。

私、「room-type」って名前にしちゃいましたけど、一番上のファイル使うと、taxonomy-room-type-living.php みたいになるし、2番目の場合は taxonomy-room-type.php というように一個余分にハイフンがはいっちゃいますねー …。WordPress がちゃんと認識してくれないかも …。失敗、失敗 X(

それでは taxonomy.php の中身、ループの部分を見てみます。

taxonomy.php
<?php if (have_posts()) : ?>
	<?php while (have_posts()) : the_post(); 
    /* ループ開始 */?>
    <div class="post">
		<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>         
		<?php the_post_thumbnail(); ?>
		<?php the_excerpt(); ?>
        <a class="more-link" href="<?php the_permalink() ?>">詳しく見る</a>
    </div>
	<?php endwhile; ?>
<?php else : ?>
    <div class="post">
		<h3>製品がありません</h3>
		<p>表示する製品がありませんでした</p>
    </div>
<?php endif; ?>

特別な事もなく、一般的なループと同じです。テンプレート階層によって優先されて使用されるテンプレートファイルでは、特にループに指定しなくてもいいので楽ちんですね!

これでカスタム分類で表示している「部屋タイプの一覧表示」「家具の種類での一覧表示」の 2ページができました。

サイトマップ

カスタム分類ページ

12. 製品(カスタム投稿)の個別記事用の single.php

それでは次に、個別の製品(家具)を表示するためのテンプレートファイルを作ります。

「製品」の個別ページ

製品は products という投稿タイプ(ブログは post、固定ページは page でしたね!)なので、single-products.php という名前のテンプレートファイルを作れば OK です。これはお知らせのときに作った、single-informations.php と同じ感じですね!

13. 1ページの中で複数のループを使う その2

先ほどの個別の「製品」を表示する single-products.php では、記事の下に関連製品を表示しています。もちろんこれにはサブループを使用します。

関連製品

関連製品

同じ「ルームタイプ」、同じ「家具の種類」の製品を表示しています。

この部分は、single-informations.php で現在表示されている製品と、「同じ部屋タイプ」「同じ家具の種類」に分類されている他の製品を表示しています。サブループなので query_posts() は使わないで、今度はテンプレートタグ get_posts() を使って表示してみます。

13.1. ループで何を取得するかを配列に入れる

今回はちょっとたくさんパラメータがあります。まずは何を取得するのかを、配列にいれますね。

single-products.php

<?php
$args = array(
	'post_type' => 'products',
	'post__not_in' =>  array($post->ID),
	'orderby' => 'rand',
	'posts_per_page' => 6,
	'tax_query' => array( /* カスタム分類 */
		'relation' => 'OR',
			array(
				'taxonomy' => 'room-type',
				'field' => 'slug',
				'terms' => $room_type_slug,
			),
			array(
				'taxonomy' => 'item',
				'field' => 'slug',
				'terms' => $item_slug,
			)
		)    
	);
?>

ちょっと難しそうですねー。でもよーく見てみると、馴染みのあるパラメータもありますね!上から順番に見ていきましょう!

'post_type' => 'products'
投稿タイプ ‘products’ を指定します。
'post__not_in' => array($post->ID)
今表示されている投稿を除きます。
'orderby' => 'rand'
表示するものをランダムにします。
'posts_per_page' => 6
表示される最大の数です。

ここまでは特に問題なさそうですねー。では続きです。

'tax_query' => array(
	'relation' => 'OR',
	array(
		'taxonomy' => 'room-type',
		'field' => 'slug',
		'terms' => $room_type_slug,
	),
	array(
		'taxonomy' => 'item',
		'field' => 'slug',
		'terms' => $item_slug,
	)
)

tax_query で、カスタム分類についての指定を行います。今回は複数のカスタム分類(タクソノミー)を使っているので、まずはふたつの分類の関係を relation で決めています。

  • 2. 'relation' => 'OR'

今回は、「部屋タイプが同じ」または「家具の種類が同じ」という取得の仕方なので OR にしています。もし「部屋タイプが同じ」かつ、「家具の種類が同じ」という条件であれば、AND にします。プログラムに馴染みがあれば簡単ですね!

その下の配列で、カスタム分類(部屋タイプと家具の種類)と、その分類(リビングルームとかダイニングとか)を指定していきます。

'taxonomy' => 'room-type'
カスタム分類名です。
'field' => 'slug'
ここはどんなフィールドでタームを指定するかです。ちょっと後述します。
'terms' => $room_type_slug
実際にタームをいれます。今回は変数 – $room_type_slug に配列で代入されています。

ちょっと分かり難いですね … X( まず 'taxonomy' => 'room-type' の部分は簡単ですね!カスタム分類名(ここでは room-type)を入れるだけです。

その後のフィールドというのは何でしょう?今回はスラッグ(前述しましたね!)を指定していますが、他にもタームの IDで指定したりできます('field' => 'id')。

ターム … 覚えてますか?少し前にも登場しましたが、これはカスタム分類で分類されたひとつひとつの分類名のこと。

term

タクソノミーとターム

各カスタム分類(taxonomy)の中の、ひとつひとつがターム(term)です。上の図で言うと、room-type はカスタム分類名(taxonomy)、リビングルームとかダイニングとか、チェアとかテーブルがターム(term)です。

さっきの説明は、これらのタームをスラッグで指定するという意味です。

そして最後の 'terms' => $room_type_slug の部分で、タームをスラッグで指定するわけですねー。変数になっていますけど、実際は以下のようになってるんです。

'terms' => array( 'living','dining')

$room_type_slug に入れるタームは、get_the_terms() 関数などで別途取得しておきます(今回は説明が長くなるので省略します …)。

13.2. get_posts でサブループを作ろう

それではサブループの続きです!

single-products.php
<?php $myposts = get_posts($args); ?>
<?php
foreach($myposts as $post) :
     setup_postdata($post);
?>
	<div class="post">
		<h3><?php the_title(); ?></h3>
		<?php the_post_thumbnail(); ?>
		<a class="more-link" href="<?php the_permalink() ?>">詳しく見る</a>
	</div>
<?php endforeach; ?>

get_posts() のパラメータに、さっきの配列 $args をいれてオブジェクトを取得。そのあと foreach でループを回します。これが get_posts() を使った場合のループです。

同じようなことを、前半使った WP_Query を使ってやってみると、以下のようになります。

WP_Query を使ったループ
<?php  $args = array(
	/* ここは同じなので省略 */
);?>
<?php $loop = new WP_Query($args); ?>
<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
	<div  class="page">
		<h3><?php the_title(); ?></h3>
		<?php the_post_thumbnail(); ?>
        <a class="more-link" href="<?php the_permalink() ?>">詳しく見る</a>
	</div>
<?php endwhile; ?>

もちろん get_posts() を使う場合と WP_Query を使う場合とでは違いもあります。例えば WP_Query では、query_posts() と同じパラメータが使えます。

それに対して get_posts() は、シンプルに複数ループを作る為のテンプレートタグです。WP_Query に比べると使えるパラメータに限りもあるので、ループで何をしたいかによっても使い分けたりします。

Attention

追記 – コメントで教えていただきました!ladybug さん、ありがとうございます!WordPress 2.6以降では、get_posts でも query_posts と同じパラメータを取ることができます。Codex にも書いてありました ….。私の勘違いでした。すいません X(

サブループについて、少し寄り道してしまいましたけど、これで製品を表示する single-products.php ができました!

サイトマップ

「製品」の個別ページの完成

もうちょっとで完成ですね!

14. index.php は何に使うの?

ここでやっと index.php の出番です。今まで index.php は一度も登場していませんでしたけど、index.php は WordPress に無くてはならないテンプレートファイルです。ではこのサンプルサイトでは、どのページで使われるかというと …

  • 検索結果を表示するページ
  • ブログのカテゴリーをクリックした時に表示されるページ

上記ののふたつです。でもブログにタグを使えば(今回は使ってません)タグページでも使いますし、月別のアーカイブを表示すれば、アーカイブページでも使われます。これは何度も出てきているテンプレート階層によって、最終的には必ず index.php が使われるからです。

そんなわけで、サンプルサイト内では、上記の 2つのページが index.php で表示されてます。

15. ブログの個別記事 single.php、404ページの404.php

残す所は、ブログの個別記事を表示する single.php と、404 Not Found 時に表示する 404.php を作れば完成です!私は必ず 404.php を作るようにしてるんですけど、これも無くても構いません。その場合はテンプレート階層によって、index.php で表示されるだけです。

これで全てのページが完成しました!

サイトマップ

完成!

今回使ったテンプレートファイルを整理してみると、以下のような感じです。

  • header.php – ヘッダー部分
  • sidebar.php – サイドバー部分
  • footer.php – フッター部分
  • home.php – トップページ用
  • page.php – 固定ページ用のデフォルトテンプレート
  • informations.php – 固定ページ「お知らせ」用のテンプレート
  • blog.php – 固定ページ「ブログ」用のテンプレート
  • single.php – ブログの個別記事用
  • single-informations.php – お知らせの個別記事用
  • single-products.php – 製品の個別記事用
  • taxonomy.php – カスタム分類表示用
  • index.php – カテゴリー表示、検索結果表示用
  • 404.php – 404 Not Found用
  • functions.php – オリジナル関数用ファイル

16. カスタムメニューを使って、ナビゲーションを作る。

サイトの構造的なファイル群はこれで完成しましたけど、今度はナビゲーションを作ります。

ナビゲーション

ナビゲーション

「カスタムメニュー」を使ったナビゲーション

このサンプルサイトでは色んな固定ページが、ナビゲーションのメニューになっています。このような場合、以前ならテンプレートタグ wp_list_pages() を使ってました。でも WordPress 3.0 以降は、カスタムメニューという機能が加わっているので、そっちの方がなにかと便利です。もちろんこのサンプルサイトでも、カスタムメニューを使ってナビゲーションを作っています。

まず、このカスタムメニューを使うには、functions.php に以下を書く必要があります。

functions.php
/* カスタムメニュー */
add_theme_support( 'menus' );

すると 管理画面 → 外観 の中に、メニューという項目ができます!あとはメニューに名前をつけて、使いたい固定ページなどを追加するだけです。

カスタムメニュー

カスタムメニュー

好きなページをメニューに追加して、ナビゲーションを作る

今回は作ったメニューに、main-navi という名前をつけて保存しました。このメニューは、名前を変えて複数作る事ができます。

サンプルサイトではヘッダーのナビゲーションや、フッターのナビゲーションなど、複数のメニューを使っています。順番も簡単に管理ページから入れ替える事ができるので、とっても便利です。もちろんリンクの階層(入れ子のリスト)を付けることだってできます。

あとは header.php などのナビゲーションを表示する部分に以下を追加するだけです。

header.php
<?php wp_nav_menu( array('menu' => 'main-navi' )); ?>

ul、li タグで出力されるので、あとは CSS で装飾すればできあがり!

MEMO

カスタムメニューでは、テーマのどこにメニューを表示させるか?という「テーマの場所」機能があります。今回は省略していますが、興味のある人は WordPress Codex を参照してみてください。

17. body_class() がとっても便利

WordPress には、body タグに色んなクラスを付けてくれる body_class() というテンプレートタグがあります。header.php 内の body タグを以下のように書くだけなので、とっても簡単に利用できます。

header.php
<body <?php body_class(); ?>>

例えばどんなクラスが付くかというと …

  • トップページ – home など
  • 固定ページ – page-template-default、page-id-8、page-parent、page-child など
  • タクソノミーページ -tax-room-type、tax-item など
  • カスタム投稿の個別ページ – single-products、single-informations など

上記のように、そのページをピンポイントで指定できるようなクラスや、テンプレートファイル毎のクラスなど、いろいろなクラスが付くんです。なので CSS で装飾する為にテンプレートファイル内で、わざわざ条件分岐のコードを書いてクラスをつけたりする必要もなくなります。body_class()、とっても便利ですね!

例えばサンプルサイトでは、同じテンプレートファイルを使っていても、この body_class() を利用して、サイドバーの位置を全く逆にしたりしています。

同じテンプレートファイルで、レイアウトだけを変更

body_class()でレイアウト変更

通常は左側にサイドバー、ブログのときは右側にサイドバー

body_class() の他にも、ボックスにクラスを付ける post_class() なんていうテンプレートタグがあるので、合わせて使ってみるといいかもですね!

18. ループ内でしか使えない関数、ループ外でも使える関数

WordPress で Webサイトを作るとき、いろいろカスタマイズしなければなりません。その為に WordPress には、テンプレートタグと呼ばれてる関数がたくさんありますよね!とっても便利なテンプレートタグなんですが、使う時に注意したいことがあります。

Attention

この記事の中でも何度か登場したループ。WordPress のテンプレートタグは、使用できる位置が決まっていて、ループ内でしか使えないものや、ループ外で使うもの、また使い方によって(パラメータを指定したりなど)どっちでも使えるものなどがあります。

例えば記事のタイトルを表示するときには、以下のテンプレートタグが使えますけど、それぞれ使える場所が違います。

  • single_post_title() – ループ外でタイトルを表示する
  • the_title() – ループ内でタイトルを表示する

こんな風に同じようにタイトルを表示するテンプレートタグでも、ループ内ループ外で別の関数になってたりします。でも、ループ内で使えるはずの the_title() を、ループ外に記述してもタイトルを表示してくれます。

表示されればどっちでもいいじゃない!って思う人もいるかもしれないですけど、この先 WordPress がバージョンアップを重ねていって、いずれは表示されなくなったりするかもしれません …。なのでテンプレートタグは、ちゃんと使っていい場所で使うようにしています。

使っていい場所は、WordPress Codex でテンプレートタグを見ると載っているので、それぞれ参照してみてくださいね!下記はさっき例にあげた、ふたつのテンプレートタグです。

19. WordPress で jQuery を読み込む

とーっても長くなったので最後にしますね。WordPress サイトで jQuery を使うこともあると思います。WordPress ではない Webサイトの場合、jQuery を使うときは必ず下記のように head 内などで jQuery を読み込みますよねー。

HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

でも、WordPressの場合は head内に上記のように、直接リンクを貼りません。

まず、WordPress には、もともと jQuery がインストールされています。管理ページを見ると、タブやアオコーディオンなどがたくさん使われていますよね!これらは jQuery を使って表現されています。

なのでもともとインストールされている jQuery をそのまま使います。実際にどうやって jQuery を読み込むかというと、いろいろ書き方があるんですけど、分かりやすいのは head 内の wp_head() より上に、下記のように wp_enqueue_script() 関数で記述します。

header.php
<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head() ?>

こう書くだけで、WordPress の中にインストールされている jQuery を読み込んでくれます。でも WordPress は常にバージョンアップを重ねますよね。それに伴って、jQuery も最新版がインストールされていきます。例えば今の WordPress 3.3 の jQuery のバージョンは、1.7.1です。

場合によっては、古い jQuery を使いたい!という場合もあるかもしれません。そんなときは、functons.php に以下のように書きます。

functions.php
<?php 
function my_scripts_method() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
    wp_enqueue_script( 'jquery' );
}
add_action('wp_enqueue_scripts', 'my_scripts_method');
?>

こうすると、wp_head() によって読み込まれる jQuery は、自分で指定した 4行目の jQuery になります。

19.1. jQueryのプラグインを読み込む場合

jQuery のプラグインをテーマで使いたい場合もあると思います。そんなときも、head内に直接リンクを貼らずに、下記のように書きます。

header.php
<?php wp_enqueue_script('easing', get_bloginfo('template_url') . '/js/jquery.easing.js', array('jquery')); ?>
<?php wp_enqueue_script('funcybox', get_bloginfo('template_url') . '/js/jquery.funcybox.js', array('jquery')); ?>
<?php wp_head(); ?>

上記は jQuery の easing プラグインと、funcybox プラグインを読み込んでいる例です。こういう風に書くと、jquery.easing.js を読み込む時に、一緒に jQuery を読み込んでくれます。

今回は分かりやすく、head 内に書く方法でしたけど、functions.php に記述する方法もあります。その方法は、過去記事にかいてあるので参考にしてみてくださいね!

19.2. 自分で jQuery のコードを head 内に書く場合

先ほど jQuery を読み込む記述は、wp_head() より前に書くと言いました。でも自分で jQuery のコードを head 内に書く場合は、wp_head() より後ろに書きます。

header.php
<?php wp_enqueue_script( 'jquery' ); ?>
<?php wp_head(); ?>
<script type="text/javascript">
jQuery(function(){ 
    /* ここに書きます */
});
</script>

なんでかというと、jQuery の読み込みは、wp_head() が行います。なので wp_head() が jQuery へのリンクを出力した後に書かないと、いくら jQuery のコードを書いても動きませんよねー X(

19.3. どうしてそんな面倒なことをしなくちゃならないの?

先ほど head 内などで、直接 jQuery へのリンクを貼らない … と書きました。でも何でそんな面倒なことをしなくてはならないのでしょう?

簡単な例で説明しますね!例えばお問い合わせフォームを付ける、Contact Form 7 というプラグインを WordPress にインストールしたとします。このプラグインは、動作の為に jQuery を使っているので、プラグインを有効可すると、もともと WordPress にインストールされている jQuery を読み込みます。

もしこのときに head 内に jQuery への直接リンクが貼ってあったら、どうなるでしょう?実は下記のように head 内に出力されます。

HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel='stylesheet' id='contact-form-7-css' href='http://example.com/wp-content/plugins/contact-form-7/styles.css?ver=3.0.1' type='text/css' media='all' />
<script type='text/javascript' src='http://example.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script>

1行目と 3行目。自分で直接リンクを貼った jQuery と、プラグイン(WordPress)が表示する jQuery のリンクがふたつ表示されてます …。つまり2回 jQuery を読み込んでいる事になりますねー。

今回は Contact Form 7 を例にしましたけど、jQuery を使っているプラグインは他にもたくさんあります。

先ほどのように wp_enqueue_script() を使えば、こういった競合を防いでくれるので、WordPress で jQuery を読み込むときは、wp_enqueue_script() を使った方がいいですね!

19.4. WordPress では jQuery UI もそのまま使えます!

アコーディオンやタブなど、いろんな UI を簡単につかえる jQuery UI。このブログでは jQuery UI について書いた事がなかったので、どんなものかというのは jQuery UI のデモを見てくださいね!

とにかく jQuery UI を使えば、タブやアコーディオン(他にもたくさんありますが …)を簡単に設置することができるんですね!そしてこの jQuery UI も、WordPress には最初からインストールされています。

なので利用する時には、header.php の wp_head() や footer.php の wp_footer() の前に以下を書き込みます!

header.php
<? wp_enqueue_script( 'jquery-ui-tabs' ); ?>
<? wp_enqueue_script( 'jquery-ui-accordion' ); ?>

上記はタブとアコーディオンを読み込む場合です。これだけ記述すれば、自動的に jQuery 本体も読み込んでくれるし、jQuery UI のコアファイルも読み込んでくれます(wp_head()の前に書いても、フッター付近に出力されます)。

このサンプルサイトでも、jQuery UI を使ったアコーディオンとタブを使ってみました!

jQuery UI を使った UI

今回はアコーディオンとタブだけですけど、他の UI の読み込み方は、WordPress Codex を参照してみてくださいね!

20. 最後に

今回は WordPress でブログじゃない Webサイトを作るとき、私がしている事をまとめてみました。本当はパンくずリストやサイドバーとかも書きたかったんですけど、長くなりすぎたのでおしまいにします。

また、Webサイトの構造は多種多様ですし、私はこんな風にして WordPress を利用している一例として読んでもらえたなら嬉しいです。

私は誰かに WordPress を習った訳ではないので、間違った使い方をしている部分もあるかもしれません。いつも WordPress Codex を見ながら、自分なりにこんな風にして Webサイトを構築しています。もし間違っているところや、もっとこうした方がいいよ!というところがあったら、教えていただけると嬉しいです。

とても長い記事になってしまいましたけど、最後まで読んでくれてありがとうございました ;D

  • 今回サンプルサイトでお世話になったプラグイン

    Custom Post Type UI – カスタム投稿タイプを管理するプラグイン

    WP-PageNavi – ページャーを設置するプラグイン

    Contact Form 7 – お問い合わせフォームプラグイン

    Really Simple CAPTCHA – お問い合わせフォームにキャプチャ(スパム対策で付けました)

フォームをダミーにしたので、Contact Form 7 は動作していません。

Comments

Thank you for the comment.