WordPressのテンプレートタグを理解する

WordPressのテンプレートタグを理解する
Ticklecode.
Yoshinori Kobayashi 1
第15回ゼロから始めるWordPress勉強会14.10.23

生まれは奈良県です。
小林由憲（こばやしよしのり）
Twitter: @AsbyuKobayashi
ブログ: In Advance Only
2

アジェンダ
１．テンプレートタグとはなにか？
２．テンプレートタグの仕組み
３．まとめ

4
デモで全体的にご説明。

１．テンプレートタグとはなにか？

ページを表示するときのWordPressの動き。
DB:データベース
MySql
wp_posts
WordPress コア
①http://ticklecode.com/blog/
テンプレート
Page.php
htmlを生成し
て返す。
②
テンプレート
タグ
③

公式テーマ：Twenty Fourteen
header.php
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">

<?php wp_head(); ?>
</head>
上記の、赤字がテンプレートタグ。

テンプレートタグの書き方
実例：
<?php bloginfo( ‘name’ ); ?>
形式：
<?php テンプレートタグ名(パラメタ); ?>
プログラム言語PHPを使っているので、
<?php で始まり、?> で終わる。

WordPressでのテンプレートタグの位置づけ
WordPressは、プログラミング言語PHPで作られている。
WordPress
PHP
サーバー
WordPressでは便利なPHP関数が多数用意されてきる。その中でも
WordPress テーマ用に定義されているのが、テンプレートタグと呼ばれている。

WordPress関数群の中でのテンプレートタグの位置づけ
関数リファレンス
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#.E3.83.86.E3.83.BC.E3.83.9E.E9.96.A2.E6.95.B0
投稿、カスタム投稿タイプ、固定ページ、添付
ファイル、ブックマーク関数
カテゴリー、タグ、タクソノミー関数
ユーザー、投稿者関数フィード関数
HTTP API 関数
コメント、ピン、トラックバック関数
アクション、フィルター、プラグイン、
ショートコード関数
テーマ関数フォーマット用関数
その他の関数マルチサイト関数
赤字がテンプレートタグと言われているか箇所

テンプレートタグの役割１
PHPの高度なプログラミング知識がなくてもテーマのカスタ
マイズを可能にしてくれる。
PHPのif文や変数、配列、比較演算子といった基本文
法だけで、かなりのカスタマイズが行える。

管理画面からの入力
データベース
MySql
header.php
footer.php
index.php
テンプレートタグで
データベースに保存した情報を
読みだす。
HTML
.php のテンプレートに
テンプレートタグが
記載されている
テンプレートタグの役割２
管理画面で保存した情報を使えるようにする。（再利用する）

テンプレートタグの役割３
分割したテンプレートを結合する。（インクルードタグ）
header.php
index.php
<?php get_header(); ?>
<?php get_footer(); ?>
footer.php

２．テンプレートタグの仕組み

テンプレートタグとHTML出力結果１
twentyfourteen/header.php -> Line 22
<meta charset="<?php bloginfo( 'charset' ); ?>">
ブラウザで表示されると・・・
<meta charset="UTF-8">

テンプレートタグとHTML出力結果２
twentyfourteen/header.php -> LIne 26
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<link rel="pingback" href="http://ticklecode.com/wp/xmlrpc.php">

テンプレートタグとHTML出力結果３
<body <?php body_class(); ?>>
<body class="home page page-id-6 page-template-default
masthead-fixed full-width grid">

テンプレートタグとHTML出力結果４
<title><?php wp_title( '|', true, 'right' ); ?></title>
<title>世田谷区で不動産のWebサイト制作のことなら、TickleCode
| 世田谷区や東急田園都市沿線で新築不動産のPRサイトや不動
産物件サイトの制作、運営のことならTickleCodeにお尋ねください。
</title>

テンプレートタグ: bloginfo の仕組み
PHP Cross Reference of WordPress
http://phpxref.ftwr.co.uk/
Webサイトで、WordPressのソースを追跡できるサービス。

[Search] ⇒ [Function] の箇所で、「bloginfo」を入力して、[Search]

general-template.php の585 行目で定義（本体がある場所）されている。
クリックする。
wp-includes/general-template.php は、全体的によく使うタグ（関数）が集められて
いるphpファイル

bloginfo の定義
function はユーザー定義関数。なにかをもらって、なにかを返す。
echo（エコー）は、なにかを表示する。
$showは、showという名前の変数（格納場所）を示す。
<?php bloginfo( ‘name’ ); ?>で呼ばれているので、$showには、’name’が入って
いる。

bloginfo からget_bloginfo を探す。

get_bloginfo
$show の中身は、’name’ で、$filter の中身は、display が入っている。
switch case は、何かの場合に切り替えて行くという意味。

get_bloginfo
「case ‘name’:」に、breakがないので、次の「default:」も実行する。
get_option(‘blogname’); を使って、「blogname」を取得している。

get_option
データベースのoptionsテーブルから、指定したオプションの値を取得する。
http://wpdocs.sourceforge.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E
3%83%B3%E3%82%B9/get_option
データベースget_option(‘blogname’);
option テーブル
世田谷区で不動産のWebサイト制作のことなら、
TickleCode

テンプレートタグには表示するもの（echoあり）、
データを取得するのみ（echoなし）がある。
〇表示するもの（echoあり） ⇒ そのままで、ブラウザで表示される、
bloginfo( ‘charset’ ) 、wp_title( ‘|’, true, ‘right’ ) など
〇データ取得（echoなし） ⇒ ブラウザにはなにも表示されない。
get_bloginfo( $show, 'display' );
※ 表示させたい場合は、echo get_bloginfo( $show, ‘display’ ); とする。
※ get_ から始まる、テンプレートタグは、データ取得のみ（echo なし）が多い。

・WordPressテーマ用に作られた関数を、テンプレートタグという。
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%B
F%E3%82%B0
・テンプレートタグで管理画面の情報（設定、投稿、固定ページ）
を再利用できる。
・テンプレートタグには、ブラウザ表示用（echoあり)と、データ取得のみ（echo
なし）がある。

PHP 文法チートシート
文法意味
<?php ～ ?> ～をPHPで実行することを示す。
;（セミコロン） ;（セミコロン）までを一つの分として解釈
function 関数名() {
return -- ;
}
ユーザー定義関数を示す。
関数は何かをもらって、何かを返す機能。
echo エコーと読む。
何かを出力（表示）する。
$show $showは、showという名前の変数（格納場
所）を示す。
「$」は変数の意味。
switch($show) {
case ‘home’ :
～
case ‘url’ :
$showの中身を、case（’home’など）と比較
していく。breakで抜ける。breakがないとき
は、次のcaseも実行する。

参考になる記事まとめ
WordPressテンプレートタグ集｜初心者即実践＆仕事で使えるコピペ用：
http://webdesignerwork.jp/wordpress/wordpress_tag/
WordPressテンプレートタグチートシート：
http://mignonstyle.com/wordpress-cheat-sheet/
WordPress Codex テンプレートタグ：
http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%
AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0

参考図書
WordPressユーザーのためのPHP入門は
じめから、ていねいに。
PHPの説明もあり、テンプレート、テンプレートタグの解説が豊富。

33
ご清聴、ありがとうございました。

WordPressのテンプレートタグを理解する

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to WordPressのテンプレートタグを理解する (13)

More from Yoshinori Kobayashi (20)

Recently uploaded (9)

WordPressのテンプレートタグを理解する

Editor's Notes