php による web アプリの構築
DESCRIPTION
PHP による WEB アプリの構築. WordPress を基礎にして. 目次: WordPress の導入 サイト構築 PHP 概論 テンプレートカスタマイズ 関数を利用してカスタマイズする データベースにアクセスする プラグインを開発する. ~ WordPress をインストールしてみよう~. 1. WordPress の導入. 1.1 CMS とは?. ■C MS ( Contents Management System ). - PowerPoint PPT PresentationTRANSCRIPT
PHP による WEB アプリの構築
- 1 -
PHPPHP によるによる WEBWEB アプリアプリの構築の構築
WordPressWordPress を基礎にしてを基礎にして
PHP による WEB アプリの構築
- 2 -
目次:1.WordPress の導入2.サイト構築3.PHP 概論4.テンプレートカスタマイズ5.関数を利用してカスタマイズする6.データベースにアクセスする7.プラグインを開発する
PHP による WEB アプリの構築
- 3 -
1. WordPress の導入~ WordPress をインストールしてみよう~
PHP による WEB アプリの構築
- 4 -
■ C MS ( Contents Management System )
1.11.1 CMSCMS とは?とは?
Web コンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェア。
テキストやレイアウト情報等の構成要素を分離してデータベースに保存し、サイト構築をソフトウェアで自動的に行うことができる。
PHP による WEB アプリの構築
- 5 -
デザイン担当
1.21.2 CMSCMS の利用イメージの利用イメージ
各コンテンツ担当
CMSテンプレート
2
テキスト
・・・・・・・・・・
・
・・・・・・・・・・
・
・・・・・・・・・・
・
画像
動画
音声
テンプレート1
デザイン /インターフェースを設定
HTML 、 CSS 、 PHP の知識が必要
コンテンツの内容を更新HTML と CSS の知識が必要ない
Web ページレイアウト情
報テキスト
画像DB
Web コンテンツ内容を登録・保存
PHP による WEB アプリの構築
- 6 -
1.31.3 CMSCMS を利用するメリットを利用するメリット
PHP による WEB アプリの構築
- 7 -
WordPress 3.2.1 (オープンソース CMS )
• インストール、設定が簡単
• プラグインが充実
1.41.4 WordPressWordPress の特徴の特徴
動作条件(サーバ)
• PHP バージョン 5.2.4 以上
• MySQL バージョン 5.0 以上
運用に必要なソフトウェア(クライアント)
• Web ブラウザ、 FTP ソフト
PHP による WEB アプリの構築
- 8 -
(1)WordPress をダウンロードする
1.51.5 WordPressWordPress をインストールをインストール
http://ja.wordpress.org/
ダウンロード後、 ZIPファイルを展開しておく
PHP による WEB アプリの構築
- 9 -
(2)MySQL に WordPress 用のデータベースとユーザを作成する
MySQL 管理ツールphpMyAdminMySQL 管理ツールphpMyAdmin
PHP による WEB アプリの構築
- 10 -
(3) 展開した WordPress フォルダをサーバへアップロードする
ドキュメントルート
※サーバの httpd.conf で確認
任意のディレクトリ名で
アップロード
PHP による WEB アプリの構築
- 11 -
(4) 設定ファイルの権限を書き込み可能に変更する
・ [ インストールディレクトリ ]/wp
・ [ インストールディレクトリ ]/wp/wp-content
PHP による WEB アプリの構築
- 12 -
(5) ブラウザでインストール場所にアクセスする
http://[Web サーバのアドレス ]/[WordPress のディレクトリ名 ]/
PHP による WEB アプリの構築
- 13 -
(6) インストールを開始する
PHP による WEB アプリの構築
- 14 -
(7) データベースの情報を入力する
PHP による WEB アプリの構築
- 15 -
(8) インストール実行をクリックする
PHP による WEB アプリの構築
- 16 -
(9) 情報を入力して「 WordPress をインストール」をクリックする
•サイトのタイトル
•ユーザー名
•パスワード
•メールアドレス
•検索エンジンの表示有無
•サイトのタイトル
•ユーザー名
•パスワード
•メールアドレス
•検索エンジンの表示有無
PHP による WEB アプリの構築
- 17 -
(10) インストールの完了画面を確認する
PHP による WEB アプリの構築
- 18 -
(1) 管理画面にログインする
1.61.6 WordPressWordPress の設定の設定
PHP による WEB アプリの構築
- 19 -
(2) 初期画面が表示される
PHP による WEB アプリの構築
- 20 -
(3) 管理画面が表示される
PHP による WEB アプリの構築
- 21 -
2. サイト構築~ WordPress で記事を投稿してみよう~
PHP による WEB アプリの構築
- 22 -
(1) インストール時点でのサイトを確認する
PHP による WEB アプリの構築
- 23 -
参考ホームページ:「知の創造プロジェクト」 http://www.csis.oita-u.ac.jp/PICP/index.html
(2) 知の創造プロジェクトのホームページを参考にWordPress に記事を投稿していく
PHP による WEB アプリの構築
- 24 -
(3) 投稿記事を確認する
投稿記事一覧を表示
PHP による WEB アプリの構築
- 25 -
(4) カテゴリーを追加する
以下のカテゴリーを追加 ・実施プロジェクト ・セミナー・講演会
・参加者の声
「未分類」を削除
以下のカテゴリーを追加 ・実施プロジェクト ・セミナー・講演会
・参加者の声
「未分類」を削除
PHP による WEB アプリの構築
- 26 -
(5) 記事を作成する
各カテゴリーに日付の違う記事を 5 件以上投稿する
各カテゴリーに日付の違う記事を 5 件以上投稿する
PHP による WEB アプリの構築
- 27 -
(6) 固定ページを確認する
固定ページを表示
PHP による WEB アプリの構築
- 28 -
(7) 固定ページを編集する
以下の固定ページを作成・概要・お問い合わせ
以下の固定ページを作成・概要・お問い合わせ
PHP による WEB アプリの構築
- 29 -
(8) ナビゲーションメニューを作成する
PHP による WEB アプリの構築
- 30 -
(9) 固定ページをメニューに追加する
固定ページがメニューに追加される
PHP による WEB アプリの構築
- 31 -
(10) カテゴリーをメニューに追加する
カテゴリーがメニューに追加される
PHP による WEB アプリの構築
- 32 -
(11) メニューの項目を並び替える
ドラッグ&ドロップで
簡単に並び替えができる メニューを次の順に並べる
① 概要、②実施プロジェクト、③セミナー・講演会、④参加者の声、⑤お問い合わせ
メニューを次の順に並べる
① 概要、②実施プロジェクト、③セミナー・講演会、④参加者の声、⑤お問い合わせ
PHP による WEB アプリの構築
- 33 -
(12) 表示するメニューを指定する
PHP による WEB アプリの構築
- 34 -
(13) サイトの表示を確認する
PHP による WEB アプリの構築
- 35 -
3. PHP 概論~ WordPress で利用されている PHP の基本を学ぼう~
PHP による WEB アプリの構築
- 36 -
3.13.1 PHPPHP とはとは
サーバサイドスクリプト言語の一つ。HTML 内に PHP スクリプトを埋め込むことができる。処理結果に応じた HTML を生成するので動的な Webページを表示できる。オープンソースソフトウェア。
• 習得が容易 (C 言語や Java の記述方法に似ている )• データベースとの連携が得意• 外部モジュールによる拡張性に優れる
PHP の特徴
PHP による WEB アプリの構築
- 37 -
Web サーバPHP ファイ
ル
クライアント
PHP エンジン
④HTML を送信
①ページを閲覧
③処理の結果を返す②PHP のシステムにファイルを渡す
スクリプトの内容に応じて処理を行う
⑤Web ブラウザは 異なる内容が表示
HTML ファイルと
同じように見える
見るたびに内容が異なる動的なホームぺージ
を表示できる
3.2 PHP3.2 PHP の処理の流れの処理の流れ
PHP による WEB アプリの構築
- 38 -
3.3 PHP3.3 PHP の記述方法の記述方法
• ファイルの拡張子を「 php 」にする。• PHP スクリプトの前後を <?php ~ ?>
で囲む• 文の最後に「 ;」をつける• 変数は宣言をせずに使うことができる• 変数は変数名の前に $ をつける• 変数名には英字や数字を使って自由に
つけられるが、先頭を数字にはできない• PHP の変数はデータ型の制約がない為、同じ変数に文字、整数、小数点数などを代入できる
<html><head> <title>PHP 概論 </title></head><body>PHP を使ってみよう <br/><?php $date = date('Y/m/d H:i:s'); echo $date;?></body></html>
【 phpTest1.php】
PHP ファイルをサーバへアップロードし、 Web ブラウザで表示させてみましょう。
PHP ファイルをサーバへアップロードし、 Web ブラウザで表示させてみましょう。URL : http://[ サーバの IP アドレス ]/[ アップロードディレクトリ ]/phpTest.php
PHP による WEB アプリの構築
- 39 -
<html><head><title>PHP 概論 (if文 )</title></head><body>if文を使ってみよう <br/>
※右上に続く
【 phpTest2.php】
if文の使い方<?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>
if( 条件式 ): 実行する処理 ;elseif( 条件式 ): 実行する処理 ;else: 実行する処理 ;endif;
if( 条件式 ): 実行する処理 ;elseif( 条件式 ): 実行する処理 ;else: 実行する処理 ;endif;
基本構文
基本構文
PHP による WEB アプリの構築
- 40 -
<html><head><title>PHP 概論 (for文 )</title></head><body>for文を使ってみよう <br/>
※右上に続く
【 phpTest3.php】
for文の使い方
<?php //5回繰り返す for($i=0; $i<5; $i++): echo ($i+1).'回目 <br/>'; endfor; ?></body> </html>
for( 開始時の処理 ; 繰り返しの条件式 ; 繰り返しごとの処理 ): 実行する処理 ;endfor;
for( 開始時の処理 ; 繰り返しの条件式 ; 繰り返しごとの処理 ): 実行する処理 ;endfor; 基本構文
基本構文
• コメントは // を最初につけるか、 /* */ で囲む
PHP による WEB アプリの構築
- 41 -
<html><head><title>PHP 概論 (foreach文 )</title></head><body>foreach文を使ってみよう1<br/>
※右上に続く
【 phpTest4.php】
foreach文の使い方①
<?php //配列を用意 $arr = array('Jan'=>'January', 'Feb'=>'February', 'Mar'=>'March'); foreach($arr as $value): echo $value.'<br/>'; endforeach;?></body></html>
foreach(配列 as $ 変数 1): 実行する処理 ;endforeach;
foreach(配列 as $ 変数 1): 実行する処理 ;endforeach; 基本構文
基本構文
PHP による WEB アプリの構築
- 42 -
<html><head><title>PHP 概論 (foreach文 )</title></head><body>foreach文を使ってみよう2<br/>
※右上に続く
【 phpTest5.php】
foreach文の使い方②
<?php //配列を用意 $arr = array('Jan'=>'January', 'Feb'=>'February', 'Mar'=>'March'); foreach($arr as $key => $value): echo $key.' : '.$value.'<br/>'; endforeach;?></body></html>
foreach(配列 as $ 変数 1=>$ 変数 2): 実行する処理 ;endforeach;
foreach(配列 as $ 変数 1=>$ 変数 2): 実行する処理 ;endforeach;
基本構文
基本構文
PHP による WEB アプリの構築
- 43 -
<html><head><title>PHP 概論 (while文 )</title></head><body>while文を使ってみよう <br/>
※右上に続く
【 phpTest6.php】
while文の使い方
<?php $var = 1; while($var <= 5): echo $var++.'<br/>'; endwhile;?></body></html>
whie( 条件式 ): 実行する処理 ;endwhile;
whie( 条件式 ): 実行する処理 ;endwhile; 基本構文
基本構文
PHP による WEB アプリの構築
- 44 -
演習問題
<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>
次の HTML に繰り返しを行う PHP のコードを追加して右のような年齢早見表を作成して下さい。スタイルシートは適用してもしなくても構いません。
【 phpEx.php】
PHP による WEB アプリの構築
- 45 -
4. テンプレートカスタマイズ~ PHP を使ってテンプレートを書き換えてみよう~
PHP による WEB アプリの構築
- 46 -
■WordPress のテーマシステム4.14.1 テーマの構造を理解するテーマの構造を理解する
サイトの表示の仕方を管理。管理画面からテーマを選択することで簡単に着せ替えが可能。ただ、見た目のデザインが変わるだけではなく、表示する内容もテーマ毎に細かく設定することができる。■ テーマの構成
コンテンツ サイドバー
フッター
ヘッダー基本的なウェブページ構成はヘッダー部分、コンテンツ部分、サイドバー部分、フッター部分のテンプレートファイルで構成される。
PHP による WEB アプリの構築
- 47 -
■ テンプレート階層TwentyTen テーマのテンプレートを確認してみましょう。
これらのテンプレートに沿って出力される
PHP による WEB アプリの構築
- 48 -
トップページは「 index.php 」というテンプレートに基づいて出力されている。
PHP による WEB アプリの構築
- 49 -
① FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten に中身が空のファイル「 home.php 」をアップロードする。※テンプレートファイルは全てこのディレクトリに格納する。
② FTP ソフトで home.php のパーミッションを書き込み権限有りに設定する。③ WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 home.php 」を選択する。
④ home.php に「優先順位のテスト」と入力して「ファイルの更新」ボタンをクリックする。
⑤ ブラウザでサイトを表示させる。
新規のテンプレートファイル「 home.php 」をサーバにアップロードして表示を確認してみましょう。
新規のテンプレートファイル「 home.php 」をサーバにアップロードして表示を確認してみましょう。
PHP による WEB アプリの構築
- 50 -
・テンプレートの優先順位
各ページとテンプレートは 1 対 1 で対応しているわけではない。
「 home.php 」というテンプレートがあると、 index.php は使われず、 home.php が優先的に使われる。
トップページの表示が変わっている!
home.php > index.php
テーマをカスタマイズする際はテンプレート階層を考慮することが大切
PHP による WEB アプリの構築
- 51 -
■ カスタマイズの留意点
PHP による WEB アプリの構築
- 52 -
1:
2:
3:
4:
5:
6:
7:
8:
9:
4.24.2 WordPressWordPress ループをカスタマイズするループをカスタマイズする
<?php if(have_posts()) : ?>
投稿一覧を出力する前に行う処理
<?php whie(have_posts()) :
the_posts(); ?>
個々の投稿を出力する処理
<?php endwhile(); ?>
投稿一覧を出力したあとに行う処理
<?php else: ?>
投稿がない場合に行う処理
<?php endif; ?>
if(have_posts()) :
…表示すべき投稿があるかどうか判定
whie(have_posts()) :
the_posts();
…投稿がある間 …個々の投稿を出力
endwhile();
…while文の終了
else:
…1行目の if文に対する else文
endif;
…1行目の if文の終了
■WordPress ループの構造
PHP による WEB アプリの構築
- 53 -
■先頭の投稿だけ違う処理を行う
<?php if(have_posts()) : ?>
投稿一覧を出力する前に行う処理
<?php $is_first = true; ?>
<?php whie(have_posts()) :
the_posts(); ?>
個々の投稿を出力する処理
<?php if($is_first ): ?>
先頭の投稿のときだけ情報を出力する処
理
<?php endif; ?>
<?php $is_first = false; ?>
<?php endwhile(); ?>
投稿一覧を出力したあとに行う処理
<?php else: ?>
投稿がない場合に行う処理
<?php endif; ?>
$is_first = true;
…最初の投稿であることを判定する為、
変数 $is_first に true を代入
if($is_first ):
…最初の投稿であるか判定
endif;
…if文の終了
$is_first = false;
…次回の繰り返しから最初の投稿でな
くなったことを判定させる為、変数
$is_first に false を代入
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
PHP による WEB アプリの構築
- 54 -
FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten に「 banner.gif 」をアップロードする。
① 表示するバナーをアップロードする
作成するサンプル
先頭の投稿だけにバナーを表示する先頭の投稿だけにバナーを表示する
PHP による WEB アプリの構築
- 55 -
( 以前略 )<?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. */ ?>( 途中略 )※次ページへ続く
【 loop.php】② loop.php を編集する
PHP による WEB アプリの構築
- 56 -
</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. ?>
PHP による WEB アプリの構築
- 57 -
■奇数件目と偶数件目で違う情報を出力する
<?php if(have_posts()) : ?> 投稿一覧を出力する前に行う処理 <?php $post_counter = 1; ?> <?php whie(have_posts()) : the_posts(); ?> 個々の投稿を出力する処理 <?php if($post_counter %2 ==1): ?> 奇数件目の投稿のときだけ情報を出力する処理 <?php else: ?> 偶数件目の投稿のときだけ情報を出力する処理 <?php endif; ?> <?php $post_counter++; ?> <?php endwhile(); ?> 投稿一覧を出力したあとに行う処理<?php else: ?> 投稿がない場合に行う処理<?php endif; ?>
$ post_counter…投稿の繰り返しの回数をカウントする変数if($post_counter %2 ==1):…繰り返しの回数を 2で割った値が 1である場合は奇数と判定else: … $post_counter %2 ==1でない場合は偶数と判定$post_counter++;… 繰り返しの回数を 1 増やす
1:2:3:4:5:6:7:8:9:
10:11:12:13:14:15:16:
PHP による WEB アプリの構築
- 58 -
作成するサンプル
奇数件目と偶数件目でデザインを変える奇数件目と偶数件目でデザインを変える
PHP による WEB アプリの構築
- 59 -
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 style.css 」を選択し、最後の行の下に以下を追加する。
① style.css の編集
.odd { background-color : #cccccc;}
【 style.css】
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でスタイルの「 style.css 」を選択し、最後の行の下に以下を追加する。
② loop.php の編集
( 途中略 )<?php $post_counter = 1; // 投稿繰り返し回数 ?><?php while ( have_posts() ) : the_post(); ?>※次ページに続く
【 loop.php】
PHP による WEB アプリの構築
- 60 -
<?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; ?>※次ページに続く
PHP による WEB アプリの構築
- 61 -
( 途中略 )<?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++; ?>
PHP による WEB アプリの構築
- 62 -
1:
2:
3:
4:
5:
4.34.3 条件タグでページの種類を判断して出力を変える条件タグでページの種類を判断して出力を変える
<?php if(is_category()) : ?>
カテゴリーアーカイブページのときに出力する
内容
<?php else: ?>
その他のページのときに出力する内容
<?php endif; ?>
if(is_category()) :
…現在出力中のページがカテ
ゴリーアーカイブのページで
あるかどうかを判断する
■ ページの種類によってヘッダー /フッター /サイドバーの出力を変えたい場合
条件タグで条件に応じて処理を分ける
if(is_category('xxxxx')) :…カテゴリー名が「 xxxxx 」の場合
if(is_category(array('xxxxx', 'yyyyy'))) :…カテゴリー名が「 xxxxx 」または「 yyyyy 」の場合
PHP による WEB アプリの構築
- 63 -
カテゴリーでヘッダーの画像を変えるカテゴリーでヘッダーの画像を変える
作成するサンプル
PHP による WEB アプリの構築
- 64 -
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 header.php 」を選択し、編集する。
① カテゴリーのタイトル画像をアップロードする
FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten に「 title_seminar.jpg 」、 「 title_project.jpg 」、 「 title_voice.jpg 」をアップロードする。② ヘッダーのテンプレートを書き換える
( 途中略 )// 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; ?>
【 header.php】 ( 編集前 )
PHP による WEB アプリの構築
- 65 -
( 途中略 )
// 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; ?>
【 header.php】 ( 編集後 )
PHP による WEB アプリの構築
- 66 -
4.44.4 複数のテンプレートで共通する部分を複数のテンプレートで共通する部分を 11 ヵ所にまとめるヵ所にまとめる
■共通部分をまとめる方法
(1) 共通部分を 1つのテンプレートにまとめて、 index.php や single.php
などにそのテンプレートを組み込む。
(2) 「 functions.php 」テンプレートを使って、共通部分を関数化する。
functions.php…PHP のさまざまな処理を記述する特殊な PHP
<?php foo(); ?>
【 index.php
】 <?php foo(); ?>
【 single.php
】 <?php foo(); ?>
【 category.p
hp】
function foo() { :}
【 functions.
php】
複数のテンプレートで共通の関数を実行する
PHP による WEB アプリの構築
- 67 -
4.2 で作成した先頭の投稿の直後だけにバナーを表示する処理を関数化する
4.2 で作成した先頭の投稿の直後だけにバナーを表示する処理を関数化する
(1) WordPress ループに入る前に、変数 $is_first を true に初期化する
(2) WordPress ループの最後で、最初の投稿かどうか ( 変数 $is_first の値が
trueか
どうか ) を判断して、そうであればバナーを出力する
■ 関数化する処理
(1) と (2)それぞれを関数として記述する
PHP による WEB アプリの構築
- 68 -
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 functions.php 」を選択し、編集する。
① functions.php に新しい関数を追加する
// 変数 $is_first を true に初期化する関数function setup_first_post() {
global $is_first;
$is_first = true;
}
// バナーを出力する関数function first_post_only() {
global $is_first;
※右上に続く
【 functions.php】 if ($is_first) {
echo '<img src="';
echo bloginfo('template_url');
echo '/banner.gif" alt="PHP 講習会のお知らせ " width="270" height="50"
/>';
}
$is_first = false;
}
PHP による WEB アプリの構築
- 69 -
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 loop.php 」を選択し、編集する。
② loop.php を書き換える
【 loop.php】
PHP による WEB アプリの構築
- 70 -
PHP による WEB アプリの構築
- 71 -
5. 関数を利用してカスタマイズする
~ WordPress の関数を利用して柔軟なデータ出力を行う~
PHP による WEB アプリの構築
- 72 -
5.15.1 関数を活用する関数を活用する
■ テンプレートタグと WordPress 関数
テンプレートタグ…WordPress に何かを実行あるいは取得するように指示する
関数。特に WordPress テーマ用に定義されているもの。
WordPress 関数…WordPress のコア機能の形成に使われる関数。プラグインやテーマ開発に役立つ。関数を利用することでテンプレートタグよりも柔軟にデータを扱うことができる。⇒よりニーズに合ったカスタマイズが可能。
<h1><?php bloginfo('name'); ?></h1>
PHP による WEB アプリの構築
- 73 -
■ 関数リファレンス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
PHP による WEB アプリの構築
- 74 -
「実施プロジェクト」カテゴリまたは「セミナー・講演会」カテゴリから最新投稿 5 件をトップページの先頭に表示する
「実施プロジェクト」カテゴリまたは「セミナー・講演会」カテゴリから最新投稿 5 件をトップページの先頭に表示する
作成するサンプル
PHP による WEB アプリの構築
- 75 -
<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>
FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten に以下を記述した「 new.php 」をアップロードする。
① new.php を作成する
【 new.php】
PHP による WEB アプリの構築
- 76 -
<div id="container"> <div id="content" role="main"> <?php get_template_part('new'); ?> <?php/* Run the loop to output the posts.
.new { padding : 0.5em 1em; border : 1px solid #000; background-color : #eee; margin-bottom : 1em;}.new-header { font-size : 150%; margin-bottom : 0.5em;}
② index.php と style.css を書き換える
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 index.php 」と「 style.css 」を選択し、それぞれを編集する。
【 index.php 】
【 style.css】
PHP による WEB アプリの構築
- 77 -
5.25.2 カスタムフィールドを使ってみようカスタムフィールドを使ってみよう
カスタムフィールド…投稿ごとに追加できる独自のフィールド。タイトル、本文以外にも任意でフィールドを投稿画面に追加
し、出力することができる。
■ カスタムフィールドを表示させる
PHP による WEB アプリの構築
- 78 -
WordPress の管理画面の左側メニューより「投稿」 - 「投稿一覧」を選択し、「投稿の編集」画面を開くと、カスタムフィールドの入力画面が追加されている
PHP による WEB アプリの構築
- 79 -
カスタムフィールドを追加してタイトル、本文以外の投稿・表示ができるようにする
カスタムフィールドを追加してタイトル、本文以外の投稿・表示ができるようにする
PHP による WEB アプリの構築
- 80 -
( 途中略 )</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. ?>
【 loop.php】
① loop.php を書き換える
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 loop.php 」を選択し、編集する。※ twentyten テーマのバージョン 1.2 以降は loop-single.php を編集する。
PHP による WEB アプリの構築
- 81 -
② style.css にスタイルの指定を追加する
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 style.css 」を選択し、編集する。
.custom{ border: 2px dotted #0000cc; margin-top: 10px; padding: 5px;}
.custom-header {font-size : 150%;margin-bottom : 0.5em;
}
【 style.css 】
PHP による WEB アプリの構築
- 82 -
5.35.3 同じカテゴリーの投稿を一覧表示する同じカテゴリーの投稿を一覧表示する
$wp_query オブジェクト… ページに表示されている投稿などの情報を
はじめとして、現在アクセスされているページに関するさまざまな情報を保持している
プロパティ
メソッド
オブジェクト
オブジェクトの持つデータ
操作
「クラス」として定義されている
■ プロパティ・メソッドへのアクセス$オブジェクト変数名 -> プロパ
ティ ;$オブジェクト変数名 -> メソッド名 ();
PHP による WEB アプリの構築
- 83 -
queried_object( ページの元のオブジェクト )
queried_object_id( ページの元のオブジェクトの ID)
post_count( 投稿の数 )
get_posts( 投稿をデータベースから読み込
む )have_posts
( 出力する投稿があるかどうかを判断 )
the_post( 次の投稿に進む )
プロパティ メソッド
: :
※WP_Query クラス及び上記のプロパティやメソッドは
ソース「 /[WordPress インストールディレクトリ ]/wp-includes/query.php 」の中で定義されている。
$wp_query オブジェクト
■$wp_query オブジェクトに含まれるプロパティとメソッド
PHP による WEB アプリの構築
- 84 -
単体投稿ページに同一カテゴリ投稿のリストを出力する単体投稿ページに同一カテゴリ投稿のリストを出力する
作成するサンプル
PHP による WEB アプリの構築
- 85 -
<div id="primary" class="widget-area" role="complementary"> <ul class="xoxo"><?phpif (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>
※次ページに続く
① sidebar.php を書き換える
WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 sidebar.php 」を選択し、編集する。【 sidebar.php】
PHP による WEB アプリの構築
- 86 -
<?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; ?>
PHP による WEB アプリの構築
- 87 -
6. データベースにアクセスする~ WordPress のデータベースから直接データを取得してみよう~
PHP による WEB アプリの構築
- 88 -
6.16.1 データベースへのアクセスデータベースへのアクセスWordPress で入力したデータは MySQL に登録されている
MySQL
テーブル
データ
PHP による WEB アプリの構築
- 89 -
■ データベースからデータを取得する方法
(1)WordPress 関数を利用するメリット :簡単にデータを読み込むことができるデメリット :特殊な条件でデータを読み込む場合、条件の指定が
難しい場合がある
(2)データベースへ直接アクセスするメリット : Word Press の標準関数では指定できないような複雑な
条件の指定が可能デメリット : WordPress のバージョンアップに伴い、データベースの
構造が変更されることもあり、処理を変更する必要が
が発生する恐れがある関数を全く同じデータにならない場合がある
PHP による WEB アプリの構築
- 90 -
6.26.2 WordPressWordPress のデータベース構造のデータベース構造 (( 単一ブログの場単一ブログの場合合 ))
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 各 種の設定
■WordPress の 11個のテーブル
PHP による WEB アプリの構築
- 91 -
ID bigint(20) post の ID
post_author bigint(20) post を投稿したユーザーの IDpost_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 テーブルの主なフィールド
投稿 /固定ページなどのコンテンツ系のデータはすべてwp_posts テーブルで管理されている
PHP による WEB アプリの構築
- 92 -
6.36.3 wpdbwpdb オブジェクトによるデータベースアクセスオブジェクトによるデータベースアクセス
wpdb クラス・・・「 ezSQL 」というクラスライブラリをWordPress向けに改良したクラス。データベースを操作するための基本的なメソッドが含まれている。※ ezSQL : PHP のプログラムからデータベースへアクセス
するためのオープンソースのライブラリ。
■wpdb オブジェクトを使う
wpdb クラス
WordPress 初期化時
wpdb オブジェクト
生成 グローバル変数$wpdb
グローバル変数$wpdb
初期化時に wpdb オブジェクトを生成してグローバル変数 $wpdb に割り当てる。テンプレートの中で$wpdb を通してデータベースにアクセスすることができる。例: $wpdb-> メソッド名()
PHP による WEB アプリの構築
- 93 -
■SQL の SELECT文を実行する
wpdb クラスで SELECT文を実行するには get_results メソッドを利用する
SELECT 列名 1 [,列名 2, ・・・ ] FROM テーブル名 [WHERE 絞り込む条件 ] [ORDER BY 並び替えの基準となる列名 [ASC または DESC]]
SELECT文の基本構文
データ取得の SQL⇒ SELECT文
$wpdb -> get_results(SELECT文 )
get_results メソッドの基本構文
※SELECT文にはテーブル名を直接指定するのではなく、 $wpdb オブジェクトの プロパティを使ってテーブル名を指定する
PHP による WEB アプリの構築
- 94 -
■ 投稿のテーブルから、最近投稿されてかつ公開されている投稿を 10 件読み込んで変数 $posts に割り当てる場合
$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 メソッドの使用例①
get_results メソッドの戻り値は取得したレコードの配列になる。データはオブジェクトの形式となり、
$変数 [n] -> フィールド名
の形で取得結果のフィールドの値を読むことができる。
1件目のタイトル: $posts[0]->post_title2件目のタイトル: $posts[1]->post_title : :
PHP による WEB アプリの構築
- 95 -
■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 メソッドの使用例②
get_results メソッドにより取得したデータはオブジェクト形式ではなく、連想配列の形式になる。
$変数 [n][ フィールド名 ]
の形で取得結果のフィールドの値を読むことができる。
1件目のタイトル: $posts[0]['post_title']2件目のタイトル: $posts[1]['post_title'] : :
※ get_results メソッドの 2つ目のパラメータを指定しない場合、 2つ目のパラメータは「 OBJECT 」になっており、結果はオブジェクトの形式となる。
PHP による WEB アプリの構築
- 96 -
■1行だけを読み込む場合
$wpdb -> get_var(SELECT文 )
get_var メソッドの基本構文
※データの取得結果が 1行でフィールドを 1つだけ取得したい場合はget_var メソッドを利用することもできる。メソッドの戻り値は読み込んだフィールドの値になる。
$wpdb -> get_row(SELECT文 )
get_row メソッドの基本構文
※データの取得結果が 1行だけになる場合は get_results メソッドの代わりに get_row メソッドを利用することもできる。
■1つの値を読み込む場合
$user = $wpdb -> get_row(“SELECT * FROM $wpdb->users WHERE ID = 1”);$user -> user_nicename // ユーザ名を 取得
PHP による WEB アプリの構築
- 97 -
■ データの追加などを行う
wp_insert_post( 投稿オブジェクト )
wp_insert_post メソッドの使用例
$my_post['post_author'] = 1; $my_post['post_category'] = array(8);
// データベースに投稿を追加 wp_insert_post( $my_post );
$wpdb -> query(INSERT などの SQL)
query メソッドの基本構文
※query メソッドはあらゆる SQL クエリを発行することができ、データの追加 (INSERT)/ 変更 (UPDATE)/ 削除 (DELETE) なども行うことができる。
■ データの追加に関する関数を使用して追加を行う場合
// 投稿オブジェクトの作成 $my_post = array(); $my_post['post_title'] = 'My post'; $my_post['post_content'] = 'This is my post.'; $my_post['post_status'] = 'publish';
※右上に続く
PHP による WEB アプリの構築
- 98 -
■SQL インジェクション攻撃について
SELECT * FROM $wpdb->users WHERE user_login = 'ユーザ名 '
SQL インジェクションの例
フォームで入力された値を SQL の中で使うとき、「 SQL インジェクション」が起こることがある。
SQL インジェクション攻撃:フォームなどから不正な値を送信して想定外の SQL を実行させ、データベースから値を盗み出したり、データを破壊したりすること。
・用意している SQL文
「ユーザ名 」に入力されたユーザ名を埋め込 んで SQL を発行する。しかし、ユーザ名の 代わりに「 ' or '1 」という値を入力されると・・・
SELECT * FROM $wpdb->users WHERE user_login = '' or '1'「 or '1' 」という条件が成立する為、 wp_users の全てのデータが取り出されてしまう
PHP による WEB アプリの構築
- 99 -
■prepare メソッドを使う
$wpdb->prepare( プリペアドステートメント用の SQL, 値 1, 値 2, …)
プリペアドステートメントの使用例
SQL インジェクション攻撃からクエリを保護するためには、実行する前にクエリデータはすべて SQL エスケープする必要がある。
SQL エスケープ: SQL にそのまま入れると危険な値 ( 「 '」など ) を修正して害のない値に変換する。
プリペアドステートメント:あらかじめ SQL文に入力値をパラメータとして記述しておき、実行時に入力された値を埋め込む。この時に渡されたパラメータのエスケープ処理を行う。
$user = $wpdb->get_results( $wpdb->prepare (“SELECT * FROM $wpdb->users WHERE user_login = %s”, $user_name));
PHP による WEB アプリの構築
- 100 -
■ エラーメッセージを表示する
$wpdb->show_errors();
エラーの出力を有効化にする
get_results メソッドなどでデータベースにアクセスした際にエラーが発生しても、標準ではエラーメッセージは表示されない。
⇒ SQL文の構文に誤りがあったとしても、ヒットするデータが 1件もない場合と 同じ結果になる。
データベースにアクセスするテンプレートなどの開発中には、エラーメッセージを表示して、問題点を探しやすくしておくとよい。
テンプレートの開発が終わったら、テンプレートから show_errors メソッドの文を削除して、エラーメッセージを表示しない状態に戻す。
PHP による WEB アプリの構築
- 101 -
最近アップロードした画像を一覧形式で表示する最近アップロードした画像を一覧形式で表示する
6.46.4 画像一覧のページを作る画像一覧のページを作る
PHP による WEB アプリの構築
- 102 -
■ 画像を読み込む条件を考える1. データベースからメディアを読み込む
ID ・・・
post_type
post_mime_type
post_parent
メディア用
ID ・・・
post_status
投稿用
wp_posts テーブル
値が同じ
publish
attachment image/○○○ publish
■ 画像を読み込むための SQLSELECT 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'
PHP による WEB アプリの構築
- 103 -
■ 画像の件数を数える SQL
画像を 1ページあたり 10 件ずつ分割して読み込むには画像の全件数を得ることが必要。件数は取得する項目に COUNT(a.ID) をすることで取得できる。
■読み込んだ画像を順に処理するメディアは投稿の一種のように扱われており ( 投稿の本文とは別にwp_post テーブルにメディア用のレコードが登録される ) 、投稿関係の関数をそのまま使える場合がある。
foreach ($attachments as $post) { // 変数 $attachments は読み込んだ画像の配列 setup_postdata($post); 個々の画像に対する処理}
PHP による WEB アプリの構築
- 104 -
2. 画像一覧用のページテンプレートの作成
FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten に編集済みの「 listimages.php 」をアップロードする。
① listimages.php をアップロードする
■ 変数の初期化// 変数の初期化$per_page = 10; //1 ページあたりの画像の表示件数$per_row = 2; //1 行あたりの画像の表示列数 (2列 )$max_width = 200; // 画像1つの最大表示幅 (200ピクセル )$max_height = 150; // 画像 1つの最大表示高さ (150ピクセル )
3. ページ表示前の初期化を行う
PHP による WEB アプリの構築
- 105 -
■ 画像の数を得る// 画像の数を得る$sql = <<< HERESELECT COUNT(a.ID) FROM $wpdb->posts a, $wpdb->posts pWHERE a.post_parent = p.IDAND 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 に代入する
PHP による WEB アプリの構築
- 106 -
■ ページ分割の準備をする
(1) オブジェクトの全件数を求める(2) (1) の件数と、 1ページあたりの件数から、全ページ数を求める(3) 表示するページ番号を得る(4) ページ番号に応じてスキップする件数(オフセット)を求める(5) ページの先頭 /最後のオブジェクトの番号を求める
求める値 求める式
全ページ数 ( オブジェクトの全件数 ÷1 ページあたりの件数 )の小数点以下を切り上げた値
オフセット ( ページ番号‐ 1)×1 ページあたりの件数
ページの先頭のオブジェクトの番号
( ページ番号‐ 1)×1 ページあたりの件数 +1
ページの最後のオブジェクトの番号
ページ番号×1 ページあたりの件数。ただし、最後のページの場合はオブジェクトの全件数
PHP による WEB アプリの構築
- 107 -
■全ページ数などを求める// 画像の数から全ページ数を求める$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;}
PHP による WEB アプリの構築
- 108 -
■ 画像を読み込む// 画像を読み込む$sql = <<< HERESELECT a.* FROM $wpdb->posts a, $wpdb->posts pWHERE a.post_parent = p.IDAND a.post_mime_type LIKE 'image/%'AND a.post_type = 'attachment'AND p.post_status = 'publish'ORDER BY a.post_date DESCLIMIT $offset, $per_page //先頭から変数 $offset 件飛ばして変数 $offset 件分取得するHERE;$attachments = $wpdb->get_results($sql);
PHP による WEB アプリの構築
- 109 -
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を取得
PHP による WEB アプリの構築
- 110 -
■ 画像のアドレス /概要 /タイトルを得る // 画像のアドレス/概要/タイトルを得る $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; }
PHP による WEB アプリの構築
- 111 -
■ 画像を縮小する // 画像の縦横比を維持したまま、 // 幅が $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; } }
PHP による WEB アプリの構築
- 112 -
■ 行の先頭 /最後の列かどうかを変数で示す // 行の先頭/最後かどうかを、変数 $row_first/ $row_end に代入する $row_first = ($ctr % $per_row == 0); $row_end = ($ctr % $per_row == $per_row - 1); ?>
$ctr の値 $ctr を列数で割った余り
1 列目 2 列目 1 列目 2 列目1行目 0 1 0 1
2行目 2 3 0 1
3行目 4 5 0 1
… … … … …
2 列の場合の表のマス目と変数 $ctr の値 /$ctr を列数で割った余りとの対応
行の最後は余りが列数より1 小さい値になる
<tr> タグを記述する判定に使用す
る
PHP による WEB アプリの構築
- 113 -
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; ?>
PHP による WEB アプリの構築
- 114 -
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>
PHP による WEB アプリの構築
- 115 -
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; ?>
PHP による WEB アプリの構築
- 116 -
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;} ※次ページへ続く
PHP による WEB アプリの構築
- 117 -
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;}
PHP による WEB アプリの構築
- 118 -
9. 画像一覧を固定ページに追加する
PHP による WEB アプリの構築
- 119 -
10. メニューに画像一覧を追加する
PHP による WEB アプリの構築
- 120 -
■ 参考:大分県立芸術会館 検索ページ (URL : http://art.oita-ed.jp/search/)
PHP による WEB アプリの構築
- 121 -
7. プラグインを開発する~プラグイン開発の基本を学ぼう~
PHP による WEB アプリの構築
- 122 -
7.17.1 初めてのプラグイン初めてのプラグイン
■ プラグインの PHP ファイルを作成するWordPress 本体と同様に、プラグインも PHP を使って作成する。
① テキストエディタを開き「 helloworld.php 」という名前をつけ、文字コードに UTF-8 を指定して「 helloworld 」というフォルダを作成して保存する。
「 Hello, World 」と出力するテンプレートタグを追加するプラグインを作成しながら、プラグイン開発の流れを押さえる
「 Hello, World 」と出力するテンプレートタグを追加するプラグインを作成しながら、プラグイン開発の流れを押さえる
PHP による WEB アプリの構築
- 123 -
<?php/*Plugin Name: Hello, WorldPlugin URI: http://www.xxx.com/xxx/xxxxx/Description: 「 Hello, World 」を出力するテンプレートタグを追加します。Version: 1.0Author: 作者名Author URI: http://www.xxx.com/xxx*/?>
②PHP ファイルの先頭にプラグインの情報を記述する
function the_hello_world() { echo 'Hello, World'; // 「 Hello, World 」と出力する}
③ プラグインの情報の直後に処理を記述する
PHP による WEB アプリの構築
- 124 -
■ プラグインのインストール① 作成した PHP ファイルをフォルダごとアップロードする。
アップロード先:
/[WordPress インストールディレクトリ ]/wp-content/plugins
②WordPress にログインし、「プラグイン」のメニューを選択すると、インストール済みのプラグインが一覧表示される。「 Hello, World 」にチェックを入れて「有効化」をクリックする。
PHP による WEB アプリの構築
- 125 -
③ プラグインを有効化すると、プラグイン内の関数をテンプレートなどから呼び出すことができる。 index.php の中に以下を追加して「 Hello, World 」と出力してみる。
( 途中略 )<div id="container"> <?php the_hello_world(); ?> <div id="content" role="main">
表示例
【 index.php】
PHP による WEB アプリの構築
- 126 -
■複数のファイルからなるプラグイン
プラグインは PHP ファイル 1つだけでなく、画像や外部 JavaScript のファイルを組み合わせても作成することができる。
WordPress
wp-content
plugins
プラグイン毎のディレクトリ
メインの PHP ファイル
images
js
その他の PHP ファイル
各 種の画像ファイル
各 種の外部 JavaScript ファイル
プラグインのファイル配置の例
PHP による WEB アプリの構築
- 127 -
7.27.2 アクションとフィルターアクションとフィルター
フック (hook)プラグインを WordPress 本体に “引っ張り込む (hook into)” ための仕組み
PHP による WEB アプリの構築
- 128 -
サイトの各ページに favicon を追加するサイトの各ページに favicon を追加する
作成するサンプル
PHP による WEB アプリの構築
- 129 -
① テキストエディタを開き「 addfavicon.php 」という名前をつけ、文字コードに UTF-8 を指定して「 addfavicon 」というフォルダを作成して保存する。
<?php/*Plugin Name: Add FaviconPlugin URI: http://www.xxx.com/xxx/xxxxx/Description: サイトの各ページに favicon を表示できるようにします。Version: 1.0Author: 作者名Author URI: http://www.xxx.com/xxx*/?>
②PHP ファイルの先頭にプラグインの情報を記述する
PHP による WEB アプリの構築
- 130 -
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 . '" />';}
③favicon の HTML を出力する関数を作る
str_replace ( 検索文字 , 置換後の文字列 , 元の文字列 )basename() :パスの最後にある名前の部分を返す。__FILE__ : PHP の定数。ファイルのフルパスとファイル名。plugin_basename() : 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
PHP による WEB アプリの構築
- 131 -
add_action('wp_head', 'add_favicon_to_header');
④favicon の HTML を出力する関数の直後に、 wp_head アクションにフックする処理を追加する。
add_action (' アクション名 ', ' 関数名 ');
特定のアクションに関数をフックする
wp_head アクション: テンプレートが wp_head 関数を呼び出す際に実行する。wp_head 関数は通常、ブログページの先頭付近の <head> 要素内で使われる。
⑤ 作成した PHP ファイルをフォルダごと plugins ディレクトリにアップロードする。
⑥favicon のファイル「 favicon.ico 」を addfavicon ディレクトリにアップロードする。
⑦WordPress にログインし、「 Add Favicon 」プラグインを有効化する。
PHP による WEB アプリの構築
- 132 -
投稿のタイトルに含まれる全角英数字を半角に変換する投稿のタイトルに含まれる全角英数字を半角に変換する
プラグインがオフのときの表示
プラグインがオンのときの表示
PHP による WEB アプリの構築
- 133 -
① テキストエディタを開き「 convzenhan.php 」という名前をつけ、文字コードに UTF-8 を指定して「 convzenhan 」というフォルダを作成して保存する。
<?php/*Plugin Name: Convert zenkaku to hankakuPlugin URI: http://www.xxx.com/xxx/xxxxx/Description: 記事中の半角英数字を全角に変換します。Version: 1.0Author: 作者名Author URI: http://www.xxx.com/xxx*/?>
②PHP ファイルの先頭にプラグインの情報を記述する
PHP による WEB アプリの構築
- 134 -
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 ディレクトリにアップロードし、プラグインを有効化する。
PHP による WEB アプリの構築
- 135 -
7.37.3 代表的なフックの使い方代表的なフックの使い方
■JavaScript ライブラリを読み込むWordPress には主要なライブラリが含まれており、主な JavaScript ライブラリはハンドルを指定することにより読み込むことができる。
wp_enqueue_script(' ハンドル '); 複数のプラグインで同じライブラリを利用する場合でも、読み込みの重複を起こすことなくライブラリを使用することを WordPress に伝えることができる。wp_enqueue_script('jquery');
ハンドル名に「 jquery 」を指定することで jQuery を使用することを伝える。
PHP による WEB アプリの構築
- 136 -
■ ライブラリに依存する 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 に依存している
PHP による WEB アプリの構築
- 137 -
JavaScript を組み込むプラグインを作成する JavaScript を組み込むプラグインを作成する
作成するサンプル
PHP による WEB アプリの構築
- 138 -
<?php/*Plugin Name: ClockPlugin URI: http://www.xxx.com/xxx/xxxxx/Description: 各ページの 先頭に現在時刻を表示しますVersion: 1.0Author: 作者名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');?>
①clock.php を作成して、 clock フォルダに保存する。【 clock.php】
PHP による WEB アプリの構築
- 139 -
②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 ディレクトリにアップロードし、プラグイン
を有効化する。
【 clock.js】