このブログでは何度も触れていますが、3月に フリー写真素材 :: Free.Stocker という無料写真素材サイトをオープンしました。
このサイトは、WordPress というブログ向けの CMS（コンテンツ管理システム）を使って作りました。
このサービスを作った際の手順をケーススタディとして「PHPやWordPressを全く知らない方でも、WordPressでWebサービスを作り、それをたくさんの方に利用して頂ける方法を分かりやすく学べる記事を書こう」と思い書き始めたのがこの記事ですが、「PHPとは」から「WordPressサイトにおける内部SEO」「ソーシャルメディアマーケティング」まで網羅する特大記事になり、1記事として一度に掲載することが難しくなったので、全10回の連載としてお送りします。
WordPressやPHP初心者の方はぜひ1ページ目からソースコードを書き写しながら、既にWordPressに慣れていらっしゃる方は必要な部分だけ読み進められるようにしていますので、興味ある方はぜひお読み頂けると幸いです。
目次
- PHPとは（⇐今ここ）
- 開発環境の構築
- MAMPやXAMPPのインストール
- WordPressとは
- WordPressの仕組み
- WordPressで作られたWebサイトやWebサービス
- WordPressでWebサービスを作るために何をしなければならないのか
- WordPressテーマの作り方
- WordPressの「テーマファイル」とは
- WordPressのテーマファイルを作る: Free.Stockerの場合
- functions.php とは
- loop.php とは
- WordPressをWebサービス用のCMSとして使うために
- 写真のアップロード先
- 「カスタムフィールド」とは
- functions.php とは
- loop.php とは
- WordPressとSEO
- SEOについて
- SEOはSEO業者でないとできない？
- 内部SEOと外部SEO
- WordPressはSEOに向いている
- SEOケーススタディ: フリー写真素材サイトの場合
- All in one SEO Packの設定
- 共起語SEO
- ケーススタディ: うさぎの飼育用品のECサイト「うさぎのしっぽ」
- 便利なツール
- ソーシャルメディアマーケティング
- 「ソーシャルメディア」とは何か
- SMOとは具体的にどんなものか？
- SMOの実践
- ソーシャルメディアからの人の流れ
- はてブのホッテントリに自分のWebサービスやブログ記事を載せる方法
- はてブでの自作自演は無視される
- はてブされる記事やWebサービスを作るために
- シェアされやすいコンテンツとは
- サーバ選びと高速化
- WordPressのためのサーバ選び
- WordPressを高速に動かすために
- おすすめのプラグイン
- 資料
※最後の方は多少内容が変更になる可能性があります。
この記事のターゲット
- HTMLやCSSを使ったコーディング方法は知っているが、PHPやWordPressをあまり使ったことがない方
- WordPressでブログを作ったことはあるが、カスタムフィールドを使ったWebサービスを作ったことはない方
- 検索エンジンを意識したコーディング手法（内部SEO）について知りたい方
- お金をかけずにソーシャルメディアマーケティングをしたい方
ちなみに、私の本業はプログラマーではないので、もしかしたら間違っている箇所やセキュリティ的に問題のある箇所があるかもしれません。
もしそのような箇所を見つけられましたら、コメントや @Stocker_jp まで教えて頂けると幸いです。
PHPとは何か
WordPressはPHPというサーバサイド・スクリプト言語（プログラミング言語の一種）で出来ているので、WordPressでWebサービスをつくろうとした場合、まずPHPについてある程度知る必要があります。
といっても、PHPについてそれほど深く知らなくてもギャラリーサイト程度は作れるようになると思いますので、ここではPHPの初歩について解説します。
PHPとは、Wikipediaによると
PHP: Hypertext Preprocessor（ピー・エイチ・ピー ハイパーテキスト プリプロセッサー）とは、動的にHTMLデータを生成することによって、動的なウェブページを実現することを主な目的としたプログラミング言語、およびその言語処理系である。
PHPは、HTML埋め込み型のサーバサイド・スクリプト言語として分類される。この言語処理系自体は、C言語で記述されている。
ウェブサーバ上で動作し、ウェブサーバ上の文書が要求されるたびに、この文書に記述されたPHPのプログラムを実行し、その結果をウェブブラウザに対して送信する。
ウェブブラウザに送信されるデータは通常のHTMLであり、PHPのプログラムを含まない。この点でHTML埋め込み型のクライアントサイド・スクリプト言語（JavaScriptなど）と本質的に異なっている。
つまり、PHPはHTMLやCSSなどと一緒にWebサーバに置いておくと、サーバ側でプログラムを処理し、処理結果は（一般的には）HTMLとして吐き出されます。
なので、ブラウザとしては通常のHTMLと同じように表示することができます。
図で書くとこんな感じです。
PC側は通常のHTMLと同じように表示するだけですので、頭を使いません。
頭を使わないということは、ブラウザやデバイスに依存しない、つまりIE6やガラケー（従来型の携帯電話）向けのWebサービスを作るときにも使えます。
このようなプログラミング言語のことを「サーバサイド・スクリプト言語」といいます。
サーバサイド・スクリプト言語はPHPの他にも、PerlやRubyなどがあります。
PHPは比較的プログラミング初心者にも分かりやすい簡単な言語で、以前C言語を挫折した私でも数週間勉強しただけでちょっとしたWebサービスを作れるようになりました。
PHPで簡単なプログラムを作ってみましょう。
まず、空のHTMLファイルを作り、拡張子を .html ではなく .php で保存します。
次に、bodyの中に下のように書いてみます。
（doctype宣言やheadタグなどは省略しています。）
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <body> <?php // Hello World と表示 echo "Hello World"; ?> </body> </html> |
4行目の<?php は「ここからPHPが始まりますよ」という宣言で、9行目の?>は「PHPはここまでですよ」という宣言ですね。
それ以外の部分は普通のHTMLと一緒です。
6行目は1行コメントといって、PHPでは // から始まる行はコメント扱いされます。
CSSと同じように /* */ を使って複数行のコメントを書くこともできます。
7行目の echo は、後に続く “” の中身を出力するための命令文（一般的には「構文」といいますが、ここでははじめてPHPに触れる方のために分かりやすく「命令文」と表記しています）です。
行の終わりには、セミコロン ; をつけます。
このPHPをFTP等でサーバにアップロードしてからそのファイルのURLにブラウザからアクセスすると、Hello World と表示されるはずです。
ちなみに、PHP内（echo の後の “” 内を除く）では改行や半角スペースはあってもなくても表示結果は一緒なので、上のPHPは
1 2 3 4 5 6 7 | <html> <body> <?php echo "Hello World"; ?> </body> </html> |
と書いても同じ結果になります。（コメント行は省略しました。）
何度も言いますがPHPはHTMLの中に混ぜられるので、
1 2 3 4 5 6 7 8 9 | <html>
<body>
今日は<?php echo "いい天気"; ?>ですね。
</body>
</html> |
と書けば、ブラウザには 今日はいい天気ですね と表示されます。
もちろん、このPHPだといつも同じ文章しか表示できませんが、どこかのサーバから天気情報を取得し、その情報に基づいて “いい天気” の部分を書き換えればページに天気情報を表示できるわけです。
（PHPを使えば、他のサーバから情報を取ってくることもできます。）
もちろん、PHPは他の言語と同じように if・for・switch・while などの命令文が使えます。
とりあえず覚えておけばすぐ役立ちそうなのは個人的には if 文だと思っていて、例えば
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 | <html> <body> <?php // ランダムに 1 または 2 を生成し、変数 $omikuji に代入 $omikuji = mt_rand(1, 2); // もし、変数 $omikuji に入っている値が 1 なら if ( $omikuji == 1 ) { // 大吉です。 と表示 echo "大吉です。"; // 値が1でなければ（$omikuji に入っている値が 2 なら） } else { // 大凶です。 と表示 echo "大凶です。"; } ?> </body> </html> |
のようにするとおみくじプログラムになります。
（ただし、大吉か大凶のどちらかしか出ません）
ちょっとややこしくなりましたので、今から噛み砕いて説明します。
まず、if というのは「もしも◯◯だったら」文と考えてください。
if 文を、大ざっぱに枠だけ残すとこんな感じになります。
1 2 3 4 5 6 7 8 9 | <?php if ( 条件 ) { } else { } ?> |
もう少し詳しく書くとこうなります。
if のあとに続く( ) の中に条件を書くと、その条件に合致する場合は最初の大括弧 { } の内側（青いエリア）が実行されます。
その場合、else 以降の大括弧（赤いエリア）は無視されます。
もし、条件に一致しない場合は最初の大括弧の内側（青いエリア）は無視され、else 以降の大括弧（赤いエリア）のみが実行されます。
次に、if 文の条件の書き方について説明する前に、PHPにおける = と == の違いについて説明します。
PHPに限らず、多くのプログラミング言語では
1 | a = b |
は「aとbが等しい」という意味ではなく、「bをaに代入する」という意味です。
もう少し噛み砕いて説明すると、「右側にあるものを左側に入れる」という意味です。
入れるということは、容器が必要です。
一般的に、容器には「変数」が使われます。
Wikipediaによると、変数とは
プログラミングにおいて、変数（へんすう、variable）とは、プログラムのソースコードにおいて、扱われるデータを一定期間記憶し必要なときに利用できるようにするために、データに固有の名前を与えたものである。 一人一人の人間が異なる名前によって区別されるように、一つ一つの変数も名前によって区別される。これにより、複数のデータを容易に識別することができる。
ということで、要するに「変数とは、一時的にデータを入れておく容器のこと」だと思ってください。
PHPでは、半角英数字を使って自由に変数名をつけることができます。
ただし、先頭に $ を付けなければならず、数字から始まってはいけません。
（$count1 という変数名はOKだが $1count はNG）
例えば、
1 2 3 4 5 | <?php $a = "ミサワ"; ?> |
というPHPでは、変数 $a の中に ミサワ という値が入っています。
でも、このPHPを実行しても（ブラウザで開いても）何も起きません。
ブラウザに出力するための echo 命令がないからですね。
そこで、echo 命令を付け加えます。
1 2 3 4 5 6 7 8 | <?php $a = "ミサワ"; echo "地獄の"; echo $a; ?> |
すると、ブラウザには 地獄のミサワ と表示されるはずです。
（もし、文字化けした場合は ブラウザメニューの「表示＞エンコード」から適切な文字コードを選んでください。）
PHP内での改行は出力には関係ないので、”地獄の” と $a（中身は “ミサワ”）が連結されて 地獄のミサワ になったわけです。
また、このPHPはこのように書き換えることもできます。
1 2 3 4 5 6 7 | <?php $a = "ミサワ"; echo "地獄の" . $a; ?> |
echo でいくつかの項目を連結するときは、ピリオド . を使えば連結できます。
あるいは、
1 2 3 4 5 6 7 | <?php $a = "ミサワ"; ?> 地獄の<?php echo $a; ?> |
でも 地獄のミサワ と表示されます。
5行目でPHPが閉じられていますが、閉じたからといって変数の中身がリセットされたり消去されたりするわけではありません。
同じファイルの中では、変数の値は保持されています。
なので、地獄の は普通にHTMLの一部として表示され、ミサワ はPHPから出力されましたが、ブラウザでは 地獄のミサワ というように1つにつながって見えます。
話がそれましたが、もう1度おみくじプログラムを見てみましょう。
なんとなく分かってきたでしょうか？
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 | <html> <body> <?php // ランダムに 1 または 2 を生成し、変数 $omikuji に代入 $omikuji = mt_rand(1, 2); // もし、変数 $omikuji に入っている値が 1 なら if ( $omikuji == 1 ) { // 大吉です。 と表示 echo "大吉です。"; // 値が1でなければ（$omikuji に入っている値が 2 なら） } else { // 大凶です。 と表示 echo "大凶です。"; } ?> </body> </html> |
7行目で、mt_rand(1, 2) という “モノ” が、$omikuji という変数に代入されています。
… mt_rand(1,2) ってなんぞ？
実は mt_rand(1,2) は、6行目のコメントにも書いている通り「ランダムに 1 または 2 を生成」する「関数」です。
関数（function）というのは、IT用語辞典 によると
引数と呼ばれるデータを受け取り、定められた通りの処理を実行して結果を返す一連の命令群。
多くのプログラミング言語では、関数がプログラムを構成する要素となっている。多くの言語や処理系では、開発者の負担を軽減するため、よく使う機能が関数としてあらかじめ用意されている。
ということです。
mt_rand(1,2) の場合は、mt_rand() が関数で 1,2 が引数ですね。
この場合、
↓
mt_rand() は「ランダムに数字を返す」関数
↓
1 から 2 の範囲でランダムに数字を返す
↓
返ってきた数字が $omikuji に代入される
PHPには、この他にもWebサービスの制作に役立つ関数がたくさんあります。
例えば、
- 他のファイル（テキストなど）を読み込む include() 関数
- 日付や時間を取得する date() 関数
- 半角・全角文字を統一する mb_convert_kana() 関数（もちろん日本語対応）
- 画像のサイズを変更する imagecopyresized() 関数
などです。
PHPにどんな関数があるのか詳しく知りたい方は、公式サイトの 関数一覧 や、PHPポケットリファレンス という本などで知ることができます。
ポケットリファレンスは、どこでも持ち運べるサイズなのでちょっとした空き時間にパラパラめくってると今まで知らなかった関数に出会えたりするのでいい感じです。
あと10行目ですが、
10 | if ( $omikuji == 1 ) { |
のようになっていますが、PHPでは一般的にイコールは = ではなく ==（半角イコール2つ）と書きます。
つまり、10行目は「もし、変数 $omikuji が 1 だったら」という意味になります。
ちなみに、「もし、変数 $omikuji が 1 でなければ」という場合（先ほどと逆の場合）は、
10 | if ( $omikuji != 1 ) { |
というように、== の代わりに否定を表す != にしてあげればOKです。
これで、先程のおみくじプログラムがどのような意味か分かったと思います。
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 | <html> <body> <?php // ランダムに 1 または 2 を生成し、変数 $omikuji に代入 $omikuji = mt_rand(1, 2); // もし、変数 $omikuji に入っている値が 1 なら if ( $omikuji == 1 ) { // 大吉です。 と表示 echo "大吉です。"; // 値が1でなければ（$omikuji に入っている値が 2 なら） } else { // 大凶です。 と表示 echo "大凶です。"; } ?> </body> </html> |
練習問題 1
ではここで問題です。
PHPを使って、ブラウザに
つれー 昨日実質◯時間しか寝てないからつれーわー 実質◯時間しか寝てないからなー |
と表示するプログラムを書きましょう。
ただし、
- ◯には 1 から 24 の数字がランダムで入らなければならず、2つの◯は同じでなければなりません。
- 1行目と2行目の間に改行 <br /> が入っていなければなりません
OKな例
つれー 昨日実質1時間しか寝てないからつれーわー 実質1時間しか寝てないからなー |
NGな例（1行目と2行目の時間が違う）
つれー 昨日実質1時間しか寝てないからつれーわー 実質3時間しか寝てないからなー |
解答例はここをクリックしてください。
（もし、文字化けした場合は ブラウザメニューの「表示＞エンコード」から Unicode (UTF-8) を選んでください。）
実行結果はここをクリックしてください。
（実行結果を表示してからブラウザの再読込ボタンを押すと、ランダムで内容が変わります。）
練習問題 2
先程のおみくじプログラムを、大吉・中吉・小吉・吉・末吉・凶・小凶・大凶 のいずれかがランダムで出るように改良してください。
ちなみに、このような場合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php if ( $omikuji == 1 ) { echo "大吉"; } else if ( $omikuji == 2 ) { echo "中吉"; } else if ( $omikuji == 3 ) { echo "小吉"; } // 以降、else ifが続く… |
という書き方もありますが、今回これは NG とします。
分岐がたくさんあるときは else if を連結するのではなく、switch 文を使ってください。
switch 文の使い方はここには書きませんので、Googleで検索するなどして調べてください。
解答例はここをクリックしてください。
（もし、文字化けした場合は ブラウザメニューの「表示＞エンコード」から Unicode (UTF-8) を選んでください。）
実行結果はここをクリックしてください。
（実行結果を表示してからブラウザの再読込ボタンを押すと、ランダムで内容が変わります。）
第1回はここまでです。おつかれさまでした。
なお、この連載の掲載期間中（第10回が掲載されるまで）であれば、この記事に関する疑問や質問に Twitter @Stocker_jp で答えます。
何か分からない点があれば、お気軽にご質問ください。
