カテゴリー別アーカイブ: 講義

Webサイト制作演習③~⑥ DBシステムまとめ

今回は技術的な話ではなく、システム構築そのものに対する記事です。

データベースを使ったシステム構築

先週から、データベースを使ったシステムの構築作業の講義を簡単に行った。
「システム構築」というと難しい響きだが、データベースを使ってやることはかなり限られる。

  • 追加
  • 更新
  • 検索
  • 削除

大きく分ければこの四種類だけ(閲覧も「全データを表示」するという検索の一種になる)。
SQLで言えば、「INSERT」「UPDATE」「SELECT」「DELETE」の四種である。
PHPではPDOを使って、これらのSQL文を利用できるので、「どんなデータを」「どんな風に表示するのか」を考え、実現する。
最終的にはこれらの作業が行える管理画面を作る事が目的になる。

プログラム的には
入力(データを打つ・ボタンを押す) → 処理(追加・削除・更新・検索) → 出力(結果を画面に表示)
の三工程までに単純化できる。
工程を単純にした上で書いていけば、やる事はそう難しくはない。

利用しているところで言えば、WordPressのダッシュボードもデータベースを利用したシステムの一つと言える。
また、PHPMyAdminも管理ツールではあるが、実際には「クライアント目線」に立った構築が求められる。
普段利用しているSNSなども、実際にはデータベースと連携しているが、顧客として使う時にはそれを意識する事は無い。「誰でも使える分かりやすいシステム」が理想形になる。

UI(ユーザーインターフェース)を意識したデザイン

「システム構築」なんていうと、プログラマーだけの仕事の様に思えるが、デザイナーの役割は従来より高まっている。上の項で述べた様に、システム画面は「クライアント目線」での使いやすさが非常に重要。
現状ではSNSや会社などで使われるローカルのシステムなど、いろんな場面で使う機会は多いはずだが、使い勝手の悪いシステムは多い。
ここで登場するのがUI(ユーザーインターフェース)という概念で、かなり幅広い意味があるが、ものすごく大雑把に言えば「使い勝手の良さ」を示す。
最近では「UIデザイン」「UIデザイナー」という言葉がよく使われる。単に見た目を考えるだけでなく、より使いやすいシステム画面を考えたデザインの事。
ボタンの押しやすさや、入力欄の量やメニューの配置など、一つ一つの工夫で、システムの使い勝手は大きく変わる。

スマホアプリの普及以後、これまで以上にUIの向上が求められる時代。
Webデザインでもそうだが、「クライアントの目線」に立った「使いやすさ」まで意識できると、デザイナーとしての幅は大きく広がる。
成果を出すUIデザイン9つのメソッド

「権限」について

システムを構築する上で、必要な項目はかなり単純化出来た。
しかし実際のWebシステムを構築する上で重要になるのが、「権限」である。
システム画面は基本的に、多くの人々が利用する。
その上で、それぞれがデータの管理を行うわけだが、そこで問題が発生する。
そもそも、不特定多数の誰もが、データベース上の全てのファイルを更新したり削除したりできる様な状態では、システムは成り立たない。

そこで、多くの場合はシステムに関わる人間を絞る為に、ログイン機能を導入する。
そもそもログインできる人間以外には触れらない状態にしておけば、間違いが起こる可能性は減る。

その上で、更にユーザー毎に権限を割り振る場合も多い。
SNSを筆頭にしたシステムでは、基本的に自分の投稿したものに関してのみ、変更や削除の権限が与えられる。
それに対し、ごく一部の管理者は全ての情報を一限で閲覧・変更・削除できる権限を持っている。

システムを構築する上では、「権限を幾つ用意するのか」、「それぞれどこまでできるのか」を考えるのも重要な要素になる。
基本的にはユーザー権限もデータベースに登録しておき、IF文などで使える機能を絞っていく

3月1日(火) Webサイト制作演習②

PHPステップアップ②~shuffleとarray_shift~

shuffle(配列);
配列を入れると、中身をバラバラに入れ替える関数
array_shift(配列);
配列の一番最初のデータを取り出す関数

以前のPHPの学習では、「rand」関数を使って、ランダムな文字列を実装した。

$kuji = array('大吉','中吉','小吉');
$result = rand(0,2);   //0~2のランダム表示
echo $kuji[$result]; //大吉、中吉、小吉のいずれかを表示

上記のような形であれば、「完全にランダム(ホントは厳密には違いますが……)」なくじ引きが実装できる。

しかし、次のような場合はどうだろう。

A君、B君、C君の三人が、掃除当番を決めようとしている。全員遊びにいきたいので、誰もやりたくはない。やりたくはないが、誰かがやらなくてはならない。
そこで、三人は公平さを重んじる為、くじ引きを行う事にした。
オーソドックスなスタイルで、紙を長細く三本に切り、一本だけ端を赤く塗る……赤を引いた一人が当番だ。
これを乱数で実装してみる。

$kuji = array('赤','白','白');

$Akun = $kuji[rand(0,2)];
$Bkun = $kuji[rand(0,2)];
$Ckun = $kuji[rand(0,2)];

echo <<<EOD
A君の引いたクジ{$Akun}<br>
B君の引いたクジ{$Bkun}<br>
C君の引いたクジ{$Ckun}
EOD;

当然だが、これは間違いである。
上記は「全員が引くたびにクジを戻している」のと同じ状態。つまり毎回当たりも外れもある。
これでは全員が白の可能性も、全員が赤の可能性も出てきてしまう為、掃除当番を巡って喧嘩になってしまう。

こういう時に利用されるのが、shuffle関数。

<?php
$kuji = array('赤','白','白');	//クジが三つ入った箱
shuffle($kuji);			//箱をシャカシャカ揺らす

//一人ずつ順番にクジを引く
$Akun = array_shift($kuji);
$Bkun = array_shift($kuji);
$Ckun = array_shift($kuji);

//結果、赤は誰か一人にしか引かれなくなる
echo <<<EOD
A君の引いたクジ{$Akun}<br>
B君の引いたクジ{$Bkun}<br>
C君の引いたクジ{$Ckun}
EOD;
?>

同じランダムでも、「順番に引く」「一つずつ減る」という結果を出したい場合は、このようにshuffleを用いると良い。
組み合わせ次第で様々なゲームが作れるし、場合によってはシステムにも応用できる。

PHPで作るゲームの注意点

rand、shuffleなどを上手く使えばPHPで簡単なゲーム的なものは作れるようになる。
しかしPHPは複雑なゲーム制作には向いていない
PHPはサーバーサイドスクリプトなので、データの切り替え時にサーバーにアクセス、つまり一度画面を読み込みなおさなければならない。
その関係上、画面内での複雑な動きはできないし、データもSESSIONなどで引き渡さないと、逐一リセットされてしまう。
より直感的に動くブラウザゲームは、クリックやキーボードでイベントを起こせるJavaScript等の方が向いている。

とはいえ、フォームと連携してボタンを押す→結果が出るといった動作はPHPの基本だし、そう言った動きであれば凝り方次第で色んなことが出来るので、色々と遊んでみてほしい。

おまけ。シャッフルを使った簡易ブラックジャック~自己完結版~

絵札の置き換えを何度もやるのが面倒だったので、どうにかできないか考えてみました。
元の物より行数は減りますが、やる事は複雑になります。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PHPで簡単なブラックジャック</title>
</head>

<body>
<?php 
	$value = array();	//後で使う配列の初期値設定
	
	$card = array('A',2,3,4,5,6,7,8,9,10,'J','Q','K');	//表示用の配列を用意
	
	shuffle($card);	//配列の中身をシャッフルシャッフル
	
	//cardとは別に、計算用の値の配列を用意
	for($i = 0; $i < count($card); $i++){	//配列の長さだけ繰り返し
		if($card[$i] == 'A'){		//もしi番目のカードが「A」なら
			$value[$i] = 11;	//i番目の値は11に
		}elseif($card[$i] == 'J' || $card[$i] == 'Q' || $card[$i] == 'K'){	//もしi番目のカードが「J」「Q」「K」のいずれかなら
			$value[$i] = 10;	//i番目の値は10に
		}else{				//それ以外なら
			$value[$i] = $card[$i];	//そのままの値を代入
		}
	}
	
	//配列なので、foreachでも同じことができます(上のfor文かこちらのいずれかを使用)
	/*
	foreach ($card as $k => $v){
		if($v == 'A'){ 
			$value[$k] = 11; 
		}elseif($v == 'J' || $v == 'Q' || $v == 'K'){ 
			$value[$k] =10;
		}
		else {
			$value[$k] = $v;
		}
	}*/
	
	
	//2つの配列の中身を確認(print_rは配列の中身を全て表示する確認用関数)	
	print_r($card);	
	echo "<br>";
	print_r($value);
	
	
	//プレイヤーA 1枚目
	$A_draw1 = array_shift($card);		//表示カード
	$A_value1 = array_shift($value);	//計算用数値
	
	//プレイヤーB 1枚目
	$B_draw1 = array_shift($card);		//表示カード
	$B_value1 = array_shift($value);	///計算用数値
	
	
	//プレイヤーA 2枚目
	$A_draw2 = array_shift($card);		//表示カード
	$A_value2 = array_shift($value);	///計算用数値
	
	//プレイヤーB 2枚目
	$B_draw2 = array_shift($card);		//表示カード
	$B_value2 = array_shift($value);	//計算用数値
	
	$A_result = $A_value1 + $A_value2;	//Aの結果(Aの1枚目の値 + Aの2枚目の値)
	$B_result = $B_value1 + $B_value2;	//Bの結果(Bの1枚目の値 + Bの2枚目の値)

	//結果を変数に格納
	if($A_result == $B_result){			//AとBが同値なら
		$last_result = '引き分け';		//引き分け
	}elseif($A_result > $B_result){		//AがBより大きければ
		$last_result = 'Aの勝ち';		//Aの勝ち
	}else{								//それ以外(BがAより大きければ)
		$last_result = 'Bの勝ち';		//Bの勝ち
	}
?>

<!--折角なのでテーブルで表示-->
<hr>

<h4>結果</h4>
<table>
	<tr>
		<th>プレイヤー</th>
		<th>1枚目</th>
		<th>2枚目</th>
		<th>合計</th>
	</tr>
	
	<tr>
		<th>Aさん</th>
		<td><?php echo $A_draw1; //Aの手札1 ?></td>
		<td><?php echo $A_draw2; //Aの手札2 ?></td>
		<td><?php echo $A_result;//Aの手札合計値 ?></td>
	</tr>
	
	<tr>
		<th>Bさん</th>
		<td><?php echo $B_draw1; //Bの手札1 ?></td>
		<td><?php echo $B_draw2; //Bの手札2 ?></td>
		<td><?php echo $B_result; //Aの手札合計値 ?></td>
	</tr>
	
	<tr>
		<td colspan="3">
			<?php echo $last_result; //勝敗表示 ?>
		</td>
	</tr>
</table>
</body>
</html>

上記では「表示用の配列」とは別に、「計算用の配列」を用意する事で解決しています。
「こんなやりかたもあるんだー」という参考程度に。コピペすれば使えますが、興味のある方は中身を「読んで」みてください。
「ユーザー定義関数」を使った他の方法もあるのですが、それだけで一講義必要なので、今回は割愛します。

2月29日(月) Webサイト制作演習①

PHPステップアップ①~ヒアドキュメント~

PHP Labo ヒアドキュメント
PHPの中で長文のHTMLを出力したい時に使われる。
何度もechoするより効率がいい上、変数も自動で出力してくれるため、使い勝手が良い。

終了時の文字列を「<<<」付きで宣言し、もう一度その文字列が宣言されるまでの間に書かれた文章が全て出力される。指定文字列は、アルファベットで始まっていればなんでも良いが、「EOM(End Of Messageの略)」や「EOD(End Of Document)」、「EOF(END OF File)」等が慣例的に使われることが多い。
間で使われる変数も出力する。また、HTMLタグも出力できる。

$name = "鈴木";
//ここ↓で宣言した文字を
echo <<<EOM 
{$name}様こんにちは。<br>
ようこそいらっしゃいました。<br>
よろしくお願いします。
EOM; //←もう一回使うまでの間を出力

文章がそのまま出力されるので、重宝する。

また、変数に代入する事も出来る。

$name = "鈴木";

$message = <<<EOM
{$name}様こんにちは。<br>
ようこそいらっしゃいました。<br>
よろしくお願いします。
EOM;

echo $message;

メール送信のメッセージなど、関数の括弧内に入れなければいけない時に重宝する。
また、変数を使う時にはそのままでもよいが、ヒアドキュメント内で省略される{飾り括弧}で囲ってあげるとより分かりやすい。

ただし注意点がある。

	$name = "鈴木";

		echo <<<EOM
			{$name}様こんにちは。<br>
			ようこそいらっしゃいました。<br>
			よろしくお願いします。
		EOM;//これだけでエラーになる

上記の様に、EOM;の閉じの前にインデントなどでタブやスペースなどが入っているとエラーが出てしまう。また、文章もtab入りで表示されてしまうので、インデント抜きで使ってあげよう。

サイト制作ステップアップ①~仕様書~

仕事でWebサイトを制作する時には、まず仕様書を作ってあげる必要がある。
仕様とは、「何を作るのか」をまとめたもの。
もちろん作るものはWebサイトなのだが、「どんな」サイトを作るのか、大枠を作っておく必要がある。
基本的にはディレクターが、クライアントとの対話「ヒアリング」を行って、「何を作るのか」を明確にしていき、デザイナー・コーダー・プログラマーの手によってイメージを可視化していく。

  • サイトの目的・コンセプト(最重要)
  • 目的を果たす為に必要なページ・コンテンツ(利用規約・ガイドラインなど)
  • 副次的に必要になるコンテンツ
  • 使用ソフト等の検討(WordPressなどのCMSを使うのかなど)
  • 何ページ必要になるのか(コンテンツをどれくらいのページに分けるのか。どこにリンクを飛ばすのか。サイトマップ)
  • デザインイメージ
  • ターゲット層
  • 必要なプログラム(メールフォームなど)
  • サイトタイトル・キャッチコピー含むテキスト・画像など(だれが・どうやって用意するのか)
  • etc……

考える事はいくらでも出てくるが、基本的には一番目に挙げた「サイトの目的とコンセプト」に沿い、他の項を埋めていく。クライアントだけでなく、専門のチームメンバーに「必要な情報」を聞き、クライアントに対応してもらうことで、後々困る事は少なくなる。
また、「ヒアリング」といっても聞くだけではなく、「サイトの目的やコンセプト」からブレていないか、予算内・納期内に可能かなどを常に意識し、軌道修正を図る。
面倒そうであっても、フィックスするまで何度でもヒアリングを重ね、「作るもの」を明確にした上で作業に入っていく事が、結果的に完成までの一番の近道になる。
仕様書作りはディレクターの仕事ではあるものの、デザイナーを中心に、制作サイドもコンセプトをよく理解したうえで制作していくとより作りやすい。
コンセプトを意識した“伝わる”Webサイトづくり
仕様書作りに直接関係する記事ではありませんが、現職のWebディレクターさんがコンセプトの大切さをタイムリーに説いくれていたので紹介です

2月27日(土) CMS演習⑩ 講義内容

WordPress、サーバーへのアップロード

これまで、ローカル環境(Xampp下)でWordPressの制作を行ってきた。
もちろん通常のWebサイトと同様、このままではインターネット上で閲覧する事は出来ない。
Xamppはあくまでテスト環境であり、公開前に見た目や機能を試す役割に過ぎない。
その為、最終的にはレンタルサーバー等にアップロードする必要性がある。
以前にも触れたが、サーバーによってはPHPやMySQLが使えない(=それらを利用しているWordPressも使えない)ので注意しよう。

今回は以前配布したhetemlのサーバーで設定を行った。
接続自体は依然行っているので、必要なのは、

  • DBホスト名
  • DBユーザー名
  • DBパスワード

の三つの情報になる。通常は「データベース名」も必要だが、配布したサーバーではユーザー名と同じ名前のデータベース一つしか扱えないように設定されている為、ユーザー名と同じものを使用する。
これはXamppへのWordPress導入時や、PDOの講義の時にも設定したものだが、ホスト名は「localhost」、ユーザー名は「root」、パスワードは空という、仮の設定だった。
WordPressはデータベース内に投稿や設定などのデータを保存する為、データベースに接続しなければならず接続する為に最低限必要な情報がこの三つになる
今回は紙で配ったものだが、通常のレンタルサーバーであれば、契約後にログインできる「マイページ」等に同様の情報が載っている。
*掲載場所はサーバーによって変わるので注意!

wp_config.phpの編集

WordPressをインストールしなおす際に、上述の必要情報を設定するファイル。
アップロード用のwordpressを用意(今回は、xampp内のWordPressを、Lessonにコピーした)。
コピーした(或いは新規にダウンロードした)WordPressフォルダの直下にある「wp-config.php」の該当箇所を書き直す。他の部分は書き換えない事!

define('DB_NAME', '使用するデータベースの名前');

/** MySQL データベースのユーザー名 */
define('DB_USER', '使用するデータベースのユーザー名');

/** MySQL データベースのパスワード */
define('DB_PASSWORD', '使用するデータベースのパスワード');

/** MySQL のホスト名 */
define('DB_HOST', '使用するデータベースのホスト名');

それぞれ必要情報を書き込んで、アップロードすればOK。
注意しなければならないのは「データベース名」で、今回配布したサーバーではユーザー名と同じ名前のデータベースを利用してもらっているだけ。
通常は、Xamppの時と同様に、専用のデータベースを作成する必要がある。

アップロードと設定

configファイルの準備が出来たら、サーバーに接続し、wordpressフォルダをそのままアップロードする。(容量が大きいので、それなりに時間がかかります)。
アップロード終了後、ブラウザで、「閲覧URL/wordpress/」にアクセスする。
成功していれば、xamppの時にも設定した、サイト名などを入力できるエリアが生成される。「データベース確立エラー」等が表示される場合は、先に設定した項目のいずれかが間違っている可能性が高いので、修正してwp_confing.phpだけをアップロードしよう。

後の設定はXamppの時と同じ。
サーバー上のものは、一応パスワードが「普通」以上になるよう設定した上で、きちんと通じるメールアドレス(パスワードを忘れた時にメール送信される)を設定しておこう。

エクスポートとインポート

wp_transport
WordPressの移転作業では、フォルダとは別にデータベースの内容も移行する必要がある

ここまででWordPressのインストールができた。
今回はテーマなどのフォルダごとアップロードした為、見た目の変更などは直ぐにできる。
しかし、WordPressの投稿などのデータはデータベースの中に保存されている為、まだ参照されていない。
つまり、投稿や固定ページなどを移動するには、データベース間の引っ越しも必要になる。
そこで使われる作業が、エクスポート(データの書き出し)とインポート(データの読み込み)である。
インポートとエクスポートはダッシュボードの「ツール」から行える。

データを書き出したい方(移行前のWordPress)から、
ツール>エクスポート>全てのコンテンツ(必要に応じて、投稿等だけを選択してもいいと思います)>エクスポートファイルをダウンロード
すると、移行情報のつまったxmlファイルがダウンロードされる。

次に、移行先のWordPressで
ツール>インポート>WordPress(この時、初インポート時のみ、インポート用プラグインのインストールが必要になります)→ファイルを選択→エクスポートしたxmlファイルを選ぶ→ファイルをアップロードしてインポート

バックアップとしてのエクスポート

今回のような引っ越し目的とは別に、データのエクスポートを行う事がある。
それがバックアップファイルとしてのエクスポートファイルの排出である。
基本的にデータベース内のデータが壊れてしまう事態には余り陥らないが、万一に備えて復旧できるよう、データを取っておくことが推奨される。
自分で定期的にエクスポートしても構わないが、BackWPUpというプラグインで周期を設定し、自動バックアップを取れるので、長期運用サイトの場合は利用してあげよう。

エクスポート・インポートの注意点

これでWordPressの引っ越し完了! ……と言いたいところだが、幾つか落とし穴が存在している。
実はこれだけでは、きちんと移動できない部分が存在する。

  • メディア画像(のURL)
  • ウィジェット
  • プラグイン毎の設定

これらのデータはエクスポートの範囲に含まれないので、設定しなおす必要がある。
特にメディア画像は、URLが元々のもの(今回はlocalhost)のままになってしまう為、問題が大きい。

こちらのサイト様ではインポートエクスポートの手順に加え、プラグイン「Search Regex」を使ったディレクトリの変換での解決策まで書いてくれているので、参考にしていただきたい。

ウィジェットに関しても、最近は良いプラグインがあるようなので、量が多い時は使ってみよう。WordPressサイトの移転時に強い味方になる6つのプラグイン

プラグインの設定移行

プラグイン個別の設定の移行は、基本的にそれぞれ手作業で行う必要がある。
しかし使うプラグインの量が多ければ、それだけ手間になる。
そこで今回の様にダッシュボード上からのエクスポート・インポートではなく、データベースから直接全てのデータをエクスポート・インポートする方法がとられる場合がある。
(ダッシュボード上のものは一部のデータを移行するだけなので、全移行するとデータベースに自動生成されたデータまで移行は出来る)
ただし、もちろんだが直接データベースを触る上、一部設定情報を書き換えなければならない関係上かなり上級者向きにはなるので、自信が無ければやめておこう。
参考:WordPress移転phpMyadminデータベースを使ってまるごとサーバー引っ越し
移行の手間を考えると、プラグインの導入数自体を減らしておくのも一つの方法にはなる

CMS演習⑦~⑨ 講義内容 「WordPressのテーマづくり」

遅くなってすみません。もう少し追記・修正していきますが一次アップします。説明漏れあれば教えてください。追記します。

WordPressのテーマづくり

普段お世話になっているWordPressのテーマ。もちろん、誰かが作っているものなので、自分で作ることも出来る。
「0から全て制作する」という点においてはテーマのカスタマイズよりも大変な部分もあるが、しっかり習得するとより自由なデザインのページが作れるし、なによりWordPressの構造自体の理解も進むので、カスタマイズにも役立つ。
まずはどんな風に作られているのか、ざっと理解しておくと、仕事の幅が広がる。

テーマ作成において、WordPressは通常のブログよりも自由度が圧倒的に高く、様々な形式のサイトに利用される理由の一つでもある。

はじめてWordPressのオリジナルテーマを作るときの参考になればと思って書きました
僕が初めてテーマを作った時に参考にしたページです。ちょっとだけ今回の手順と違いますが、図解が分かりやすいので参考にしてみてください

WordPress テーマのディレクトリ構造

WordPress本体には、様々なフォルダやファイルが存在している。
テーマのデータも、その中の一部である。

wp_structure
テーマフォルダにある有効化されたテーマを、wordpress/index.phpが読み込む

wordpressフォルダを開くと、大きく三つのフォルダに分かれており、その中の
「wp_content」→「themes」
フォルダの中に、インストール(ないし初期から入っていた)テーマが保存されている。
自分でテーマを作成するときも、ここに作っていく形になる。

テンプレートファイル

WordPressには、いくつかの名前の定められたテンプレートファイルがある。
基本的に、これらのファイルはテーマフォルダの直下に保存する必要がある。
種類がいくつかあるので、種別で紹介したい。

絶対に必要なファイル

子テーマの際にも触れたが、index.phpstyle.cssはWordPressのテーマを公開するうえで、最低限必要なファイル。
存在しなかったり、ファイル名が違ったりすると、テーマの有効化すら出来ない。
もし「外観」画面に作ったはずのテーマが出ていなかったら、この辺りのファイルをきちんと確認しよう。
詳細はこちらの記事へ。

この二つに加えて、「functions.php」も重要なファイルになっている。
このファイルには、WordPressで使用したい機能や、元々ある機能の部分変更など、様々な命令を書き加えていく事が出来る。なくてもテーマの有効化は出来るが、ここへの記述がないと、WordPressのほとんどの機能は使えないので、必須と言っても過言ではない。

パーツになるファイル

WordPressは、headerやfooterなど、共通部分を多数のページに読み込む為のファイル。
作成しているテーマフォルダ直下に、特定の名前で保存しておく必要がある。
WordPressでは、特別な名前のファイルが特別な意味を持つことが多い。

wp_structure2
共通部分を別ファイルとして保存しておくことで、修正があった場合に作業量を大きく減らすことが出来る。テンプレートが増えれば増えるほど、有効な手段になる。
header.php
読んで字のごとくページのヘッダー部分を記述するファイル。
読み込むCSSやナビゲーション部分など、全ページに共通する項目を書いておき、色んなテンプレートで読み込むことが出来る。
また、if文による条件分岐で、特定のページだけに情報を読み込ませることも可能。
表示させたい場所に「get_header()」と記述することで読み込める。
footer.php
headerと同様、ページ下部も共通する場合が多いので、ファイルを分けておくと便利。
表示させたい場所に「get_footer()」と記述することで読み込める。
sidebar.php
サイドバーを個別に保存しておけるファイル。
名前は「sidebar.php」だが、ようは共通部分であればどの部位でも構わないので、テーマによってはこのファイルに特定部位の設定が書かれている事もある。
表示させたい場所に「get_sidebar()」と記述する事で読み込める。

ページを表示する為のテンプレートファイル

切り分けたパーツ(header.phpなど)を、表示用のテンプレートで読み込み、実際にサイト上に表示させる。
WordPressでは、「投稿ページ」「固定ページ」などを表示する為の専用ファイルがそれぞれ用意できる。
因みに、index.phpは表示用テンプレートの親玉みたいなもので、該当するファイルがなかった場合(例えば固定ページを表示するのに、page.phpがないなど)、代わりにindex.phpで表示される仕様になっている。

また、細分化すると今日までに使用したファイルよりもかなりの数のテンプレートが存在するので、一緒に掲載する。

single.php
投稿ページを表示する為のテンプレート。
タイトル、日付、本文、カテゴリーなど、必要な情報を選定して載せる。
今回は抜粋文→全文表示への変更だけだったが、テーマによっては色々と載せ方を変更したり、工夫がみられる。
page.php
固定ページを表示する為のテンプレート。
single.phpと似通る部分が多いので、別名保存などで作ってあげると楽。
こちらはsingle.phpよりも更に情報が少なくなることが多い。
404.php
wordpress/以後、存在しないURLにアクセスすると表示してくれるテンプレート。
用意しておくと、記事を消してしまった時などを含めてよりユーザーフレンドリーなページになる。
archive.php,category.php,tag.php
日別一覧、カテゴリー一覧、タグ一覧を表示する専用ページ。
なくてもindex.phpで一覧表示してくれるので問題はないが、それぞれ個別に設定することで見た目を変更できる。
一般のテーマで多いのは、ページ上部に何のカテゴリーを表示しているかなどを出すパターン。

制作フロー

今回は大本になるHTMLとCSSがあること前提。
既にできているサイトに、WordPressの機能を当て込める形で作成した
デザイン→コーディング→テーマ化
という手順を踏むと、作業工程が分かりやすく、役割分担もしやすい。
ただしデザイン時点で、WordPressのどんな機能を当て込めるかを考える必要は出てくるので、デザイナーも予備知識として、大まかな動きが分かると尚良い。

順番は人それぞれではあるので、参考程度に。

  1. ベースになるHTMLやCSS等のファイルを一つのフォルダにまとめ、wp-content/themesフォルダの中に保存する。
    一応、HTML等のバックアップを取っておくとなお良い。
  2. style.cssにテーマ設定を入力。

    /*
    Theme Name: Simple WebB
    Auther: Interplan IT School ShinYkohama
    Description: テーマ作りの練習です
    version:1.0
    */
    

    上部にコメントアウトで情報を記入する。
    最低限Theme Nameだけ記述されていれば動くので、とりあえず好きな名前を付けてみよう

  3. index.phpを作成する。
    元々htmlファイルがあるなら、名前をindex.phpに変更すればOK。
    この時点で、wordpressダッシュボードの「外観」→「テーマ」から、有効化が出来るようになる。
  4. 有効化し、サイトを表示してみると、CSSや画像が読み込まれていないことが分かる。
    これはthemesフォルダの中で、相対パスで読み込もうとしている為。

    WordPressは、有効化したテーマのindex.phpをwordpress/index.phpで読み込む設計になっている(実際に表示する時にアドレスがシンプルになる)為、実際にはwp_content/themes/有効化したテーマ/の中に入っているファイルの位置が正確に読み取れなくなってしまう。

    そこで使われるのが、「get_template_directory_uri」というテンプレートタグ。
    有効化したテーマまでの絶対パスを取得してくれるので、パスが変わってしまったcssやimgをちゃんと読み込めるようになる。

    <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
    

    パスを読み込む部分の手前に設定することで、特定のファイルを読み込めるようになる。

  5. テーマに必要な情報を読み込むためのテンプレートタグを書いていく。
    各テンプレートタグには、サイトのタイトルや、投稿ページへのリンクなど、様々な情報が入っている。
    該当する箇所に、該当するテンプレートタグを書き込むことで、それぞれの投稿等の情報がきちんと表示される。
  6. 投稿を表示する、メインループを作る。
    投稿を表示する際に繰り返し文、whileを利用する事がから、WordPressでは投稿記事を表示する部分を「メインループ」と呼ぶ。

    <?php if(have_posts()): ?>
    	<?php while(have_posts()): the_post(); ?>
    		//記事部分のHTMLを記載
    	<?php endwhile; ?>
    <?php endif; ?>
    

    「もし記事が一件でもあれば」「記事のある限り」「記事を表示する」
    といった意味合いになる。
    色んなテンプレートに記載するので、最近では「共通のパーツ」として別ページに記載する事も増えている。

  7. functions.phpを作成し、カスタムメニューやウィジェット機能を有効化する。
    もちろん、利用しないという選択肢もあるが、ウィジェットはともかくカスタムメニューは大抵の場合使った方が楽なので、きちんと記述してあげると良い。
    functions.phpには他にも様々な設定を書けるので、必要に応じて記述を増やしていく。
  8. index.phpの機能が整ったら、パーツを分割する。
    「全ページに共通する部分」を抜き出し、「header.php」「footer.php」等として保存し、「get_header」「get_footer」等で読み込む。
  9. single.php、page.phpといった、index以外のファイルを必要なもの分だけ作成する。
  10. 完成!

使用したテンプレートタグ一覧

WordPressの中だけで使える関数(機能)を、まとめてテンプレートタグと呼ぶ。
header.phpなどのテンプレートを読み込んだり、データを出力したり、その種類は多岐に渡る。
WordPress Codex 日本語版に、それぞれの設定方法などが詳しく載っているので、詳細はこちらを参考に。

get_template_directory_uri()
有効化しているテーマまでのhtttp:からの絶対パスを取得してくれるテンプレートタグ。
テーマを作る際、cssやimg等を読み込むときに重宝する。
wp_head()
wordpressテーマに必要なファイルを読み込む。テーマには必ず必要なので、最初に記述しよう。
headの一番下、</head>の手前に書いてあげよう。
wp_footer()
管理画面と表示サイトを行き来する黒いバー(通称アドミンバー)を表示してくれる他、js等の必要ファイルを読み込む。
テーマには必ず必要なので、最初に記述しよう。
こちらはbodyの一番下、</body>の手前に書いてあげると良い。
bloginfo()
様々な情報を引き出せる便利タグ。例えば
bloginfo(‘name’);
なら、設定画面で登録されたサイト名を表示してくれる。
他の設定:テンプレートタグ/bloginfo
home_url()
サイトのトップページへのリンクを出力できるタグ。
実際に利用する際は、

と記述してあげる必要がある。echoしないと出力できない。
have_posts()
利用しているWordpressに、「投稿があるか」を判別してくれるタグ。
記事を読み込むメインループでは、まずこのタグを使って、
「もし投稿が一つでもあったら、投稿がある限り記事を出してね」
という指定になる。
the_post()
記事を読み込むメインループにて、次の記事を取得する為のタグ。
for($i=0; $i<10; $i++) でいうところの「$i++」と同じ役割になる。 これがないと無限ループに陥るので、忘れない様に。
the_title()
ループ中で読み込まれた記事のタイトルを表示する為のタグ。
the_excerpt()
記事本文の抜粋文を表示する為のタグ。
表示の長さの設定や、後ろにつく文字列をfunnctions.phpで変更できる。
index.phpなど、記事一覧を出すページで用いられることが多い。
the_content()
記事本文の全文を表示する為のタグ。
single.phpやpage.phpなど、記事の詳細画面で記述し、全文読める様にする。
画像等が使われているとそちらも出てしまうので、トップページなどで使う時には注意が必要。
the_permalink()
記事詳細へのURLを取得してくれるテンプレートタグ。
記事タイトルやアイキャッチ画像等、色んなところにリンクを貼っておくと、個別の記事ページに誘導しやすい。
get_the_date()
日付を表示してくれるテンプレートタグ。
the_dateだと同一の日付の投稿があると一番新しいものしか表示してくれないのだが、
「echo get_the_date();」と書いてあげるとちゃんと出てくる。
WordPressの設定画面で使われている日付を利用する場合は、「echo get_the_date(get_option(date_format));」
と記述する。
has_post_thumbnail() , the_post_thumbnail()

記事にアイキャッチ画像があるかどうかの判定と、アイキャッチ画像の表示。サムネイルのスペルに注意。

<a href="<?php echo the_permalink(); //投稿ページへのリンク ?>">
	<?php if(has_post_thumbnail()): //もしアイキャッチ画像があったら ?>
		<?php the_post_thumbnail(表示サイズを指定); //アイキャッチ画像を表示 ?>
	<?php else: //無かったらno-image.pngを表示 ?>
		<img src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="NO IMAGE" width="260" height="260">
	<?php endif; //if文終わり ?>
</a>

上記の様に、条件文とセットで使われることが多い。

the_category()

記事に登録されているカテゴリー一覧を表示してくれる。

のように、括弧の中にそれぞれのカテゴリーの区切り文字を入れることが出来る。

edit_post_link()
投稿記事や固定ページに「編集」ボタンを付けることが出来る。
わざわざダッシュボードや個別ページに跳ばなくても記事の編集が出来るので、投稿者には便利な機能。
ログアウト時(お客さんが見る時)は自動で消えてくれるので安心。
wp_nav_menu()
functions.phpで設定した、カスタムメニューを表示するテンプレートタグ。
オプションが多いので、配列で入力する必要性がある。

$menu_setting = array(
	'theme_location' => 'gloval', //表示したいカスタムメニュー名
	'container' => 'nav', //囲う為のタグ
	'container_class' => 'wrap' //囲うタグに付けるクラス名
);
wp_nav_menu($menu_setting);

オプション一覧はこちら

the_posts_pagenation()
「ページャー」「ページング」「ページネーション」等と呼ばれる、記事数が表示数を超えた時に次のページへ移動できるリンクを精製するテンプレートタグ。

the_posts_pagination( array(
	'prev_text'          => '&lt;',//prevに表示するテキスト
	'next_text'          => '&gt;',//nextに表示するテキスト
	'before_page_number' => '<span></span>',//ページナンバーの手前に付ける文字列
) );

比較的新しく、以前は大変だったページングの実装を大幅に簡単にしてくれた。
出力されるタグやクラスが決まっているので、それに合わせてCSSを作り、見た目を変更すると良い。

dynamic_sidebar()
functions.phpで設定したウィジェットエリアを表示してくれる、なんだかカッコイイ名前のタグ。
sidebarとつくが、サイドバー以外でも問題なく使用できる。

と書くと、ダッシュボードで設定されたウィジェットを表示することが出来る。
get_header()
header.phpを読み込んでくれるテンプレートタグ。
各テンプレートにしっかりつけてあげよう。
get_footer()
footer.phpを読み込んでくれるテンプレートタグ。
get_sidebar()
sidebar.phpを読み込んでくれるテンプレートタグ。
貼る場所を間違えない様にしよう。他二つと違い、使われない事も多い。
previous_post_link,next_post_link
投稿ページに使用できる、「前の記事」ないし「次の記事」へのリンクを精製してくれる。single.phpの下の方に搭載されているテーマが多い。

<ul class="pager">
	<li class="prev"><?php previous_post_link('&lt; %link'); ?></li>
	<li class="next"><?php next_post_link('%link &gt;'); ?></li>
</ul>

括弧の中には表示文字列を書く。
「%link」は、記事タイトル付で前後のページへのリンクを表示してくれる。

functions.phpで使用したテンプレートタグ・命令

functions.phpは、WordPress初心者の壁ともいえるとっつきにくいファイル。
主に使いたい機能を有効化したり、各種設定を書き込むのに使われる。

add_theme_support()
デフォルトでは使えない、様々な機能を有効にする設定。
括弧の中に有効にしたい機能を書く。
add_theme_support(‘post-thumbnails’);はアイキャッチ画像が、
add_theme_support( ‘menus’ );ならカスタムメニューが使えるようになる。
また、多数のテーマで使われている、「カスタムヘッダー」や「カスタム背景」もこの機能で有効にできる。
add_image_size();
WordPressメディアに画像を上げる時、複数のサイズで登録される。
この指定を書くことで、好きなサイズの画像をアップロードさせられる。
add_image_size(‘blog_thumbnail’, 260, 260,true);
名称、縦横のサイズの後に「true」を入れると、size比の合わない画像の中央を自動でトリミングしてくれる。
register_nav_menus()
カスタムメニューの設定。
カスタムメニューは同じテーマに何個でも設定できるので、それぞれに「メニューの名前」と「説明」を付ける必要がある。

register_nav_menus(array(
        'メニュー名称(好きな名前)' => 'ダッシュボード側に表示される説明',
         //何個も同時に設定できる
	'gloval' => 'グローバルナビゲーション',
	'foot_nav' => 'フッターナビゲーション'
));

ここで名前を設定し、wp_nav_menu();に名前を入れる事で、ようやくカスタムメニューが使えるようになる。

register_sidebar()
ウィジェットエリアを作成する設定。これがあって初めて「ウィジェット」メニューがダッシュボードに現れる。

register_sidebar(array(
	 'name' => 'widget名',
	 'id' => 'widgetID',//呼び出す時に名前の代わりに使える
	 'description' => 'widgetエリアの説明(ダッシュボードに表示)',
	 'before_widget' => '<div class="widget">'//ウィジェットを囲うタグや文章の設定,
	 'after_widget' => '</div>',
	 'before_title' => '<h3 class="widget_title">'//ウィジェットタイトルを囲うタグや文章の設定,
	 'after_title' => '</h3>'
));

複数のエリアを作る時は、その分だけ上の様な設定を書いてあげる必要がある。

番外:抜粋文の設定
//抜粋文の文字数設定
function custom_excerpt_length( $length ) {
	return 100;	
}	
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

	
//抜粋文省略時に続く文字列の設定
function new_excerpt_more( $more ) {
	return '[ … ]<a class="more" href="'. get_permalink( get_the_ID() ) . '">more</a>';
}
add_filter( 'excerpt_more', 'new_excerpt_more' );

WordPressデフォルトの設定を変更する時、「add_filter()」という命令が使われる。
これは「フィルターフック」と呼ばれる、WordPressのどこかで設定されている変数に、データを上書きできるという優れた機能。……なのだが、見た目に分かりにくく、初心者の壁の一つとなっている。
「excerpt 文字数変更」などの検索ワードで出てくるので、色々と試してみよう。

他にもいろいろな設定ができるが、今回は抜粋文の文字列と、後に続く文章を変更した。
こういった設定も、functions.phpに記述される。