WordPressによるサイト設計入門

93,175 views
92,864 views

Published on

6/16に開催されたOSC 北海道で発表した内容です。

Published in: Technology
0 Comments
25 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
93,175
On SlideShare
0
From Embeds
0
Number of Embeds
5,047
Actions
Shares
0
Downloads
0
Comments
0
Likes
25
Embeds 0
No embeds

No notes for slide

WordPressによるサイト設計入門

  1. 1. WordPressによる サイト設計入門12年6月25日月曜日
  2. 2. Profile Web Designer 高橋 朋代 ニックネーム:コモモ12年6月25日月曜日
  3. 3. 今日のお話 WordPressのテーマカスタマイズ 少しだけやったことがある WordPressのテーマカスタマイズを 自分でするわけではないけれど、 クライアントさんに提案することはある12年6月25日月曜日
  4. 4. WordPressのサイト設計で 気をつけたいことや、 テーマカスタマイズを行う時に 問題点や課題となりそうなことを ウェブデザイナーの視点で 話したいと思います12年6月25日月曜日
  5. 5. WordPressで けっこういろんなことが できます12年6月25日月曜日
  6. 6. 最近WordPressって 流行ってるんだって? 自分たちで更新できるから ランニングコスト かからないんでしょ?12年6月25日月曜日
  7. 7. あれもやりたい これもやりたい JSで動いたり デザインもかっこよく お客さん夢いっぱい やりたいこといっぱい12年6月25日月曜日
  8. 8. あまりやったことないけど わかりました あのウェブサイトも WordPressみたいだし、 たぶんできるんだろう12年6月25日月曜日
  9. 9. ちゃんと設計しないと12年6月25日月曜日
  10. 10. WordPressでつくったけど 更新方法が複雑で お客さんでは更新できない12年6月25日月曜日
  11. 11. さらに12年6月25日月曜日
  12. 12. ウェブデザイナーが 更新することになったけど、 それなら静的HTMLで 作ったほうが全然早い12年6月25日月曜日
  13. 13. なんてことになりかねない・・12年6月25日月曜日
  14. 14. WordPressに限らず CMSでは設計が超重要12年6月25日月曜日
  15. 15. 正直なところ12年6月25日月曜日
  16. 16. お客さんがウェブサイトを どんな風に利用して どんな風に更新したいのか わからないうちは CMS導入はちょっと待った ほうがいい12年6月25日月曜日
  17. 17. WordPressは もともとブログシステムを 元にしたCMS12年6月25日月曜日
  18. 18. ウェブサイトで よく利用される機能が セットになって CMSとして機能しているに すぎません12年6月25日月曜日
  19. 19. WordPressで できること・できないことを よく把握して 設計する必要がある12年6月25日月曜日
  20. 20. CMSを導入するメリットは ウェブデザイナー側にもある12年6月25日月曜日
  21. 21. たった一文字を修正するのも 作業していたのが、 CMSにすれば 煩わされることがない12年6月25日月曜日
  22. 22. うまく設計すれば12年6月25日月曜日
  23. 23. HTMLコーディングするより 作業時間が短縮できる12年6月25日月曜日
  24. 24. WordPressでつくるなら、 ウェブデザイナー自身も WordPressで更新したほうが 早いくらいのシステムを 作らなくちゃあまり意味ない12年6月25日月曜日
  25. 25. あたりまえのようだけど12年6月25日月曜日
  26. 26. そういうこと よくありました^^;12年6月25日月曜日
  27. 27. まず考えなくちゃいけないこと WordPressの更新 誰がやる?12年6月25日月曜日
  28. 28. お客さんによっては ・マニュアルの作成 ・更新方法のレクチャー 充実させて対応しよう12年6月25日月曜日
  29. 29. WordPressに登録できる コンテンツ(投稿タイプ) ・投稿 ・固定ページ ・カスタム投稿タイプ12年6月25日月曜日
  30. 30. 投稿 時系列の記事を管理する ・ブログ ・お知らせ、新着情報、トピックス ・イベント情報12年6月25日月曜日
  31. 31. 投稿 投稿は、分類情報をもつことができる ・カテゴリー別 ・タグ別 ・日付別 ・作成者別 投稿者権限を与えると、複数人で管理する場合に便利12年6月25日月曜日
  32. 32. 投稿 もともとブログの基本部分、 一番ブログとして使うのが向いている 時系列にならぶコンテンツの 分類の仕方を工夫することで サイトの仕様にあった利用法をしよう12年6月25日月曜日
  33. 33. 固定ページ 固定ページは、これまで静的サイトで表示 させていたコンテンツを管理するのに便利 ・会社情報、店舗情報、 アクセス ・メッセージ、コンセプト ・サイトポリシー 時系列ではなく、コンテンツの「順序」を 決めることができる12年6月25日月曜日
  34. 34. 固定ページ 階層構造をもつことができる12年6月25日月曜日
  35. 35. 固定ページ もともとはブログの自己紹介欄などを表示 するためにできたもの でも、固定ページを上手に利用してサイト を構築する人が増えた12年6月25日月曜日
  36. 36. カスタム投稿タイプ カスタム投稿タイプ 「投稿」「固定ページ」と同じ機能を追 加できる カスタムタクソノミー(分類タイプ) カスタム投稿タイプに対して、 投稿の「カテゴリー」や「タグ」のよう な分類を与えることができる12年6月25日月曜日
  37. 37. カスタム投稿タイプ カスタム投稿タイプは、「投稿」「固定 ページ」をすでに利用している時、 さらに他にもコンテンツを持たせたい場合 に利用する たとえば、商品紹介、製品情報、リクルー ト情報など12年6月25日月曜日
  38. 38. ひとつの記事に もたせることができる情報 ・タイトル ・本文 ・抜粋 ・カスタムフィールド ・添付画像 ・アイキャッチ画像12年6月25日月曜日
  39. 39. WordPressに 登録できる情報はここまで あとは、 登録された情報の取り出し方や使い方を 工夫して、サイトを設計する12年6月25日月曜日
  40. 40. 無理のないWordPressテーマを作るには どの投稿タイプをどのコンテンツに割り 当てるのか 投稿タイプが持つことのできる分類(カ テゴリー・タグ・投稿者・日付)をどの ように利用して記事を抽出したいのか 設計段階で慎重に考えよう12年6月25日月曜日
  41. 41. 登録した記事を取り出し、 加工して、サイトに表示させる ことができます12年6月25日月曜日
  42. 42. とはいっても・・12年6月25日月曜日
  43. 43. 誰でも、簡単に、 どんなコンテンツでも、 取り出したり、加工したり できる訳じゃない12年6月25日月曜日
  44. 44. 必要なスキルの段階にわけて WordPressでできることを ざっくり紹介します12年6月25日月曜日
  45. 45. STEP1 WordPressに基本的に用意されている 仕組みを使う ・ページ種類とテンプレート階層 ・コンテンツのHTML出力を行う  テンプレートタグ ・WordPressのループ基本構文 ・条件分岐タグ12年6月25日月曜日
  46. 46. STEP2 WordPressのオプション機能を 使いこなす アイキャッチ画像やカスタムメニュー、 カスタム投稿タイプ等は、functions.php に定型的な記述を行うことで使うことが できるようになる12年6月25日月曜日
  47. 47. STEP3 簡単なPHPの基礎がわかる 変数・配列・echo・if・foreach・while WordPressのグローバル変数の情報や、 テンプレートタグから取得した配列の情 報を元に、自在にHTML出力を行う12年6月25日月曜日
  48. 48. STEP4 フックを使いこなす アクションフック WordPressの処理に割り込んで出力を変 更することができる フィルターフック WordPressのテンプレートタグの出力を 変更することができる12年6月25日月曜日
  49. 49. アクションフックの例 ・「投稿」と「カスタム投稿タイプ」で  1ページの表示件数を変えたい ・「投稿」の時系列順を昇順から降順に  変更したい フィルターフックの例 ・テンプレートタグが自動出力するHTML  タグを変更する12年6月25日月曜日
  50. 50. STEP5 もっとPHPを使いこなす 正規表現・SQLなども利用する WordPressやプラグインのソースコード を読み解いて、自作関数やプラグインを 作ったり、 動作しないプラグインの原因を調べたり することもできる12年6月25日月曜日
  51. 51. サイトを設計するときに考えてほしいこと WordPressのテーマ 誰がつくるの?12年6月25日月曜日
  52. 52. WordPressの中身を理解せずに テーマを作るのはちょっと無茶 静的ファイルと混在させても良い できるレベルに合わせて 設計を検討しよう!12年6月25日月曜日
  53. 53. プラグインを使う12年6月25日月曜日
  54. 54. プラグイン サイトにあわせて、 必要な機能を追加できる ・Contact Form 7 ・WP Page Navi ・Custom Field Template ・Multi Device Switcher12年6月25日月曜日
  55. 55. プラグイン さまざまなひとが作っているので、 他のプラグインとの相性がよいのか、 WordPressのバージョンアップに対応で きるのか、 信用できるプラグインなのかを判断する 必要がある12年6月25日月曜日
  56. 56. マルチサイト12年6月25日月曜日
  57. 57. マルチサイト 複数人でブログを持ちたい場合 ・社内の担当者で別々にブログを持ちたい サイトとして使うなら ・各支店で別々のサイトを持ちたい12年6月25日月曜日
  58. 58. マルチサイト マルチサイトにするメリット 同じドメイン内で複数のWordPressサイト を持ちたい場合に、WordPressやプラグイ ンのアップグレードがまとめて管理できる12年6月25日月曜日
  59. 59. スマートフォン対応 ・プラグイン WPtouch ・CSSのメディアクエリー ・プラグイン Multi Device Switcher12年6月25日月曜日
  60. 60. スマートフォン対応 スマートフォン制作を行う上で WordPressで問題になってくること 本文中に挿入した画像の出力サイズ メディアライブラリを上手に利用する12年6月25日月曜日
  61. 61. 納品・公開したら12年6月25日月曜日
  62. 62. 自分たちで更新できるから ランニングコスト かからないんでしょ?12年6月25日月曜日
  63. 63. 作ったら終わりじゃなくて ・公開後のサポート ・WordPressやプラグイン  のバージョンアップ ・定期的なバックアップ12年6月25日月曜日
  64. 64. 運用のリスク回避や メンテナンスが必要なことは お客さんに理解してもらおう12年6月25日月曜日
  65. 65. おわり12年6月25日月曜日

×