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.

もう一度基礎から!WordPress勉強会

1,784 views

Published on

2014年11月11日、コワーキングスペース、こけむさズで「もう一度基礎から!WordPress勉強会」というタイトルで2時間セミナーの講師を務めさせて頂きました。

Published in: Sports
  • Be the first to comment

もう一度基礎から!WordPress勉強会

  1. 1. もう一度基礎から!WordPress勉強会 プライム・ストラテジー株式会社 藤 祐太郎
  2. 2. 藤 祐太郎 プライム・ストラテジー株式会社 アカウントプランナー 主に新規案件の受注を担当 お客様の声を聞き入れつつWordPressを使っ ていかに喜ばれるWebサイトを制作できるか を常日頃考えています yutaro.fuji.3
  3. 3. アジェンダ 1.WordPressとは 2.WordPressの基本 3.WordPressの制作フロー 4.WordPress4.WordPressによる実制作 5.WordPressによる制作と応用 6.セキュリティ
  4. 4. 1.WordPressとは1.WordPressとは
  5. 5. ■動作要件 ・PHP 5.2.4 以上 ・MySQL 5.0.15 以上 ■特徴■特徴 UIが優れており、非常に使い勝手の良いCMSで ありながら、オープンソースでだれでも利用でき る。 プラグインやテーマが豊富で世界中で利用され ている。
  6. 6. WordPressのシェアWordPressのシェア
  7. 7. 全てのWebサイト CMS市場
  8. 8. WordPressの歴史WordPressの歴史
  9. 9. WordPressの歴史 2003 WordPress 0.7.1
  10. 10. WordPressの歴史 2003 WordPress 0.7.1
  11. 11. WordPressの歴史 2004 WordPress 1.2
  12. 12. WordPressの歴史 2005 WordPress 1.5
  13. 13. WordPressの歴史 2005 WordPress 2.0
  14. 14. WordPressの歴史 2007 WordPress 2.1
  15. 15. WordPressの歴史 2007 WordPress 2.3
  16. 16. WordPressの歴史 2008 WordPress 2.5
  17. 17. WordPressの歴史 2009 WordPress 2.7
  18. 18. WordPressの歴史 2009 WordPress2.8
  19. 19. WordPressの歴史 2011 WordPress 3.2
  20. 20. WordPressの歴史 2012 WordPress 3.5
  21. 21. WordPressの歴史 2013 WordPress 3.8
  22. 22. 事例事例
  23. 23. 2.WordPressの基本2.WordPressの基本
  24. 24. WordPressの基本概念WordPressの基本概念
  25. 25. データ データの入力 データの出力 データ ベース WordPress テンプレート
  26. 26. ディレクトリ構造ディレクトリ構造
  27. 27. WordPressテンプレートの仕組みWordPressテンプレートの仕組み
  28. 28. 役割役割役割役割 テンプレートテンプレートテンプレートテンプレート 固定ページ page.php 投稿詳細ページ single.php カテゴリーページ category.php アーカイブページ archive.phpアーカイブページ archive.php 検索結果ページ search.php サイトフロントページ home.php front-page.php 404ページ 404.php
  29. 29. header.php (パーツテンプレート) page.php archive.php Front-page.php
  30. 30. テーマテーマ
  31. 31. *テーマの最小構成 index.php style.css
  32. 32. テンプレートタグテンプレートタグ
  33. 33. ■代表的なテンプレートタグ • bloginfo() • the_category() • the_permalink() データベースに入力した情報を表示するためのWordPressの関数。データベースに入力した情報を表示するためのWordPressの関数。 ()内にはパラメータがはいる。 http://wpdocs.sourceforge.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83% AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0 WordPressによるサイト制作において重要な 要素でありテンプレートタグなしには開発できない。
  34. 34. テンプレートインクルードタグテンプレートインクルードタグ
  35. 35. ■一般的なインクルードタグ get_header() get_footer() get_sidebar() get_template_part() 対応するテンプレートを読み込むためのタグ。 インクルードタグを利用することで モジュール化することが可能になる。
  36. 36. 条件分岐タグ条件分岐タグ
  37. 37. ■一般的な条件分岐タグ is_page() is_single() is_category() is_front_page() テンプレートファイル内で表示される内容や、特定のページ内容を表 示する条件を設定するのに利用する。 条件分岐を利用すれば使用するテンプレートの数を 削減できるなど、より効率的な開発が可能になる。
  38. 38. ループループ
  39. 39. <?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // 投稿がここに表示される // } // end while } // end if} // end if ?>
  40. 40. 投稿タイプ投稿タイプ
  41. 41. 投稿投稿投稿投稿 固定ページ固定ページ固定ページ固定ページ カスタム投稿タイプカスタム投稿タイプカスタム投稿タイプカスタム投稿タイプ 抜粋 ○ ☓ 任意 トラックバック送信 ○ ☓ 任意 ページテンプレート ☓ ○ ☓ 順序 ☓ ○ 任意 親ページ ☓ ○ 任意親ページ ☓ ○ 任意 並び順 公開日 順序 公開日 先頭に固定表示 ○ ☓ ☓ カテゴリー ○ ☓ 任意 タグ ○ ☓ 任意 カスタム分類 任意 任意 任意
  42. 42. WordPressのユーザ権限WordPressのユーザ権限
  43. 43. 管理者は、記事の投稿・編集(他のユーザも含む)及びシステム関係(テーマの 編集・有効化、プラグインの有効化・編集)が可能な権限です。 プラグインの追加や削除を知らない間に行われると、システム上重大な問題がシステム上重大な問題がシステム上重大な問題がシステム上重大な問題が 発生する恐れ発生する恐れ発生する恐れ発生する恐れがあります。また、アップデートの通知もされますので、誤ってアッ プデートを行い、プラグイン等の不具合が生じる可能性もあります。 ■編集者■編集者■編集者■編集者 管理者権限からシステム周りの変更を不可能にした権限である。 ■投稿者■投稿者■投稿者■投稿者 ファイルのアップロード(メディアの追加)とログインしている本人のみの記事の投ログインしている本人のみの記事の投ログインしている本人のみの記事の投ログインしている本人のみの記事の投 ■管理者■管理者■管理者■管理者 ファイルのアップロード(メディアの追加)とログインしている本人のみの記事の投ログインしている本人のみの記事の投ログインしている本人のみの記事の投ログインしている本人のみの記事の投 稿・編集が可能である。稿・編集が可能である。稿・編集が可能である。稿・編集が可能である。 ■寄稿者■寄稿者■寄稿者■寄稿者 ログインしている本人のみの記事の作成・編集が可能ログインしている本人のみの記事の作成・編集が可能ログインしている本人のみの記事の作成・編集が可能ログインしている本人のみの記事の作成・編集が可能であり、 この権限では記事を公開記事を公開記事を公開記事を公開することができません。記事を承認待ちとして投稿でき る。 ■購読者■購読者■購読者■購読者 記事の閲覧のみが可能な権限で、投稿を行うことは全くできない。投稿を行うことは全くできない。投稿を行うことは全くできない。投稿を行うことは全くできない。
  44. 44. 3.WordPressの制作フロー3.WordPressの制作フロー
  45. 45. 一般的なWordPressの制作フロー一般的なWordPressの制作フロー
  46. 46. 1.要件定義 2.構成案作成 3.デザイン作成3.デザイン作成 4.htmlコーディング 5.WordPress実装
  47. 47. ■要件定義 構成されるWebページが運用時にどのように更新され、 どう利用されるかきちんと把握することが最も大事である。 トップページ 会社概要会社概要 社会貢献活動 お知らせ お問合せ 採用情報 お知らせは更新で きる機能を持たせ たい。
  48. 48. ■構成案の作成 要件定義や全体の設計が完了したらサイト構成案を作 成し、どの部分がどのテンプレートになるか洗い出す。 トップページをはじめに作成し、サブページなど必要な ページの構成も行う。ページの構成も行う。 構築前にどのテンプレートになるか予め検討をつけるこ とが重要。
  49. 49. ■デザイン作成
  50. 50. ■htmlコーディング WordPressのテンプレートを意識し、無理がないように コーディングすること。 特に以下のような場合は苦手である。 (通常のループを想定する場合) <ul> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li class=“padding-left0”>リスト4</li> </ul>
  51. 51. ■WordPress実装 コーディングデータを元にWordPressのテンプレートタグ の組み込みを行う。 必要によってはプラグインの導入による機能追加や 開発も行う。
  52. 52. 4.WordPressによる実制作4.WordPressによる実制作
  53. 53. 5.WordPressによる制作と応用5.WordPressによる制作と応用
  54. 54. より使いやすいWebサイトにするためにより使いやすいWebサイトにするために
  55. 55. クライアントさんこんなになっていませんか?
  56. 56. ■より使いやすいWebサイトにするために 1.ビジュアルエディタをカスタマイズする。 2.記事の複製機能を実装する。 3.カスタムフィールドを利用する。 4.カスタム投稿タイプを利用する。4.カスタム投稿タイプを利用する。 5.ユーザ権限を利用する。 納品だけではなく、より使いやすいWebサイトに するためにカスタマイズを行う。
  57. 57. ■ビジュアルエディタ
  58. 58. ■ビジュアルエディタ
  59. 59. ■ビジュアルエディタ add_editor_style('editor-style.css'); function custom_editor_settings( $initArray ){ $initArray['body_class'] = 'editor-area'; return $initArray; 1.下記コードをfunction.phpに書き込む。 return $initArray; } add_filter( 'tiny_mce_before_init', 'custom_editor_settings' ); 2.下記cssファイルをテーマフォルダに作成する。 editor-style.css
  60. 60. ■記事の複製機能 ・Duplicate Post 投稿した記事の複製機能を実装することができるプラグイン。
  61. 61. ■カスタムフィールドの利用 ・カスタムフィールドを設置し、ユーザビリティを上げる。 ・定期更新するページで同じ入力内容の場合非常に便利。
  62. 62. ■カスタムフィールドの利用 ・カスタムフィールドを設置し、ユーザビリティを向上させる。 ・定期更新するページで同じ入力内容の場合非常に便利。
  63. 63. ■カスタム投稿タイプの利用 ・カスタム投稿タイプを導入し、ユーザビリティを向上させる。
  64. 64. ■ユーザ権限をニーズに合わせ使い分ける ・5つの権限を誰が、どのユーザを使うかあらかじめ ヒアリングし、権限を与え使い分ける。 システム系の項目にアクセスできないようにし 自己を未然に防ぐことが可能になる。
  65. 65. デバッグモードを使いこなすデバッグモードを使いこなす
  66. 66. こんな経験ありませんか?
  67. 67. ■デバッグモードを活用する wp-config.php 75行目付近、trueに変更する。
  68. 68. Parse error: syntax error, unexpected 'endif' (T_ENDIF) in D:¥home¥site¥wwwroot¥wp-content¥themes¥apt-pc¥header.php on line 58on line 58
  69. 69. デモ
  70. 70. *リリース時にはfalseに戻しましょう
  71. 71. var_dumpを使いこなすvar_dumpを使いこなす
  72. 72. こんな経験ありませんか?
  73. 73. ■var_dumpを活用する var_dump( $a ); $aは変数
  74. 74. object(WP_Post)#104 (24) { ["ID"]=> int(1) ["post_author"]=> string(1) "1" ["post_date"]=> string(19) "2014-11-10 07:52:42" ["post_date_gmt"]=> string(19) "2014-11-10 07:52:42" ["post_content"]=> string(126) "WordPress へ ようこそ。これは最初の投稿です。編集もしくは削除してブログを始めてくださ い !" ["post_title"]=> string(12) "Hello world!" ["post_excerpt"]=> string(0) "" ["post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]=> string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(11) "hello-world" ["to_ping"]=> string(0) "" ["pinged"]=>["post_name"]=> string(11) "hello-world" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["post_modified"]=> string(19) "2014-11-10 07:52:42" ["post_modified_gmt"]=> string(19) "2014-11-10 07:52:42" ["post_content_filtered"]=> string(0) "" ["post_parent"]=> int(0) ["guid"]=> string(42) "http://20141111demo.azurewebsites.net/?p=1" ["menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(0) "" ["comment_count"]=> string(1) "1" ["filter"]=> string(3) "raw" }
  75. 75. 6.セキュリティ6.セキュリティ
  76. 76. ■よくあるセキュリティ問題 1.PHP、MySQLが持っている潜在的な脆弱性 2.誰でもWordPressのログイン画面にアクセスできてしま う 3.アップデートされていないプラグインの利用3.アップデートされていないプラグインの利用 4.公式ディレクトリ以外からダウンロードしたよくわからな いテーマやプラグイン
  77. 77. ■よくあるセキュリティ問題 1.SQLインジェクション SQLを使って不正にデータベースを操作することを目的と している攻撃手段。
  78. 78. ■よくあるセキュリティ問題 1.クロスサイトリクエストフォージェリ(CSRF) ユーザが意図しないページにアクセスされ、意図しない 操作をさせられる可能性がある。(踏み台攻撃) 不正にデータベースを操作し、WordPressのログイン情報 を表示させることが可能。 例
  79. 79. ■よくあるセキュリティ問題 2.誰でもWordPressのログイン画面にアクセスできてしまう ブルートフォースアタックによりユーザ名とパスワードの 組み合わせを試し強引に解読されてしまう可能性がある。 ログイン画面にIP制限をかけ許可IP以外からの アクセスを受け付けなくするよう設定を行う。
  80. 80. ■よくあるセキュリティ問題 3.アップデートされていないプラグインの利用 脆弱性が対策されていない可能性が高く、利用するだけ で脆弱性の温床になってしまう。 常に最終アップデート日を確認すること。
  81. 81. ■よくあるセキュリティ問題 4.公式ディレクトリ以外からダウンロードした テーマやプラグイン 悪意のあるコードが埋め込まれている可能性が高い。 知らずに利用して不正な広告が埋め込まれたなど・・・・知らずに利用して不正な広告が埋め込まれたなど・・・・
  82. 82. ■これらの問題を解決するには ・Webアプリケーション脆弱性診断をお勧めします。 ・怪しい・うわさで有名なプラグインは使わない。 ・サーバや言語の知識をきちんとつけ、何がどう危険な のか理解すること。
  83. 83. まとめまとめ

×