エンジニアの為のWordPress入門〜WordPressはWebAppプラットフォームです〜

エンジニアの為の
WordPress入門
∼WordPressはWebAppプラットフォームです∼

自己紹介

‣ ノジマユウジ ‣ システム開発、
@yuka2py グラフィックデザイン、
DTPや印刷なども
‣ 株式会社フォーエンキー
代表 ‣ 最近はiPhone/Android
のアプリ開発とかスマホ
‣ PythonとJavascriptが大系のWebとか、WinDTア
好き（Dartに興味深々）プリなど作っています
‣ おしゃれも大好き☆ ‣ リボンやお花が好き☆

最近のボク
Python
Design 1%
お嫁 15%
Windows(C#) iOS お嫁
Web(PHP/JS)
4%
Android
Android 40%
iOS
Design
10%
Python
Web(PHP/JS)
10%
Windows(C#)
2012年11月2日
株式会社フォーエンキー調べ 20%

はじめに

‣ この資料では、WordPress のカスタマイズを、
エンジニア寄りの視点で、解説させていただきます。

‣ WordPressのカスタマイズはこれからだけど、PHPに
は精通されている方、一般的なWebアプリケーション
フーレムワークでの開発の知識のある方などを主な対
象として、当初つまずきやすいと思われる箇所や、私
個人が疑問に思った箇所、気付くのに時間が掛かった
箇所などを紹介させていただいています。

本日のおしながき

‣ スクラッチ派ですか？ ‣ WPのカスタマイズ
●
CMSカスタマイズに抵 ●
WPのカスタマイズの方
抗あった僕がWPを知っ法を、エンジニア視点か
てどう感じたか？ら解説します。

‣ WPをWebアプリの ‣ WPアプリの事例
フレームワークにする ●
iTunes Podcast 連携
メリット
●
画像投稿系サイト
●
僕視点で恐縮ですが…

スクラッチ派ですか？
（自分で作っちゃう派ですか？）

自分で作る方がエエよ

そう信じてたアカウントが↓コチラです。

@yuka2py

見通しええし。

細かいところも分かってるし。

何でも出来るし。
(￣‥￣)=3 フン

スクラッチ派の思い込み

‣ メンドクサイ ‣ やっぱ中身知らないと
●
製品固有のDSL（ドメイ ●
カスタマイズとなったら
ン固有言語）を覚えるの結局中身知らないとダメ
がメンドクサイなんでしょ？

‣ そんなに使えない ‣ 折り合わない事ばかり
●
既製品で、やりたい事が ●
製品のアーキテクチャが
出来るなんて、そんなに邪魔して、思うようにカ
世の中甘く無いスタマイズできない

そんな、ある日…

(･∀･)

ある人に WordPress を
教えてもらった

(*´Д`*)ｶｸﾆﾝｻﾝ...

で、実際はどうだったか？

(ﾟ_ﾟ)....

DSLの習得は大変？

‣ そもそも必要無かった ‣ もちろん、APIを覚える
●
全てがPHP 必要はある、が、
●
プログラマだからあまり
●
テンプレートもPHP
苦痛ではない
●
テンプレートタグとかも ●
MTタグに比べたら気持ちが楽
ただのPHP関数（あくまでも個人的な感想です。MTの方すみません…）

●
シンプルな基本アーキテ
クチャ
●
充実したリファレンス

使えない？

‣ 結構使えるみたい ‣ 足りない機能は無数の
プラグインがカバー
‣ 何かを貯めて、公開する
●
豊富なプラグイン
ようなアプリには向いて
いるみたいだ ●
良くある要件には、だい
たいプラグインがある
●
ブログに限らない！
●
業務用の基幹アプリとか ‣ そもそも...
はさすがに向いてない ●
Webアプリの機能って
似てるところ多い？

中身知らないと
カスタマイズは難しい？
‣ そんなでもなかった ●
フックも、ただのPHP関数

‣ function.php が全て ‣ 新しく覚えることが少ない
●
functions.php に全部書くも ●
フックや関数は沢山あるが
OK。分けて require もOK ●
カスタマイズのルールは
ちょっとだけ
‣ データやWPへのアプローチ
は「フック」を通じて行う ‣ 知ってると嬉しいことは沢山
●
リクエストからレスポンスまある。でも、知らないなら知
でのほとんどのポイントに処らないなりに、何とかなる
理を差し込める

折り合いが合わない？

‣ もちろんある ●
苦手な部分を克服する手
（やりたいこと、要件次第）段も、プラグインが提供
されている
‣ でもワリと少ないみたい ●
例えば、キャッシュとか

‣ その理由
●
DBスキーマがシンプル
●
APIの基本がシンプル
●
やっぱりただのPHP

どうやら誤解していたらしい？

(;ﾟ∀ﾟ)

WordPressを
Webアプリのフレームワーク
にするメリット

最初からてんこもり

‣ ユーザー認証/管理/登録 ‣ コンテンツ管理機能
●
履歴管理
‣ 美しくカスタマイズ可能な ●
メディア管理
管理画面
●
メタデータ管理
‣ テーマ機構
‣ サイト内検索
‣ プラグイン機構
‣ XMLRPC Interface
‣ ウィジェット機能
‣ 多言語対応 etc. etc...
‣ 投稿・コメント機能

選べるテーマ
検索して
選べる
‣ 管理画面からインストール

‣ 約800のプラグイン

‣ 無料のテーマもたくさんその
まま
インス
‣ インストールしたテーマトール
を元にカスタマイズ可能

改造して
自分流に!!
※要ﾗｲｾﾝｽﾁｪｯｸ!

豊富で手軽なプラグイン
検索して
‣ 管理画面からインストール選べる

‣ 20,000以上の公式プラ
グイン
その
まま
‣ 無料のプラグインも多数インス
トール
‣ あんなの有るかな？
と思ったものは、
だいたい有る

プラグインの一例 (1)

‣ キャッシュ ‣ ソーシャル認証
●
W3 Total Cache ●
Gianism

‣ メールフォーム ‣ メルマガ
●
Contact Form 7 ●
Subscribe2

‣ ソーシャル投稿 ‣ バックアップ
●
WP Social ●
BackWPup
Bookmarking Light
o(≧◇≦*)

プラグインの一例 (2)

‣ データ永続化の簡易拡張 ●
Welcart（EC）
●
Types ‣ スマートフォン対応

‣ SEOオペレーション ●
WPtouch
●
All in One SEO Pack ‣ フューチャーフォン対応
※時代にあったSEOのオペレーションは
各自でちゃんと学びましょう！
●
Ktai Style
‣ 汎用サイトの構築
●
BuddyPress（SNS）
o(≧◇≦*)oo(*≧◇≦)o

ちょっと紹介「Types」

‣ カスタム３兄弟をまるま ‣ 異なるカスタム投稿タイ
る管理できるプに、親子関係を持たせ
●
カスタム投稿タイプることができる
●
カスタムフィールド
●
親子関係を持たせる
●
店舗投稿タイプ
●
カスタムタクソノミー
●
店舗スタッフ投稿タイプ
●
自由度、機能、扱い易さ
●
「ある店舗のスタッフ」
ともにすごい充実
という概念を表現できる
●
リレーションみたい！

ちょっと紹介「BackWPup」

‣ ファイルとDatabaseと ‣ バックアップの保存先が
両方をバックアップこんなにイロイロ
●
FTP
‣ スケジュール実行
●
DropBox
‣ 実行結果のメール通知 ●
AmazonS
●
GoogleStorage
‣ リストアもブラウザから
●
MicrosoftAzure
こんなに
高機能なの自分でコスト… ●
Rackspace Cloud
作るとなると… 開発期間…

美しい管理画面

‣ ただ綺麗なだけでなく、
色々カスタマイズ可能
●
機能の追加
●
設定画面の追加
●
メニューの追加

‣ 納品物としての見た目も
Good!!
●
ロゴなどの差し替えや削除もプラグイ
ンで自由自在です。

学習コストが低い

‣ カスタマイズ方法が ‣ 人気のCMSだから情報
とても分かり易いが豊富
●
ちょっと教えてもらった ●
技術情報ブログ記事
ら「なんだか出来そう」 ●
日本語で整備されたド
な気になるぐらい
キュメント（ある程度）
●
実際、そんなに躓かずに ●
活発なコミュニティ
出来る
●
もちろんちょっとは躓い
いたよ… (;ﾟﾟ)

WordPress Codex

‣ Google検索よりも、
まずはここから！

‣ 基礎から発展まで

‣ 充実のリファレンス

苦難を乗り越える
心の友

本当に作りたいものは何か？

バック SNS
ユーザーップログン
アイペー
管理
検索画面認証機能高ジャー CRU
管理 RSS 速 D
化

WordPressを使うことで、
本当に必要な部分だけに
集中して開発できる！
理想を
現実に

o(*^▽^*)o

WordPressのカスタマイズ

WordPressのテーマを作る

WordPressでWebアプリを作る

テーマは外観だけでなく、機能も提供する

WPの動作の大まかな理解

初期化


初期化

URLに対応するデータが検索される


初期化


URLに対応するテンプレートが開かれる


初期化



レスポンス


初期化

自動で



レスポンス


初期化

自動で


自動で


レスポンス

MVCの
コントローラ初期化
的な物は無い

自動で


自動で


レスポンス

割り込み
MVCの
コントローラ初期化
的な物は無いフク
ッ
自動で

URLに対応するデータが検索されるフク
ッ

自動で

URLに対応するテンプレートが開かれるフク
ッ

フク
ッ
レスポンス

割り込み
MVCの
コントローラ
開発する
初期化
的な物は無い部分フク
ッ
自動で

URLに対応するデータが検索されるフク
ッ

自動で

URLに対応するテンプレートが開かれるフク
ッ

開発する
部分フク
ッ
レスポンス

テーマのフォルダ

‣ テーマのデータは、
１つのフォルダに入れる
●
{wp-root}/wp-content/
themes/MyTheme/...
‣ テーマのフォルダの中も
自由でOK
●
必要があれば出てもOK
‣ style.css ←重要
●
テーマのメタ情報を記述

テンプレートの基本
index.php

‣ テンプレートも、PHP search.php

‣ テンプレートは、一般に header.php
パートに分けて記述される
●
インクルードタグを使う
●
とりあえずrequireでもOK
sidebar.
content.php php
‣ 「テンプレートタグ」と呼
ばれるPHPの関数で処理を
書く footer.php

/*
Theme Name: Foreignkey, Inc. スタイル&
Author: Foreignkey, Inc. テーマメタ情報
Author URI: http://foreignkey.jp/ （必須）
Description: For Foreignkey Website
Version: 1.1
*/

アーカブカテゴリー
一覧用一覧用

トップ
（必須）

固定ページ
用

シングル
ページ用

コメントの
部分テンプレート

フッタの標準
テンプレート

ヘッダの標準
テンプレート
検索の
部分テンプレート

サイドバー標準
テンプレート

色々混じってて若干分かり難いが、
フォルダ分けなどのルールが無い分、
覚えることが少ない

呼び出されるテンプレート

‣ URLに対応する
テンプレートが category-info.php

層
category.php

階
直接呼ばれる

ト
ー
archive.php

レ
プ
ン
index.php

テ
‣ MVCのコントローラ的
なものは無い
●
挙動を変更したり、 tag-python.php
処理を挟み込む事は

層
tag.php

階
ト
出来るフック

ー
archive.php

レ
プ
ン
index.php

テ

テンプレートの呼び出し階層の例
/archives/$posttype/ /archives/category/ /archives/date/
/
$page_id $slug $yyyy/$mm
優先
category-$slug.php

single-$posttype.php category-$id.php date.php

index.php single.php category.php archive.php

index.php archive.php index.php

index.php

順番に探して、どれも無ければ、最後は index.php が選択される
http://wpdocs.sourceforge.jp/テンプレート階層

<?php get_header(); ?>

テンプレートの雰囲気
<div id="primary">
<div id="content" role="main">

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

<?php while ( have_posts() ) : the_post(); ?>
<?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; ?>

<?php else : ?>

<article id="post-0" class="post no-results not-found">
<header class="entry-header">
<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header>

<div class="entry-content">
<?php get_search_form(); ?>
</div>
</article>

<?php endif; ?>

</div>
</div>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

header.php

テンプレートの雰囲気
<div id="primary">


<?php endwhile; ?>

<?php else : ?>
content.php ¦¦ content-$postformat.php
※本文用のテンプレートを呼び出し。$postformatごとに読み込むテンプレートを変更できる。

<h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
</header>

<div class="entry-content">
• テンプレートを読み込む
<?php get_search_form(); ?>
</div> 「インクルードタグ」
</article>

<?php endif; ?>
• 標準テンプレートを読み込む
sidebar.php get_header() など
</div>
</div> footer.php • その他のテンプレートを読み込む
<?php get_sidebar(); ?> get_template_part()
<?php get_footer(); ?>

取得・検索されるデータ

‣ URLに対応する記事が
自動検索される
2012年10月の記事の
この検索が 2ページ目に該当する
「メインクエリ」データが検索されて、
この検索結果のループがテンプレートに渡される
「メインループ」

このメインクエリの検索条件を変更することも可能。
PHP で「フック」を登録して実現する


<div id="primary"> データの表示の雰囲気


<?php endwhile; ?>

<?php else : ?>

<h1 class="entry-title"><?php _e( 'Nothing Found',
'twentyeleven' ); ?></h1>


<div id="primary"> データの表示の雰囲気
次の記事はあるか？
次の投稿に進みグローバル
<?php if ( have_posts() ) : ?> 変数 $post を更新する

<?php endwhile; ?>

記事本体のテンプレートを読み込む
<?php else : ?>
記事が無い時
WPの流儀や、APIを覚える必要は
あるけれど、基本的に普通のPHP
<h1 class="entry-title"><?php _e( 'Nothing Found',
'twentyeleven' ); ?></h1>
のプラグラムなので、プログラマ
にとっては安心感がある

テンプレート以外に
PHP を書く場所
‣ functions.php に書く
●
ルールはそれだけ
●
行数が多くなるなら、
適当にファイルを分けて
require すればOK

‣ 「フック」の登録や削除
を始め、WPのPHPプロ
グラムは基本はここへ記
述する

ここまでのポイント

‣ テンプレート ●
URLに対応するテンプ
レートが自動的にロード
●
ただのPHPファイル
される
●
テンプレート階層
‣ WPの挙動変更
‣ URLのルーティング
●
「フック」を利用する
●
MVCのコントローラ的
なものは、無い ‣ PHPを書く場所
●
URLに対応するデータが ●
functions.php
自動的に検索される

WordPressを操る
（フックの利用）

トップページで、
あるカテゴリの投稿を
表示したくない

メインクエリーを
変更する

WordPressの「フック」を
使って実現できる

イベントドリブンなAPI「フック」
ドキュ
‣ WP実行フローの中で、メンントも
充実
独自プログラムを
実行させる仕組み
●
各種フック（イベント）
にPHP関数を登録する
●
JSでイベントコールバッ
クを入れるのと似てる

‣ WPカスタマイズの根幹

http://wpdocs.sourceforge.jp/プラグイン_API#Actions

フックの種類と作成

‣ 「アクション」フック ‣ フックの作成
●
WordPressのイベント 1. PHPでフック関数を定
や処理に応じてプログラ義して、
ムを実行する
2. WordPressに登録する
‣ 「フィルター」フック
●
add_action(...)
●
add_ﬁlter(...)
●
入出力テキストなどの
データを加工する

メインクエリの検索条件の変更

add_action( 'pre_get_posts', 'my_query_fook' );

function my_query_fook( WP_Query $query ) {
if ( $query->is_main_query() and $query->is_home()) {
$query->set( 'cat', '-4' );
}
}

メインクエリの検索条件の変更

actionフック登録フック名実行したい関数の名前

add_action( 'pre_get_posts', 'my_query_fook' );

実行したい関数の定義

function my_query_fook( WP_Query $query ) {
if ( $query->is_main_query() and $query->is_home()) {
$query->set( 'cat', '-4' );
}
} この辺の記法も覚えないとね (^_^;A
★フックに渡される引数は、
フックによって異なる

一般的リクエスト中に実行 pre_get_posts* wp_title get_attachment_link リッチエディター関連の
されるアクション posts_selection add_ping author_feed_link リンク集関連のフィルターフィルター
muplugins_loaded wp* attachment_max_dims author_link get_bookmarks mce_spellchecker_langua
plugins_loaded admin_xml_ns category_save_pre day_link link_category ges
sanitize_comment_cookie wp_default_styles* comment_status_pre feed_link link_description mce_buttons、
s admin_enqueue_scripts content_filtered_save_pr get_comment_author_lin link_title mce_buttons_2、

フックの利用のポイント
setup_theme admin_print_styles- e k link_rating mce_buttons_3、
load_textdomain edit.php content_save_pre get_comment_author_url pre_link_description mce_buttons_4
after_setup_theme admin_print_styles excerpt_save_pre _link pre_link_image mce_css
auth_cookie_malformed admin_print_scripts- excerpt_save_pre month_link pre_link_name mce_external_plugins
set_current_user edit.php ping_status_pre page_link pre_link_notes mce_external_languages
init admin_print_scripts title_save_pre post_link pre_link_rel tiny_mce_config_url
widgets_init wp_print_scripts post_mime_type_pre the_permalink pre_link_rss tiny_mce_before_init
register_sidebar admin_head-edit.php status_save_pre year_link pre_link_target
wp_register_sidebar_wid admin_head phone_content pre_link_url テンプレート関連のフィル
get in_admin_header thumbnail_filename 日付・時間関連のフィルター
wp_loaded adminmenu wp_thumbnail_creation_si ターブログ情報・設定関連の kubrick_header_color
parse_request* admin_notices ze_limit get_comment_date フィルター kubrick_header_display
send_headers* restrict_manage_posts wp_thumbnail_max_side_l get_comment_time all_options kubrick_header_image
pre_get_posts* the_post* ength get_the_modified_date bloginfo locale_stylesheet_uri

‣ WPのカスタマイズは、
posts_selection in_admin_footer update_attached_file get_the_modified_time bloginfo_rss stylesheet
wp*
template_redirect
get_header
admin_footer
admin_print_footer_scrip
ts
wp_delete_file
wp_generate_attachment
_metadata
get_the_time
the_date
●
しかし、WPの挙動を変
the_modified_date
bloginfo_url
loginout
option_設定名
stylesheet_directory
stylesheet_directory_uri
stylesheet_uri

える方法が、フックとい
wp_head wp_print_footer_scripts wp_update_attachment_ the_modified_time pre_option_設定名 template

まずフック
wp_enqueue_scripts admin_footer-edit.php metadata the_time upload_dir template_directory
wp_print_styles shutdown the_weekday upload_mimes template_directory_uri

嬉
wp_print_scripts コメント・トラックバッ the_weekday_date theme_root
get_template_part_loop
loop_start*
the_post*
投稿、ページ、添付ファイ
ル（アップロード）関連の
フィルタ
ク・ピンバック関連のフィ
ルター
comment_excerpt
投稿者・ユーザー関連の
フィルター
う仕組みに集約されていテキスト関連のフィルター
attribute_escape
js_escape
theme_root_uri

その他の高度なフィルター
loop_end* attachment_icon comment_flood_filter author_email author_rewrite_rules
get_sidebar get_attachment_icon comment_post_redirect comment_author
る事は… 管理画面関連のフィルター category_rewrite_rules

‣ 非常に多くのフック
dynamic_sidebar attachment_innerHTML comment_text comment_author_rss autosave_interval comments_rewrite_rules
get_search_form get_attachment_inner comment_text_rss comment_email cat_rows date_rewrite_rules
parse_query* content_edit_pre comments_array comment_url comment_edit_pre post_rewrite_rules
wp_meta excerpt_edit_pre comments_number get_comment_author comment_edit_redirect page_rewrite_rules
get_footer title_edit_pre get_comment_excerpt get_comment_author_em comment_moderation_su search_rewrite_rules
twentyten_credits get_attached_file get_comment_ID ail bject root_rewrite_rules

カスタマイズできる箇所 ‣ とても分かり易い！
wp_footer get_enclosed get_comment_text get_comment_author_IP comment_moderation_te mod_rewrite_rules
wp_print_footer_scripts
● get_pages get_comment_type get_comment_author_url xt rewrite_rules_array
shutdown get_pung get_comments_number login_errors comment_notification_he create_user_query
get_the_excerpt post_comments_feed_lin login_headertitle aders found_posts_query
管理画面リクエスト中に実 get_the_guid k login_headerurl comment_notification_su query
行されるアクション
が非常に多いということ
muplugins_loaded
get_to_ping
icon_dir
comment_save_pre
pre_comment_approved
login_message
role_has_cap
bject
comment_notification_tex
query_vars
request
plugins_loaded
sanitize_comment_cookie
s
icon_dir_uri
prepend_attachment
sanitize_title
pre_comment_content
preprocess_comment the_authorリファレンスを検索すれ
sanitize_user
●

the_author_email
t
cron_schedules
default_content
update_user_query
found_posts
get_next_post_join
setup_theme single_post_title カテゴリー関連のフィル pre_comment_author_em default_excerpt get_next_post_sort
load_textdomain
●
でも...
after_setup_theme
auth_cookie_valid
the_content
the_excerpt
the_tags
ター

だから
category_description
category_feed_link
ail
ばなんとかなる！
pre_comment_author_na
me
default_title
format_to_edit
explain_nonce_動詞-名詞
get_next_post_where
get_others_drafts
get_previous_post_join
set_current_user the_title category_link pre_comment_author_url format_to_edit get_previous_post_sort
init the_content_rss get_categories pre_comment_user_agen format_to_post get_previous_post_where

覚えるの大変…
widgets_init the_excerpt_rss get_category t manage_link_columns get_users_drafts
register_sidebar ● the_title_rss list_cats pre_comment_user_ip manage_posts_columns post_limits

なんとか
wp_register_sidebar_wid the_editor_content list_cats_exclusions pre_user_id postmeta_form_limit posts_distinct
get wp_dropdown_pages single_cat_title pre_user_description pre_upload_error posts_fields
wp_loaded wp_list_pages the_category pre_user_display_name preview_page_link posts_groupby
auth_redirect wp_list_pages_excludes
乗り切る
the_category_rss pre_user_email preview_post_link posts_join_paged
wp_default_scripts*
_admin_menu
admin_menu
admin_init
●
探すのも大変…
wp_get_attachment_meta
data
wp_get_attachment_thu
mb_file
wp_dropdown_cats
wp_list_categories
pre_category_description
pre_category_name
pre_user_first_name
pre_user_last_name
pre_user_login
pre_user_nickname
richedit_pre
show_password_fields
the_editor
user_can_richedit
posts_orderby
posts_request
posts_where_paged
posts_join
load-edit.php wp_get_attachment_thu pre_category_nicename pre_user_url user_has_cap posts_where
parse_request* mb_url registration_errors wp_handle_upload the_posts
send_headers* wp_get_attachment_url リンク関連のフィルター user_registration_email wp_upload_tabs gettext
parse_query* wp_mime_type_icon attachment_link validate_username locale

WordPressのデータ永続化
∼投稿タイプ∼

シンプルなDBスキーマ

‣ たった11個のテーブル

‣ 主なエンティティは５つ

posts 投稿

comments コメント

links リンク

users ユーザ

term_taxonomy 分類
http://wpdocs.sourceforge.jp/データベース構造

投稿タイプ

‣ 投稿には、自由に追加可能な、
投稿タイプ（種類）がある
●
posts.post_type
●
「カスタム投稿タイプ」と言われ
るものもあるが、要は post_type
に独自の値を指定すること
●
デフォルトの
「投稿」や「固定ページ」も、
その一つに過ぎない

http://wpdocs.sourceforge.jp/投稿タイプ

カスタム投稿タイプの理解

×投稿固定ページカスタム投稿タイプ

良く↑こう説明されたりしますが、↓の理解が正しい

〇投稿タイプ

投稿固定ページ画像カスタム

デフォルトの投稿タイプ

投稿
ブログ記事に使われるメインの投稿タイプ
post
固定ページ
固定ページの投稿タイプ
page
添付ファイル画像やファイルなど、メディアとしてアップ
attachment ロードされたファイルの情報が保存される。

リビジョン
下書きや投稿の変更履歴を保存する。
revision
ナビゲーション
ナビゲーションメニューの項目を保存する
nav_menu

デフォルトの投稿タイプ

投稿
ブログ記事に使われるメインの投稿タイプ
post
posts
固定ページで色んな
固定ページの投稿タイプデータが
page 管理可能

添付ファイル画像やファイルなど、メディアとしてアップ
attachment ロードされたファイルの情報が保存される。

リビジョン
下書きや投稿の変更履歴を保存する。
revision
ナビゲーション
ナビゲーションメニューの項目を保存する
nav_menu

postsで色んなデータを管理する

‣ WPの基本システムも、 ‣ 複数のテーブルを持つよ
posts で画像を管理うなイメージで扱える
●
Railsの単一テーブル継
‣ 同様に、色んなデータを
承とスキーマは近いけど
管理できる
より積極的に使うが吉
●
商品情報、製品情報
●
画像、音声、動画この
メディアの
●
…アイデア次第！一覧も実は
posts

カスタムの投稿タイプの利用

‣ 基本は、functions.php にプログラムを書く

‣ カスタム投稿タイプを管理画面から扱える、
強力なプラグインも有る
●
Types など
●
しかし、WPをWebアプリのフレームワークとして
利用する場合、APIから扱う方が良いかも？

投稿タイプの追加 register_post_type($post_type, $args)

カスタム投稿タイプの追加
WordPress初期化時のフックで追加する

add_action( 'init', 'add_custom_post_type' );

function add_custom_post_type() {
register_post_type( 'salesitem',
array(
'labels' => array( カスタム投稿タイプを
登録するWPの関数
'name' => '商品',
'singular_name' => '商品'
),
'public' => true

カスタム投稿タイプの追加

‣ これだけのコードで…
●
メニューが追加
●
投稿画面
●
実際に投稿が可能
●
通常の投稿と区別

‣ しかし、これだけだと…
●
例えば、商品に価格を設
定できない…

∼カスタムフィールド∼

メタデータを扱えるWP

‣ 足りない属性を補う
３つのメタデータテーブル
postmeta 投稿用
commentmeta コメント用
usermeta ユーザー用

‣ それぞれ、対象に紐づく
データを保存する
●
key/value

カスタムフィールド

‣ posts に紐づくメタ情報を扱う
●
単純な key/value ストア
●
PostgreSQLの配列型のように、複数値も扱える

update_post_meta($post_id, $key, $value)
更新、削除
delete_post_meta($post_id, $key)

get_post_custom($post_id)
取得、表示
get_post_meta($post_id, $key, $single)

http://wpdocs.sourceforge.jp/カスタムフィールドの使い方

カスタムフィールドの利用

‣ 何もしなくても、
投稿画面から
入力・更新できる
●
入力されたデータは、
テーマの中で利用できる
●
しかし…、
key もここで入力するも
のなので、利用価値がハ
テナ？

独自フォームの作成

‣ カスタムフィールドを
扱う独自のフォームを
投稿画面に作れる

こんな
感じで
作れる

利用する主なAPI
投稿画面に
メタボックスを add_action('add_meta_boxes', $hookname);
追加するフック

post保存時のフック
add_action('save_post', $hookname);
(ここでCFも保存する)

add_meta_box($id, $title, $callback,
メタボックスの $page, $context, $priority)
追加関数 $callbackに指定する関数の中で、メタボックス
の中に表示するHTMLを出力する

//メタボックスを表示する処理を登録
ﾌｫｰﾑ
add_action('add_meta_boxes', 'add_my_meta_boxes'); 表示
//メタボックスを表示する処理
function add_my_meta_boxes() {
add_meta_box('my_meta_box1', 'メタボックスのタイトル',
'print_my_meta_box_content',
'post', 'normal', 'high');
}
//メタボックの中のHTMLを出力する関数
function print_my_meta_box_content($post) {
wp_nonce_ﬁeld('my_meta_key1_nonce', 'my_meta_key1_nonce');
$value = get_post_meta($post->ID, 'my_meta_key1', true);
?> <input type="text" name="my_meta_key1" , value="<?php echo
esc_html($value) ?>"> <?php
}

メタボックス登録のためのフック
//メタボックスを表示する処理を登録
ﾌｫｰﾑ
add_action('add_meta_boxes', 'add_my_meta_boxes'); 表示
//メタボックスを表示する処理メタボックスの追加する関数
function add_my_meta_boxes() {
add_meta_box('my_meta_box1', 'メタボックスのタイトル',
'print_my_meta_box_content',
'post', 'normal', 'high');
}
//メタボックの中のHTMLを出力する関数
function print_my_meta_box_content($post) {
wp_nonce_ﬁeld('my_meta_key1_nonce', 'my_meta_key1_nonce');
$value = get_post_meta($post->ID, 'my_meta_key1', true);
?> <input type="text" name="my_meta_key1" , value="<?php echo
esc_html($value) ?>"> <?php
フォームタグを出力
}

値の
//投稿の保存時に、メタデータを保存するための関数を登録
add_action('save_post', 'save_post_metadata');
保存
//投稿のメタデータの保存
function save_post_metadata($post_id) {
//CSRF対策などのお呪い。色んなところで出ています (*́ `*)
if (deﬁned('DOING_AUTOSAVE') && DOING_AUTOSAVE
or !isset($_POST['my_meta_key1'])
or !wp_verify_nonce($_POST['my_meta_key1_nonce'],
'my_meta_key1_nonce')
or !current_user_can('edit_post' )) {
return;
}
//データを保存する
update_post_meta($post_id, 'my_meta_key1',
$_POST['meta_value']);
}

投稿保存時に実行されるフック値の
//投稿の保存時に、メタデータを保存するための関数を登録
add_action('save_post', 'save_post_metadata');
保存
//投稿のメタデータの保存
function save_post_metadata($post_id) {
//CSRF対策などのお呪い。色んなところで出ています (*́ `*)
if (deﬁned('DOING_AUTOSAVE') && DOING_AUTOSAVE
or !isset($_POST['my_meta_key1'])
or !wp_verify_nonce($_POST['my_meta_key1_nonce'],
'my_meta_key1_nonce')
or !current_user_can('edit_post' )) {
return;
} メタデータを保存する
//データを保存する
update_post_meta($post_id, 'my_meta_key1',
$_POST['meta_value']);
}

メタデータ指向の
メリット・デメリット
‣ メリット ‣ 対応
●
アプリが扱うデータ内容の変 ●
速度問題には、キャッシュ系
更が比較的容易プラグインの導入
●
WPのレールの上で管理でき ●
必要な場合には、独自にテー
る（他プラグインから扱えブルを作成して独自にアクセ
る）スするのも有りと言えば有り
●
但し、バックアップ系プラグ
‣ デメリットインの恩恵が受けられない等
●
DBクエリ増加∼処理速度の弊害もある

●
データの扱いがやや面倒

∼オプション∼

オプション

‣ 投稿などに紐づかない、
データを簡単に保存
●
key/value
●
アプリケーション全体の
設定値などの保存に利用

update_option($key, $value)
更新、削除
delete_option($key)

取得、表示 get_option($key)

WPデータ永続化のポイント

‣ カスタムの投稿タイプ ‣ カスタムフィールド
●
posts には、ブログの投 ●
posts/comments/
稿データだけでなく、 users に関連したメタ
様々なデータが保存で出データが保存出来る
来ることを理解する ●
key/value
●
投稿タイプで特性の異な
るエンティティを管理出 ‣ その他のデータ
来る ●
手軽にデータを永続化で
きる option API

データ構造、ファイルの構造、
API…どれもシンプルで、
プログラマーに優しいWordPress
だ・か・ら

無数のテーマ・プラグインが
たくさん出来た！！
o(*^▽^*)o

コワーキングスペース
MAGAZINE
‣ 全国のコワーキングスペース運営者
にインタビューなどがで公開されて
いるサイト。
http://www.coworking-jelly.com/blog/

‣ 音声・動画は padcast でも配信
https://itunes.apple.com/jp/podcast/
kowakingusupesumagazine/id564787883

WordPress から
iTunes で Podcast 配信
‣ WordPressに
mp3 をアップすると、iTunes から
自動的に podcast 配信される
こんな事まで
プラグインで可能
‣ iTunes へ配信する為に Σ(＠ω＠;)

●
Blubrry PowerPress Podcasting プラグイン導入
●
iTunes 向けの各種設定
●
個別のカテゴリのみ、iTunesへ連携させる設定

‣ iTunes Store 側
●
PowerPress で設定された Podcast フィード URL を登録

コワーキングスペース
MAGAZINE構築の詳しい情報
‣ この仕組みの構築の為の詳しい情報が、
コミュニティコム様のWebサイトで
公開されています。
http://www.communitycom.jp/2012/09/25/wordpress-itunes/

Croppy

‣ インターネット上のグラフィックを
手軽にクリップ、共有できるサイト

http://croppy.org/

WordPressの実装

‣ Twitter/Facebookログイン
●
プラグイン利用

‣ ユーザーのフォローや、お気に入り追加機能
●
functions.php、他に PG 追加

‣ 管理画面を使わずに投稿追加
●
functions.php、他に PG 追加

WordPressの実装

‣ ユーザーの相互のフォローリレーションとか
使わなくても出来る
●
ユーザーのメタデータに保存という発想
(･･)ｲｲ

‣ ユーザーの投稿には WP 管理画面を使わせていない
●
admin_init にフックし、ユーザー権限をチェック、
管理者以外はトップページにリダイレクト

‣ 独自のPHPファイルから WP への投稿 WPのURL
ルーティングの外
●
wp-load.phpをロードし、でも利用可能
WordPressのユーザー情報などを利用

Croppyの構築の詳しい情報

‣ WordCamp
Tokyo 2012 で発表内容が、
とても丁寧に解説されています。

http://stocker.jp/diary/wordcamp-tokyo-2012-croppy/

みなさんもこちらの発表を見れたら
本当に良かったと思います。 (; ^ω^)

向いてるアプリ・向かないアプリ
この範囲が
すごく広いと思う
‣ 向いている !(･･)! ‣ あまり向いてない
●
何らかのコンテンツをス ●
全く外向きに公開しない
トックし公開するサイト ●
複雑なデータ構造
●
基本的に向いてる
●
データの集計や計算が
●
いわゆるWebサイトに主題
必要な要件がたくさん詰
まってる
●
管理画面のカスタマイズ
の比率が非常に多い
●
プラグインの利用で開発
コストを低減できる

僕がやった失敗

‣ すぐにプログラム書く方向 ‣ グローバル変数に戸惑った
で考えてしまう ●
global $post が信じられ
●
まずはプラグインを探してず、いやそんな筈は…と他
みよう！結構有るよ！の方法を探した。

‣ サーバーサイドでのデータ ‣ CodexよりGoogle先生
バリデーションが無い？の ●
いやまず Codexでした！
に探し続けた
●
これにはもっと早く気付け
●
…無いんですかね？エラー
ば良かった！
ならされないようにしたい
(;ﾟ∀ﾟ)

WPカスタマイザーへの近道(?)

‣ まずはDBスキーマを眺め ‣ テンプレートを眺めて、
てデータ構造を理解するテンプレートタグの雰囲
●
それだけで安心できた
気を知る
●
良いリファレンスがある
‣ URLと、テンプレートやので雰囲気だけで十分
メインクエリの関係を理
解する ‣ Codexを一読する

●
基本中の基本だけど、あ ●
何故か後から読んじゃっ
まり説明が無いみたい？た (^_^;A

どんなプラグインがあるか分から
ない方には、こちら便利かも？

http://www.plugin-clip.com/

最後に、もう一度、
いちばん話したかった事を

(`･ω･´ ) ｷﾘｯ

WordPressで管理できるデータは
ブログの記事だけじゃない

WordPressの豊富なリソースが
あなたのシステム構築を楽にする

理想を
現実に
o(*^▽^*)o

もし良かったら遊んでください♪

@yuka2py
https://twitter.com/yuka2py

http://www.facebook.com/yuka2py

http://gplus.to/yuka2py
(´∀`〃)ゝｷｬﾊ

エンジニアの為のWordPress入門〜WordPressはWebAppプラットフォームです〜

エンジニアの為のWordPress入門〜WordPressはWebAppプラットフォームです〜

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to エンジニアの為のWordPress入門〜WordPressはWebAppプラットフォームです〜

Similar to エンジニアの為のWordPress入門〜WordPressはWebAppプラットフォームです〜 (20)

Recently uploaded

Recently uploaded (9)