• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
エンジニアの為のWordPress入門 〜WordPressはWebAppプラットフォームです〜
 

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

on

  • 35,116 views

WordCamp Osaka 2012 のセッションで発表させていただいた資料です。 ...

WordCamp Osaka 2012 のセッションで発表させていただいた資料です。

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

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

Statistics

Views

Total Views
35,116
Views on SlideShare
31,830
Embed Views
3,286

Actions

Likes
124
Downloads
339
Comments
4

39 Embeds 3,286

http://foreignkey.jp 926
http://maguro29.jp 374
http://webcake.no003.info 342
http://asklife.info 341
https://wp.getpower.net 239
http://wp.getpower.net 234
http://knman.sakura.ne.jp 167
http://s.deeeki.com 150
https://twitter.com 119
http://zedd.hatenablog.com 108
http://itslidestudy.com 85
http://sinka.gob.jp 36
http://ss.dotbranch.com 31
http://sc.dotbranch.com 26
http://124.32.246.61 17
http://localhost 12
http://3642g.com 11
http://nuevospowerpoints.blogspot.com.es 9
http://function3studio.com 9
http://feeds.feedburner.com 7
http://intra-blog.un-tcheck.com 5
https://twimg0-a.akamaihd.net 5
http://twitter.com 5
http://133.242.3.32 3
http://tweetedtimes.com 3
http://foreignkey.ap01.aws.af.cm 3
http://nuevospowerpoints.blogspot.com.ar 3
http://nuevospowerpoints.blogspot.mx 2
http://webcache.googleusercontent.com 2
http://rssc.dokoda.jp 2
http://seisaku.ailine.net 2
http://www.m.techgig.com 1
http://nuevospowerpoints.blogspot.com 1
http://www.kigurumi.asia 1
http://www.techgig.com 1
http://jp.mg5.mail.yahoo.co.jp 1
http://www.google.com 1
https://si0.twimg.com 1
http://favtile.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

14 of 4 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • スライド拝見致しました。
    Wordpressはこれからな者です。
    まずは、Codexにいってきます。
    大変参考になりました。
    Are you sure you want to
    Your message goes here
    Processing…
  • スライド拝見しました。エンジニア視点でwordpressをみるとこういう利点があるのか!と興味深く読みました。不得手な部分をプラグインが補う点やプラグインの拡張性など、なるほどと思いました。貴重な知見ありがとうございます。
    Are you sure you want to
    Your message goes here
    Processing…
  • スライドのライセンスを CC-BY-SA に変更いたしました。広くご利用いただければと思います。
    Are you sure you want to
    Your message goes here
    Processing…
  • 11/5 10:00 頃に、資料をアップデートいたしました。発表時のアニメーション効果などを削除して、資料として読み易くしたものですが、内容は一字一句変わっていませんですー。
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

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

  • エンジニアの為の 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」‣ カスタム3兄弟をまるま ‣ 異なるカスタム投稿タイる管理できる プに、親子関係を持たせ● カスタム投稿タイプ ることができる● カスタムフィールド ● 親子関係を持たせる ● 店舗投稿タイプ● カスタムタクソノミー ● 店舗スタッフ投稿タイプ● 自由度、機能、扱い易さ ● 「ある店舗のスタッフ」 ともにすごい充実 という概念を表現できる ● リレーションみたい!
  • ちょっと紹介「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の動作の大まかな理解 初期化
  • WPの動作の大まかな理解 初期化 URLに対応するデータが検索される
  • WPの動作の大まかな理解 初期化 URLに対応するデータが検索されるURLに対応するテンプレートが開かれる
  • WPの動作の大まかな理解 初期化 URLに対応するデータが検索されるURLに対応するテンプレートが開かれる レスポンス
  • WPの動作の大まかな理解 初期化 自動で URLに対応するデータが検索されるURLに対応するテンプレートが開かれる レスポンス
  • WPの動作の大まかな理解 初期化 自動で URLに対応するデータが検索される 自動でURLに対応するテンプレートが開かれる レスポンス
  • WPの動作の大まかな理解 MVCのコントローラ 初期化的な物は無い 自動で URLに対応するデータが検索される 自動で URLに対応するテンプレートが開かれる レスポンス
  • WPの動作の大まかな理解 割り込み MVCのコントローラ 初期化的な物は無い フ ク ッ 自動で URLに対応するデータが検索される フ ク ッ 自動で URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
  • WPの動作の大まかな理解 割り込み MVCのコントローラ 開発する 初期化的な物は無い 部分 フ ク ッ 自動で URLに対応するデータが検索される フ ク ッ 自動で URLに対応するテンプレートが開かれる フ ク ッ 開発する 部分 フ ク ッ レスポンス
  • テーマのフォルダ‣ テーマのデータは、 1つのフォルダに入れる ● {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 WebsiteVersion: 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.phpindex.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><!-- .entry-header --> <div class="entry-content"> <?php get_search_form(); ?> </div> </article><?php endif; ?> </div> </div><?php get_sidebar(); ?><?php get_footer(); ?>
  • <?php get_header(); ?> header.php テンプレートの雰囲気 <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 : ?> content.php ¦¦ content-$postformat.php ※本文用のテンプレートを呼び出し。$postformatごとに読み込むテンプレートを変更できる。 <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><!-- .entry-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 で「フック」を登録して実現する
  • <?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>
  • <?php get_header(); ?> <div id="primary"> データの表示の雰囲気 <div id="content" role="main"> 次の記事はあるか? 次の投稿に進みグローバル<?php if ( have_posts() ) : ?> 変数 $post を更新する <?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"> WPの流儀や、APIを覚える必要は <header class="entry-header"> あるけれど、基本的に普通の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_filter(...)● 入出力テキストなどの データを加工する
  • メインクエリの検索条件の変更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_languaplugins_loaded admin_xml_ns category_save_pre day_link link_category gessanitize_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_4after_setup_theme admin_print_styles excerpt_save_pre _link pre_link_image mce_cssauth_cookie_malformed admin_print_scripts- excerpt_save_pre month_link pre_link_name mce_external_pluginsset_current_user edit.php ping_status_pre page_link pre_link_notes mce_external_languagesinit admin_print_scripts title_save_pre post_link pre_link_rel tiny_mce_config_urlwidgets_init wp_print_scripts post_mime_type_pre the_permalink pre_link_rss tiny_mce_before_initregister_sidebar admin_head-edit.php status_save_pre year_link pre_link_targetwp_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_colorparse_request* admin_notices ze_limit get_comment_date フィルター kubrick_header_displaysend_headers* restrict_manage_posts wp_thumbnail_max_side_l get_comment_time all_options kubrick_header_imagepre_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 stylesheetwp*template_redirectget_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_directorywp_print_styles shutdown the_weekday upload_mimes template_directory_uri 嬉wp_print_scripts コメント・トラックバッ the_weekday_date theme_rootget_template_part_looploop_start*the_post* 投稿、ページ、添付ファイ ル(アップロード)関連の フィルタ ク・ピンバック関連のフィ ルター comment_excerpt 投稿者・ユーザー関連の フィルター う仕組みに集約されていテキスト関連のフィルター attribute_escape js_escape theme_root_uri その他の高度なフィルターloop_end* attachment_icon comment_flood_filter author_email author_rewrite_rulesget_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_rulesget_search_form get_attachment_inner comment_text_rss comment_email cat_rows date_rewrite_rulesparse_query* content_edit_pre comments_array comment_url comment_edit_pre post_rewrite_ruleswp_meta excerpt_edit_pre comments_number get_comment_author comment_edit_redirect page_rewrite_rulesget_footer title_edit_pre get_comment_excerpt get_comment_author_em comment_moderation_su search_rewrite_rulestwentyten_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_ruleswp_print_footer_scripts ● get_pages get_comment_type get_comment_author_url xt rewrite_rules_arrayshutdown 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 requestplugins_loadedsanitize_comment_cookies 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_joinsetup_theme single_post_title カテゴリー関連のフィル pre_comment_author_em default_excerpt get_next_post_sortload_textdomain ● でも...after_setup_themeauth_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_joinset_current_user the_title category_link pre_comment_author_url format_to_edit get_previous_post_sortinit 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_draftsregister_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_distinctget wp_dropdown_pages single_cat_title pre_user_description pre_upload_error posts_fieldswp_loaded wp_list_pages the_category pre_user_display_name preview_page_link posts_groupbyauth_redirect wp_list_pages_excludes 乗り切る the_category_rss pre_user_email preview_post_link posts_join_pagedwp_default_scripts*_admin_menuadmin_menuadmin_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_joinload-edit.php wp_get_attachment_thu pre_category_nicename pre_user_url user_has_cap posts_whereparse_request* mb_url registration_errors wp_handle_upload the_postssend_headers* wp_get_attachment_url リンク関連のフィルター user_registration_email wp_upload_tabs gettextparse_query* wp_mime_type_icon attachment_link validate_username locale
  • WordPressのデータ永続化 ∼投稿タイプ∼
  • シンプルなDBスキーマ‣ たった11個のテーブル‣ 主なエンティティは5つ 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
  • カスタム投稿タイプの追加‣ これだけのコードで…● メニューが追加● 投稿画面● 実際に投稿が可能● 通常の投稿と区別‣ しかし、これだけだと…● 例えば、商品に価格を設 定できない…
  • WordPressのデータ永続化 ∼カスタムフィールド∼
  • メタデータを扱えるWP‣ 足りない属性を補う3つのメタデータテーブル 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_field(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 echoesc_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_field(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 echoesc_html($value) ?>"> <?php フォームタグを出力}
  • 値の//投稿の保存時に、メタデータを保存するための関数を登録add_action(save_post, save_post_metadata); 保存//投稿のメタデータの保存function save_post_metadata($post_id) { //CSRF対策などのお呪い。色んなところで出ています (*́ `*) if (defined(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 (defined(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クエリ増加∼処理速度 の弊害もある ● データの扱いがやや面倒
  • WordPressのデータ永続化 ∼オプション∼
  • オプション‣ 投稿などに紐づかない、データを簡単に保存● 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
  • WordPressアプリの事例
  • コワーキングスペース 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 (´∀`〃)ゝキャハ
  • ご静聴、ありがとうございました! ©copyright 2012 Foreignkey, inc. All right reserved.
  • ©copyright 2012 Foreignkey, inc. All right reserved.