今さら聞けない!!!あんなことこんなこと!魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ                                  オノコンピュータ   小野隆士                   ...
目次• コンテンツ管理の必要性• WordPress あんなこと、こんなこと。 –   WordPressの魅力 –   基本編 –   テーマ制作編 –   運用編              WCAN 2012 Autumn
CMSを使う理由をまず考えよう!コンテンツ管理の必要性            WCAN 2012 Autumn
WEB制作の課題コンテンツ数の増加           多様化する閲覧環境      どう対処する? コスト削減             迅速な情報発信の必要性         WCAN 2012 Autumn
一昔前のWEBHTML + CSS + JS構造 + コンテンツ        スタイル           アクション              WCAN 2012 Autumn
一昔前のWEBのイメージ                      example.com    PCサイト               携帯サイト              スマホサイトindex.   menu       index.  ...
一昔前のWEBのイメージ                      example.com    PCサイト               携帯サイト              スマホサイトindex.   menu       index.  ...
無理無理無理無理無理無理無理無理    WCAN 2012 Autumn
解決方法HTML + CSS + JS 構造        スタイル           アクション      +CMS          コンテンツ       WCAN 2012 Autumn
これからのWEBのイメージ                       example.com     PCサイト                 携帯サイト              スマホサイトテン                    テ...
example.com     PCサイト                 携帯サイト              スマホサイトテン                    テン                     テン      style ...
CMS導入で夢は広がる!   WCAN 2012 Autumn
CMSいろいろ•   a-blog CMS•   Geeklog•   Movable Type•   concrete5               それぞれの特性を見極めて、                          要求にあったC...
今さら聞けない!!!                        本                                  題あんなことこんなこと!魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ        ...
第1章WordPressの魅力       WCAN 2012 Autumn
シンプルな操作性  WCAN 2012 Autumn
プラグインによる拡張性   公式プラグイン数21,209(2012/09/09現在)                      http://wordpress.org/extend/plugins/              WCAN 201...
豊富なテーマ    公式テーマ数 1,592(2012/09/09現在)                   http://wordpress.org/extend/themes/             WCAN 2012 Autumn
豊富な情報http://wpdocs.sourceforge.jp/                                WCAN 2012 Autumn
コミュニティ             http://wordbench.org/             http://2012.osaka.wordcamp.org/             http://2012.tokyo.wordcam...
WordCamp Tokyo 2012 なう                             USTREAM配信中                       【セッション1】                       USTREAM...
WordBench 名古屋 10月勉強会  日時    10月 20日 (土) 14:00 - 17:00(その後懇親会)        AWS(Amazon Web Services)で  内容        WordPressを動かすハンズ...
まだまだ魅力盛りだくさん•   オープンソース(GPLライセンス)•   スマホ・Wordからも書き込める•   開発スピードが速い•   世界中で人気急上昇    (WEB全体の約13%)• 無料                   WCAN...
第2章 インストール~基本操作WordPress 基本編            WCAN 2012 Autumn
動作環境WordPress 3.4 日本語版PHP バージョン 5.2.4 以上MySQL バージョン 5.0.15 以上                                今回のデモ環境                    ...
インストール手順インストールしてみましょう。1. DB準備2. WordPressをダウンロード ( http://ja.wordpress.org/ )3. 設定ファイル(wp-config.php)の書き換え4. WordPressをサーバ...
管理画面操作管理画面の操作を学びましょう!   管理画面を眺める   投稿を書く   固定ページを書く   ウィジェットを配置する   テーマを切り替え・カスタマイザー   プラグイン導入          WCAN 2012 Au...
第3章 テーマ制作の為の基礎知識習得WordPress テーマ制作編           WCAN 2012 Autumn
テーマの場所/wp-content/themes 1フォルダ = 1テーマテーマフォルダ内には 沢山のファイルが…  WCAN 2012 Autumn
テーマを構成するファイル達必須      ファイル名                                                          内容●        style.css           テーマの情報お...
http://codex.wordpress.org/images/1/18/Template_Hierarchy.png                      WCAN 2012 Autumn
ファイルの役割イメージ      header.phpindex.php                  sideb(or home.php)              ar.ph                             p ...
ファイルの役割イメージ        header.phpsidebar.ph              single.php  p        footer.php          WCAN 2012 Autumn
超簡単なテーマ制作の流れ    ①デザイン&HTML作成   ②テーマとして認識させる   ③テンプレート関数に置き換え         ④動作確認      WCAN 2012 Autumn
超簡単なテーマ制作の流れ ①デザイン&HTML作成②テーマとして認識させる③テンプレート関数に置き換え                                    index   style.css                  ...
超簡単なテーマ制作の流れ ①デザイン&HTML作成                                    index   style.css                                    .html②テー...
超簡単なテーマ制作の流れstyle.css の行頭に以下を記述/*Theme Name: テーマ名  ①デザイン&HTML作成Theme URI: http://theme-uri.example.org/Description: テーマの説明...
超簡単なテーマ制作の流れ ①デザイン&HTML作成                                    index     style.css②テーマとして認識させる                         .php③...
超簡単なテーマ制作の流れ ①デザイン&HTML作成                               【index.php】                                     該当箇所を以下コードに置き換え   ...
超簡単なテーマ制作の流れ ①デザイン&HTML作成                                            【index.php】                              投稿記事表示      ...
超簡単なテーマ制作の流れ ①デザイン&HTML作成②テーマとして認識させる③テンプレート関数に置き換え    ④動作確認                 WCAN 2012 Autumn
テーマ制作の参考になるテーマ   Classic テーマ  http://wordpress.org/extend/themes/classic       初期頃のデフォルトテーマ  機能が少ないため、テーマの基礎を学ぶには最適       ...
第4章WordPress運用編       WCAN 2012 Autumn
データのバックアップWordPressのバックアップは、・FTPサーバ上のファイル・データベース内のデータの両方をバックアップする必要がある。プラグイン名   BackWPupURL      http://wordpress.org/exte...
入力支援ビジュアルエディタを強化して、テーブル挿入やスタイル選択を可能にする。プラグイン名   TinyMCE AdvancedURL      http://wordpress.org/extend/plugins/tinymce-advan...
誤操作防止使用しない機能をメニューから消すことでユーザの誤操作を防ぐ。プラグイン名   AdminimizeURL      http://wordpress.org/extend/plugins/adminimize/            ...
データを効率良く管理するカスタム投稿タイプ&カスタムフィールド&カスタムタクソノミーを活用してデータを効率良く管理する。プラグイン名   Custom Field TemplateURL      http://wordpress.org/ex...
データを効率良く管理する    WCAN 2012 Autumn
質問コーナー WCAN 2012 Autumn
おわりご清聴ありがとうございました。      WCAN 2012 Autumn
Próximos SlideShares
Carregando em…5
×

今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]

3.092 visualizações

Publicada em

WCAN 2012 Autumn セッション2-C で使用したプレゼンテーションです。
「 今さら聞けないWordPressのあんなことこんなこと 」と題してWordPressのインストール方法、テーマ制作、運用ノウハウを駆け足でご紹介しました。

CMSはWordPressじゃなきゃダメ!という論調にはしたくなかったので、最初にCMSを使用する意義をお話させて頂きました。
お客様の要求にマッチするCMSを選択する事はとても大切だと思います。
もし色々なCMSを触ってみたい場合、デモで使用したWindowsソフトの「WebMatrix」を活用することをオススメ致します。色んなCMSがクリック操作で速攻インストールできるのでオススメです。

WCAN 2012 Autumn
http://wcan.jp/2012autumn/

WordBench コミュニティ
http://wordbench.org/

WebMatrix(デモで使用したソフトウェアWin専用)
http://www.microsoft.com/web/webmatrix/

Publicada em: Tecnologia
0 comentários
7 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
3.092
No SlideShare
0
A partir de incorporações
0
Número de incorporações
18
Ações
Compartilhamentos
0
Downloads
34
Comentários
0
Gostaram
7
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

今さら聞けないWordPressのあんなことこんなこと [WCAN 2012 Autumn]

  1. 1. 今さら聞けない!!!あんなことこんなこと!魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ オノコンピュータ 小野隆士 Twitter: @onocom WCAN 2012 Autumn
  2. 2. 目次• コンテンツ管理の必要性• WordPress あんなこと、こんなこと。 – WordPressの魅力 – 基本編 – テーマ制作編 – 運用編 WCAN 2012 Autumn
  3. 3. CMSを使う理由をまず考えよう!コンテンツ管理の必要性 WCAN 2012 Autumn
  4. 4. WEB制作の課題コンテンツ数の増加 多様化する閲覧環境 どう対処する? コスト削減 迅速な情報発信の必要性 WCAN 2012 Autumn
  5. 5. 一昔前のWEBHTML + CSS + JS構造 + コンテンツ スタイル アクション WCAN 2012 Autumn
  6. 6. 一昔前のWEBのイメージ example.com PCサイト 携帯サイト スマホサイトindex. menu index. menu index. menu index. menu index. menu index. menu html トップ .html サブペ html トップ .html サブペ html トップ .html サブペ html .html html .html html .html ページ ージ ページ ージ ページ ージ style. action style. action style. action css .js css .js css .js WCAN 2012 Autumn
  7. 7. 一昔前のWEBのイメージ example.com PCサイト 携帯サイト スマホサイトindex. menu index. menu index. menu コンテンツ毎に増えていくHTMLたち… index. html html menu トップ .html サブペ .html index. html html menu トップ .html サブペ .html index. html menu トップ .html html サブペ .html ページ ージ ページ ージ ページ ージ style. action style. action style. action css .js css .js css .js WCAN 2012 Autumn
  8. 8. 無理無理無理無理無理無理無理無理 WCAN 2012 Autumn
  9. 9. 解決方法HTML + CSS + JS 構造 スタイル アクション +CMS コンテンツ WCAN 2012 Autumn
  10. 10. これからのWEBのイメージ example.com PCサイト 携帯サイト スマホサイトテン テン テン style actio style actio style actioプレ プレ プレ .css n.js .css n.js .css n.jsート ート ート CMS (コンテンツ) WCAN 2012 Autumn
  11. 11. example.com PCサイト 携帯サイト スマホサイトテン テン テン style actio style actio style actioプレ プレ プレ .css n.js .css n.js .css n.jsート ート ート CMS (コンテンツ) デスクトップ スマホアプリ なんでも! アプリケーション WCAN 2012 Autumn
  12. 12. CMS導入で夢は広がる! WCAN 2012 Autumn
  13. 13. CMSいろいろ• a-blog CMS• Geeklog• Movable Type• concrete5 それぞれの特性を見極めて、 要求にあったCMSを選択しましょう!• WordPress• Magento• Moodle• Wiki• OpenPNE もっと見たい方はWikipediaをチェック♫ http://ja.wikipedia.org/wiki/コンテンツマネージメントシステム ……… WCAN 2012 Autumn
  14. 14. 今さら聞けない!!! 本 題あんなことこんなこと!魅力、インストール、テーマ制作、運用ノウハウをデスマ的に一通り学ぶ WCAN 2012 Autumn
  15. 15. 第1章WordPressの魅力 WCAN 2012 Autumn
  16. 16. シンプルな操作性 WCAN 2012 Autumn
  17. 17. プラグインによる拡張性 公式プラグイン数21,209(2012/09/09現在) http://wordpress.org/extend/plugins/ WCAN 2012 Autumn
  18. 18. 豊富なテーマ 公式テーマ数 1,592(2012/09/09現在) http://wordpress.org/extend/themes/ WCAN 2012 Autumn
  19. 19. 豊富な情報http://wpdocs.sourceforge.jp/ WCAN 2012 Autumn
  20. 20. コミュニティ http://wordbench.org/ http://2012.osaka.wordcamp.org/ http://2012.tokyo.wordcamp.org/ http://2012.wordbeach.org/ WCAN 2012 Autumn
  21. 21. WordCamp Tokyo 2012 なう USTREAM配信中 【セッション1】 USTREAM:WordCamp Tokyo 2012 セッション1 【セッション2】 USTREAM:WordCamp Tokyo 2012 セッション2 【現地局】 USTREAM:WeeklyCMS チャンネル WCAN 2012 Autumn
  22. 22. WordBench 名古屋 10月勉強会 日時 10月 20日 (土) 14:00 - 17:00(その後懇親会) AWS(Amazon Web Services)で 内容 WordPressを動かすハンズオン 講師 AWS堀内様 ベースキャンプ名古屋 場所 http://basecamp-nagoya.jp/ ATND 募集方法 (立てたら #wbNagoya で告知します!) WCAN 2012 Autumn
  23. 23. まだまだ魅力盛りだくさん• オープンソース(GPLライセンス)• スマホ・Wordからも書き込める• 開発スピードが速い• 世界中で人気急上昇 (WEB全体の約13%)• 無料 WCAN 2012 Autumn
  24. 24. 第2章 インストール~基本操作WordPress 基本編 WCAN 2012 Autumn
  25. 25. 動作環境WordPress 3.4 日本語版PHP バージョン 5.2.4 以上MySQL バージョン 5.0.15 以上 今回のデモ環境 WebMatrix http://www.microsoft.com/web/webmatrix/ WCAN 2012 Autumn
  26. 26. インストール手順インストールしてみましょう。1. DB準備2. WordPressをダウンロード ( http://ja.wordpress.org/ )3. 設定ファイル(wp-config.php)の書き換え4. WordPressをサーバにアップロード5. WEB上から設定 WCAN 2012 Autumn
  27. 27. 管理画面操作管理画面の操作を学びましょう! 管理画面を眺める 投稿を書く 固定ページを書く ウィジェットを配置する テーマを切り替え・カスタマイザー プラグイン導入 WCAN 2012 Autumn
  28. 28. 第3章 テーマ制作の為の基礎知識習得WordPress テーマ制作編 WCAN 2012 Autumn
  29. 29. テーマの場所/wp-content/themes 1フォルダ = 1テーマテーマフォルダ内には 沢山のファイルが… WCAN 2012 Autumn
  30. 30. テーマを構成するファイル達必須 ファイル名 内容● style.css テーマの情報およびウェブページの外観を制御するスタイルシート● index.php 記事一覧とかその他もろもろの表示を担当。テーマの親分! single.php 個別の投稿を担当 page.php 個別のページを担当 header.php ヘッダを担当(get_header()で読み込まれる) footer.php フッター担当(get_footer()で読み込まれる) sidebar.php サイドバー担当(get_sidebar()で読み込まれる) comments.php コメント欄担当(comment_form()で読み込まれる) ※ screenshot.png テーマ選択時のスクリーンショット ※ functions.php フックや自作の関数等を記載する 他にも沢山あるので興味のある方は以下のリンクをチェック http://wpdocs.sourceforge.jp/テーマの作成 ※ 公式テーマ登録の際には、「comments.php」と「screenshot.png」も必須 http://codex.wordpress.org/Theme_Review#Theme_Template_Files WCAN 2012 Autumn
  31. 31. http://codex.wordpress.org/images/1/18/Template_Hierarchy.png WCAN 2012 Autumn
  32. 32. ファイルの役割イメージ header.phpindex.php sideb(or home.php) ar.ph p footer.php WCAN 2012 Autumn
  33. 33. ファイルの役割イメージ header.phpsidebar.ph single.php p footer.php WCAN 2012 Autumn
  34. 34. 超簡単なテーマ制作の流れ ①デザイン&HTML作成 ②テーマとして認識させる ③テンプレート関数に置き換え ④動作確認 WCAN 2012 Autumn
  35. 35. 超簡単なテーマ制作の流れ ①デザイン&HTML作成②テーマとして認識させる③テンプレート関数に置き換え index style.css .html ④動作確認 WCAN 2012 Autumn
  36. 36. 超簡単なテーマ制作の流れ ①デザイン&HTML作成 index style.css .html②テーマとして認識させる③テンプレート関数に置き換え index ④動作確認 .php WCAN 2012 Autumn
  37. 37. 超簡単なテーマ制作の流れstyle.css の行頭に以下を記述/*Theme Name: テーマ名 ①デザイン&HTML作成Theme URI: http://theme-uri.example.org/Description: テーマの説明Author: 作成者 style.cssAuthor URI: http://example.org/②テーマとして認識させるVersion: 1.0*/③テンプレート関数に置き換え index style.css ④動作確認 .php WCAN 2012 Autumn
  38. 38. 超簡単なテーマ制作の流れ ①デザイン&HTML作成 index style.css②テーマとして認識させる .php③テンプレート関数に置き換え /wp-content/themes/mytheme/ ④動作確認 WCAN 2012 Autumn
  39. 39. 超簡単なテーマ制作の流れ ①デザイン&HTML作成 【index.php】 該当箇所を以下コードに置き換え style.css読み込み <?php bloginfo( ‘stylesheet_url’ ); ?>②テーマとして認識させる テーマディレクトリのURL表示 <?php bloginfo( ‘template_directory’ ); ?> サイトタイトル表示 <?php bloginfo( ‘name’ ); ?> 説明文表示③テンプレート関数に置き換え <?php bloginfo( ‘description’ ); ?> </head>タグの直前に挿入 <?php wp_head(); ?> </body>タグの直前に挿入 ④動作確認 <?php wp_footer(); ?> WCAN 2012 Autumn
  40. 40. 超簡単なテーマ制作の流れ ①デザイン&HTML作成 【index.php】 投稿記事表示 <?php while (have_posts()) : the_post(); ?> <h2>②テーマとして認識させる <a href=“<?php the_permalink(); ?>”> <?php the_title(); ?> </a> </h2>③テンプレート関数に置き換え <p> <?php the_time(Y/m/d G:i); ?> </p> <div><?php the_content(); ?></div> ④動作確認 <?php endwhile; ?> WCAN 2012 Autumn
  41. 41. 超簡単なテーマ制作の流れ ①デザイン&HTML作成②テーマとして認識させる③テンプレート関数に置き換え ④動作確認 WCAN 2012 Autumn
  42. 42. テーマ制作の参考になるテーマ Classic テーマ http://wordpress.org/extend/themes/classic 初期頃のデフォルトテーマ 機能が少ないため、テーマの基礎を学ぶには最適 半日でわかる!WordPressのお作法 https://gihyo.jp/dp/ebook/2011/G11B04 無料の電子書籍です。WordPressを学ぶ取っ掛かりとしてご利用下さい。 WCAN 2012 Autumn
  43. 43. 第4章WordPress運用編 WCAN 2012 Autumn
  44. 44. データのバックアップWordPressのバックアップは、・FTPサーバ上のファイル・データベース内のデータの両方をバックアップする必要がある。プラグイン名 BackWPupURL http://wordpress.org/extend/plugins/backwpup/ WCAN 2012 Autumn
  45. 45. 入力支援ビジュアルエディタを強化して、テーブル挿入やスタイル選択を可能にする。プラグイン名 TinyMCE AdvancedURL http://wordpress.org/extend/plugins/tinymce-advanced/ WCAN 2012 Autumn
  46. 46. 誤操作防止使用しない機能をメニューから消すことでユーザの誤操作を防ぐ。プラグイン名 AdminimizeURL http://wordpress.org/extend/plugins/adminimize/ WCAN 2012 Autumn
  47. 47. データを効率良く管理するカスタム投稿タイプ&カスタムフィールド&カスタムタクソノミーを活用してデータを効率良く管理する。プラグイン名 Custom Field TemplateURL http://wordpress.org/extend/plugins/custom-field-template/プラグイン名 Custom Post Type UIURL http://wordpress.org/extend/plugins/custom-post-type-ui/ WCAN 2012 Autumn
  48. 48. データを効率良く管理する WCAN 2012 Autumn
  49. 49. 質問コーナー WCAN 2012 Autumn
  50. 50. おわりご清聴ありがとうございました。 WCAN 2012 Autumn

×