Transcript php
PHPによるWEBアプリの構築
PHPによるWEBアプリの構築
WordPressを基礎にして
－1 －
PHPによるWEBアプリの構築
目次：
1. WordPressの導入
2. サイト構築
3. PHP概論
4. テンプレートカスタマイズ
5. 関数を利用してカスタマイズする
6. データベースにアクセスする
7. プラグインを開発する
－2 －
PHPによるWEBアプリの構築
～WordPressをインストールしてみよう～
1. WordPressの導入
－3 －
PHPによるWEBアプリの構築
1.1 CMSとは？
■ＣMS（Contents Management System）
Webコンテンツを構成するテキストや画像、レイアウト
情報などを一元的に保存・管理し、サイトを構築したり
編集したりするソフトウェア。
テキストやレイアウト情報等の構成要素を分離して
データベースに保存し、サイト構築をソフトウェアで
自動的に行うことができる。
－4 －
PHPによるWEBアプリの構築
1.2 CMSの利用イメージ
デ
ザ
イ
ン
担
当
テンプレート2
CMS
Webページ
テンプレート1
レイアウト情報
テキスト
デザイン/インターフェースを設定
HTML、CSS、PHPの知識が必要
各
コ
ン
テ
ン
ツ
担
当
テキスト
画像
・・・・・・・・・・・
動画
・・・・・・・・・・・
・・・・・・・・・・・
画像
DB
Webコンテンツ
内容を
登録・保存
音声
コンテンツの内容を更新
HTMLとCSSの知識が必要ない
－5 －
PHPによるWEBアプリの構築
1.3 CMSを利用するメリット
メリット
• HTMLのスキルがない人でも更新/編集が可能
• テンプレートを入れ替えるだけでサイトのリニューアルが
できる
• 更新の為のソフトが不要
• コンテンツの目的ごとに担当を分けられる
• コンテンツの品質が維持できる
－6 －
PHPによるWEBアプリの構築
1.4 WordPressの特徴
WordPress 3.2.1 （オープンソースCMS）
• インストール、設定が簡単
• プラグインが充実
動作条件（サーバ）
• PHP バージョン 5.2.4 以上
• MySQL バージョン 5.0 以上
運用に必要なソフトウェア（クライアント）
• Webブラウザ、FTPソフト
－7 －
PHPによるWEBアプリの構築
1.5 WordPressをインストール
(1)WordPressをダウンロードする
http://ja.wordpress.org/
ダウンロード後、ZIP
ファイルを展開しておく
－8 －
PHPによるWEBアプリの構築
(2)MySQLにWordPress用のデータベースとユーザを作成する
MySQL管理ツール
phpMyAdmin
－9 －
PHPによるWEBアプリの構築
(3)展開したWordPressフォルダをサーバへアップロードする
ドキュメントルート
※サーバのhttpd.confで確認
任意のディレクトリ名で
アップロード
－10 －
PHPによるWEBアプリの構築
(4)設定ファイルの権限を書き込み可能に変更する
・[インストールディレクトリ]/wp
・[インストールディレクトリ]/wp/wp-content
－11 －
PHPによるWEBアプリの構築
(5)ブラウザでインストール場所にアクセスする
http://[Webサーバのアドレス]/[WordPressのディレクトリ名]/
－12 －
PHPによるWEBアプリの構築
(6)インストールを開始する
－13 －
PHPによるWEBアプリの構築
(7)データベースの情報を入力する
－14 －
PHPによるWEBアプリの構築
(8)インストール実行をクリックする
－15 －
PHPによるWEBアプリの構築
(9)情報を入力して「WordPressをインストール」をクリックする
•サイトのタイトル
•ユーザー名
•パスワード
•メールアドレス
•検索エンジンの表示有無
－16 －
PHPによるWEBアプリの構築
(10)インストールの完了画面を確認する
－17 －
PHPによるWEBアプリの構築
1.6 WordPressの設定
(1)管理画面にログインする
－18 －
PHPによるWEBアプリの構築
(2)初期画面が表示される
－19 －
PHPによるWEBアプリの構築
(3)管理画面が表示される
－20 －
PHPによるWEBアプリの構築
～WordPressで記事を投稿してみよう～
2. サイト構築
－21 －
PHPによるWEBアプリの構築
(1)インストール時点でのサイトを確認する
－22 －
PHPによるWEBアプリの構築
(2)知の創造プロジェクトのホームページを参考にWordPressに記事を
投稿していく
参考ホームページ：「知の創造プロジェクト」
http://www.csis.oita-u.ac.jp/PICP/index.html
－23 －
PHPによるWEBアプリの構築
(3)投稿記事を確認する
投稿記事一覧を
表示
－24 －
PHPによるWEBアプリの構築
(4)カテゴリーを追加する
以下のカテゴリーを追加
・実施プロジェクト
・セミナー・講演会
・参加者の声
「未分類」を削除
－25 －
PHPによるWEBアプリの構築
(5)記事を作成する
各カテゴリーに日付の違う記事を5件以上投稿する
－26 －
PHPによるWEBアプリの構築
(6)固定ページを確認する
固定ページを
表示
－27 －
PHPによるWEBアプリの構築
(7)固定ページを編集する
以下の固定ページを作成
・概要
・お問い合わせ
－28 －
PHPによるWEBアプリの構築
(8)ナビゲーションメニューを作成する
－29 －
PHPによるWEBアプリの構築
(9)固定ページをメニューに追加する
固定ページがメニュー
に追加される
－30 －
PHPによるWEBアプリの構築
(10)カテゴリーをメニューに追加する
カテゴリーがメニュー
に追加される
－31 －
PHPによるWEBアプリの構築
(11) メニューの項目を並び替える
ドラッグ＆ドロップで
簡単に並び替えができる
メニューを次の順に並べる
①概要、②実施プロジェクト、③セミナー・講演会、④参加者の声、⑤お問い合わせ
－32 －
PHPによるWEBアプリの構築
(12)表示するメニューを指定する
－33 －
PHPによるWEBアプリの構築
(13)サイトの表示を確認する
－34 －
PHPによるWEBアプリの構築
～WordPressで利用されているPHPの基本を学ぼう～
3. PHP概論
－35 －
PHPによるWEBアプリの構築
3.1 PHPとは
サーバサイドスクリプト言語の一つ。
HTML内にPHPスクリプトを埋め込むことができる。
処理結果に応じたHTMLを生成するので動的なWebページ
を表示できる。
オープンソースソフトウェア。
PHPの特徴
• 習得が容易(C言語やJavaの記述方法に似ている)
• データベースとの連携が得意
• 外部モジュールによる拡張性に優れる
－36 －
PHPによるWEBアプリの構築
3.2 PHPの処理の流れ
⑤Webブラウザは異なる内容が表示
PHPファイル
Webサーバ
①ページを閲覧
HTMLファイルと
同じように見える
④HTMLを送信
②PHPのシステムに
ファイルを渡す
③処理の結果を返す
クライアント
PHPエンジン
見るたびに内容が異なる
動的なホームぺージを
表示できる
スクリプトの内容に応じて処理を行う
－37 －
PHPによるWEBアプリの構築
3.3 PHPの記述方法
【phpTest1.php】
<html>
<head>
<title>PHP概論</title>
</head>
<body>
PHPを使ってみよう<br/>
<?php
$date = date('Y/m/d H:i:s');
echo $date;
?>
</body>
</html>
•
•
•
•
•
•
ファイルの拡張子を「php」にする。
PHPスクリプトの前後を<?php～?>で囲む
文の最後に「;」をつける
変数は宣言をせずに使うことができる
変数は変数名の前に$をつける
変数名には英字や数字を使って自由に
つけられるが、先頭を数字にはできない
• PHPの変数はデータ型の制約がない為、
同じ変数に文字、整数、小数点数などを
代入できる
PHPファイルをサーバへアップロードし、Webブラウザで表示させてみましょう。
URL：http://[サーバのIPアドレス]/[アップロードディレクトリ]/phpTest.php
－38 －
PHPによるWEBアプリの構築
if文の使い方
基
本
構
文
if(条件式):
実行する処理;
elseif(条件式):
実行する処理;
else:
実行する処理;
endif;
<?php
$hour = date('H');
echo $hour.'時です。';
if($hour<=3):
echo "おやすみ";
elseif($hour<=10):
echo "おはよう";
elseif($hour<=17):
echo "こんにちは";
elseif($hour<=23):
print "こんばんは";
else:
print "おやすみ";
endif;
?>
</body>
</html>
【phpTest2.php】
<html>
<head>
<title>PHP概論(if文)</title>
</head>
<body>
if文を使ってみよう<br/>
※右上に続く
－39 －
PHPによるWEBアプリの構築
for文の使い方
基
本
構
文
for(開始時の処理; 繰り返しの条件式; 繰り返しごとの処理):
実行する処理;
endfor;
【phpTest3.php】
<html>
<head>
<title>PHP概論(for文)</title>
</head>
<body>
for文を使ってみよう<br/>
<?php
//5回繰り返す
for($i=0; $i<5; $i++):
echo ($i+1).'回目<br/>';
endfor;
?>
</body>
</html>
※右上に続く
• コメントは//を最初につけるか、/* */で囲む
－40 －
PHPによるWEBアプリの構築
foreach文の使い方①
基
本
構
文
foreach(配列 as $変数1):
実行する処理;
endforeach;
【phpTest4.php】
<html>
<head>
<title>PHP概論(foreach文)</title>
</head>
<body>
foreach文を使ってみよう1<br/>
<?php
//配列を用意
$arr = array('Jan'=>'January',
'Feb'=>'February', 'Mar'=>'March');
foreach($arr as $value):
echo $value.'<br/>';
endforeach;
?>
</body>
</html>
※右上に続く
－41 －
PHPによるWEBアプリの構築
foreach文の使い方②
基
本
構
文
foreach(配列 as $変数1=>$変数2):
実行する処理;
endforeach;
【phpTest5.php】
<html>
<head>
<title>PHP概論(foreach文)</title>
</head>
<body>
foreach文を使ってみよう2<br/>
<?php
//配列を用意
$arr = array('Jan'=>'January',
'Feb'=>'February', 'Mar'=>'March');
foreach($arr as $key => $value):
echo $key.'：'.$value.'<br/>';
endforeach;
?>
</body>
</html>
※右上に続く
－42 －
PHPによるWEBアプリの構築
while文の使い方
基
本
構
文
whie(条件式):
実行する処理;
endwhile;
【phpTest6.php】
<html>
<head>
<title>PHP概論(while文)</title>
</head>
<body>
while文を使ってみよう<br/>
<?php
$var = 1;
while($var <= 5):
echo $var++.'<br/>';
endwhile;
?>
</body>
</html>
※右上に続く
－43 －
PHPによるWEBアプリの構築
演習問題
次のHTMLに繰り返しを行うPHPのコードを追加して右のような年齢早見表を作成
して下さい。
スタイルシートは適用してもしなくても構いません。
【phpEx.php】
<html>
<head>
<title>PHP演習問題</title>
<link href="style.css" rel="stylesheet"
type="text/css">
</head>
<body>
<h1>2012年 年齢早見表</h1><br/>
<table>
<tr><th>西暦</th><th>年齢</th></tr>
<tr><td>1985年</td><td>27歳</td></tr>
</table>
</body>
</html>
－44 －
PHPによるWEBアプリの構築
～PHPを使ってテンプレートを書き換えてみよう～
4. テンプレートカスタマイズ
－45 －
PHPによるWEBアプリの構築
4.1 テーマの構造を理解する
■WordPressのテーマシステム
サイトの表示の仕方を管理。管理画面からテーマを選択することで簡
単に着せ替えが可能。ただ、見た目のデザインが変わるだけではなく、
表示する内容もテーマ毎に細かく設定することができる。
■テーマの構成
ヘッダー
コンテンツ
サイドバー
フッター
－46 －
基本的なウェブページ構成
はヘッダー部分、コンテンツ
部分、サイドバー部分、
フッター部分のテンプレート
ファイルで構成される。
PHPによるWEBアプリの構築
■テンプレート階層
TwentyTenテーマのテンプレートを確認してみましょう。
これらの
テンプレート
に沿って
出力される
－47 －
PHPによるWEBアプリの構築
トップページは「index.php」というテンプレートに基づいて出力されている。
－48 －
PHPによるWEBアプリの構築
新規のテンプレートファイル「home.php」をサーバにアップロードして
表示を確認してみましょう。
① FTPソフトで/[WordPressインストールディレクトリ]/wp-content/themes/twentyten
に中身が空のファイル「home.php」をアップロードする。
※テンプレートファイルは全てこのディレクトリに格納する。
② FTPソフトでhome.phpのパーミッションを書き込み権限有りに設定する。
③ WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テーマ
の編集」画面でテンプレートの「home.php」を選択する。
④ home.phpに「優先順位のテスト」と入力して「ファイルの更新」ボタンをクリックする。
⑤ ブラウザでサイトを表示させる。
－49 －
PHPによるWEBアプリの構築
トップページの表示が変わっている！
各ページとテンプレートは1対1で対応しているわけではない。
・テンプレートの優先順位
home.php > index.php
「home.php」というテンプレートがあると、index.phpは使われず、
home.phpが優先的に使われる。
テーマをカスタマイズする際はテンプレート階層
を考慮することが大切
－50 －
PHPによるWEBアプリの構築
■カスタマイズの留意点
index.phpはなるべくカスタマイズしない。
• index.phpはページの種類に関係なく全てのページで使用することができる
テンプレートであり、その分カスタマイズすることで、影響範囲が大きく及ん
でしまう恐れがある。
ページの種類に応じたテンプレートを追加する
• ページの種類ごとにテンプレートを用意することで、思わぬページに影響
が及ぶことを防ぐことができ、メンテナンス性も向上する。
共通部分のテンプレートのカスタマイズは要注意
• ヘッダーやフッターなどの共通部分は複数のテンプレートで読み込んで
使用されているため、カスタマイズの際には注意が必要である。
－51 －
PHPによるWEBアプリの構築
4.2 WordPressループをカスタマイズする
■WordPressループの構造
1: <?php if(have_posts()) : ?>
if(have_posts()) :
2:
投稿一覧を出力する前に行う処理
…表示すべき投稿があるかどうか判定
3:
<?php whie(have_posts()) : the_posts(); ?>
whie(have_posts()) :
4:
個々の投稿を出力する処理
…投稿がある間
5:
<?php endwhile(); ?>
endwhile();
6:
投稿一覧を出力したあとに行う処理
…while文の終了
the_posts();
…個々の投稿を出力
7: <?php else: ?>
else:
8:
…1行目のif文に対するelse文
投稿がない場合に行う処理
9: <?php endif; ?>
endif;
…1行目のif文の終了
－52 －
PHPによるWEBアプリの構築
■先頭の投稿だけ違う処理を行う
1: <?php if(have_posts()) : ?>
2:
投稿一覧を出力する前に行う処理
3:
<?php $is_first = true; ?>
$is_first = true;
4:
<?php whie(have_posts()) : the_posts(); ?>
…最初の投稿であることを判定する為、
変数$is_first にtrueを代入
5:
個々の投稿を出力する処理
6:
<?php if($is_first ): ?>
if($is_first ):
7:
先頭の投稿のときだけ情報を出力する処理
…最初の投稿であるか判定
8:
<?php endif; ?>
endif;
9:
<?php $is_first = false; ?>
…if文の終了
10:
<?php endwhile(); ?>
$is_first = false;
11:
投稿一覧を出力したあとに行う処理
…次回の繰り返しから最初の投稿でなくな
12: <?php else: ?>
ったことを判定させる為、変数$is_first
13:
にfalseを代入
投稿がない場合に行う処理
14: <?php endif; ?>
－53 －
PHPによるWEBアプリの構築
先頭の投稿だけにバナーを表示する
作成するサンプル
① 表示するバナーをアップロードする
FTPソフトで/[WordPressインストールディレクトリ]/wp-content/themes/twentyten
に「banner.gif」をアップロードする。
－54 －
PHPによるWEBアプリの構築
② loop.phpを編集する
【loop.php】
(以前略)
<?php $is_first=true; //最初の投稿判定フラグをtrueに設定 ?>
<?php while ( have_posts() ) : the_post(); ?>
<?php /* How to display posts of the Gallery format. The gallery category is the old way. */ ?>
<?php if ( ( function_exists( 'get_post_format' ) && 'gallery' == get_post_format( $post->ID ) ) ||
in_category( _x( 'gallery', 'gallery category slug', 'twentyten' ) ) ) : ?>
(途中略)
</div><!-- .entry-utility -->
<?php //バナーを表示 ?>
<?php if($is_first): ?>
<img src="<?php bloginfo('template_url'); ?>/banner.gif" alt="PHP講習会のお知らせ" width="270"
height="50" />
<?php endif; ?>
</div><!-- #post-## -->
<?php /* How to display posts of the Aside format. The asides category is the old way. */ ?>
(途中略)
※次ページへ続く
－55 －
PHPによるWEBアプリの構築
</div><!-- .entry-utility -->
<?php //バナーを表示 ?>
<?php if($is_first): ?>
<img src="<?php bloginfo('template_url'); ?>/banner.gif" alt="PHP講習会のお知らせ" width="270"
height="50" />
<?php endif; ?>
</div><!-- #post-## -->
<?php /* How to display all other posts. */ ?>
<?php //バナーを表示 ?>
<?php if($is_first): ?>
<img src="<?php bloginfo('template_url'); ?>/banner.gif" alt="PHP講習会のお知らせ" width="270"
height="50" />
<?php endif; ?>
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>
<?php $is_first=false; //最初の投稿判定フラグをfalseに設定 ?>
<?php endwhile; // End the loop. Whew. ?>
－56 －
PHPによるWEBアプリの構築
■奇数件目と偶数件目で違う情報を出力する
1: <?php if(have_posts()) : ?>
2: 投稿一覧を出力する前に行う処理
3: <?php $post_counter = 1; ?>
4: <?php whie(have_posts()) : the_posts(); ?>
5:
個々の投稿を出力する処理
6:
<?php if($post_counter %2 ==1): ?>
7:
奇数件目の投稿のときだけ情報を出力する処理
8:
<?php else: ?>
9:
偶数件目の投稿のときだけ情報を出力する処理
10:
<?php endif; ?>
11:
<?php $post_counter++; ?>
12: <?php endwhile(); ?>
13: 投稿一覧を出力したあとに行う処理
14: <?php else: ?>
15: 投稿がない場合に行う処理
16: <?php endif; ?>
－57 －
$ post_counter
…投稿の繰り返しの回数をカウン
トする変数
if($post_counter %2 ==1):
…繰り返しの回数を2で割った値
が1である場合は奇数と判定
else:
… $post_counter %2 ==1でない場
合は偶数と判定
$post_counter++;
… 繰り返しの回数を1増やす
PHPによるWEBアプリの構築
奇数件目と偶数件目でデザインを変える
作成するサンプル
－58 －
PHPによるWEBアプリの構築
① style.cssの編集
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「style.css」を選択し、最後の行の下に以下を追加
する。
【style.css】
.odd {
background-color : #cccccc;
}
② loop.phpの編集
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テーマ
の編集」画面でスタイルの「style.css」を選択し、最後の行の下に以下を追加する。
【loop.php】
(途中略)
<?php $post_counter = 1; //投稿繰り返し回数 ?>
<?php while ( have_posts() ) : the_post(); ?>
※次ページに続く
－59 －
PHPによるWEBアプリの構築
<?php /* How to display posts in the Gallery category. */ ?>
<?php if ( in_category( _x('gallery', 'gallery category slug', 'twentyten') ) ) : ?>
<?php if ($post_counter %2 == 1) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('odd'); ?>>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('even'); ?>>
<?php endif; ?>
(途中略)
<?php elseif ( ( function_exists( 'get_post_format' ) && 'aside' == get_post_format( $post->ID
) ) || in_category( _x( 'asides', 'asides category slug', 'twentyten' ) ) ) : ?>
<?php if ($post_counter %2 == 1) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('odd'); ?>>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('even'); ?>>
<?php endif; ?>
※次ページに続く
－60 －
PHPによるWEBアプリの構築
(途中略)
<?php /* How to display all other posts. */ ?>
<?php else : ?>
<?php if ($post_counter %2 == 1) : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('odd'); ?>>
<?php else : ?>
<div id="post-<?php the_ID(); ?>" <?php post_class('even'); ?>>
<?php endif; ?>
(途中略)
<?php endif; // This was the if statement that broke the loop into three parts based on
categories. ?>
<?php $is_first=false; ?>
<?php $post_counter++; ?>
－61 －
PHPによるWEBアプリの構築
4.3 条件タグでページの種類を判断して出力を変える
■ページの種類によってヘッダー/フッター/サイドバーの
出力を変えたい場合
条件タグで条件に応じて処理を分ける
1: <?php if(is_category()) : ?>
if(is_category()) :
2:
…現在出力中のページがカテゴ
カテゴリーアーカイブページのときに出力する内容
3: <?php else: ?>
リーアーカイブのページであるか
4:
どうかを判断する
その他のページのときに出力する内容
5: <?php endif; ?>
if(is_category('xxxxx')) :
…カテゴリー名が「xxxxx 」の場合
if(is_category(array('xxxxx', 'yyyyy'))) :
…カテゴリー名が「xxxxx」または「yyyyy」の場合
－62 －
PHPによるWEBアプリの構築
カテゴリーでヘッダーの画像を変える
作成するサンプル
－63 －
PHPによるWEBアプリの構築
① カテゴリーのタイトル画像をアップロードする
FTPソフトで/[WordPressインストールディレクトリ]/wp-content/themes/twentyten
に「title_seminar.jpg」、 「 title_project.jpg 」、 「 title_voice.jpg 」をアップロードする。
② ヘッダーのテンプレートを書き換える
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「header.php」を選択し、編集する。
【header.php】(編集前)
(途中略)
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID );
elseif ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>"
height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
－64 －
PHPによるWEBアプリの構築
【header.php】(編集後)
(途中略)
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID );
elseif (is_category('セミナー・講演会')) : ?>
<img src="<?php bloginfo('template_directory'); ?>/images/headers/title_seminar.jpg" width="<?php
echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php elseif (is_category('実施プロジェクト')) : ?>
<img src="<?php bloginfo('template_directory'); ?>/images/headers/title_project.jpg" width="<?php
echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php elseif (is_category('参加者の声')) : ?>
<img src="<?php bloginfo('template_directory'); ?>/images/headers/title_voice.jpg" width="<?php
echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php elseif ( get_header_image() ) : ?>
<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php
echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
<?php endif; ?>
－65 －
PHPによるWEBアプリの構築
4.4 複数のテンプレートで共通する部分を1ヵ所にまとめる
■共通部分をまとめる方法
(1) 共通部分を1つのテンプレートにまとめて、index.phpやsingle.phpなどにそのテン
プレートを組み込む。
(2) 「functions.php」テンプレートを使って、共通部分を関数化する。
functions.php…PHPのさまざまな処理を記述する特殊なPHP
【index.php】
【single.php】
<?php foo(); ?>
【functions.php】
<?php foo(); ?>
function foo() {
:
}
－66 －
【category.php】
<?php foo(); ?>
複数のテンプレートで
共通の関数を実行する
PHPによるWEBアプリの構築
4.2で作成した先頭の投稿の直後だけにバナーを表示する処理を
関数化する
■関数化する処理
(1) WordPressループに入る前に、変数$is_firstをtrueに初期化する
(2) WordPressループの最後で、最初の投稿かどうか(変数$is_firstの値がtrueか
どうか)を判断して、そうであればバナーを出力する
(1)と(2)それぞれを関数として記述する
－67 －
PHPによるWEBアプリの構築
① functions.phpに新しい関数を追加する
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「functions.php」を選択し、編集する。
【functions.php】
if ($is_first) {
//変数$is_firstをtrueに初期化する関数
echo '<img src="';
function setup_first_post() {
echo bloginfo('template_url');
global $is_first;
echo '/banner.gif" alt="PHP講習会のお知ら
$is_first = true;
せ" width="270" height="50" />';
}
}
$is_first = false;
//バナーを出力する関数
}
function first_post_only() {
global $is_first;
※右上に続く
－68 －
PHPによるWEBアプリの構築
② loop.phpを書き換える
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「loop.php」を選択し、編集する。
【loop.php】
(以前略)
<?php $is_first=true; //最初の投稿判定フラグをtrueに設定 ?>
<?php setup_first_post(); ?>
<?php while ( have_posts() ) : the_post(); ?>
⇚ 削除
(途中略)
</div><!-- .entry-utility -->
<?php //バナーを表示 ?>
⇚ 削除
<?php if($is_first): ?>
<img src="<?php bloginfo('template_url'); ?>/banner.gif" alt="PHP講習会のお知らせ"
width="270" height="50" />
<?php endif; ?>
<?php first_post_only(); ?>
</div><!-- #post-## -->
※次ページへ続く
－69 －
PHPによるWEBアプリの構築
<?php /* How to display posts of the Aside format. The asides category is the old way. */ ?>
(途中略)
</div><!-- .entry-utility -->
<?php //バナーを表示 ?>
⇚ 削除
<?php if($is_first): ?>
<img src="<?php bloginfo('template_url'); ?>/banner.gif" alt="PHP講習会のお知らせ"
width="270" height="50" />
<?php endif; ?>
<?php first_post_only(); ?>
</div><!-- #post-## -->
<?php /* How to display all other posts. */ ?>
<?php //バナーを表示 ?>
⇚ 削除
<?php if($is_first): ?>
<img src="<?php bloginfo('template_url'); ?>/banner.gif" alt="PHP講習会のお知らせ"
width="270" height="50" />
<?php endif; ?>
<?php first_post_only(); ?>
</div><!-- #post-## -->
<?php comments_template( '', true ); ?>
<?php endif; // This was the if statement that broke the loop into three parts based on categories. ?>
<?php $is_first=false; //最初の投稿判定フラグをfalseに設定 ?> ⇚ 削除
－70 －
PHPによるWEBアプリの構築
～WordPressの関数を利用して柔軟なデータ出力を行う～
5.関数を利用してカスタマイズする
－71 －
PHPによるWEBアプリの構築
5.1 関数を活用する
■テンプレートタグとWordPress関数
テンプレートタグ
…WordPressに何かを実行あるいは取得するように指示する関数。
特にWordPress テーマ用に定義されているもの。
<h1><?php bloginfo('name'); ?></h1>
WordPress関数
…WordPress のコア機能の形成に使われる関数。
プラグインやテーマ開発に役立つ。関数を利用することでテン
プレートタグよりも柔軟にデータを扱うことができる。
⇒よりニーズに合ったカスタマイズが可能。
－72 －
PHPによるWEBアプリの構築
■関数リファレンス
URL:http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3
%83%AC%E3%83%B3%E3%82%B9
－73 －
PHPによるWEBアプリの構築
「実施プロジェクト」カテゴリまたは「セミナー・講演会」カテゴリから
最新投稿5件をトップページの先頭に表示する
作成するサンプル
－74 －
PHPによるWEBアプリの構築
① new.phpを作成する
FTPソフトで/[WordPressインストールディレクトリ]/wp-content/themes/twentyten
に以下を記述した「new.php」をアップロードする。
【new.php】
<div class="new">
<div class="new-header">新着情報</div>
<ul>
<?php
$info_cat_id1= get_cat_ID('実施プロジェクト');
$info_cat_id2= get_cat_ID('セミナー・講演会');
$info_posts = get_posts("category=$info_cat_id1,$info_cat_id2&numberposts=5
&orderby=post_date&order=DESC");
foreach ($info_posts as $post) : setup_postdata($post);
?>
<li><a href=“<?php the_permalink(); ?>”><?php the_title(); ?></a>(<?php the_time('Y年m月d日
'); ?>)</li>
<?php endforeach; ?>
</ul>
</div>
</div>
－75 －
PHPによるWEBアプリの構築
② index.phpとstyle.cssを書き換える
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「index.php」と「style.css」を選択し、それぞれを編
集する。
【 index.php 】
<div id="container">
<div id="content" role="main">
<?php get_template_part('new'); ?>
<?php
/* Run the loop to output the posts.
【 style.css】
.new {
padding : 0.5em 1em;
border : 1px solid #000;
background-color : #eee;
margin-bottom : 1em;
}
.new-header {
font-size : 150%;
margin-bottom : 0.5em;
}
－76 －
PHPによるWEBアプリの構築
5.2 カスタムフィールドを使ってみよう
カスタムフィールド
…投稿ごとに追加できる独自のフィールド。
タイトル、本文以外にも任意でフィールドを投稿画面に追加し、
出力することができる。
■カスタムフィールドを表示させる
－77 －
PHPによるWEBアプリの構築
WordPressの管理画面の左側メニューより「投稿」-「投稿一覧」を選択し、「投稿の
編集」画面を開くと、カスタムフィールドの入力画面が追加されている
－78 －
PHPによるWEBアプリの構築
カスタムフィールドを追加してタイトル、本文以外の投稿・表示が
できるようにする
－79 －
PHPによるWEBアプリの構築
① loop.phpを書き換える
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「 loop.php 」を選択し、編集する。
※twentytenテーマのバージョン1.2以降はloop-single.phpを編集する。
【loop.php】
(途中略)
</div><!-- #nav-below -->
<?php //comments_template( '', true ); ?>
<?php $post_custom = get_post_custom(); ?>
<?php if(isset($post_custom['講演会が開催されました！'])): ?>
<div class='custom'>
<div class='custom-header'>講演会が開催されました！</div>
<?php echo $post_custom['講演会が開催されました！'][0]; ?>
</div>
<?php endif; ?>
<?php endwhile; // end of the loop. ?>
－80 －
PHPによるWEBアプリの構築
② style.cssにスタイルの指定を追加する
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「style.css」を選択し、編集する。
【 style.css 】
.custom{
border: 2px dotted #0000cc;
margin-top: 10px;
padding: 5px;
}
.custom-header {
font-size : 150%;
margin-bottom : 0.5em;
}
－81 －
PHPによるWEBアプリの構築
5.3 同じカテゴリーの投稿を一覧表示する
$wp_queryオブジェクト
… ページに表示されている投稿などの情報をはじめとして、現在
アクセスされているページに関するさまざまな情報を保持している
オブジェクト
「クラス」として定義されている
プロパティ
オブジェクトの持つデータ
メソッド
操作
■プロパティ・メソッドへのアクセス
$オブジェクト変数名 -> プロパティ;
$オブジェクト変数名 -> メソッド名();
－82 －
PHPによるWEBアプリの構築
■$wp_queryオブジェクトに含まれるプロパティとメソッド
$wp_queryオブジェクト
プロパティ
メソッド
queried_object
(ページの元のオブジェクト)
get_posts
(投稿をデータベースから読み込む)
queried_object_id
(ページの元のオブジェクトのID)
have_posts
(出力する投稿があるかどうかを判断)
post_count
(投稿の数)
the_post
(次の投稿に進む)
：
：
※WP_Queryクラス及び上記のプロパティやメソッドは
ソース「/[WordPressインストールディレクトリ]/wp-includes/query.php」
の中で定義されている。
－83 －
PHPによるWEBアプリの構築
単体投稿ページに同一カテゴリ投稿のリストを出力する
作成するサンプル
－84 －
PHPによるWEBアプリの構築
① sidebar.phpを書き換える
WordPressの管理画面の左側メニューより「外観」-「テーマ編集」を選択し、「テー
マの編集」画面でテンプレートの「sidebar.php」を選択し、編集する。
【sidebar.php】
<div id="primary" class="widget-area" role="complementary">
<ul class="xoxo">
<?php
if (is_single()) :
$cur_post = $wp_query->get_queried_object();
$post_cats = get_the_category($cur_post->ID);
foreach ($post_cats as $post_cat) :
?>
<li class="widget-container">
<h3 class=“widget-title”>「<a href=“<?php echo get_category_link($post_cat>term_id); ?>”><?php echo $post_cat->name; ?></a>」カテゴリの投稿</h3>
<ul>
※次ページに続く
－85 －
PHPによるWEBアプリの構築
<?php
$cat_posts = get_posts(“category=” . $post_cat->term_id . “&numberposts=-1
&orderby=date&order=DESC");
foreach ($cat_posts as $post) : setup_postdata($post);
?><li>
<?php if ($post->ID == $cur_post->ID) : ?>
<span class="current_post">
<?php else : ?>
<a href="<?php the_permalink(); ?>">
<?php endif; ?>
<?php the_title(); ?>
<?php if ($post->ID == $cur_post->ID) : ?>
</span>
<?php else : ?>
</a>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
<?php endforeach; ?>
</li>
<?php endif; ?>
－86 －
PHPによるWEBアプリの構築
～WordPressのデータベースから直接データを取得してみよう～
6.データベースにアクセスする
－87 －
PHPによるWEBアプリの構築
6.1 データベースへのアクセス
WordPressで入力したデータはMySQLに登録されている
MySQL
データ
テーブル
－88 －
PHPによるWEBアプリの構築
■データベースからデータを取得する方法
(1) WordPress関数を利用する
メリット ：簡単にデータを読み込むことができる
デメリット ：特殊な条件でデータを読み込む場合、条件の指定が
難しい場合がある
(2) データベースへ直接アクセスする
メリット ：WorｄPressの標準関数では指定できないような複雑な
条件の指定が可能
デメリット ：WordPressのバージョンアップに伴い、データベースの
構造が変更されることもあり、処理を変更する必要が
が発生する恐れがある
関数を全く同じデータにならない場合がある
－89 －
PHPによるWEBアプリの構築
6.2 WordPressのデータベース構造(単一ブログの場合)
■WordPressの11個のテーブル
wp_posts
記事/固定ページ/メディア/メニュー/カスタム投稿タイプ
wp_postmeta
wp_postsの補助的な情報(カスタムフィールドなど)
wp_terms
カテゴリ/タグ/メニューの分類/カスタム分類
wp_term_relationships
wp_postsテーブルとwp_termsテーブルの関連付け
wp_term_taxonomy
wp_termsのデータの種類とデータ間の親子関係
wp_users
ユーザー
wp_usermeta
ユーザーの補助的な情報
wp_comments
コメント/トラックバック
wp_commentmeta
コメント/トラックバックの補助的な情報
wp_links
リンク
wp_options
各種の設定
－90 －
PHPによるWEBアプリの構築
■wp_postsテーブルの主なフィールド
ID
bigint(20)
postのID
post_author
bigint(20)
postを投稿したユーザーのＩＤ
post_content
longtext
本文
post_title
text
タイトル
post_excerpt
text
概要
post_status
varchar(20)
公開状況(publish：公開、draft：下書きなど)
post_date
datetime
公開日時
post_modified
datetime
最終更新日時
post_type
varchar(20)
タイプ（post：記事/page：固定ページなど）
投稿/固定ページなどのコンテンツ系のデータはすべてwp_posts
テーブルで管理されている
－91 －
PHPによるWEBアプリの構築
6.3 wpdbオブジェクトによるデータベースアクセス
■wpdbオブジェクトを使う
wpdbクラス・・・「ezSQL」というクラスライブラリをWordPress向けに改良した
クラス。データベースを操作するための基本的なメソッドが
含まれている。
※ezSQL：PHPのプログラムからデータベースへアクセス
するためのオープンソースのライブラリ。
WordPress初期化時
生成
wpdbクラス
グローバル変数
$wpdb
wpdbオブジェクト
初期化時にwpdbオブジェクト
を生成してグローバル変数
$wpdbに割り当てる。
テンプレートの中で$wpdbを
通してデータベースにアクセス
することができる。
例：$wpdb->メソッド名()
－92 －
PHPによるWEBアプリの構築
■SQLのSELECT文を実行する
データ取得のSQL⇒SELECT文
SELECT文の基本構文
SELECT 列名1 [,列名2, ・・・] FROM テーブル名
[WHERE 絞り込む条件]
[ORDER BY 並び替えの基準となる列名 [ASC または DESC]]
wpdbクラスでSELECT文を実行するにはget_resultsメソッドを利用する
get_resultsメソッドの基本構文
$wpdb -> get_results(SELECT文)
※SELECT文にはテーブル名を直接指定するのではなく、 $wpdbオブジェクトの
プロパティを使ってテーブル名を指定する
－93 －
PHPによるWEBアプリの構築
■投稿のテーブルから、最近投稿されてかつ公開されている投稿を
10件読み込んで変数$postsに割り当てる場合
get_resultsメソッドの使用例①
$posts = $wpdb -> get_results(“SELECT * FROM $wpdb->posts
WHERE post_type = 'post' AND post_status = 'publish'
ORDER BY post_date DESC LIMIT 10”);
get_resultsメソッドの戻り値は取得したレコードの配列になる。
データはオブジェクトの形式となり、
$変数[n] -> フィールド名
の形で取得結果のフィールドの値を読むことができる。
1件目のタイトル： $posts[0]->post_title
2件目のタイトル： $posts[1]->post_title
：
：
－94 －
PHPによるWEBアプリの構築
■get_resultsメソッドの結果を配列で得る場合
get_resultsメソッドの使用例②
$posts = $wpdb -> get_results(“SELECT * FROM $wpdb->posts
WHERE post_type = 'post' AND post_status = 'publish'
ORDER BY post_date DESC LIMIT 10”, ARRAY_A);
get_resultsメソッドにより取得したデータはオブジェクト形式ではなく、連想配列
の形式になる。
$変数[n][フィールド名]
の形で取得結果のフィールドの値を読むことができる。
1件目のタイトル： $posts[0]['post_title']
2件目のタイトル： $posts[1]['post_title']
：
：
※ get_resultsメソッドの2つ目のパラメータを指定しない場合、2つ目のパラメータ
は「OBJECT」になっており、結果はオブジェクトの形式となる。
－95 －
PHPによるWEBアプリの構築
■1行だけを読み込む場合
get_rowメソッドの基本構文
$wpdb -> get_row(SELECT文)
※データの取得結果が1行だけになる場合はget_resultsメソッドの代わりに
get_rowメソッドを利用することもできる。
$user = $wpdb -> get_row(“SELECT * FROM $wpdb->users WHERE ID = 1”);
$user -> user_nicename //ユーザ名を取得
■1つの値を読み込む場合
get_varメソッドの基本構文
$wpdb -> get_var(SELECT文)
※データの取得結果が1行でフィールドを1つだけ取得したい場合はget_varメソッ
ドを利用することもできる。メソッドの戻り値は読み込んだフィールドの値になる。
－96 －
PHPによるWEBアプリの構築
■データの追加などを行う
queryメソッドの基本構文
$wpdb -> query(INSERTなどのSQL)
※queryメソッドはあらゆるSQLクエリを発行することができ、データの追加
(INSERT)/変更(UPDATE)/削除(DELETE)なども行うことができる。
■データの追加に関する関数を使用して追加を行う場合
wp_insert_postメソッドの使用例
wp_insert_post(投稿オブジェクト)
// 投稿オブジェクトの作成
$my_post = array();
$my_post['post_title'] = 'My post';
$my_post['post_content'] = 'This is my post.';
$my_post['post_status'] = 'publish';
※右上に続く
－97 －
$my_post['post_author'] = 1;
$my_post['post_category'] = array(8);
// データベースに投稿を追加
wp_insert_post( $my_post );
PHPによるWEBアプリの構築
■SQLインジェクション攻撃について
フォームで入力された値をSQLの中で使うとき、「SQLインジェクション」が
起こることがある。
SQLインジェクション攻撃：
フォームなどから不正な値を送信して想定外のSQLを実行させ、データベース
から値を盗み出したり、データを破壊したりすること。
SQLインジェクションの例
・用意しているSQL文
SELECT * FROM $wpdb->users WHERE user_login = 'ユーザ名'
「ユーザ名」に入力されたユーザ名を埋め込んでSQLを発行する。
しかし、ユーザ名の代わりに「' or '1」という値を入力されると・・・
SELECT * FROM $wpdb->users WHERE user_login = '' or '1'
「or '1'」という条件が成立する為、wp_usersの全てのデータが取り出されてしまう
－98 －
PHPによるWEBアプリの構築
■prepareメソッドを使う
SQL インジェクション攻撃からクエリを保護するためには、実行する前にクエリ
データはすべて SQL エスケープする必要がある。
SQLエスケープ：
SQLにそのまま入れると危険な値(「'」など)を修正して害のない値に変換する。
プリペアドステートメント：
あらかじめSQL文に入力値をパラメータとして記述しておき、実行時に入力さ
れた値を埋め込む。この時に渡されたパラメータのエスケープ処理を行う。
プリペアドステートメントの使用例
$wpdb->prepare(プリペアドステートメント用のSQL, 値1, 値2, …)
$user = $wpdb->get_results(
$wpdb->prepare (“SELECT * FROM $wpdb->users
WHERE user_login = %s”, $user_name));
－99 －
PHPによるWEBアプリの構築
■エラーメッセージを表示する
get_resultsメソッドなどでデータベースにアクセスした際にエラーが発生しても、
標準ではエラーメッセージは表示されない。
⇒SQL文の構文に誤りがあったとしても、ヒットするデータが1件もない場合と
同じ結果になる。
データベースにアクセスするテンプレートなどの開発中には、エラーメッセージを
表示して、問題点を探しやすくしておくとよい。
エラーの出力を有効化にする
$wpdb->show_errors();
テンプレートの開発が終わったら、テンプレートからshow_errorsメソッドの文を
削除して、エラーメッセージを表示しない状態に戻す。
－100 －
PHPによるWEBアプリの構築
6.4 画像一覧のページを作る
最近アップロードした画像を一覧形式で表示する
－101 －
PHPによるWEBアプリの構築
1.データベースからメディアを読み込む
■画像を読み込む条件を考える
wp_postsテーブル
publish
投稿用
ID ・・・
メディア用
ID ・・・ post_type
post_status
attachment
値が同じ
post_mime_type post_parent
image/○○○
publish
■画像を読み込むためのSQL
SELECT a.* FROM $wpdb_posts a, $wpdb_posts p
WHERE a.post_parent = p.ID AND a.post_mime_type LIKE 'image/%'
AND a.post_type = 'attachment' AND p.post_status = 'publish'
－102 －
PHPによるWEBアプリの構築
■画像の件数を数えるSQL
画像を1ページあたり10件ずつ分割して読み込むには画像の全件数を得ること
が必要。件数は取得する項目にCOUNT(a.ID)をすることで取得できる。
■読み込んだ画像を順に処理する
メディアは投稿の一種のように扱われており(投稿の本文とは別にwp_postテー
ブルにメディア用のレコードが登録される)、投稿関係の関数をそのまま使える
場合がある。
foreach ($attachments as $post) { //変数$attachmentsは読み込んだ画像の配列
setup_postdata($post);
個々の画像に対する処理
}
－103 －
PHPによるWEBアプリの構築
2.画像一覧用のページテンプレートの作成
① listimages.phpをアップロードする
FTPソフトで/[WordPressインストールディレクトリ]/wp-content/themes/twentyten
に編集済みの「listimages.php」をアップロードする。
3. ページ表示前の初期化を行う
■変数の初期化
// 変数の初期化
$per_page = 10;
$per_row = 2;
$max_width = 200;
$max_height = 150;
//1ページあたりの画像の表示件数
//1行あたりの画像の表示列数(2列)
//画像１つの最大表示幅(200ピクセル)
//画像1つの最大表示高さ(150ピクセル)
－104 －
PHPによるWEBアプリの構築
■画像の数を得る
// 画像の数を得る
$sql = <<< HERE
SELECT COUNT(a.ID) FROM $wpdb->posts a, $wpdb->posts p
WHERE a.post_parent = p.ID
AND a.post_mime_type LIKE 'image/%'
AND a.post_type = 'attachment'
AND p.post_status = 'publish'
HERE;
$count = $wpdb->get_var($sql);
//get_varメソッドでSQLを実行し、
//結果を変数$count に代入する
－105 －
PHPによるWEBアプリの構築
■ページ分割の準備をする
(1)
(2)
(3)
(4)
(5)
オブジェクトの全件数を求める
(1)の件数と、1ページあたりの件数から、全ページ数を求める
表示するページ番号を得る
ページ番号に応じてスキップする件数（オフセット）を求める
ページの先頭/最後のオブジェクトの番号を求める
求める値
求める式
全ページ数
(オブジェクトの全件数÷1ページあたりの件数)の小数
点以下を切り上げた値
オフセット
(ページ番号‐1)×1ページあたりの件数
ページの先頭のオブジェクトの番号 (ページ番号‐1)×1ページあたりの件数+1
ページの最後のオブジェクトの番号 ページ番号×1ページあたりの件数。ただし、最後の
ページの場合はオブジェクトの全件数
－106 －
PHPによるWEBアプリの構築
■全ページ数などを求める
// 画像の数から全ページ数を求める
$page_counts = ceil($count / $per_page);
// URLからページ番号を得る
$page_no = intval($wp_query->get('paged'));
if ($page_no < 1) {
$page_no = 1;
}
else if ($page_no > $page_counts) {
$page_no = $page_counts;
}
// オフセットを求める
$offset = ($page_no - 1) * $per_page;
// ページ内の先頭と最後の画像の番号を求める
$page_start = ($page_no - 1) * $per_page + 1;
$page_end = $page_no * $per_page;
if ($page_end > $count) {
$page_end = $count;
}
－107 －
PHPによるWEBアプリの構築
■画像を読み込む
// 画像を読み込む
$sql = <<< HERE
SELECT a.* FROM $wpdb->posts a, $wpdb->posts p
WHERE a.post_parent = p.ID
AND a.post_mime_type LIKE 'image/%'
AND a.post_type = 'attachment'
AND p.post_status = 'publish'
ORDER BY a.post_date DESC
LIMIT $offset, $per_page
//先頭から変数$offset件飛ばして変数$offset件分取得する
HERE;
$attachments = $wpdb->get_results($sql);
－108 －
PHPによるWEBアプリの構築
4.画像一覧の表示
■ページのタイトルとtableタグを出力する
<h2>画像の一覧(<?php echo $count; ?>件中<?php echo $page_start; ?>～<?php echo
$page_end; ?>件目)</h2>
<table class="image-list">
変数$count：画像の全件数
変数$page_start：ページの先頭の画像の番号
変数$page_end ：ページの最後の画像の番号
初期化の処理の際に求めた
値を使用する
■画像の貼り付け先投稿の情報の取得
<?php
$ctr = 0;
// 画像を順に出力する
foreach ($attachments as $attachment) :
// 画像の貼り付け先投稿のタイトルとアドレスを得る
$post = get_post($attachment->post_parent);
setup_postdata($post);
//貼り付け先投稿を読み込む
$attached_title = get_the_title($post->ID);
//投稿のタイトルを取得
$attached_url = get_permalink($post->ID);
//投稿のURLを取得
－109 －
PHPによるWEBアプリの構築
■画像のアドレス/概要/タイトルを得る
// 画像のアドレス／概要／タイトルを得る
$post = $attachment;
//画像の情報を変数$postに割り当てる
setup_postdata($post);
//画像の情報を読み込む
$url = wp_get_attachment_url($post->ID); //画像のURLを取得
$alt = $post->post_content;
//概要を取得
$title = $post->post_excerpt;
//タイトルを取得
■画像の幅と高さを求める
// 画像の幅と高さを求める
$at_data = wp_get_attachment_metadata($post->ID); //画像のメタデータを読み込む
$width = $at_data['width'];
//得られたメタデータより画像の幅を取得
$height = $at_data['height'];
//得られたメタデータより画像の高さを取得
if (!$width || !$height) {
//幅または高さが読み込めない場合
$width = $max_width;
//幅/高さをマス目の大きさに合わせる
$height = $max_height;
}
－110 －
PHPによるWEBアプリの構築
■画像を縮小する
// 画像の縦横比を維持したまま、
// 幅が$max_width／高さが$max_heightに収まるように
// サイズを計算しなおす
if ($width > $max_width || $height > $max_height) {
// 横長の画像の場合
if ($width / $height >= $max_width / $max_height) {
$rate = $max_width / $width;
$width = $max_width;
$height = $height * $rate;
}
// 縦長の画像の場合
else {
$rate = $max_height / $height;
$width = $width * $rate;
$height = $max_height;
}
}
－111 －
PHPによるWEBアプリの構築
■行の先頭/最後の列かどうかを変数で示す
// 行の先頭／最後かどうかを、変数$row_first／$row_endに代入する
$row_first = ($ctr % $per_row == 0);
$row_end = ($ctr % $per_row == $per_row - 1);
?>
2列の場合の表のマス目と変数$ctrの値/$ctr を列数で割った余りとの対応
$ctr の値
$ctr を列数で割った余り
1列目
2列目
1列目
2列目
1行目
0
1
0
1
2行目
2
3
0
1
3行目
4
5
0
1
…
…
…
…
…
行の最後は余りが
列数より
1小さい値になる
<tr>タグを記述する
判定に使用する
－112 －
PHPによるWEBアプリの構築
5.画像を出力する
<?php if ($row_first) : ?><tr><?php endif; ?> //$row_firstがtrueの場合<tr>タグを記述
<td class="one-image">
<table class="one-image-tbl">
<tr>
<td class="one-image-tbl-img">
<a href="<?php echo $url; ?>"><img src="<?php echo $url; ?>" width="<?php echo
$width; ?>" height="<?php echo $height; ?>" alt="<?php echo $alt ?>" title="<?php echo
$title ?>" /></a>
</td>
</tr>
<tr>
<td class="one-image-tbl-caption">
<a href="<?php echo $attached_url; ?>"><?php echo $attached_title; ?></a>
</td>
</tr>
</table>
</td>
<?php if ($row_end) : ?></tr><?php endif; $ctr++; ?> //$row_endがfalseの場合</tr>タグを記述
<?php endforeach; ?>
－113 －
PHPによるWEBアプリの構築
6.tableタグを閉じる
//出力した画像の数を列数で割った余りが0でない(割り切れない)場合
<?php if ($ctr % $per_row != 0) : while ($ctr % $per_row != 0) : ?>
//最後の行の残りのマスを埋める
<td>
<table class="one-image-tbl">
<tr><td class="one-image-tbl-img"> </td></tr>
</table>
</td>
<?php $ctr++; endwhile; ?>
</tr>
<?php endif; ?>
</table>
－114 －
PHPによるWEBアプリの構築
7.ページ移動リンクを出力する
<?php if ($page_counts > 1) : ?> //ページが分割されているときだけページ移動リンクを出力
<p class="page-list">
<?php if ($page_no != 1) : ?> //先頭ページでない場合、先頭/前ページへのリンクを出力
<span><a href="<?php echo get_pagenum_link(1); ?>">«</a></span>
<span><a href="<?php echo get_pagenum_link($page_no - 1); ?>"><</a></span>
<?php endif; ?>
<?php for ($i = 1; $i <= $page_counts; $i++) : ?> //各ページへのリンクを出力
<?php if ($i == $page_no) : ?>
<span><?php echo $i; ?></span> //表示中のページの場合、リンクはつけない
<?php else : ?>
<span><a href="<?php echo get_pagenum_link($i); ?>"><?php echo $i; ?></a></span>
<?php endif; ?>
<?php endfor; ?>
//最終ページでない場合、次/最終ページへのリンクを出力
<?php if ($page_no != $page_counts) : ?>
<span><a href="<?php echo get_pagenum_link($page_no + 1); ?>">></a></span>
<span><a href="<?php echo get_pagenum_link($page_counts); ?>">»</a></span>
<?php endif; ?>
</p>
<?php endif; ?>
－115 －
PHPによるWEBアプリの構築
8.スタイルシートを書き換える
#content table.image-list, #content table.one-image-tbl {
border : none;
margin : 0;
}
#content table.image-list td, #content table.one-image-tbl td {
border : none;
padding : 0;
}
#content table.one-image-tbl td.one-image-tbl-caption {
padding-bottom : 1em;
}
table.one-image-tbl td.one-image-tbl-img {
width : 220px;
//listimage.phpで定義した$max_width+20
height : 170px;
//listimage.phpで定義した$max_height+20
text-align : center;
vertical-align : middle;
}
table.image-list td.one-image {
vertical-align : top;
} ※次ページへ続く
－116 －
PHPによるWEBアプリの構築
table.one-image-tbl td.one-image-tbl-img img {
padding : 5px;
border : 1px solid #999999;
}
table.one-image-tbl td.one-image-tbl-caption {
text-align : center;
vertical-align : top;
}
p.page-list {
text-align : center;
}
p.page-list span {
border : 1px solid #999999;
padding : 2px 5px;
}
table.one-image-tbl td.one-image-tbl-img {
width : 120px;
height : 95px;
text-align : center;
vertical-align : middle;
}
－117 －
PHPによるWEBアプリの構築
9.画像一覧を固定ページに追加する
－118 －
PHPによるWEBアプリの構築
10.メニューに画像一覧を追加する
－119 －
PHPによるWEBアプリの構築
■参考：大分県立芸術会館 検索ページ
－120 －
(URL：http://art.oita-ed.jp/search/)
PHPによるWEBアプリの構築
～プラグイン開発の基本を学ぼう～
7.プラグインを開発する
－121 －
PHPによるWEBアプリの構築
7.1 初めてのプラグイン
「Hello, World」と出力するテンプレートタグを追加するプラグインを
作成しながら、プラグイン開発の流れを押さえる
■プラグインのPHPファイルを作成する
WordPress本体と同様に、プラグインもPHPを使って作成する。
①テキストエディタを開き「helloworld.php」という名前をつけ、文字コードにUTF-8を
指定して「helloworld」というフォルダを作成して保存する。
－122 －
PHPによるWEBアプリの構築
②PHPファイルの先頭にプラグインの情報を記述する
<?php
/*
Plugin Name: Hello, World
Plugin URI: http://www.xxx.com/xxx/xxxxx/
Description: 「Hello, World」を出力するテンプレートタグを追加します。
Version: 1.0
Author: 作者名
Author URI: http://www.xxx.com/xxx
*/
?>
③プラグインの情報の直後に処理を記述する
function the_hello_world() {
echo 'Hello, World';
}
//「Hello, World」と出力する
－123 －
PHPによるWEBアプリの構築
■プラグインのインストール
①作成したPHPファイルをフォルダごとアップロードする。
アップロード先：
/[WordPressインストールディレクトリ]/wp-content/plugins
②WordPressにログインし、「プラグイン」のメニューを選択すると、インストール済
みのプラグインが一覧表示される。「Hello, World」にチェックを入れて「有効化」
をクリックする。
－124 －
PHPによるWEBアプリの構築
③プラグインを有効化すると、プラグイン内の関数をテンプレートなどから呼び出す
ことができる。index.phpの中に以下を追加して「Hello, World」と出力してみる。
【index.php】
(途中略)
<div id="container">
<?php the_hello_world(); ?>
<div id="content" role="main">
表示例
－125 －
PHPによるWEBアプリの構築
■複数のファイルからなるプラグイン
プラグインのファイル配置の例
WordPress
プラグインはPHPファイル1つだけでなく、
画像や外部JavaScriptのファイルを
組み合わせても作成することができる。
wp-content
plugins
プラグイン毎のディレクトリ
メインのPHPファイル
その他のPHPファイル
images
各種の画像ファイル
js
各種の外部JavaScriptファイル
－126 －
PHPによるWEBアプリの構築
7.2 アクションとフィルター
フック(hook)
プラグインを WordPress 本体に “引っ張り込む (hook into)”
ための仕組み
アクション
• 「投稿を公開した」「テーマを変更した」などのWordPressの
主な処理が行われた後(または前)に処理を行うためのフック。
フィルター
• テキスト関連の出力をする前に、「全角英数字を半角にする」
などテキストの内容を部分的に置換するためのフック。
－127 －
PHPによるWEBアプリの構築
サイトの各ページにfaviconを追加する
作成するサンプル
－128 －
PHPによるWEBアプリの構築
①テキストエディタを開き「addfavicon.php」という名前をつけ、文字コードにUTF-8
を指定して「addfavicon」というフォルダを作成して
保存する。
②PHPファイルの先頭にプラグインの情報を記述する
<?php
/*
Plugin Name: Add Favicon
Plugin URI: http://www.xxx.com/xxx/xxxxx/
Description:サイトの各ページにfaviconを表示できるようにします。
Version: 1.0
Author: 作者名
Author URI: http://www.xxx.com/xxx
*/
?>
－129 －
PHPによるWEBアプリの構築
③faviconのHTMLを出力する関数を作る
function add_favicon_to_header() {
$plugin_dir = str_replace(basename(__FILE__), "", plugin_basename(__FILE__));
$fav_url = WP_PLUGIN_URL . '/' . $plugin_dir . 'favicon.ico';
echo '<link rel="shortcut icon" href="' . $fav_url . '" />';
}
str_replace (検索文字, 置換後の文字列, 元の文字列)
basename()
__FILE__
plugin_basename()
：パスの最後にある名前の部分を返す。
：PHPの定数。ファイルのフルパスとファイル名。
：WordPress関数。pluginsディレクトリからの相対パスを取得す
る。⇒/addfavicon/addfavicon.php
※元の文字列「 /addfavicon/addfavicon.php」より検索文字「addfavicon.php」を空白
文字「""」に置換することにより、「/addfavicon/」というプラグインのディレクトリが
取得できる。
WP_PLUGIN_URL ：プラグインディレクトリのURL
<link rel="shortcut icon" href="[faviconのパス]/favicon.ico" />：
faviconを表示させるためのHTML
－130 －
PHPによるWEBアプリの構築
④faviconのHTMLを出力する関数の直後に、wp_headアクションにフックする処理
を追加する。
add_action('wp_head', 'add_favicon_to_header');
add_action ('アクション名', '関数名');
特定のアクションに関数をフックする
wp_headアクション： テンプレートが wp_head 関数を呼び出す際に実行する。
wp_head 関数は通常、ブログページの先頭付近の <head>要素内
で使われる。
⑤作成したPHPファイルをフォルダごとpluginsディレクトリにアップロードする。
⑥faviconのファイル「favicon.ico」をaddfaviconディレクトリにアップロードする。
⑦WordPressにログインし、「Add Favicon」プラグインを有効化する。
－131 －
PHPによるWEBアプリの構築
投稿のタイトルに含まれる全角英数字を半角に変換する
プラグインがオフのときの表示
プラグインがオンのときの表示
－132 －
PHPによるWEBアプリの構築
①テキストエディタを開き「convzenhan.php」という名前をつけ、文字コードにUTF-8
を指定して「convzenhan」というフォルダを作成して
保存する。
②PHPファイルの先頭にプラグインの情報を記述する
<?php
/*
Plugin Name: Convert zenkaku to hankaku
Plugin URI: http://www.xxx.com/xxx/xxxxx/
Description:記事中の半角英数字を全角に変換します。
Version: 1.0
Author: 作者名
Author URI: http://www.xxx.com/xxx
*/
?>
－133 －
PHPによるWEBアプリの構築
③文字列中の全角英数字を半角に変換する処理及び投稿の
タイトルにフィルターをフックする処理を作る
function conv_zen_han($content) {
return mb_convert_kana($content, 'a', 'utf-8');
}
add_filter('the_title', 'conv_zen_han');
mb_convert_kana(変換対象の文字列, オプション, 文字エンコーディング)
オプション ：a… 「全角」英数字を「半角」に変換する。
add_filter('フィルター名', '関数名');
指定したフィルターフックに、関数をフックする
the_title：データベースから取得した記事タイトルを画面に出力する前に適用される。
④作成したPHPファイルをフォルダごとpluginsディレクトリにアップロードし、プラグ
インを有効化する。
－134 －
PHPによるWEBアプリの構築
7.3 代表的なフックの使い方
■JavaScriptライブラリを読み込む
WordPressには主要なライブラリが含まれており、主なJavaScriptライブラリは
ハンドルを指定することにより読み込むことができる。
wp_enqueue_script('ハンドル');
複数のプラグインで同じライブラリを利用する場合でも、読み込みの重複を
起こすことなくライブラリを使用することをWordPressに伝えることができる。
wp_enqueue_script('jquery');
ハンドル名に「jquery」を指定することでjQueryを使用することを伝える。
－135 －
PHPによるWEBアプリの構築
■ライブラリに依存するJavaScriptを読み込む
wp_enqueue_scriptを使うと、jQueryなどのライブラリを読み込んだあとにその
ライブラリに依存するJavaScriptを読み込むことができる。
wp_enqueue_script('ハンドル', 'JavaScriptのアドレス',
依存先ライブラリのハンドル群);
ハンドル：読み込むJavaScriptのハンドル。自分で決定したもの。
依存先ライブラリのハンドル群：依存先のライブラリのハンドルを配列にして渡す
wp_enqueue_script('clockscript', $clock_js, array('jquery'));
clockscript
：読み込むJavaScriptに自分でつけたハンドル名
$clock_js
：JavaScriptのアドレスが入った変数
array('jquery') ：jQueryに依存している
－136 －
PHPによるWEBアプリの構築
JavaScriptを組み込むプラグインを作成する
作成するサンプル
－137 －
PHPによるWEBアプリの構築
①clock.phpを作成して、clockフォルダに保存する。
【clock.php】
<?php
/*
Plugin Name: Clock
Plugin URI: http://www.xxx.com/xxx/xxxxx/
Description: 各ページの先頭に現在時刻を表示します
Version: 1.0
Author: 作者名
Author URI: http://www.xxx.com/xxx
*/
function add_clock_js() {
// jQueryを使うことをWordPressに伝える
wp_enqueue_script('jquery');
// clock.jsのアドレスを求める
$plugin_dir = str_replace(basename(__FILE__), "", plugin_basename(__FILE__));
$clock_js = WP_PLUGIN_URL . '/' . $plugin_dir . 'js/clock.js';
// clock.jsを読み込む
wp_enqueue_script('clockscript', $clock_js, array('jquery'));
}
add_action('init', 'add_clock_js');
?>
－138 －
PHPによるWEBアプリの構築
②clock.jsを作成して、clockフォルダ配下のjsフォルダに保存する。
【clock.js】
jQuery(document).ready(function($) {
//jQueryロード時の処理
var content = $('#content div:first');
//idがcontentの最初のdivタグを指定
if (content) {
content.before(
//contentの前に引数に設定したものを挿入する
'<h2>現在の時刻</h2><p id="current_time" class="post">Clock</p>');
setInterval(
//関数を200ミリ秒のタイマーにセットする
function() {
var now = new Date();
var html = now.getHours() + '時';
html += now.getMinutes() + '分';
html += now.getSeconds() + '秒';
$('#current_time').html(html); //idがcurrent_timeの要素に指定値をセットする
}, 200
);
}
});
③clockフォルダをpluginsディレクトリにアップロードし、プラグインを有効化する。
－139 －