PHP による WEB アプリの構築

PHP による WEB アプリの構築

－ 1 －

PHPPHP によるによる WEBWEB アプリアプリの構築の構築

WordPressWordPress を基礎にしてを基礎にして


－ 2 －

目次：1.WordPress の導入2.サイト構築3.PHP 概論4.テンプレートカスタマイズ5.関数を利用してカスタマイズする6.データベースにアクセスする7.プラグインを開発する


－ 3 －

1. WordPress の導入～ WordPress をインストールしてみよう～


－ 4 －

■ Ｃ MS （ Contents Management System ）

1.11.1 CMSCMS とは？とは？

Web コンテンツを構成するテキストや画像、レイアウト情報などを一元的に保存・管理し、サイトを構築したり編集したりするソフトウェア。

テキストやレイアウト情報等の構成要素を分離してデータベースに保存し、サイト構築をソフトウェアで自動的に行うことができる。


－ 5 －

デザイン担当

1.21.2 CMSCMS の利用イメージの利用イメージ

各コンテンツ担当

CMSテンプレート

2

テキスト

・・・・・・・・・・

・

・・・・・・・・・・

・

・・・・・・・・・・

・

画像

動画

音声

テンプレート1

デザイン /インターフェースを設定

HTML 、 CSS 、 PHP の知識が必要

コンテンツの内容を更新HTML と CSS の知識が必要ない

Web ページレイアウト情

報テキスト

画像DB

Web コンテンツ内容を登録・保存


－ 6 －

1.31.3 CMSCMS を利用するメリットを利用するメリット


－ 7 －

WordPress 3.2.1 （オープンソース CMS ）

•　インストール、設定が簡単

•　プラグインが充実

1.41.4 WordPressWordPress の特徴の特徴

動作条件（サーバ）

• PHP バージョン 5.2.4 以上

• MySQL バージョン 5.0 以上

運用に必要なソフトウェア（クライアント）

• Web ブラウザ、 FTP ソフト


－ 8 －

(1)WordPress をダウンロードする

1.51.5 WordPressWordPress をインストールをインストール

http://ja.wordpress.org/

ダウンロード後、 ZIPファイルを展開しておく


－ 9 －

(2)MySQL に WordPress 用のデータベースとユーザを作成する

MySQL 管理ツールphpMyAdminMySQL 管理ツールphpMyAdmin


－ 10 －

(3) 展開した WordPress フォルダをサーバへアップロードする

ドキュメントルート

※サーバの httpd.conf で確認

任意のディレクトリ名で

アップロード


－ 11 －

(4) 設定ファイルの権限を書き込み可能に変更する

・ [ インストールディレクトリ ]/wp

・ [ インストールディレクトリ ]/wp/wp-content


－ 12 －

(5) ブラウザでインストール場所にアクセスする

http://[Web サーバのアドレス ]/[WordPress のディレクトリ名 ]/


－ 13 －

(6) インストールを開始する


－ 14 －

(7) データベースの情報を入力する


－ 15 －

(8) インストール実行をクリックする


－ 16 －

(9) 情報を入力して「 WordPress をインストール」をクリックする

•サイトのタイトル

•ユーザー名

•パスワード

•メールアドレス

•検索エンジンの表示有無

•サイトのタイトル

•ユーザー名

•パスワード

•メールアドレス

•検索エンジンの表示有無


－ 17 －

(10) インストールの完了画面を確認する


－ 18 －

(1) 管理画面にログインする

1.61.6 WordPressWordPress の設定の設定


－ 19 －

(2) 初期画面が表示される


－ 20 －

(3) 管理画面が表示される


－ 21 －

2. サイト構築～ WordPress で記事を投稿してみよう～


－ 22 －

(1) インストール時点でのサイトを確認する


－ 23 －

参考ホームページ：「知の創造プロジェクト」　　　　　　　　　　　　　http://www.csis.oita-u.ac.jp/PICP/index.html

(2) 知の創造プロジェクトのホームページを参考にWordPress に記事を投稿していく


－ 24 －

(3) 投稿記事を確認する

投稿記事一覧を表示


－ 25 －

(4) カテゴリーを追加する

以下のカテゴリーを追加・実施プロジェクト・セミナー・講演会

・参加者の声

「未分類」を削除

以下のカテゴリーを追加・実施プロジェクト・セミナー・講演会

・参加者の声

「未分類」を削除


－ 26 －

(5) 記事を作成する

各カテゴリーに日付の違う記事を 5 件以上投稿する

各カテゴリーに日付の違う記事を 5 件以上投稿する


－ 27 －

(6) 固定ページを確認する

固定ページを表示


－ 28 －

(7) 固定ページを編集する

以下の固定ページを作成・概要・お問い合わせ

以下の固定ページを作成・概要・お問い合わせ


－ 29 －

(8) ナビゲーションメニューを作成する


－ 30 －

(9) 固定ページをメニューに追加する

固定ページがメニューに追加される


－ 31 －

(10) カテゴリーをメニューに追加する

カテゴリーがメニューに追加される


－ 32 －

(11) メニューの項目を並び替える

ドラッグ＆ドロップで

簡単に並び替えができるメニューを次の順に並べる

① 概要、②実施プロジェクト、③セミナー・講演会、④参加者の声、⑤お問い合わせ

メニューを次の順に並べる

① 概要、②実施プロジェクト、③セミナー・講演会、④参加者の声、⑤お問い合わせ


－ 33 －

(12) 表示するメニューを指定する


－ 34 －

(13) サイトの表示を確認する


－ 35 －

3. PHP 概論～ WordPress で利用されている PHP の基本を学ぼう～


－ 36 －

3.13.1 PHPPHP とはとは

サーバサイドスクリプト言語の一つ。HTML 内に PHP スクリプトを埋め込むことができる。処理結果に応じた HTML を生成するので動的な Webページを表示できる。オープンソースソフトウェア。

• 習得が容易 (C 言語や Java の記述方法に似ている )• データベースとの連携が得意• 外部モジュールによる拡張性に優れる

PHP の特徴


－ 37 －

Web サーバPHP ファイ

ル

クライアント

PHP エンジン

④HTML を送信

①ページを閲覧

③処理の結果を返す②PHP のシステムにファイルを渡す

スクリプトの内容に応じて処理を行う

⑤Web ブラウザは異なる内容が表示

HTML ファイルと

同じように見える

見るたびに内容が異なる動的なホームぺージ

を表示できる

3.2 PHP3.2 PHP の処理の流れの処理の流れ


－ 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


－ 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; 　　

基本構文

　

基本構文

　


－ 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; 　　基本構文

　

基本構文

　

• コメントは // を最初につけるか、 /* */ で囲む


－ 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; 　　基本構文

　

基本構文

　


－ 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; 　　

基本構文

　

基本構文

　


－ 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; 　　基本構文

　

基本構文

　


－ 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】


－ 45 －

4. テンプレートカスタマイズ～ PHP を使ってテンプレートを書き換えてみよう～


－ 46 －

■WordPress のテーマシステム4.14.1 テーマの構造を理解するテーマの構造を理解する

サイトの表示の仕方を管理。管理画面からテーマを選択することで簡単に着せ替えが可能。ただ、見た目のデザインが変わるだけではなく、表示する内容もテーマ毎に細かく設定することができる。■ テーマの構成

コンテンツサイドバー

フッター

ヘッダー基本的なウェブページ構成はヘッダー部分、コンテンツ部分、サイドバー部分、フッター部分のテンプレートファイルで構成される。


－ 47 －

■ テンプレート階層TwentyTen テーマのテンプレートを確認してみましょう。

これらのテンプレートに沿って出力される


－ 48 －

トップページは「 index.php 」というテンプレートに基づいて出力されている。


－ 49 －

① FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten 　に中身が空のファイル「 home.php 」をアップロードする。※テンプレートファイルは全てこのディレクトリに格納する。

② FTP ソフトで home.php のパーミッションを書き込み権限有りに設定する。③ WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 home.php 」を選択する。

④ home.php に「優先順位のテスト」と入力して「ファイルの更新」ボタンをクリックする。

⑤ ブラウザでサイトを表示させる。

新規のテンプレートファイル「 home.php 」をサーバにアップロードして表示を確認してみましょう。

新規のテンプレートファイル「 home.php 」をサーバにアップロードして表示を確認してみましょう。


－ 50 －

・テンプレートの優先順位

各ページとテンプレートは 1 対 1 で対応しているわけではない。

「 home.php 」というテンプレートがあると、 index.php は使われず、 home.php が優先的に使われる。

トップページの表示が変わっている！

home.php > index.php

テーマをカスタマイズする際はテンプレート階層を考慮することが大切


－ 51 －

■ カスタマイズの留意点


－ 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 ループの構造


－ 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:


－ 54 －

FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten に「 banner.gif 」をアップロードする。

① 表示するバナーをアップロードする

作成するサンプル

先頭の投稿だけにバナーを表示する先頭の投稿だけにバナーを表示する


－ 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><?php // バナーを表示 ?><?php if($is_first): ?>

<img src="<?php bloginfo('template_url'); ?>/banner.gif" alt="PHP 講習会のお知らせ " width="270" height="50" />

<?php endif; ?></div>

<?php /* How to display posts of the Aside format. The asides category is the old way. */ ?>( 途中略 )※次ページへ続く

【 loop.php】② loop.php を編集する


－ 56 －

</div><?php // バナーを表示 ?><?php if($is_first): ?>


<?php endif; ?>

</div>

<?php /* How to display all other posts. */ ?>

<?php // バナーを表示 ?><?php if($is_first): ?>


<?php endif; ?>

</div><?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. ?>


－ 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:


－ 58 －


奇数件目と偶数件目でデザインを変える奇数件目と偶数件目でデザインを変える


－ 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】


－ 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; ?>※次ページに続く


－ 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++; ?>


－ 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 」の場合


－ 63 －

カテゴリーでヘッダーの画像を変えるカテゴリーでヘッダーの画像を変える



－ 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】 ( 編集前 )


－ 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(' 実施プロジェクト ')) : ?>


?>/images/headers/title_project.jpg" width="<?php echo


>" alt="" />

<?php elseif (is_category(' 参加者の声 ')) : ?>


?>/images/headers/title_voice.jpg" width="<?php echo


>" 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】 ( 編集後 )


－ 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】

複数のテンプレートで共通の関数を実行する


－ 67 －

4.2 で作成した先頭の投稿の直後だけにバナーを表示する処理を関数化する

4.2 で作成した先頭の投稿の直後だけにバナーを表示する処理を関数化する

(1) WordPress ループに入る前に、変数 $is_first を true に初期化する

(2) WordPress ループの最後で、最初の投稿かどうか ( 変数 $is_first の値が

trueか

どうか ) を判断して、そうであればバナーを出力する

■ 関数化する処理

(1) と (2)それぞれを関数として記述する


－ 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;

}


－ 69 －

WordPress の管理画面の左側メニューより「外観」 - 「テーマ編集」を選択し、「テーマの編集」画面でテンプレートの「 loop.php 」を選択し、編集する。

② loop.php を書き換える

【 loop.php】


－ 70 －


－ 71 －

5. 関数を利用してカスタマイズする

～ WordPress の関数を利用して柔軟なデータ出力を行う～


－ 72 －

5.15.1 関数を活用する関数を活用する

■ テンプレートタグと WordPress 関数

テンプレートタグ…WordPress に何かを実行あるいは取得するように指示する

関数。特に WordPress テーマ用に定義されているもの。

WordPress 関数…WordPress のコア機能の形成に使われる関数。プラグインやテーマ開発に役立つ。関数を利用することでテンプレートタグよりも柔軟にデータを扱うことができる。⇒よりニーズに合ったカスタマイズが可能。

<h1><?php bloginfo('name'); ?></h1>


－ 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


－ 74 －

「実施プロジェクト」カテゴリまたは「セミナー・講演会」カテゴリから最新投稿 5 件をトップページの先頭に表示する

「実施プロジェクト」カテゴリまたは「セミナー・講演会」カテゴリから最新投稿 5 件をトップページの先頭に表示する



－ 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】


－ 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】


－ 77 －

5.25.2 カスタムフィールドを使ってみようカスタムフィールドを使ってみよう

カスタムフィールド…投稿ごとに追加できる独自のフィールド。タイトル、本文以外にも任意でフィールドを投稿画面に追加

し、出力することができる。

■ カスタムフィールドを表示させる


－ 78 －

WordPress の管理画面の左側メニューより「投稿」 - 「投稿一覧」を選択し、「投稿の編集」画面を開くと、カスタムフィールドの入力画面が追加されている


－ 79 －

カスタムフィールドを追加してタイトル、本文以外の投稿・表示ができるようにする

カスタムフィールドを追加してタイトル、本文以外の投稿・表示ができるようにする


－ 80 －

( 途中略 )</div><?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 を編集する。


－ 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 】


－ 82 －

5.35.3 同じカテゴリーの投稿を一覧表示する同じカテゴリーの投稿を一覧表示する

$wp_query オブジェクト… ページに表示されている投稿などの情報を

はじめとして、現在アクセスされているページに関するさまざまな情報を保持している

プロパティ

メソッド

オブジェクト

オブジェクトの持つデータ

操作

「クラス」として定義されている

■ プロパティ・メソッドへのアクセス$オブジェクト変数名 -> プロパ

ティ ;$オブジェクト変数名 -> メソッド名 ();


－ 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 オブジェクトに含まれるプロパティとメソッド


－ 84 －

単体投稿ページに同一カテゴリ投稿のリストを出力する単体投稿ページに同一カテゴリ投稿のリストを出力する



－ 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】


－ 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; ?>


－ 87 －

6. データベースにアクセスする～ WordPress のデータベースから直接データを取得してみよう～


－ 88 －

6.16.1 データベースへのアクセスデータベースへのアクセスWordPress で入力したデータは MySQL に登録されている

MySQL

テーブル

データ


－ 89 －

■ データベースからデータを取得する方法

(1)WordPress 関数を利用するメリット：簡単にデータを読み込むことができるデメリット：特殊な条件でデータを読み込む場合、条件の指定が

難しい場合がある

(2)データベースへ直接アクセスするメリット： Worｄ Press の標準関数では指定できないような複雑な

条件の指定が可能デメリット： WordPress のバージョンアップに伴い、データベースの

構造が変更されることもあり、処理を変更する必要が

が発生する恐れがある関数を全く同じデータにならない場合がある


－ 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個のテーブル


－ 91 －

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 テーブルの主なフィールド

投稿 /固定ページなどのコンテンツ系のデータはすべてwp_posts テーブルで管理されている


－ 92 －

6.36.3 wpdbwpdb オブジェクトによるデータベースアクセスオブジェクトによるデータベースアクセス

wpdb クラス・・・「 ezSQL 」というクラスライブラリをWordPress向けに改良したクラス。データベースを操作するための基本的なメソッドが含まれている。※ ezSQL ： PHP のプログラムからデータベースへアクセス

するためのオープンソースのライブラリ。

■wpdb オブジェクトを使う

wpdb クラス

WordPress 初期化時

wpdb オブジェクト

生成グローバル変数$wpdb

グローバル変数$wpdb

初期化時に wpdb オブジェクトを生成してグローバル変数 $wpdb に割り当てる。テンプレートの中で$wpdb を通してデータベースにアクセスすることができる。例： $wpdb-> メソッド名()


－ 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 オブジェクトの　プロパティを使ってテーブル名を指定する


－ 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　　　　　：　　　　　　　　　　　　：


－ 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 」になっており、結果はオブジェクトの形式となる。


－ 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 // ユーザ名を取得


－ 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';

※右上に続く


－ 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 の全てのデータが取り出されてしまう


－ 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));


－ 100 －

■ エラーメッセージを表示する

$wpdb->show_errors();

エラーの出力を有効化にする

get_results メソッドなどでデータベースにアクセスした際にエラーが発生しても、標準ではエラーメッセージは表示されない。

⇒ SQL文の構文に誤りがあったとしても、ヒットするデータが 1件もない場合と　同じ結果になる。

データベースにアクセスするテンプレートなどの開発中には、エラーメッセージを表示して、問題点を探しやすくしておくとよい。

テンプレートの開発が終わったら、テンプレートから show_errors メソッドの文を削除して、エラーメッセージを表示しない状態に戻す。


－ 101 －

最近アップロードした画像を一覧形式で表示する最近アップロードした画像を一覧形式で表示する

6.46.4 画像一覧のページを作る画像一覧のページを作る


－ 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'


－ 103 －

■ 画像の件数を数える SQL

画像を 1ページあたり 10 件ずつ分割して読み込むには画像の全件数を得ることが必要。件数は取得する項目に COUNT(a.ID) をすることで取得できる。

■読み込んだ画像を順に処理するメディアは投稿の一種のように扱われており ( 投稿の本文とは別にwp_post テーブルにメディア用のレコードが登録される ) 、投稿関係の関数をそのまま使える場合がある。

foreach ($attachments as $post) { // 変数 $attachments は読み込んだ画像の配列 setup_postdata($post); 個々の画像に対する処理}


－ 104 －

2. 画像一覧用のページテンプレートの作成

FTP ソフトで /[WordPress インストールディレクトリ ]/wp-content/themes/twentyten 　に編集済みの「 listimages.php 」をアップロードする。

① listimages.php をアップロードする

■ 変数の初期化// 変数の初期化$per_page = 10; //1 ページあたりの画像の表示件数$per_row = 2; //1 行あたりの画像の表示列数 (2列 )$max_width = 200; // 画像１つの最大表示幅 (200ピクセル )$max_height = 150; // 画像 1つの最大表示高さ (150ピクセル )

3. ページ表示前の初期化を行う


－ 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 に代入する


－ 106 －

■ ページ分割の準備をする

(1) オブジェクトの全件数を求める(2) (1) の件数と、 1ページあたりの件数から、全ページ数を求める(3) 表示するページ番号を得る(4) ページ番号に応じてスキップする件数（オフセット）を求める(5) ページの先頭 /最後のオブジェクトの番号を求める

求める値求める式

全ページ数 ( オブジェクトの全件数 ÷1 ページあたりの件数 )の小数点以下を切り上げた値

オフセット ( ページ番号‐ 1)×1 ページあたりの件数

ページの先頭のオブジェクトの番号

( ページ番号‐ 1)×1 ページあたりの件数 +1

ページの最後のオブジェクトの番号

ページ番号×1 ページあたりの件数。ただし、最後のページの場合はオブジェクトの全件数


－ 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;}


－ 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);


－ 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を取得


－ 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; }


－ 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; } }


－ 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> タグを記述する判定に使用す

る


－ 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; ?>


－ 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>


－ 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; ?>


－ 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;} ※次ページへ続く


－ 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;}


－ 118 －

9. 画像一覧を固定ページに追加する


－ 119 －

10. メニューに画像一覧を追加する


－ 120 －

■ 参考：大分県立芸術会館　検索ページ (URL ： http://art.oita-ed.jp/search/)


－ 121 －

7. プラグインを開発する～プラグイン開発の基本を学ぼう～


－ 122 －

7.17.1 初めてのプラグイン初めてのプラグイン

■ プラグインの PHP ファイルを作成するWordPress 本体と同様に、プラグインも PHP を使って作成する。

① テキストエディタを開き「 helloworld.php 」という名前をつけ、文字コードに UTF-8 を指定して「 helloworld 」というフォルダを作成して保存する。

「 Hello, World 」と出力するテンプレートタグを追加するプラグインを作成しながら、プラグイン開発の流れを押さえる

「 Hello, World 」と出力するテンプレートタグを追加するプラグインを作成しながら、プラグイン開発の流れを押さえる


－ 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 」と出力する}

③ プラグインの情報の直後に処理を記述する


－ 124 －

■ プラグインのインストール① 作成した PHP ファイルをフォルダごとアップロードする。

アップロード先：

/[WordPress インストールディレクトリ ]/wp-content/plugins

②WordPress にログインし、「プラグイン」のメニューを選択すると、インストール済みのプラグインが一覧表示される。「 Hello, World 」にチェックを入れて「有効化」をクリックする。


－ 125 －

③ プラグインを有効化すると、プラグイン内の関数をテンプレートなどから呼び出すことができる。 index.php の中に以下を追加して「 Hello, World 」と出力してみる。

( 途中略 )<div id="container"> <?php the_hello_world(); ?> <div id="content" role="main">

表示例

【 index.php】


－ 126 －

■複数のファイルからなるプラグイン

プラグインは PHP ファイル 1つだけでなく、画像や外部 JavaScript のファイルを組み合わせても作成することができる。

WordPress

wp-content

plugins

プラグイン毎のディレクトリ

メインの PHP ファイル

images

js

その他の PHP ファイル

各種の画像ファイル

各種の外部 JavaScript ファイル

プラグインのファイル配置の例


－ 127 －

7.27.2 アクションとフィルターアクションとフィルター

フック (hook)プラグインを WordPress 本体に “引っ張り込む (hook into)” ための仕組み


－ 128 －

サイトの各ページに favicon を追加するサイトの各ページに favicon を追加する



－ 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*/?>



－ 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


－ 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 」プラグインを有効化する。


－ 132 －

投稿のタイトルに含まれる全角英数字を半角に変換する投稿のタイトルに含まれる全角英数字を半角に変換する

プラグインがオフのときの表示

プラグインがオンのときの表示


－ 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*/?>



－ 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 ディレクトリにアップロードし、プラグインを有効化する。


－ 135 －

7.37.3 代表的なフックの使い方代表的なフックの使い方

■JavaScript ライブラリを読み込むWordPress には主要なライブラリが含まれており、主な JavaScript ライブラリはハンドルを指定することにより読み込むことができる。

wp_enqueue_script(' ハンドル '); 複数のプラグインで同じライブラリを利用する場合でも、読み込みの重複を起こすことなくライブラリを使用することを WordPress に伝えることができる。wp_enqueue_script('jquery');

ハンドル名に「 jquery 」を指定することで jQuery を使用することを伝える。


－ 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 に依存している


－ 137 －

JavaScript を組み込むプラグインを作成する JavaScript を組み込むプラグインを作成する



－ 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】


－ 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】

Documents

PHP による WEB アプリの構築