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

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

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

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. はじめに ‣ この資料では、WordPress のカスタマイズを、エンジニア寄りの視点で、解説させていただきます。 ‣ WordPressのカスタマイズはこれからだけど、PHPには精通されている方、一般的なWebアプリケーションフーレムワークでの開発の知識のある方などを主な対象として、当初つまずきやすいと思われる箇所や、私個人が疑問に思った箇所、気付くのに時間が掛かった箇所などを紹介させていただいています。

5. 本日のおしながき ‣ スクラッチ派ですか？ ‣ WPのカスタマイズ ● CMSカスタマイズに抵 ● WPのカスタマイズの方抗あった僕がWPを知っ法を、エンジニア視点かてどう感じたか？ら解説します。 ‣ WPをWebアプリの ‣ WPアプリの事例フレームワークにする ● iTunes Podcast 連携メリット ● 画像投稿系サイト ● 僕視点で恐縮ですが…

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

7. 自分で作る方がエエよそう信じてたアカウントが↓コチラです。 @yuka2py

8. 見通しええし。細かいところも分かってるし。何でも出来るし。 (￣‥￣)=3 フン

9. スクラッチ派の思い込み ‣ メンドクサイ ‣ やっぱ中身知らないと ● 製品固有のDSL（ドメイ ● カスタマイズとなったらン固有言語）を覚えるの結局中身知らないとダメがメンドクサイなんでしょ？ ‣ そんなに使えない ‣ 折り合わない事ばかり ● 既製品で、やりたい事が ● 製品のアーキテクチャが出来るなんて、そんなに邪魔して、思うようにカ世の中甘く無いスタマイズできない

10. そんな、ある日… (･∀･)

11. ある人に WordPress を教えてもらった (*´Д`*)ｶｸﾆﾝｻﾝ...

12. で、実際はどうだったか？ (ﾟ_ﾟ)....

13. DSLの習得は大変？ ‣ そもそも必要無かった ‣ もちろん、APIを覚える ● 全てがPHP 必要はある、が、 ● プログラマだからあまり ● テンプレートもPHP 苦痛ではない ● テンプレートタグとかも ● MTタグに比べたら気持ちが楽ただのPHP関数（あくまでも個人的な感想です。MTの方すみません…） ● シンプルな基本アーキテクチャ ● 充実したリファレンス

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

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

16. 折り合いが合わない？ ‣ もちろんある ● 苦手な部分を克服する手（やりたいこと、要件次第）段も、プラグインが提供されている ‣ でもワリと少ないみたい ● 例えば、キャッシュとか ‣ その理由 ● DBスキーマがシンプル ● APIの基本がシンプル ● やっぱりただのPHP

17. どうやら誤解していたらしい？ (;ﾟ∀ﾟ)

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

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

20. 選べるテーマ検索して選べる ‣ 管理画面からインストール ‣ 約800のプラグイン ‣ 無料のテーマもたくさんそのままインス ‣ インストールしたテーマトールを元にカスタマイズ可能改造して自分流に!! ※要ﾗｲｾﾝｽﾁｪｯｸ!

21. 豊富で手軽なプラグイン検索して ‣ 管理画面からインストール選べる ‣ 20,000以上の公式プラグインそのまま ‣ 無料のプラグインも多数インストール ‣ あんなの有るかな？と思ったものは、だいたい有る

22. プラグインの一例 (1) ‣ キャッシュ ‣ ソーシャル認証 ● W3 Total Cache ● Gianism ‣ メールフォーム ‣ メルマガ ● Contact Form 7 ● Subscribe2 ‣ ソーシャル投稿 ‣ バックアップ ● WP Social ● BackWPup Bookmarking Light o(≧◇≦*)

23. プラグインの一例 (2) ‣ データ永続化の簡易拡張 ● Welcart（EC） ● Types ‣ スマートフォン対応 ‣ SEOオペレーション ● WPtouch ● All in One SEO Pack ‣ フューチャーフォン対応 ※時代にあったSEOのオペレーションは各自でちゃんと学びましょう！ ● Ktai Style ‣ 汎用サイトの構築 ● BuddyPress（SNS） o(≧◇≦*)oo(*≧◇≦)o

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

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

26. 美しい管理画面 ‣ ただ綺麗なだけでなく、色々カスタマイズ可能 ● 機能の追加 ● 設定画面の追加 ● メニューの追加 ‣ 納品物としての見た目も Good!! ● ロゴなどの差し替えや削除もプラグインで自由自在です。

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

28. WordPress Codex ‣ Google検索よりも、まずはここから！ ‣ 基礎から発展まで ‣ 充実のリファレンス苦難を乗り越える心の友

29. 本当に作りたいものは何か？バック SNS ユーザーップログンアイペー管理検索画面認証機能高ジャー CRU 管理 RSS 速 D 化

30. WordPressを使うことで、本当に必要な部分だけに集中して開発できる！理想を現実に o(*^▽^*)o

31. WordPressのカスタマイズ

32. WordPressのテーマを作る WordPressでWebアプリを作るテーマは外観だけでなく、機能も提供する

33. WPの動作の大まかな理解初期化

34. WPの動作の大まかな理解初期化 URLに対応するデータが検索される

35. WPの動作の大まかな理解初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれる

36. WPの動作の大まかな理解初期化 URLに対応するデータが検索される URLに対応するテンプレートが開かれるレスポンス

37. WPの動作の大まかな理解初期化自動で URLに対応するデータが検索される URLに対応するテンプレートが開かれるレスポンス

38. WPの動作の大まかな理解初期化自動で URLに対応するデータが検索される自動で URLに対応するテンプレートが開かれるレスポンス

39. WPの動作の大まかな理解 MVCのコントローラ初期化的な物は無い自動で URLに対応するデータが検索される自動で URLに対応するテンプレートが開かれるレスポンス

40. WPの動作の大まかな理解割り込み MVCのコントローラ初期化的な物は無いフクッ自動で URLに対応するデータが検索されるフクッ自動で URLに対応するテンプレートが開かれるフクッフクッレスポンス

41. WPの動作の大まかな理解割り込み MVCのコントローラ開発する初期化的な物は無い部分フクッ自動で URLに対応するデータが検索されるフクッ自動で URLに対応するテンプレートが開かれるフクッ開発する部分フクッレスポンス

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

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

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

45. アーカブカテゴリー一覧用一覧用トップ（必須）固定ページ用シングルページ用

46. コメントの部分テンプレートフッタの標準テンプレートヘッダの標準テンプレート検索の部分テンプレートサイドバー標準テンプレート

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

48. 呼び出されるテンプレート ‣ URLに対応するテンプレートが category-info.php 層 category.php 階直接呼ばれるトー archive.php レプン index.php テ ‣ MVCのコントローラ的なものは無い ● 挙動を変更したり、 tag-python.php 処理を挟み込む事は層 tag.php 階ト出来るフックー archive.php レプン index.php テ

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. <?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(); ?>

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> <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. 取得・検索されるデータ ‣ URLに対応する記事が自動検索される 2012年10月の記事のこの検索が 2ページ目に該当する「メインクエリ」データが検索されて、この検索結果のループがテンプレートに渡される「メインループ」このメインクエリの検索条件を変更することも可能。 PHP で「フック」を登録して実現する

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. <?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. テンプレート以外に PHP を書く場所 ‣ functions.php に書く ● ルールはそれだけ ● 行数が多くなるなら、適当にファイルを分けて require すればOK ‣ 「フック」の登録や削除を始め、WPのPHPプログラムは基本はここへ記述する

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

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

58. トップページで、あるカテゴリの投稿を表示したくないメインクエリーを変更する

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

60. イベントドリブンなAPI「フック」ドキュ ‣ WP実行フローの中で、メンントも充実独自プログラムを実行させる仕組み ● 各種フック（イベント）にPHP関数を登録する ● JSでイベントコールバックを入れるのと似てる ‣ WPカスタマイズの根幹 http://wpdocs.sourceforge.jp/プラグイン_API#Actions

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

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. メインクエリの検索条件の変更 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. 一般的リクエスト中に実行 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. WordPressのデータ永続化 ∼投稿タイプ∼

66. シンプルなDBスキーマ ‣ たった11個のテーブル ‣ 主なエンティティは５つ posts 投稿 comments コメント links リンク users ユーザ term_taxonomy 分類 http://wpdocs.sourceforge.jp/データベース構造

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

68. カスタム投稿タイプの理解 ×投稿固定ページカスタム投稿タイプ良く↑こう説明されたりしますが、↓の理解が正しい〇投稿タイプ投稿固定ページ画像カスタム

69. デフォルトの投稿タイプ投稿ブログ記事に使われるメインの投稿タイプ post 固定ページ固定ページの投稿タイプ page 添付ファイル画像やファイルなど、メディアとしてアップ attachment ロードされたファイルの情報が保存される。リビジョン下書きや投稿の変更履歴を保存する。 revision ナビゲーションナビゲーションメニューの項目を保存する nav_menu

70. デフォルトの投稿タイプ投稿ブログ記事に使われるメインの投稿タイプ post posts 固定ページで色んな固定ページの投稿タイプデータが page 管理可能添付ファイル画像やファイルなど、メディアとしてアップ attachment ロードされたファイルの情報が保存される。リビジョン下書きや投稿の変更履歴を保存する。 revision ナビゲーションナビゲーションメニューの項目を保存する nav_menu

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

72. カスタムの投稿タイプの利用 ‣ 基本は、functions.php にプログラムを書く ‣ カスタム投稿タイプを管理画面から扱える、強力なプラグインも有る ● Types など ● しかし、WPをWebアプリのフレームワークとして利用する場合、APIから扱う方が良いかも？投稿タイプの追加 register_post_type($post_type, $args)

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. カスタム投稿タイプの追加 ‣ これだけのコードで… ● メニューが追加 ● 投稿画面 ● 実際に投稿が可能 ● 通常の投稿と区別 ‣ しかし、これだけだと… ● 例えば、商品に価格を設定できない…

75. WordPressのデータ永続化 ∼カスタムフィールド∼

76. メタデータを扱えるWP ‣ 足りない属性を補う３つのメタデータテーブル postmeta 投稿用 commentmeta コメント用 usermeta ユーザー用 ‣ それぞれ、対象に紐づくデータを保存する ● key/value

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. カスタムフィールドの利用 ‣ 何もしなくても、投稿画面から入力・更新できる ● 入力されたデータは、テーマの中で利用できる ● しかし…、 key もここで入力するものなので、利用価値がハテナ？

79. 独自フォームの作成 ‣ カスタムフィールドを扱う独自のフォームを投稿画面に作れるこんな感じで作れる

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. //メタボックスを表示する処理を登録ﾌｫｰﾑ 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 }

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_ﬁ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 フォームタグを出力 }

83. 値の //投稿の保存時に、メタデータを保存するための関数を登録 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']); }

84. 投稿保存時に実行されるフック値の //投稿の保存時に、メタデータを保存するための関数を登録 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']); }

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

86. WordPressのデータ永続化 ∼オプション∼

87. オプション ‣ 投稿などに紐づかない、データを簡単に保存 ● key/value ● アプリケーション全体の設定値などの保存に利用 update_option($key, $value) 更新、削除 delete_option($key) 取得、表示 get_option($key)

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

89. データ構造、ファイルの構造、 API…どれもシンプルで、プログラマーに優しいWordPress だ・か・ら無数のテーマ・プラグインがたくさん出来た！！ o(*^▽^*)o

90. WordPressアプリの事例

91. コワーキングスペース MAGAZINE ‣ 全国のコワーキングスペース運営者にインタビューなどがで公開されているサイト。 http://www.coworking-jelly.com/blog/ ‣ 音声・動画は padcast でも配信 https://itunes.apple.com/jp/podcast/ kowakingusupesumagazine/id564787883

92. WordPress から iTunes で Podcast 配信 ‣ WordPressに mp3 をアップすると、iTunes から自動的に podcast 配信されるこんな事までプラグインで可能 ‣ iTunes へ配信する為に Σ(＠ω＠;) ● Blubrry PowerPress Podcasting プラグイン導入 ● iTunes 向けの各種設定 ● 個別のカテゴリのみ、iTunesへ連携させる設定 ‣ iTunes Store 側 ● PowerPress で設定された Podcast フィード URL を登録

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

94. Croppy ‣ インターネット上のグラフィックを手軽にクリップ、共有できるサイト http://croppy.org/

95. WordPressの実装 ‣ Twitter/Facebookログイン ● プラグイン利用 ‣ ユーザーのフォローや、お気に入り追加機能 ● functions.php、他に PG 追加 ‣ 管理画面を使わずに投稿追加 ● functions.php、他に PG 追加

96. WordPressの実装 ‣ ユーザーの相互のフォローリレーションとか使わなくても出来る ● ユーザーのメタデータに保存という発想 (･･)ｲｲ ‣ ユーザーの投稿には WP 管理画面を使わせていない ● admin_init にフックし、ユーザー権限をチェック、管理者以外はトップページにリダイレクト ‣ 独自のPHPファイルから WP への投稿 WPのURL ルーティングの外 ● wp-load.phpをロードし、でも利用可能 WordPressのユーザー情報などを利用

97. Croppyの構築の詳しい情報 ‣ WordCamp Tokyo 2012 で発表内容が、とても丁寧に解説されています。 http://stocker.jp/diary/wordcamp-tokyo-2012-croppy/ みなさんもこちらの発表を見れたら本当に良かったと思います。 (; ^ω^)

98. まとめじゃないけど

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

100. 僕がやった失敗 ‣ すぐにプログラム書く方向 ‣ グローバル変数に戸惑ったで考えてしまう ● global $post が信じられ ● まずはプラグインを探してず、いやそんな筈は…と他みよう！結構有るよ！の方法を探した。 ‣ サーバーサイドでのデータ ‣ CodexよりGoogle先生バリデーションが無い？の ● いやまず Codexでした！に探し続けた ● これにはもっと早く気付け ● …無いんですかね？エラーば良かった！ならされないようにしたい (;ﾟ∀ﾟ)

101. WPカスタマイザーへの近道(?) ‣ まずはDBスキーマを眺め ‣ テンプレートを眺めて、てデータ構造を理解するテンプレートタグの雰囲 ● それだけで安心できた気を知る ● 良いリファレンスがある ‣ URLと、テンプレートやので雰囲気だけで十分メインクエリの関係を理解する ‣ Codexを一読する ● 基本中の基本だけど、あ ● 何故か後から読んじゃっまり説明が無いみたい？た (^_^;A

102. どんなプラグインがあるか分からない方には、こちら便利かも？ http://www.plugin-clip.com/

103. 最後に、もう一度、いちばん話したかった事を (`･ω･´ ) ｷﾘｯ

104. WordPressで管理できるデータはブログの記事だけじゃない WordPressの豊富なリソースがあなたのシステム構築を楽にする理想を現実に o(*^▽^*)o

105. もし良かったら遊んでください♪ @yuka2py https://twitter.com/yuka2py http://www.facebook.com/yuka2py http://gplus.to/yuka2py (´∀`〃)ゝｷｬﾊ

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

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

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(8)