11 word pressカスタマイズ（テーマ編）

PHP講座(11)!WordPressカスタマイズ（テーマ編）

この授業ではWordPressのテーマカスタマイズについて説明します。 WordPressのテンプレートシステムを理解し、カスタマイズしましょう

WordPressのテーマシステム

10.4.18 (C) 株式会社破滅派

2

WordPressは「テーマ」によって外観を変更できるというシステムを持っています。

通常のWebサイトはほとんど文章＋画像からなるコンテンツで構成されているので、テーマをカスタマイズするだけでほとんど事足ります。

WordPressはテーマをどうやって認識しているか

10.4.18 (C) 株式会社破滅派

3

ルートディレクトリ wp-­‐admin

wp-­‐content

wp-­‐include

uploads

themes

plugins

管理画面用のファイル

コア関数ファイル

ユーザーがコンテンツを追加するフォルダ

管理画面用のファイル

プラグイン用フォルダ

テーマ用フォルダ

WordPressのテーマに最低限必要なもの

10.4.18 (C) 株式会社破滅派

4

テーマフォルダ index.php

style.css

style.cssには必ず決まった書式でテーマの情報を書きます。  

/*  Theme  Name:  テーマ名  Theme  URI:  URL  Description:  解説 Author:  作者名  Version:      */

オリジナルテーマTwenty  Tenのファイル構成を見てみよう！  

オリジナルテーマを作ってみる前に…

10.4.18 (C) 株式会社破滅派

5

1. まずはダミーデータを入れる  http://svn.automattic.com/wpcom-­‐themes/demo/test-­‐data.2010-­‐08-­‐02.xml  

2. オリジナルテーマをインストール  

3. レッツカスタマイズ  

テーマを作ってみてどうでしたか？

10.4.18 (C) 株式会社破滅派

6

ハァ？　画面真っ白なんですけど  

つまんねオワタ  \(^o^)/

テーマを作る必須の知識を一応学びましょう

必須の知識（１）テンプレート階層

10.4.18 (C) 株式会社破滅派

7

1.  WordPressはURLを解析して、どのコンテンツを求められているのかを判断します  

2.  指定されたコンテンツに対応するテーマファイルがあるかどうかを探します。  

3.  そのファイルを使って投稿を表示します。   http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC

%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

ex.単一の投稿ページを表示した場合  

1.  single.phpを探す  

2.  なければindex.php  

必須の知識（２）インクルードタグ＆条件分岐タグ

10.4.18 (C) 株式会社破滅派

8

インクルードタグ

<?php  get_header();  ?>でこれだけ読み込み

条件分岐タグ http://wpdocs.sourceforge.jp/%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%89%E3%82%BF%E3%82%B0

http://wpdocs.sourceforge.jp/Conditional_Tags

<?php  if(is_single()):  ?>  

<div  id=“single”>  

これは投稿ページです。  

</div>  

<?php  endif;  ?>  

ここはシングルページだけで表示される。

必須の知識（３）テンプレートタグ

10.4.18 (C) 株式会社破滅派

9

ちなみに、WordPressの「タグ」ってなんでしょう？  

ただのPHP関数です。  

WordPressは「PHP関数」という言葉で初心者が怯えるのを防ぐために、「タグ」という呼び方をしています。  テンプレートタグはテーマを作成するときに役立つPHP関数です。

<?php  the_title();  //タイトルを出力  the_content();  //本文を出力  bloginfo(‘name’);    //ブログ名を出力  ?>  

必須の知識（４）ループ

10.4.18 (C) 株式会社破滅派

10

<?php  if(have_posts()):  while(have_posts()):  the_post();  ?>  

ここに投稿が出力される  

<?php  endwhile;  endif;  ?>  

WordPressにも「おまじない」があります。  

1.  WordPressはURLを解析して、リライトルールを作成します。  

2.  リライトルールに基づき、必要なデータをDBから取ってきます。  

3.  DBから取ってきたデータを使いやすい型に直し、グローバル変数である$postsオブジェクトに格納します。  

4.  the_post()を呼び出すたび、$postsから$postにデータを移動させます。  

5.  the_title()などは$postを常に参照します。

ループについて

10.4.18 (C) 株式会社破滅派

11

グローバルとか意味わかんね  

ムズ過ぎオワタ  \(^o^)/

あきらめずにWordPressの構成を見てみましょう！  var_dump($GLOBALS);  でWordPressのグローバル変数を取得できます。

やってみよう！　トップページのカスタマイズ

10.4.18 (C) 株式会社破滅派

12

1.  トップページを固定ページに変更する  

2.  home.phpを作ってカスタマイズ  

3.  簡単なリードと最新投稿の一覧（全文ではなく、抜粋）を入れる  

4.  カテゴリごとに最新のコンテンツ5件を取得する  

5.  ウィジェットもサポート！  

header

right  column

footer

リードリードリードリードリードリードリードリードリードリード

カテゴリー名  1.  コンテンツのタイトル  2.  コンテンツのタイトル  3.  コンテンツのタイトル  4.  コンテンツのタイトル  5.  コンテンツのタイトル  

カテゴリー名  1.  コンテンツのタイトル  2.  コンテンツのタイトル  3.  コンテンツのタイトル  4.  コンテンツのタイトル  5.  コンテンツのタイトル  

カテゴリー名  1.  コンテンツのタイトル  2.  コンテンツのタイトル  3.  コンテンツのタイトル  4.  コンテンツのタイトル  5.  コンテンツのタイトル  

カテゴリー名  1.  コンテンツのタイトル  2.  コンテンツのタイトル  3.  コンテンツのタイトル  4.  コンテンツのタイトル  5.  コンテンツのタイトル  

おまけ 「フック」システム

10.4.18 (C) 株式会社破滅派

13

http://wpdocs.sourceforge.jp/%E3%83%97%E3%83%A9%E3%82%B0%E3%82%A4%E3%83%B3_API

WordPressには「フック」と呼ばれる独特のAPIがあります。  

1.  アクションフック  特定の場所で実行される関数を登録できる  

2.  フィルターフック  特定のデータを出力・保存する前に加工できる  

functions.phpにフックを書いて、どうなるかやってみましょう！