[連載]WordPressでWebサービスを作る方法（5:WPをCMSとして使う）

さて、ここからはWordPressを単なるブログ構築ツールとしてではなく、Webサービス用のCMS（コンテンツ管理システム）として活用する方法について書いています。
そもそも、なぜ今回素材サイトをWordPressで構築しようと思ったかというと、

  • 1からWebサービスを作るより既存のシステムを使ったほうが早くできそうだから
  • WordPressは元々ブログ用のシステムで、記事の多いWebサービスに向いてそうだから
  • WordPressはギャラリーサイトとしての実績もあるから
  • WordPressはたくさんのユーザーで記事を編集できるので、もしデータ入力（写真へのタイトルやタグづけ等）を外注することになっても大丈夫そうだから
  • WordPressはGoogleなどの検索エンジンフレンドリーだから

などです。
WordPressを使えば、基本的にはテーマを作ってプラグインを入れ記事を書けばサイトが出来ますが、もし1から作ると結構大変ですからね。

最後の “WordPressはGoogleなどの検索エンジンフレンドリーだから” というのは、要するにWordPressは内部SEOに優れているということですね。
WordPressにおける内部SEOについては、後のページで詳しく解説します。

WordPress 日本公式キャラクター

↑は WordPress 日本公式キャラクター「わぷー」です。

目次

  1. PHPとは
  2. 開発環境の構築
    • MAMPやXAMPPのインストール
  3. WordPressとは
    • WordPressの仕組み
    • WordPressで作られたWebサイトやWebサービス
    • WordPressでWebサービスを作るために何をしなければならないのか
  4. WordPressテーマの作り方（⇐今ここ）
    • WordPressの「テーマファイル」とは
    • WordPressのテーマファイルを作る: Free.Stockerの場合
    • functions.php とは
    • loop.php とは
  5. WordPressをWebサービス用のCMSとして使うために
    • 写真のアップロード先
    • 「カスタムフィールド」とは
    • functions.php とは
    • loop.php とは
  6. WordPressとSEO
    • SEOについて
    • SEOはSEO業者でないとできない？
    • 内部SEOと外部SEO
    • WordPressはSEOに向いている
    • SEOケーススタディ: フリー写真素材サイトの場合
    • All in one SEO Packの設定
    • 共起語SEO
    • ケーススタディ: うさぎの飼育用品のECサイト「うさぎのしっぽ」
    • 便利なツール
  7. ソーシャルメディアマーケティング
    • 「ソーシャルメディア」とは何か
    • SMOとは具体的にどんなものか？
    • SMOの実践
    • ソーシャルメディアからの人の流れ
    • はてブのホッテントリに自分のWebサービスやブログ記事を載せる方法
    • はてブでの自作自演は無視される
    • はてブされる記事やWebサービスを作るために
    • シェアされやすいコンテンツとは
  8. サーバ選びと高速化
    • WordPressのためのサーバ選び
    • WordPressを高速に動かすために
  9. おすすめのプラグイン
  10. 資料

※最後の方は多少内容が変更になる可能性があります。

写真のアップロード先

写真素材サイトを作るにあたって、真っ先に困ったのが写真のアップロード先です。

アップロードしたい素材写真は30GB近くあるのですが、私が借りている格安レンタルサーバは容量が15GBしかありません。
今後も写真が増えることを考えると60GB位は欲しいかなと思いますが、そうするとかなり月額料金の高いサーバを借りなければなりません。
しかも、写真は最大800万画素もあるので、PV（ページビュー）が増えてくると一気にサーバの負荷が増えそうです。

そこで良いサービスがないか探していたところ、米 Yahoo! が運営している Flickr という写真共有サービスが有料ではありますが、年間 $24.95 で高解像度の写真を無制限にアップロードできることを知りました。

しかも、imgタグを使って別のサイトで写真を利用することができるため、今回は Flickr に写真をアップし、WordPressにはURLを

1
2
3

<a href="Flickrへのリンク" target="_blank">
<img src="Flickr写真（中）サイズ" width="640" height="480" />
</a>

のようにすることにしました。
リンク先が直接写真ではなく Flickr のページになっているのは、Flickr の規約で写真への直接のリンクは禁止されており、リンク先は Flickr のページでなければいけないことになっているからです。

「カスタムフィールド」とは

WordPressをCMS的に使おうとした場合や本格的なWebサービスをつくろうとした場合、まず知るべきなのはWordPressの「カスタムフィールド」という機能だと思います。

最初は、素材サイトの記事ページ（写真を大きく表示するページ）はWordPress管理画面から記事の本文に

<a href="写真（大サイズ）へのリンク" target="_blank">
<img src="写真（中）サイズ" width="640" height="480" />
</a>

みたいに書こうかと思っていました。
しかし、これだと管理がしづらい（あとでまとめて変更のような事がしづらい）ですし、沢山の方で編集しているとソースがごちゃごちゃになってしまいそうですし、そもそも「WordPressってCMS（コンテンツ管理システム）なのにこれはどうよ？」という気がして、もう少しまともな管理方法を考えることにしました。

こういう場合、普通にHTMLタグを書くのではなく、

写真（中）のURL
http://…

写真（小）のURL
http://…

写真（大）のリンク先
http://…

のような対になった情報を記事ごとに持っておいたほうが後々管理しやすそうです。

そこで、カスタムフィールドの登場です。
カスタムフィールドは、このような情報を記事ごとに管理しておくことができるWordPressの便利な機能です。

カスタムフィールドを編集するには、WordPressの管理画面の投稿編集ページ（サイドバーの [投稿] をクリックし、記事タイトルをクリック）に入り、本文を入力する欄の下に [カスタムフィールド] という欄があるはずですのでそこを編集します。

もしカスタムフィールド欄が無かった場合は、投稿編集ページ右上の [表示オプション] をクリックし、[□カスタムフィールド] にチェックを入れてください。

WordPress投稿管理画面　表示オプション

WordPress投稿管理画面　カスタムフィールド

今回、カスタムフィールドはこんな感じにしました。

WordPressのカスタムフィールド

写真（大）のリンク先は「Flickr Page」フィールドに
写真（中）のURLは「Medium (_z)」フィールドに
写真（小）のURLは「Small (_m)」フィールドに
書きました。

(_m)などは、Flickr にアップした小サイズの写真のURLの最後が _m.jpg になっていたので、他のサイズと間違えにくいように書いておきました。

カスタムフィールドを追加するには、カスタムフィールド枠内の [新規追加] をクリックし、分かりやすい名前をつけます。
値の部分には、今回は画像のURLを書きます。

もちろんこれだけでは表示ができないので、テーマファイルの中にカスタムフィールドを表示するためのPHPスクリプトを書く必要があります。

まず、記事ページ（sibgle.php）では写真（中）を表示し、写真（大）のリンク先へリンクを張る必要があります。
つまりこういうことですね。

1
2
3

<a href="写真（大サイズ）へのリンク" target="_blank">
<img src="写真（中）サイズ" width="640" height="480" />
</a>

まず、single.phpのメイン写真を表示している部分↓は

画像表示部分

こんな感じにしました。

single.php

1
2
3
4

<!-- メイン画像の表示 -->
<?php link_custom('Flickr Page'); ?>
<?php image_custom('Medium (_z)'); ?>
</a>

2行目の link_custom(‘Flickr Page’) は、<a href=”写真（大サイズ）へのリンク” target=”_blank”> を出力し、
3行目の image_custom(‘Medium (_z)’) は <img src=”写真（中）サイズ” width=”640″ height=”480″ /> を出力します。
2行目のaタグは4行目で閉じています。

次に、functions.php に2つの関数（link_custom() と image_custom()）の中身を書きます。

functions.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<?php
 
/* カスタムフィールドのリンクを表示する関数 */
function link_custom( $key ) {
 
	// グローバル変数 $post を宣言
	global $post;
 
	// 変数 $custom_field に現在の投稿の Medium (_z) の値を代入
	$custom_field = get_post_meta( $post->ID, $key, true );
 
	// カスタムフィールドが存在するかチェック
	if ( $custom_field ) {
		// もしカスタムフィールドが存在すれば、リンクを表示
		echo '<a href="' . $custom_field . '">';
	} else {
		// もしカスタムフィールドがなければ警告を表示
		echo '★リンクが設定されていません★<a href="#">';
	}
 
}
 
 
/* カスタムフィールドの画像を表示する関数 */
function image_custom( $key ) {
 
	// グローバル変数 $post を宣言
	global $post;
 
	// 変数 $custom_field に現在の投稿の Medium (_z) の値を代入
	$custom_field = get_post_meta( $post->ID, $key, true );
 
	// カスタムフィールドが存在するかチェック
	if ( $custom_field ) {
		// カスタムフィールドがあれば、画像を表示
		echo '<img src="' .$custom_field. '" alt="' . get_the_title() . 'のフリー写真素材" />';
	} else {
		// カスタムフィールドが存在しなければreturn
		return;
	}
 
}

それぞれ20行近くあってややこしく感じられるかもしれませんが、仕組みは実に簡単です。
ここからは各行の解説です。

3
4

/* カスタムフィールドのリンクを表示する関数 */
function link_custom( $key ) {

4行目は「ここから関数を定義しますよ」という宣言のようなもので、4行目の { から21行目の } までが link_custom() 関数になります。

() の中に $key と書いていますが、ここの変数は適当な名前で良いと思います。
ただし、10行目にも $key という変数が書かれており、変数名はここと同じ名前にしておく必要があります。

6
7

	// グローバル変数 $post を宣言
	global $post;

7行目はグローバル変数 $post の宣言です。
通常、関数の中の変数には、関数の外の変数の値は持ち込めません。
例えば、以下のようなPHPがあったとして、実行結果はどうなるでしょうか。

例文

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<?php
 
// 変数 $a に 100 を代入
$a = '100';
 
// 変数 $a を表示
echo '関数の外: ' . $a . '<br />';
 
 
/* 関数 hoge を定義 */
function hoge(){
 
	// 変数 $a を表示
	echo '関数の中: ' . $a . '<br />';	
 
}
 
// 関数 hoge を呼び出し
hoge();
 
?>

4行目で変数 $a に文字列 100 が代入されたので、当然10行目の結果は「関数の外: 100」となります。
さらに、17行目の表示結果は「関数の中: 100」となるでしょうか。

このPHPスクリプトを実行すると、

関数の外: 100
関数の中:

となります。
関数の中の $a には値がないということは、「関数の外での変数 $a 中と関数の中での $a は別物」ということになります。

しかし、関数の外にある変数の値を関数の中でも使いたいということはあるでしょう。
その場合は先程のPHPスクリプトにグローバル変数の宣言を書き加えます。

例文（グローバル変数の宣言を追加）

4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<?php
 
// グローバル変数 $a を宣言
global $a;
 
// グローバル変数 $a に 100 を代入
$a = '100';
 
// 変数 $a を表示
echo '関数の外: ' . $a . '<br />';
 
 
/* 関数 hoge を定義 */
function hoge(){
 
	// グローバル変数 $a を宣言
	global $a;
 
	// 変数 $a を表示
	echo '関数の中: ' . $a . '<br />';	
 
}
 
// 関数 hoge を呼び出し
hoge();
 
?>

変更点は、7行目と20行目で、変数 $a をグローバル変数として宣言しただけです。
これを実行すると

関数の外: 100
関数の中: 100

関数の中でも、関数の外にある変数 $a の値が読めるようになりましたね。

で、話を戻しますがWordPressにおけるグローバル変数 $post はWordPress全体（厳密にはループ内や記事ページなど）で使えるグローバル変数です。

今回は記事ページ内で呼び出した関数で使用しているので、グローバル変数 $post にはその記事に関する情報（記事ID・投稿日・本文・カスタムフィールドの値等）が詰まっています。

具体的にどんな情報が詰まっているか気になる方は、link_custom() 関数の中に

1

var_dump( $post );

という行を追加するか WordPress の $post の中身・内容を調べてみよう | ウェブル という記事をご覧ください。

では、10行目を詳しく見てみましょう。

9
10

	// 変数 $custom_field に現在の投稿の Medium (_z) の値を代入
	$custom_field = get_post_meta( $post->ID, $key, true );

まず get_post_meta() 関数は、カスタムフィールドの値を取得するためのWordPress標準の関数です。

() の中に入れるべき引数は3つあり、それぞれ ( 取得したい投稿のID, 取得したいカスタムフィールドの名前, 文字列として取得するか ) を入れます。

この場合、最初の引数である「取得したい投稿のID」は「$post->ID」になっていますが、これは「この記事のID」を意味しています。

次の「取得したいカスタムフィールドの名前」は「変数 $key」になっていますが、この変数 $key には「Flickr Page」という文字列がすでに入っています。
なぜなら、single.php でこの関数を呼び出すときに

2

<?php link_custom('Flickr Page'); ?>

と、引数に「Flickr Page」を書いていました。
そして、functions.php でこの関数を定義するときに

4

function link_custom( $key ) {

と書いていました。
なので、変数 $key には「Flickr Page」という文字列が既に渡されているのです。

3つめの「文字列として取得するか」には true（真）が入っています。
なので、

9
10

	// 変数 $custom_field に現在の投稿の Medium (_z) の値を代入
	$custom_field = get_post_meta( $post->ID, $key, true );

は、「この記事の, カスタムフィールド ‘Flickr Page’ の値を, 文字列として 変数 $custom_field に代入しろ」という意味です。

カスタムフィールドの値を代入

ここまでで、link_custom() 関数の主要な部分は解説しました。
次はHTMLを表示する部分です。

12
13

	// カスタムフィールドが存在するかチェック
	if ( $custom_field ) {

12行目に if 文がありますが、これは何のために入れているかというと、もしカスタムフィールドが無かったときにエラーメッセージを表示するためです。

変数 $custom_field が空（から）かどうか確かめるには

例文

1

if ( $custom_field != "" ) {

という書き方などもあります。
!= は「等しくない」という意味で “” は空という意味なので、これは「$custom_field が空でなければ」という意味になります。

しかし、PHPでは

1

if ( $custom_field ) {

と書けば、変数の中身が

  • 空
  • 0（数字のゼロ）
  • null
  • false（偽）

のいずれかでなければ最初の { } の中身を実行します。
よって、link_custom() 関数は引数で与えられたカスタムフィールドの値があれば、それをリンク先にする関数であることが分かります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
 
/* カスタムフィールドのリンクを表示する関数 */
function link_custom( $key ) {
 
	// グローバル変数 $post を宣言
	global $post;
 
	// 変数 $custom_field に現在の投稿の Medium (_z) の値を代入
	$custom_field = get_post_meta( $post->ID, $key, true );
 
	// カスタムフィールドが存在するかチェック
	if ( $custom_field ) {
		// もしカスタムフィールドが存在すれば、リンクを表示
		echo '<a href="' . $custom_field . '">';
	} else {
		// もしカスタムフィールドがなければ警告を表示
		echo '★リンクが設定されていません★<a href="#">';
	}
 
}

また、カスタムフィールドの画像を表示する変数もほぼ同様の内容で、リンク先ではなく画像 のURLとして表示するだけです。

24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

/* カスタムフィールドの画像を表示する関数 */
function image_custom( $key ) {
 
	// グローバル変数 $post を宣言
	global $post;
 
	// 変数 $custom_field に現在の投稿の Medium (_z) の値を代入
	$custom_field = get_post_meta( $post->ID, $key, true );
 
	// カスタムフィールドが存在するかチェック
	if ( $custom_field ) {
		// カスタムフィールドがあれば、画像を表示
		echo '<img src="' .$custom_field. '" alt="' . get_the_title() . 'のフリー写真素材" />';
	} else {
		// カスタムフィールドが存在しなければreturn
		return;
	}
 
}

これで、WordPressでWebサービスというか「ギャラリーサイト」を作るために最低限必要な部分の解説は終わりました。

初めてPHPなどのスクリプト言語に触れる方には少々難しく感じられたかもしれませんが、上のソースや下記のページを参考にご自分でテーマファイルを書いて動かしてみれば必ず理解できると思います。
ぜひ挑戦してみてください。

カスタムフィールドについて分かりやすく解説されている記事のまとめ

WordPressのカスタムフィールドについては、かちびと.net にも分かりやすい記事があります。

お手軽WordPress Tips：カスタムフィールドを使ってh1を記事に応じて変更出来るようにする – かちびと.net

私は、最初は下記ページを参考に書いていました。

WordPressのカスタムフィールドを使って画像を反映させる方法と、その画像にjQueryプラグインによるツールチップを実装する方法 – かちびと.net

次回からは、せっかく作ったサービスを沢山の方に使っていただくために、個人でもお金をかけずにできるマーケティング手法について解説したいと思います。
主にSEO、ソーシャルメディアマーケティング、プレスリリースについて解説します。

第6回: WordPressとSEOはこちら