Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

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

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige

Hier ansehen

1 von 111 Anzeige

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

Herunterladen, um offline zu lesen

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

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

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

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

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

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

Anzeige
Anzeige

Weitere Verwandte Inhalte

Diashows für Sie (20)

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

Anzeige

Aktuellste (20)

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

  1. 1. エンジニアの為の WordPress入門 ∼WordPressはWebAppプラットフォームです∼
  2. 2. 自己紹介 ‣ ノジマユウジ ‣ システム開発、 @yuka2py グラフィックデザイン、 DTPや印刷なども ‣ 株式会社フォーエンキー 代表 ‣ 最近はiPhone/Android のアプリ開発とかスマホ ‣ PythonとJavascriptが大 系のWebとか、WinDTア 好き(Dartに興味深々) プリなど作っています ‣ おしゃれも大好き☆ ‣ リボンやお花が好き☆
  3. 3. 最近のボク 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%
  4. 4. はじめに ‣ この資料では、WordPress のカスタマイズを、 エンジニア寄りの視点で、解説させていただきます。 ‣ WordPressのカスタマイズはこれからだけど、PHPに は精通されている方、一般的なWebアプリケーション フーレムワークでの開発の知識のある方などを主な対 象として、当初つまずきやすいと思われる箇所や、私 個人が疑問に思った箇所、気付くのに時間が掛かった 箇所などを紹介させていただいています。
  5. 5. 本日のおしながき ‣ スクラッチ派ですか? ‣ WPのカスタマイズ ● CMSカスタマイズに抵 ● WPのカスタマイズの方 抗あった僕がWPを知っ 法を、エンジニア視点か てどう感じたか? ら解説します。 ‣ WPをWebアプリの ‣ WPアプリの事例 フレームワークにする ● iTunes Podcast 連携 メリット ● 画像投稿系サイト ● 僕視点で恐縮ですが…
  6. 6. スクラッチ派ですか? (自分で作っちゃう派ですか?)
  7. 7. 自分で作る方がエエよ そう信じてたアカウントが↓コチラです。 @yuka2py
  8. 8. 見通しええし。 細かいところも分かってるし。 何でも出来るし。 ( ̄‥ ̄)=3 フン
  9. 9. スクラッチ派の思い込み ‣ メンドクサイ ‣ やっぱ中身知らないと ● 製品固有のDSL(ドメイ ● カスタマイズとなったら ン固有言語)を覚えるの 結局中身知らないとダメ がメンドクサイ なんでしょ? ‣ そんなに使えない ‣ 折り合わない事ばかり ● 既製品で、やりたい事が ● 製品のアーキテクチャが 出来るなんて、そんなに 邪魔して、思うようにカ 世の中甘く無い スタマイズできない
  10. 10. そんな、ある日… (・∀・)
  11. 11. ある人に WordPress を 教えてもらった (*´Д`*)カクニンサン...
  12. 12. で、実際はどうだったか? (゚_゚)....
  13. 13. DSLの習得は大変? ‣ そもそも必要無かった ‣ もちろん、APIを覚える ● 全てがPHP 必要はある、が、 ● プログラマだからあまり ● テンプレートもPHP 苦痛ではない ● テンプレートタグとかも ● MTタグに比べたら気持ちが楽 ただのPHP関数 (あくまでも個人的な感想です。MTの方すみません…) ● シンプルな基本アーキテ クチャ ● 充実したリファレンス
  14. 14. 使えない? ‣ 結構使えるみたい ‣ 足りない機能は無数の プラグインがカバー ‣ 何かを貯めて、公開する ● 豊富なプラグイン ようなアプリには向いて いるみたいだ ● 良くある要件には、だい たいプラグインがある ● ブログに限らない! ● 業務用の基幹アプリとか ‣ そもそも... はさすがに向いてない ● Webアプリの機能って 似てるところ多い?
  15. 15. 中身知らないと カスタマイズは難しい? ‣ そんなでもなかった ● フックも、ただのPHP関数 ‣ function.php が全て ‣ 新しく覚えることが少ない ● functions.php に全部書くも ● フックや関数は沢山あるが OK。分けて require もOK ● カスタマイズのルールは ちょっとだけ ‣ データやWPへのアプローチ は「フック」を通じて行う ‣ 知ってると嬉しいことは沢山 ● リクエストからレスポンスま ある。でも、知らないなら知 でのほとんどのポイントに処 らないなりに、何とかなる 理を差し込める
  16. 16. 折り合いが合わない? ‣ もちろんある ● 苦手な部分を克服する手 (やりたいこと、要件次第) 段も、プラグインが提供 されている ‣ でもワリと少ないみたい ● 例えば、キャッシュとか ‣ その理由 ● DBスキーマがシンプル ● APIの基本がシンプル ● やっぱりただのPHP
  17. 17. どうやら誤解していたらしい? (;゚∀゚)
  18. 18. WordPressを Webアプリのフレームワーク にするメリット
  19. 19. 最初からてんこもり ‣ ユーザー認証/管理/登録 ‣ コンテンツ管理機能 ● 履歴管理 ‣ 美しくカスタマイズ可能な ● メディア管理 管理画面 ● メタデータ管理 ‣ テーマ機構 ‣ サイト内検索 ‣ プラグイン機構 ‣ XMLRPC Interface ‣ ウィジェット機能 ‣ 多言語対応 etc. etc... ‣ 投稿・コメント機能
  20. 20. 選べるテーマ 検索して 選べる ‣ 管理画面からインストール ‣ 約800のプラグイン ‣ 無料のテーマもたくさん その まま インス ‣ インストールしたテーマ トール を元にカスタマイズ可能 改造して 自分流に!! ※要ライセンスチェック!
  21. 21. 豊富で手軽なプラグイン 検索して ‣ 管理画面からインストール 選べる ‣ 20,000以上の公式プラ グイン その まま ‣ 無料のプラグインも多数 インス トール ‣ あんなの有るかな? と思ったものは、 だいたい有る
  22. 22. プラグインの一例 (1) ‣ キャッシュ ‣ ソーシャル認証 ● W3 Total Cache ● Gianism ‣ メールフォーム ‣ メルマガ ● Contact Form 7 ● Subscribe2 ‣ ソーシャル投稿 ‣ バックアップ ● WP Social ● BackWPup Bookmarking Light o(≧◇≦*)
  23. 23. プラグインの一例 (2) ‣ データ永続化の簡易拡張 ● Welcart(EC) ● Types ‣ スマートフォン対応 ‣ SEOオペレーション ● WPtouch ● All in One SEO Pack ‣ フューチャーフォン対応 ※時代にあったSEOのオペレーションは 各自でちゃんと学びましょう! ● Ktai Style ‣ 汎用サイトの構築 ● BuddyPress(SNS) o(≧◇≦*)oo(*≧◇≦)o
  24. 24. ちょっと紹介「Types」 ‣ カスタム3兄弟をまるま ‣ 異なるカスタム投稿タイ る管理できる プに、親子関係を持たせ ● カスタム投稿タイプ ることができる ● カスタムフィールド ● 親子関係を持たせる ● 店舗投稿タイプ ● カスタムタクソノミー ● 店舗スタッフ投稿タイプ ● 自由度、機能、扱い易さ ● 「ある店舗のスタッフ」 ともにすごい充実 という概念を表現できる ● リレーションみたい!
  25. 25. ちょっと紹介「BackWPup」 ‣ ファイルとDatabaseと ‣ バックアップの保存先が 両方をバックアップ こんなにイロイロ ● FTP ‣ スケジュール実行 ● DropBox ‣ 実行結果のメール通知 ● AmazonS ● GoogleStorage ‣ リストアもブラウザから ● MicrosoftAzure こんなに 高機能なの自分で コスト… ● Rackspace Cloud 作るとなると… 開発期間…
  26. 26. 美しい管理画面 ‣ ただ綺麗なだけでなく、 色々カスタマイズ可能 ● 機能の追加 ● 設定画面の追加 ● メニューの追加 ‣ 納品物としての見た目も Good!! ● ロゴなどの差し替えや削除もプラグイ ンで自由自在です。
  27. 27. 学習コストが低い ‣ カスタマイズ方法が ‣ 人気のCMSだから情報 とても分かり易い が豊富 ● ちょっと教えてもらった ● 技術情報ブログ記事 ら「なんだか出来そう」 ● 日本語で整備されたド な気になるぐらい キュメント(ある程度) ● 実際、そんなに躓かずに ● 活発なコミュニティ 出来る ● もちろんちょっとは躓い いたよ… (;゚ ゚)
  28. 28. WordPress Codex ‣ Google検索よりも、 まずはここから! ‣ 基礎から発展まで ‣ 充実のリファレンス 苦難を乗り越える 心の友
  29. 29. 本当に作りたいものは何か? バック SNS ユーザー ップ ログ ン ア イ ペー 管理 検索 画面 認証 機能 高 ジャー CRU 管理 RSS 速 D 化
  30. 30. WordPressを使うことで、 本当に必要な部分だけに 集中して開発できる! 理想を 現実に o(*^▽^*)o
  31. 31. WordPressのカスタマイズ
  32. 32. WordPressのテーマを作る WordPressでWebアプリを作る テーマは外観だけでなく、機能も提供する
  33. 33. WPの動作の大まかな理解 初期化
  34. 34. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される
  35. 35. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれる
  36. 36. WPの動作の大まかな理解 初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれる レスポンス
  37. 37. WPの動作の大まかな理解 初期化 自動で URLに対応するデータが検索される URLに対応するテンプレートが開かれる レスポンス
  38. 38. WPの動作の大まかな理解 初期化 自動で URLに対応するデータが検索される 自動で URLに対応するテンプレートが開かれる レスポンス
  39. 39. WPの動作の大まかな理解 MVCの コントローラ 初期化 的な物は無い 自動で URLに対応するデータが検索される 自動で URLに対応するテンプレートが開かれる レスポンス
  40. 40. WPの動作の大まかな理解 割り込み MVCの コントローラ 初期化 的な物は無い フ ク ッ 自動で URLに対応するデータが検索される フ ク ッ 自動で URLに対応するテンプレートが開かれる フ ク ッ フ ク ッ レスポンス
  41. 41. WPの動作の大まかな理解 割り込み MVCの コントローラ 開発する 初期化 的な物は無い 部分 フ ク ッ 自動で URLに対応するデータが検索される フ ク ッ 自動で URLに対応するテンプレートが開かれる フ ク ッ 開発する 部分 フ ク ッ レスポンス
  42. 42. テーマのフォルダ ‣ テーマのデータは、 1つのフォルダに入れる ● {wp-root}/wp-content/ themes/MyTheme/... ‣ テーマのフォルダの中も 自由でOK ● 必要があれば出てもOK ‣ style.css ←重要 ● テーマのメタ情報を記述
  43. 43. テンプレートの基本 index.php ‣ テンプレートも、PHP search.php ‣ テンプレートは、一般に header.php パートに分けて記述される ● インクルードタグ を使う ● とりあえずrequireでもOK sidebar. content.php php ‣ 「テンプレートタグ」と呼 ばれるPHPの関数で処理を 書く footer.php
  44. 44. /* Theme Name: Foreignkey, Inc. スタイル& Author: Foreignkey, Inc. テーマメタ情報 Author URI: http://foreignkey.jp/ (必須) Description: For Foreignkey Website Version: 1.1 */
  45. 45. アーカブ カテゴリー 一覧用 一覧用 トップ (必須) 固定ページ 用 シングル ページ用
  46. 46. コメントの 部分テンプレート フッタの標準 テンプレート ヘッダの標準 テンプレート 検索の 部分テンプレート サイドバー標準 テンプレート
  47. 47. 色々混じってて若干分かり難いが、 フォルダ分けなどのルールが無い分、 覚えることが少ない
  48. 48. 呼び出されるテンプレート ‣ URLに対応する テンプレートが category-info.php 層 category.php 階 直接呼ばれる ト ー archive.php レ プ ン index.php テ ‣ MVCのコントローラ的 なものは無い ● 挙動を変更したり、 tag-python.php 処理を挟み込む事は 層 tag.php 階 ト 出来る  フック ー archive.php レ プ ン index.php テ
  49. 49. テンプレートの呼び出し階層の例 /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/テンプレート階層
  50. 50. <?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(); ?>
  51. 51. <?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(); ?>
  52. 52. 取得・検索されるデータ ‣ URLに対応する記事が 自動検索される 2012年10月の記事の この検索が 2ページ目に該当する 「メインクエリ」 データが検索されて、 この検索結果のループが テンプレートに渡される 「メインループ」 このメインクエリの検索条件を変更することも可能。 PHP で「フック」を登録して実現する
  53. 53. <?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>
  54. 54. <?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> のプラグラムなので、プログラマ にとっては安心感がある
  55. 55. テンプレート以外に PHP を書く場所 ‣ functions.php に書く ● ルールはそれだけ ● 行数が多くなるなら、 適当にファイルを分けて require すればOK ‣ 「フック」の登録や削除 を始め、WPのPHPプロ グラムは基本はここへ記 述する
  56. 56. ここまでのポイント ‣ テンプレート ● URLに対応するテンプ レートが自動的にロード ● ただのPHPファイル される ● テンプレート階層 ‣ WPの挙動変更 ‣ URLのルーティング ● 「フック」を利用する ● MVCのコントローラ的 なものは、無い ‣ PHPを書く場所 ● URLに対応するデータが ● functions.php 自動的に検索される
  57. 57. WordPressを操る (フックの利用)
  58. 58. トップページで、 あるカテゴリの投稿を 表示したくない メインクエリーを 変更する
  59. 59. WordPressの「フック」を 使って実現できる
  60. 60. イベントドリブンなAPI「フック」 ドキュ ‣ WP実行フローの中で、 メンントも 充実 独自プログラムを 実行させる仕組み ● 各種フック(イベント) にPHP関数を登録する ● JSでイベントコールバッ クを入れるのと似てる ‣ WPカスタマイズの根幹 http://wpdocs.sourceforge.jp/プラグイン_API#Actions
  61. 61. フックの種類と作成 ‣ 「アクション」 フック ‣ フックの作成 ● WordPressのイベント 1. PHPでフック関数を定 や処理に応じてプログラ 義して、 ムを実行する 2. WordPressに登録する ‣ 「フィルター」フック ● add_action(...) ● add_filter(...) ● 入出力テキストなどの データを加工する
  62. 62. メインクエリの検索条件の変更 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' ); } }
  63. 63. メインクエリの検索条件の変更 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 ★フックに渡される引数は、  フックによって異なる
  64. 64. 一般的リクエスト中に実行 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
  65. 65. WordPressのデータ永続化 ∼投稿タイプ∼
  66. 66. シンプルなDBスキーマ ‣ たった11個のテーブル ‣ 主なエンティティは5つ posts 投稿 comments コメント links リンク users ユーザ term_taxonomy 分類 http://wpdocs.sourceforge.jp/データベース構造
  67. 67. 投稿タイプ ‣ 投稿には、自由に追加可能な、 投稿タイプ(種類)がある ● posts.post_type ● 「カスタム投稿タイプ」と言われ るものもあるが、要は post_type に独自の値を指定すること ● デフォルトの 「投稿」や「固定ページ」も、 その一つに過ぎない http://wpdocs.sourceforge.jp/投稿タイプ
  68. 68. カスタム投稿タイプの理解 ×投稿 固定ページ カスタム投稿タイプ 良く↑こう説明されたりしますが、↓の理解が正しい 〇 投稿タイプ 投稿 固定ページ 画像 カスタム
  69. 69. デフォルトの投稿タイプ 投稿 ブログ記事に使われるメインの投稿タイプ post 固定ページ 固定ページの投稿タイプ page 添付ファイル 画像やファイルなど、メディアとしてアップ attachment ロードされたファイルの情報が保存される。 リビジョン 下書きや投稿の変更履歴を保存する。 revision ナビゲーション ナビゲーションメニューの項目を保存する nav_menu
  70. 70. デフォルトの投稿タイプ 投稿 ブログ記事に使われるメインの投稿タイプ post posts 固定ページ で色んな 固定ページの投稿タイプ データが page 管理可能 添付ファイル 画像やファイルなど、メディアとしてアップ attachment ロードされたファイルの情報が保存される。 リビジョン 下書きや投稿の変更履歴を保存する。 revision ナビゲーション ナビゲーションメニューの項目を保存する nav_menu
  71. 71. postsで色んなデータを管理する ‣ WPの基本システムも、 ‣ 複数のテーブルを持つよ posts で画像を管理 うなイメージで扱える ● Railsの単一テーブル継 ‣ 同様に、色んなデータを 承とスキーマは近いけど 管理できる より積極的に使うが吉 ● 商品情報、製品情報 ● 画像、音声、動画 この メディアの ● …アイデア次第! 一覧も実は posts
  72. 72. カスタムの投稿タイプの利用 ‣ 基本は、functions.php にプログラムを書く ‣ カスタム投稿タイプを管理画面から扱える、 強力なプラグインも有る ● Types など ● しかし、WPをWebアプリのフレームワークとして 利用する場合、APIから扱う方が良いかも? 投稿タイプの追加 register_post_type($post_type, $args)
  73. 73. カスタム投稿タイプの追加 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
  74. 74. カスタム投稿タイプの追加 ‣ これだけのコードで… ● メニューが追加 ● 投稿画面 ● 実際に投稿が可能 ● 通常の投稿と区別 ‣ しかし、これだけだと… ● 例えば、商品に価格を設 定できない…
  75. 75. WordPressのデータ永続化 ∼カスタムフィールド∼
  76. 76. メタデータを扱えるWP ‣ 足りない属性を補う 3つのメタデータテーブル postmeta 投稿用 commentmeta コメント用 usermeta ユーザー用 ‣ それぞれ、対象に紐づく データを保存する ● key/value
  77. 77. カスタムフィールド ‣ 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/カスタムフィールドの使い方
  78. 78. カスタムフィールドの利用 ‣ 何もしなくても、 投稿画面から 入力・更新できる ● 入力されたデータは、 テーマの中で利用できる ● しかし…、 key もここで入力するも のなので、利用価値がハ テナ?
  79. 79. 独自フォームの作成 ‣ カスタムフィールドを 扱う独自のフォームを 投稿画面に作れる こんな 感じで 作れる
  80. 80. 利用する主な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を出力する
  81. 81. //メタボックスを表示する処理を登録 フォーム 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 echo esc_html($value) ?>"> <?php }
  82. 82. メタボックス登録のためのフック //メタボックスを表示する処理を登録 フォーム 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 echo esc_html($value) ?>"> <?php フォームタグを出力 }
  83. 83. 値の //投稿の保存時に、メタデータを保存するための関数を登録 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']); }
  84. 84. 投稿保存時に実行されるフック 値の //投稿の保存時に、メタデータを保存するための関数を登録 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']); }
  85. 85. メタデータ指向の メリット・デメリット ‣ メリット ‣ 対応 ● アプリが扱うデータ内容の変 ● 速度問題には、キャッシュ系 更が比較的容易 プラグインの導入 ● WPのレールの上で管理でき ● 必要な場合には、独自にテー る(他プラグインから扱え ブルを作成して独自にアクセ る) スするのも有りと言えば有り ● 但し、バックアップ系プラグ ‣ デメリット インの恩恵が受けられない等 ● DBクエリ増加∼処理速度 の弊害もある ● データの扱いがやや面倒
  86. 86. WordPressのデータ永続化 ∼オプション∼
  87. 87. オプション ‣ 投稿などに紐づかない、 データを簡単に保存 ● key/value ● アプリケーション全体の 設定値などの保存に利用 update_option($key, $value) 更新、削除 delete_option($key) 取得、表示 get_option($key)
  88. 88. WPデータ永続化のポイント ‣ カスタムの投稿タイプ ‣ カスタムフィールド ● posts には、ブログの投 ● posts/comments/ 稿データだけでなく、 users に関連したメタ 様々なデータが保存で出 データが保存出来る 来ることを理解する ● key/value ● 投稿タイプで特性の異な るエンティティを管理出 ‣ その他のデータ 来る ● 手軽にデータを永続化で きる option API
  89. 89. データ構造、ファイルの構造、 API…どれもシンプルで、 プログラマーに優しいWordPress だ・か・ら 無数のテーマ・プラグインが  たくさん出来た!! o(*^▽^*)o
  90. 90. WordPressアプリの事例
  91. 91. コワーキングスペース MAGAZINE ‣ 全国のコワーキングスペース運営者 にインタビューなどがで公開されて いるサイト。 http://www.coworking-jelly.com/blog/ ‣ 音声・動画は padcast でも配信 https://itunes.apple.com/jp/podcast/ kowakingusupesumagazine/id564787883
  92. 92. WordPress から iTunes で Podcast 配信 ‣ WordPressに mp3 をアップすると、iTunes から 自動的に podcast 配信される こんな事まで プラグインで可能 ‣ iTunes へ配信する為に Σ(@ω@;) ● Blubrry PowerPress Podcasting プラグイン導入 ● iTunes 向けの各種設定 ● 個別のカテゴリのみ、iTunesへ連携させる設定 ‣ iTunes Store 側 ● PowerPress で設定された Podcast フィード URL を登録
  93. 93. コワーキングスペース MAGAZINE構築の詳しい情報 ‣ この仕組みの構築の為の詳しい情報が、 コミュニティコム様のWebサイトで 公開されています。 http://www.communitycom.jp/2012/09/25/wordpress-itunes/
  94. 94. Croppy ‣ インターネット上のグラフィックを 手軽にクリップ、共有できるサイト http://croppy.org/
  95. 95. WordPressの実装 ‣ Twitter/Facebookログイン ● プラグイン利用 ‣ ユーザーのフォローや、お気に入り追加機能 ● functions.php、他に PG 追加 ‣ 管理画面を使わずに投稿追加 ● functions.php、他に PG 追加
  96. 96. WordPressの実装 ‣ ユーザーの相互のフォロー リレーションとか 使わなくても出来る ● ユーザーのメタデータに保存 という発想 (・ ・)イイ ‣ ユーザーの投稿には WP 管理画面を使わせていない ● admin_init にフックし、ユーザー権限をチェック、 管理者以外はトップページにリダイレクト ‣ 独自のPHPファイルから WP への投稿 WPのURL ルーティングの外 ● wp-load.phpをロードし、 でも利用可能 WordPressのユーザー情報などを利用
  97. 97. Croppyの構築の詳しい情報 ‣ WordCamp Tokyo 2012 で発表内容が、 とても丁寧に解説されています。 http://stocker.jp/diary/wordcamp-tokyo-2012-croppy/ みなさんもこちらの発表を見れたら 本当に良かったと思います。 (; ^ω^)
  98. 98. まとめじゃないけど
  99. 99. 向いてるアプリ・向かないアプリ この範囲が すごく広いと思う ‣ 向いている !(・ ・)! ‣ あまり向いてない ● 何らかのコンテンツをス ● 全く外向きに公開しない トックし公開するサイト ● 複雑なデータ構造 ● 基本的に向いてる ● データの集計や計算が ● いわゆるWebサイトに 主題 必要な要件がたくさん詰 まってる ● 管理画面のカスタマイズ の比率が非常に多い ● プラグインの利用で開発 コストを低減できる
  100. 100. 僕がやった失敗 ‣ すぐにプログラム書く方向 ‣ グローバル変数に戸惑った で考えてしまう ● global $post が信じられ ● まずはプラグインを探して ず、いやそんな筈は…と他 みよう! 結構有るよ! の方法を探した。 ‣ サーバーサイドでのデータ ‣ CodexよりGoogle先生 バリデーションが無い?の ● いやまず Codexでした! に探し続けた ● これにはもっと早く気付け ● …無いんですかね?エラー ば良かった! ならされないようにしたい (;゚∀゚)
  101. 101. WPカスタマイザーへの近道(?) ‣ まずはDBスキーマを眺め ‣ テンプレートを眺めて、 てデータ構造を理解する テンプレートタグの雰囲 ● それだけで安心できた 気を知る ● 良いリファレンスがある ‣ URLと、テンプレートや ので雰囲気だけで十分 メインクエリの関係を理 解する ‣ Codexを一読する ● 基本中の基本だけど、あ ● 何故か後から読んじゃっ まり説明が無いみたい? た (^_^;A
  102. 102. どんなプラグインがあるか分から ない方には、こちら便利かも? http://www.plugin-clip.com/
  103. 103.  最後に、もう一度、 いちばん話したかった事を (`・ω・´ ) キリッ
  104. 104. WordPressで管理できるデータは ブログの記事だけじゃない WordPressの豊富なリソースが あなたのシステム構築を楽にする 理想を 現実に o(*^▽^*)o
  105. 105. もし良かったら遊んでください♪ @yuka2py https://twitter.com/yuka2py http://www.facebook.com/yuka2py http://gplus.to/yuka2py (´∀`〃)ゝキャハ
  106. 106. ご静聴、ありがとうございました! ©copyright 2012 Foreignkey, inc. All right reserved.
  107. 107. ©copyright 2012 Foreignkey, inc. All right reserved.

Hinweis der Redaktion

  • \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

×