Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2014 01-11-tdc-6th-anniversary

1,415 views

Published on

Published in: Technology, Business
  • Be the first to comment

2014 01-11-tdc-6th-anniversary

  1. 1. TDC 6th Anniversary WordPressワークショップ WordPressで   効率的な開発を
  2. 2. 自己紹介
  3. 3. 自己紹介 相原 知栄子(うぇぶるじょん) フリーランスでの活動の後、 WordPressのインテグレーションサービスを提供する プライム・ストラテジー株式会社の WordPressエンジニアに。 WordBench千葉 2011年WordBench東京スピーカー 2013年WordBenchしずおかスピーカー
  4. 4. 自己紹介 BOOKS(共著)
  5. 5. 自己紹介 http://webourgeon.com/ @Webourgeon_com Chieko.Aihara.Bokettch
  6. 6. 自己紹介 http://wordpress.org/plugins/stop-the-bokettch/
  7. 7. プライム・ストラテジー
  8. 8. プライム・ストラテジーは世界に52社ある 「WordPressコンサルタント」のうちの1社 WordPressのインテグレーションサービスを提供
  9. 9. 今日お話すること
  10. 10. 今日のアジェンダ 1.WordPressとは 2.WordPressでの開発 3.WordPressハンズオン
  11. 11. WordPressとは
  12. 12. WordPressとは ? なぜWordPressを使うのか?
  13. 13. WordPressとは みんなが使っているから
  14. 14. WordPressとは YES
  15. 15. WordPressとは どういうことかというと
  16. 16. WordPressとは 世界最大シェアの オープンソースCMSソフトウェア
  17. 17. WordPressとは http://en.wordpress.com/stats/ 2014.01.08 22:40 頃
  18. 18. WordPressとは
  19. 19. WordPressとは トップ 1000万サイト All Website 21.0% CMS 59.8% 2014.01.08 All Website 21.2% CMS 60.0% 2014.01.11 http://w3techs.com/technologies/overview/content_management/all
  20. 20. WordPressとは GPL
  21. 21. WordPressとは PHP & MySQL
  22. 22. WordPressとは プラグイン http://wordpress.org/plugins/
  23. 23. WordPressとは テーマ http://wordpress.org/themes/
  24. 24. WordPressとは
  25. 25. WordPressとは プラグイン
  26. 26. WordPressとは プラグイン テーマ
  27. 27. WordPressとは プラグイン コミニュティ テーマ
  28. 28. WordPressとは プラグイン コミニュティ テーマ 開発情報
  29. 29. WordPressとは プラグイン コミニュティ テーマ 開発情報
  30. 30. WordPressとは 開発コストの削減
  31. 31. WordPressとは 開発コストの削減 CMS・アプリケーションプラットフォーム として
  32. 32. WordPressとは それだけ?
  33. 33. WordPressとは ではありません
  34. 34. WordPressとは WordPressとSEO SEOプラグイン
  35. 35. WordPressとは WordPressとSEO WordPress is a great choice WordPress automatically solves a ton of SEO issues. (意訳) ワードプレスを選ぶことは、非常に良い選択です。 なぜなら、ワードプレスは、SEOに関する多くの問題を自動的に解決してくれて、 WordPress takes care of 80-90% of (the mechanics of) SEO(サーチエンジン最適化)の手法の80%∼90%に対応するように作られているから です。 Search Engine Optimization (SEO) WordCamp San Francisco 2009  Matt Cutts
  36. 36. WordPressとは WordPressとソーシャル
  37. 37. WordPressとは WordPressとデバイス デバイス切り替え http://wpbk2.azurewebsites.net/ レスポンシブ http://wpbk2.azurewebsites.net/blog/
  38. 38. WordPressとは WordPress3.8
  39. 39. WordPressとは WordPress3.8
  40. 40. WordPressとは WordPress3.8 管理画面もレスポンシブに
  41. 41. WordPressとは 事例紹介
  42. 42. WordPressとは 事例紹介 カスタマイズした 投稿画面
  43. 43. WordPressとは 事例紹介 キャッシュ 更新性 自動化 マルチデバイス対応
  44. 44. WordPressとは WP SiteManager SEO + SNS + デバイス切り替え + キャッシュ + α
  45. 45. WordPressでの開発
  46. 46. WordPressでの効率的な開発 WordPressのファイル構成
  47. 47. WordPressでの効率的な開発 WordPressのファイル構成 管理画面 設定
  48. 48. WordPressでの効率的な開発 WordPressのファイル構成 管理画面 コアファイル カスタマイズ
  49. 49. WordPressでの効率的な開発 WordPressのファイル構成 管理画面 設定 コアファイル
  50. 50. WordPressでの効率的な開発 WordPressのファイル構成 管理画面 設定 コアファイル
  51. 51. WordPressでの効率的な開発 WordPressのファイル構成 管理画面 設定 コアファイル カスタマイズ
  52. 52. WordPressでの効率的な開発 WordPressのファイル構成 wp-content プラグイン テーマ
  53. 53. WordPressでの効率的な開発 WordPressのファイル構成 wp-content プラグイン PHP HTML CSS PHP テーマ
  54. 54. WordPressでの効率的な開発 テーマ Twenty Fourteen
  55. 55. WordPressでの効率的な開発 テーマ テンプレート階層 http://codex.wordpress.org/Image:Template_Hierarchy.png
  56. 56. WordPressでの効率的な開発 テーマ テンプレート階層 style.css index.php
  57. 57. WordPressでの効率的な開発 テーマ style.css /* Theme Name: Webourgeon Theme URI: http://webourgeon.com/ Description: サンプルテーマ Author: うぇぶるじょん Author URI: http://webourgeon.com/ Version: 1.0 */ テーマとして認識
  58. 58. WordPressでの効率的な開発 テーマ テンプレートタグ the_content() get_the_date() => 記事本文を出力 => 記事が書かれた日を取得 wp_list_categories() => カテゴリーリストをリンク付きで出力 http://codex.wordpress.org/Template_Tags
  59. 59. WordPressでの効率的な開発 テーマ テンプレートタグ the_content() get_the_date() => 記事本文を出力 => 記事が書かれた日を取得 wp_list_categories() => カテゴリーリストをリンク付きで出力 http://codex.wordpress.org/Template_Tags
  60. 60. WordPressでの効率的な開発 テーマ インクルードタグ get_header() => header.php get_footer() => footer.php get_templatepart() => ヘッダー、サイドバー、フッター以外の テンプレートパーツ モジュール化
  61. 61. WordPressでの効率的な開発 テーマ 条件分岐タグ is_single() => 個別投稿 is_page() => 固定ページ is_category() => カテゴリーアーカイブ is_admin() => 管理画面
  62. 62. WordPressでの効率的な開発 => あるものは使う http://codex.wordpress.org/Template_Tags
  63. 63. WordPressでの効率的な開発 効率 => あるものは使う 安全 http://codex.wordpress.org/Template_Tags
  64. 64. WordPressでの効率的な開発 テーマ WordPressループ <?php if ( have_posts() ) : ?> 投稿データがあるか <?php while ( have_posts() ) : the_post(); ?> <?php the_title(); ?> <?php the_content(); ?> 投稿データを$postに セット <?php endwhile; ?> <?php endif; ?> 記事表示の基本
  65. 65. WordPressでの効率的な開発 functions.php if ( ! isset( $content_width ) ) { $content_width = 700; }
  66. 66. WordPressでの効率的な開発 functions.php //アイキャッチ画像 add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true );
  67. 67. WordPressでの効率的な開発 functions.php // カスタムメニュー register_nav_menus( array ( 'utility' => 'ユーティリティナビ', 'global' => 'グローバルナビ', 'footer' => 'フッターナビ' ) );
  68. 68. WordPressでの効率的な開発 functions.php プラグイン
  69. 69. WordPressでの効率的な開発 functions.php プラグイン
  70. 70. WordPressでの効率的な開発 functions.php テーマ固有の機能 プラグイン
  71. 71. WordPressでの効率的な開発 functions.php テーマ固有の機能 プラグイン テーマを変えても有効
  72. 72. WordPressでの効率的な開発 WordPressの動作原理 ファイルの実行順序 http://www.warna.info/archives/279/
  73. 73. WordPressでの効率的な開発 WordPressの動作原理 1.初期化 WordPressが動作する前提としての必要な 前処理や設定・ファイルの読込 wp-config.php wp-settings.php
  74. 74. WordPressでの効率的な開発 WordPressの動作原理 1.初期化 実行環境の均一化 データベース接続 WordPress関数の読み込み プラグイン読み込み functions.php読み込み
  75. 75. WordPressでの効率的な開発 WordPressの動作原理 2.解析 アクセスされたURLをもとに、 WordPressの内部パラメータに変換、 表示条件を導き出す。 wp-includes/class-wp.php
  76. 76. WordPressでの効率的な開発 WordPressの動作原理 2.解析 パラメーターは46個 m, p, posts, w, cat, withcomments, withoutcomments, s, search, exact, sentence, debug, calendar, page, paged, more, tb, pb, author, order, orderby, year, monthnum, day, hour, minute, second, name, category_name, tag, feed, author_name, static, pagename, page_id, error, comments_popup, attachment, attachment_id, subpost, subpost_id, preview, robots, taxonomy, term, cpage, post_type
  77. 77. WordPressでの効率的な開発 WordPressの動作原理 2.解析 パラメーターは46個 m, p, posts, w, cat, withcomments, withoutcomments, s, search, exact, sentence, debug, calendar, page, paged, more, tb, pb, author, order, orderby, year, monthnum, day, hour, minute, second, name, category_name, tag, feed, author_name, static, pagename, page_id, error, comments_popup, attachment, attachment_id, subpost, subpost_id, preview, robots, taxonomy, term, cpage, post_type URLにパラメーターと同じ名前のものが あると404エラーになりやすい
  78. 78. WordPressでの効率的な開発 WordPressの動作原理 2.解析 リライトルール デフォルト以外のパーマリンクでは URLをパラメーターに変換 [" category/(.+?)/?$ "] => "index.php?category_name=$matches[1]"
  79. 79. WordPressでの効率的な開発 WordPressの動作原理 3.抽出 内部パラメーターをもとに、 データベースのSQL文を生成し、 条件にあった記事データを取得する wp-includes/query.php
  80. 80. WordPressでの効率的な開発 WordPressの動作原理 3.抽出 SQLの生成とデータベースからの 記事取得 テンプレートで使用できる グローバル変数($post)などを 利用できるように
  81. 81. WordPressでの効率的な開発 WordPressの動作原理 4.表示 テーマのテンプレートファイルを用いて、 Webページを表示する wp-includes/template-loader.php
  82. 82. WordPressでの効率的な開発 WordPressの動作原理 4.表示 抽出条件をもとに、表示する テンプレートを決定し、読み込む テンプレートを用いて、 Webページを出力
  83. 83. WordPressでの効率的な開発 WordPressの動作原理 理解することで 適切な開発が行える
  84. 84. WordPressでの効率的な開発 WordPressのデータ構造 http://codex.wordpress.org/Image:WP3.0-ERD.png http://wpdocs.sourceforge.jp/データベース構造
  85. 85. WordPressでの効率的な開発 WordPressのデータ構造 コメント 記事 ユーザー 属性 カテゴリー コメント 紐付け 属性 カスタム カテゴリー フィールド 設定 http://codex.wordpress.org/Image:WP3.0-ERD.png http://wpdocs.sourceforge.jp/データベース構造 リンク カテゴリー
  86. 86. WordPressでの効率的な開発 WordPressコーディングルール WordPress Coding Standards http://codex.wordpress.org/WordPress_Coding_Standards
  87. 87. WordPressでの効率的な開発 つかえるものはつかう 効率的な開発
  88. 88. WordPressでの効率的な開発 共通のルール デザイナー コーダー    PHP開発者
  89. 89. ハンズオン
  90. 90. WordPressハンズオン WordPressの準備はよろしいですか? 
  91. 91. WordPressハンズオン 最も単純なテーマを作ってみましょう
  92. 92. WordPressハンズオン wp-content/themes/bokettch style.css index.php
  93. 93. WordPressハンズオン style.css charset "utf-8"; /* Theme Name: Bokettch Theme URI: http://webourgeon.com/ Description: サンプルテーマ Author: ぼけっち Author URI: http://webourgeon.com/ Version: 1.0 */
  94. 94. WordPressハンズオン index.php <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テーマ</title> </head> <body> <h1>テーマサンプル</h1> </body> </html>
  95. 95. WordPressハンズオン
  96. 96. WordPressハンズオン
  97. 97. WordPressハンズオン 有効化して表示確認してみましょう
  98. 98. WordPressハンズオン WordPressループでコンテンツを表示 <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?> <?php endif; ?>
  99. 99. WordPressハンズオン 表示確認してみましょう
  100. 100. WordPressハンズオン わすれちゃいけない wp_head   wp_footer
  101. 101. WordPressハンズオン <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テーマ</title> <?php wp_head(); ?> </head> <body> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title(); ?></h1> <?php the_content(); ?> <?php endwhile; ?> <?php endif; ?> <?php wp_footer(); ?> </body> </html>
  102. 102. WordPressハンズオン Theme-Check http://wordpress.org/plugins/theme-check/
  103. 103. WordPressハンズオン Debug Bar http://wordpress.org/plugins/debug-bar/ http://wordpress.org/plugins/theme-check/
  104. 104. WordPressハンズオン プラグインを作ってみましょう
  105. 105. WordPressハンズオン テーマ作成の時を思い出してください  wp_head   wp_footer
  106. 106. WordPressハンズオン テーマ作成の時を思い出してください  フック wp_head   wp_footer
  107. 107. WordPressハンズオン WordPressは、プラグインをWordPress 本体 に “引っ張り込む (hook into)” ためのフックを 用意している WordPress Codex プラグインAPI
  108. 108. WordPressハンズオン アクションフック 実行中の特定のポイントもしくは特定のイベント発生時に WordPress のコアが起動させる 投稿の公開 テーマの変更 管理画面の表示
  109. 109. WordPressハンズオン アクションフック 動作原理のそれぞれのフェィズで どんなアクションフックがあるでしょうか
  110. 110. WordPressハンズオン アクションフック 1.初期化 plugins_loaded => プラグインの読込完了直後 setup_theme => 翻訳ファイルの読込直前 after_setup_theme => テーマのfunctions.php読込直後 init => 初期化完了時
  111. 111. WordPressハンズオン アクションフック 2.解析 parse_request => 内部パラメータへの変換直後 send_headers => レスポンスヘッダー送信直後
  112. 112. WordPressハンズオン アクションフック 3.抽出 pre_get_posts => SQL文を生成する直前 posts_selection => データベースアクセスの直前 wp => グローバル変数設定直後
  113. 113. WordPressハンズオン アクションフック 4.表示 template_redirect => テンプレートファイル選択直前 wp_head => headタグ出力中 wp_footer => bodyタグ出力直前 shutdown => WordPress実行終了時
  114. 114. WordPressハンズオン アクションフック さっそく使ってみましょう
  115. 115. WordPressハンズオン アクションフック まずは表示させるだけのプラグイン
  116. 116. WordPressハンズオン アクションフック プラグインとして認識させる
  117. 117. WordPressハンズオン アクションフック プラグインとして認識させる wp-content/plugins/hello-bokettch
  118. 118. WordPressハンズオン アクションフック hello-bokettch.php <?php /** * @package Hello_Bokettch * @version 0.1 */ /* Plugin Name: Hello Bokettch Plugin URI: http://webourgeon.com/ Description: ただなにか出すだけのプラグイン Author: Webourgeon Version: 0.1 Author URI: http://webourgeon.com/ */ 他とかぶらない名前
  119. 119. WordPressハンズオン アクションフック function hello_bokettch() { echo 'ことしはボケない'; } add_action('wp_footer','hello_bokettch');
  120. 120. WordPressハンズオン head にstyleを追加してみましょう 
  121. 121. WordPressハンズオン function hello_bokettch() { echo '<p id="hello-bokettch">ことしはボケない!!</p>'; } add_action('wp_footer','hello_bokettch'); function hello_bokettch_style() { echo ' <style type="text/css"> #hello-bourgeon { font-size: 30px; font-weight: bold; color: red; text-align: center; } </style> '; } add_action( 'wp_head', 'hello_bokettch_style' );
  122. 122. WordPressハンズオン フィルターフック データベースに追加する前やブラウザのスクリーンに 送り出す前にさまざまなタイプのテキストを改造するために WordPress が起動させるフック
  123. 123. WordPressハンズオン フィルターフック the_content
  124. 124. WordPressハンズオン フィルターフック function content_bokettch ( $content ){ $target = '/(。¦ボケ¦ぼけ¦ぼけっち)/'; $bokketch = '「ぼけっち !」'; $content = preg_replace( $target ,$bokketch, $content ); return $content; } add_filter('the_content', 'content_bokettch');
  125. 125. WordPressハンズオン フィルターフック 表示してみましょう
  126. 126. WordPressハンズオン ショートコード   [gallery]
  127. 127. WordPressハンズオン ショートコード   定型文 投稿エディタに直接書けない テンプレートタグや PHPコードなど
  128. 128. WordPressハンズオン ショートコード   ショートコードを使うプラグイン  Contact Form 7 Trust Form Simple Map
  129. 129. WordPressハンズオン ショートコード   アドセンス 関連記事 などもいいね
  130. 130. WordPressハンズオン ショートコード   add_shortcode('bokketch', 'bokketch_shortcode'); function bokketch_shortcode() { return '<p>お鍋こがしました(́;ω;`)ウッ…</p>'; }
  131. 131. WordPressハンズオン ショートコード   [bokketch]
  132. 132. WordPressハンズオン ショートコード   できましたか?
  133. 133. WordPressハンズオン ショートコード   ショートコードは属性も持てる [gallery id="123" size="medium"]
  134. 134. WordPressハンズオン ショートコード   囲み型ショートコード [caption]My Caption[/caption]
  135. 135. WordPressハンズオン ショートコード   http://wpdocs.sourceforge.jp/ショートコードAPI
  136. 136. WordPressハンズオン 管理画面に表示  function add_bokketch_admin_menu() { add_options_page('Bokketch Admin Menu 設定', 'Bokketch Admin Menu', 'manage_options', 'bokketch_admin_menu.php', 'bokketch_admin_menu_page' ); } add_action('admin_menu', 'add_bokketch_admin_menu'); function bokketch_admin_menu_page() { echo 'とりあえず管理画面になんか表示'; }
  137. 137. WordPressハンズオン 管理画面に表示  function add_bokketch_admin_menu() { add_options_page('Bokketch Admin Menu 設定', 'Bokketch Admin Menu', page_title 'manage_options', 'bokketch_admin_menu.php', 'bokketch_admin_menu_page' ); } add_action('admin_menu', 'add_bokketch_admin_menu'); function bokketch_admin_menu_page() { echo 'とりあえず管理画面になんか表示'; }
  138. 138. WordPressハンズオン 管理画面に表示  function add_bokketch_admin_menu() { add_options_page('Bokketch Admin Menu 設定', 'Bokketch Admin Menu', page_title menu_title 'manage_options', 'bokketch_admin_menu.php', 'bokketch_admin_menu_page' ); } add_action('admin_menu', 'add_bokketch_admin_menu'); function bokketch_admin_menu_page() { echo 'とりあえず管理画面になんか表示'; }
  139. 139. WordPressハンズオン 管理画面に表示  function add_bokketch_admin_menu() { add_options_page('Bokketch Admin Menu 設定', 'Bokketch Admin Menu', page_title menu_title access_level/ 'manage_options', 'bokketch_admin_menu.php', 'bokketch_admin_menu_page' ); capability } add_action('admin_menu', 'add_bokketch_admin_menu'); function bokketch_admin_menu_page() { echo 'とりあえず管理画面になんか表示'; }
  140. 140. WordPressハンズオン 管理画面に表示  function add_bokketch_admin_menu() { add_options_page('Bokketch Admin Menu 設定', 'Bokketch Admin Menu', page_title menu_title access_level/ 'manage_options', 'bokketch_admin_menu.php', 'bokketch_admin_menu_page' ); capability file } add_action('admin_menu', 'add_bokketch_admin_menu'); function bokketch_admin_menu_page() { echo 'とりあえず管理画面になんか表示'; }
  141. 141. WordPressハンズオン 管理画面に表示  function add_bokketch_admin_menu() { add_options_page('Bokketch Admin Menu 設定', 'Bokketch Admin Menu', page_title menu_title access_level/ 'manage_options', 'bokketch_admin_menu.php', 'bokketch_admin_menu_page' ); capability file function } add_action('admin_menu', 'add_bokketch_admin_menu'); function bokketch_admin_menu_page() { echo 'とりあえず管理画面になんか表示'; }
  142. 142. WordPressハンズオン この後はWordPressの教科書にのっている Fb admins などを作ってみると理解が進むかも。。
  143. 143. プラグインとの関わり方 WordBench 東京12月: プラグインについて話そう!振り返りレポート http://wordbench.org/2013/12/07/wordbench-tokyo-201312-report/
  144. 144. ありがとうございました

×