Start at 19:00      Prejob vol_2 Wordpress Workshopぜひ近くの人とお話になってお待ち下さい。    •参加費は受け付けまでお願いします    •事前質問は講師の上田まで    •PC環境で不安な...
vol.2   WORDPRESS  Powered by
about          青山尚平          「本気で社会を変える人」のための事業実現を志し、学生団体やNPO法人でプロジェクトマネジメ          ントをおこなう。2011年10月からNPO法人NEWVERYでおとな大学 ”...
会場協力
はじりまります...         Wordpress講座   「学生団体のウェブサイトに  ワードプレスを導入するには?」
本日のアウトライン  Round1:   ワードプレスとは?  Round2:   実践する  Round3:   フィードバックする  目標:講座終了時に「オリジナル」メディアを作成・                   アウトプットすること
Round1:   ワードプレスとは?
ワードプレスとは?- 世界で最も導入されているホームページビルダー- 導入数は7300万ウェブサイト以上          =世界中のアクティブサイトの約20%- phpとmySQLで開発されたオープンソースのソフトウェア-   アメブロやはて...
ワードプレスとは?- どうして『今』ワードプレスなのか?「特徴」から考えると...・なんといっても導入費、月額利用料「無料」・オープンソースで公開される美しいテンプレート群・用途に応じたテンプレートカスタマイズが可能・「プラグイン」を導入してS...
ワードプレスとは?ワードプレスをはじめる手順1. レンタルサーバーの契約2. ドメインの取得(DNS設定)3. ワードプレスのインストール       本日の講座では「3. ワードプレスのインストール」までが完       了したことを想定して...
参考:レンタルサーバーの選び方・無料お試しがある・管理画面が分かりやすい・ワードプレスインストールが簡単=>「ロリポップ!レンタルサーバー」の契約がおすすめ         Webサーバー                  ドメイン      ...
参考:レンタルサーバーとドメイン取得サービスレンタルサーバードメイン取得サービス
参考:導入事例1
参考:導入事例2
類似サービス・世界標準のCMSプラットフォーム → Movabletype・日本最大級のブログ管理ツール → アメブロ   でもMovable Type の導入実績豊富 ≒ 営業実績かと...
Round2:   実践する
実践の前に...   1. 最低限、ワードプレスの操作を理解   2. 実際に目的に合わせてカスタマイズしてみる   ...の手順でやりましょう。
管理画面を理解する管理画面を構成するものは...・記事の投稿・固定ページの追加・サイトの基本設定・メニューの設定(親ページ、子ページ)・テーマの変更・プラグインの追加・ウィジェットの操作・その他
ページの住み分けを理解する固定ページと投稿ページ                           とは          メンバー紹介     TOP                     TOP           記事        ...
基本情報の変更各種設定・タイトルの変更・サブタイトルの追加・コメント機能の停止・トップページの指定・ブログ投稿ページの指定
グローバルナビゲーションの設定メニューの追加(親ページ、子ページ)・実演解説します!
【重要】テーンプレートの選び方・ブログ系・コーポレイトサイト系・オリジナル系海外超優良サイトhttp://themeforest.net/http://www.pagelines.com/http://wpshower.com/http://w...
【重要】プラグインの選び方プラグインの追加=>ワードプレスを強化する・POST画面編集 Tiny MCE・アクセス解析導入 Jetpack・コメント欄 Disqus・ソーシャルプラグイン導入 WP-social bookmarking ligh...
POST画面編集 Tiny MCE・POST画面編集 Tiny MCE Tiny MCEはビジュアルエディタ(投稿画面)を強化したい方にオススメのプ ラグイン。タグやスタイルシートなしで記事の投稿が可能になります。
ウィジェットの理解サイドバーのカスタマイズ・実演解説します!
基本は理解できましたでしょうか?一度、質問を受け付けます。
それでは、本題。
実践の進め方1. ベースのテンプレを決める(今回は運営側で用意しました)2. 完成図を確認する(これも、運営側で用意しました)3. ワードプレスを操作して、作業を進める4. 完了(必要に応じて、機能、デザインをアップデートする)
今回ベースにしたいと考えているテンプレート    Name:response.1.1.30     発行元:CyberChimps
CyberChimps?- カリフォルニアのプレミアムワードプレステーマ制作カンパニー
完成画面のイメージName:response.1.1.30 発行元:CyberChimps
カスタマイズ事項リスト1. ロゴ2. スライド3. フッターのcopyright4. サイドバー(ウィジェット)の最適化5. メニューの再編6. フッターウィジェットの再編(FB、Twitter)7. パーマリンク(URL)の最適化8. 固定ペ...
参考資料
参考資料「プラグインを知る」 セキュリティ                申し込みフォーム ✓akismet              ✓Contact Form 7                         *Google Docsの方...
Google AnalyticsGoogle Analyticsは高機能かつ直感的な操作性を持つアクセス解析ソフトウェアです。http://www.google.com/intl/ja/analytics/
貼付けシリーズ1:お問い合わせフォーム お問い合わせフォーム、申し込みフォーム・・いずれも他者を巻き込む組織活動に必須 なアイテムです。簡単なフォームなら、Google Documentsでの設置がベストです。 Gmail(Google Acc...
貼付けシリーズ2:Google Maps アクセスマップをサイトに導入するにはGoogle Mapsでソースコードを生成 し、ページにコピペする方法が一般的です。
貼付けシリーズ3:Youtube YouTubeで好きな動画のページに行って、動画下の「共有」→「埋め込みコード」の 順に展開し、埋め込みコードを取得する。後はこれを.htmlファイルに埋め込むだけ。
貼付けシリーズ4:Facebookhttp://developers.facebook.com/
貼付けシリーズ4:Facebook http://developers.facebook.com/ いいねボタンやシェアボタンなどの簡単な機能はプラグインで導入可能ですが以下の ような機能はFacebook Developersからソースコード...
貼付けシリーズ5:Twitterhttps://twitter.com/about/resources
貼付けシリーズ5:Twitterhttps://twitter.com/about/resourcesツイッタータイムラインの設置はこのように行います。
+α :   オススメ書籍etc...
+α おすすめ書籍            WordPress 3.x (速習デザイン)            ¥ 2,814            世界標準のCMS「ワードプレス」で実用サイトを作りたい人の            ための決定版テ...
+α :   アナウンス
1. アンケートにご協力ください2. 次回イベントの告知3. Prejob Salon
To be continued...ありがとうございました!!
To be continued...ありがとうございました!!
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Prejob wordpress v2_1121
Upcoming SlideShare
Loading in...5
×

Prejob wordpress v2_1121

755

Published on

prejob

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
755
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Prejob wordpress v2_1121

    1. 1. Start at 19:00 Prejob vol_2 Wordpress Workshopぜひ近くの人とお話になってお待ち下さい。 •参加費は受け付けまでお願いします •事前質問は講師の上田まで •PC環境で不安な方は対応いたします
    2. 2. vol.2 WORDPRESS Powered by
    3. 3. about 青山尚平 「本気で社会を変える人」のための事業実現を志し、学生団体やNPO法人でプロジェクトマネジメ ントをおこなう。2011年10月からNPO法人NEWVERYでおとな大学 ”異学種プロジェクト” 代表。現 在は株式会社Parmyでスマートフォン向けアプリ”ひゅーちくっ”のProduct Marketing Manegerを 務める。2012年10月から上田和真とともに新事業を設立。 上田和真 高校卒業後、イケダハヤトのアシスタントを経てWebデザイナーとして独立。フ リーランス、Taxbird Inc. 執行役員を経て、株式会社クラウドワークスのUXデザイ ナーとして活動。現在は学生の在学中の実践的な就業機会の充実、スタートアップ 市場の活性化を目指し、青山尚平と共にPrejob Inc.を設立。 • Facebookを活用したソーシャルリクルーティング事業 • 学生のための相互学習コミュニティ、オンラインサロン事業 • スキルアップ勉強会の企画、運営 • その他
    4. 4. 会場協力
    5. 5. はじりまります... Wordpress講座 「学生団体のウェブサイトに ワードプレスを導入するには?」
    6. 6. 本日のアウトライン Round1: ワードプレスとは? Round2: 実践する Round3: フィードバックする 目標:講座終了時に「オリジナル」メディアを作成・ アウトプットすること
    7. 7. Round1: ワードプレスとは?
    8. 8. ワードプレスとは?- 世界で最も導入されているホームページビルダー- 導入数は7300万ウェブサイト以上 =世界中のアクティブサイトの約20%- phpとmySQLで開発されたオープンソースのソフトウェア- アメブロやはてなブログとの違いは? サーバーや独自ドメインサービスと一緒にワンストップで提供さ れているサービスではなく、サイトを公開するには、レンタル サーバーの契約が必須になり、必要に応じて独自ドメインを指 定する。アメブロ等と比べると公開までの手順はちょっと複雑か もしれません。。
    9. 9. ワードプレスとは?- どうして『今』ワードプレスなのか?「特徴」から考えると...・なんといっても導入費、月額利用料「無料」・オープンソースで公開される美しいテンプレート群・用途に応じたテンプレートカスタマイズが可能・「プラグイン」を導入してSEO対策、ソーシャル連携も - マークアップ(html, CSS)の知識なしに プロフェッショナルなウェブサイトを制作できる
    10. 10. ワードプレスとは?ワードプレスをはじめる手順1. レンタルサーバーの契約2. ドメインの取得(DNS設定)3. ワードプレスのインストール 本日の講座では「3. ワードプレスのインストール」までが完 了したことを想定して進めて行きます。
    11. 11. 参考:レンタルサーバーの選び方・無料お試しがある・管理画面が分かりやすい・ワードプレスインストールが簡単=>「ロリポップ!レンタルサーバー」の契約がおすすめ Webサーバー ドメイン 「ロリポップ」 「お名前.com」 (ロリポ プラン) .comドメインの場合 年額¥4,725- 年額¥920- (初期¥1,575 + ¥263 × 12ヶ月) ※最初の10日間は無料お試し期間!!
    12. 12. 参考:レンタルサーバーとドメイン取得サービスレンタルサーバードメイン取得サービス
    13. 13. 参考:導入事例1
    14. 14. 参考:導入事例2
    15. 15. 類似サービス・世界標準のCMSプラットフォーム → Movabletype・日本最大級のブログ管理ツール → アメブロ でもMovable Type の導入実績豊富 ≒ 営業実績かと...
    16. 16. Round2: 実践する
    17. 17. 実践の前に... 1. 最低限、ワードプレスの操作を理解 2. 実際に目的に合わせてカスタマイズしてみる ...の手順でやりましょう。
    18. 18. 管理画面を理解する管理画面を構成するものは...・記事の投稿・固定ページの追加・サイトの基本設定・メニューの設定(親ページ、子ページ)・テーマの変更・プラグインの追加・ウィジェットの操作・その他
    19. 19. ページの住み分けを理解する固定ページと投稿ページ とは メンバー紹介 TOP TOP 記事 運営会社 ex) ニュース記事/ブログ/インタビュー 更新性があるページ 更新性のないページ (=投稿ページ) (=固定ページ)
    20. 20. 基本情報の変更各種設定・タイトルの変更・サブタイトルの追加・コメント機能の停止・トップページの指定・ブログ投稿ページの指定
    21. 21. グローバルナビゲーションの設定メニューの追加(親ページ、子ページ)・実演解説します!
    22. 22. 【重要】テーンプレートの選び方・ブログ系・コーポレイトサイト系・オリジナル系海外超優良サイトhttp://themeforest.net/http://www.pagelines.com/http://wpshower.com/http://www.wpexplorer.com/minifolio-wordpress-theme
    23. 23. 【重要】プラグインの選び方プラグインの追加=>ワードプレスを強化する・POST画面編集 Tiny MCE・アクセス解析導入 Jetpack・コメント欄 Disqus・ソーシャルプラグイン導入 WP-social bookmarking light・コンタクトフォーム Contact form7・faviconの設置 all in favicon
    24. 24. POST画面編集 Tiny MCE・POST画面編集 Tiny MCE Tiny MCEはビジュアルエディタ(投稿画面)を強化したい方にオススメのプ ラグイン。タグやスタイルシートなしで記事の投稿が可能になります。
    25. 25. ウィジェットの理解サイドバーのカスタマイズ・実演解説します!
    26. 26. 基本は理解できましたでしょうか?一度、質問を受け付けます。
    27. 27. それでは、本題。
    28. 28. 実践の進め方1. ベースのテンプレを決める(今回は運営側で用意しました)2. 完成図を確認する(これも、運営側で用意しました)3. ワードプレスを操作して、作業を進める4. 完了(必要に応じて、機能、デザインをアップデートする)
    29. 29. 今回ベースにしたいと考えているテンプレート Name:response.1.1.30 発行元:CyberChimps
    30. 30. CyberChimps?- カリフォルニアのプレミアムワードプレステーマ制作カンパニー
    31. 31. 完成画面のイメージName:response.1.1.30 発行元:CyberChimps
    32. 32. カスタマイズ事項リスト1. ロゴ2. スライド3. フッターのcopyright4. サイドバー(ウィジェット)の最適化5. メニューの再編6. フッターウィジェットの再編(FB、Twitter)7. パーマリンク(URL)の最適化8. 固定ページのコメント欄を消す9. ブログを更新してカテゴリを指定しましょう10. ブログ記事にyoutube動画の追加、google map11. creditの削除はテーマ編集からチャレンジ(基本的にはresponseのテンプレに依存していますので他のテンプレを扱う場合には気をつけて下さい)
    33. 33. 参考資料
    34. 34. 参考資料「プラグインを知る」 セキュリティ 申し込みフォーム ✓akismet ✓Contact Form 7 *Google Docsの方がお薦め 日本語対応 多言語化 ✓WP Multibyte Patch ✓WPML Multilingual CMS モバイル対応 アクセス解析 ✓WPtouch ✓Google Analytics for Wordpress ✓Ktai Style
    35. 35. Google AnalyticsGoogle Analyticsは高機能かつ直感的な操作性を持つアクセス解析ソフトウェアです。http://www.google.com/intl/ja/analytics/
    36. 36. 貼付けシリーズ1:お問い合わせフォーム お問い合わせフォーム、申し込みフォーム・・いずれも他者を巻き込む組織活動に必須 なアイテムです。簡単なフォームなら、Google Documentsでの設置がベストです。 Gmail(Google Account)の左上にある「ドキュメント」→「新規作成」→「フォー ム」 神馬光滋 dj.jimba@gmai お尋ねし ポイントは、自動でGoogle docsの Excel Sheet(Spreadsheet)に記録されること。
    37. 37. 貼付けシリーズ2:Google Maps アクセスマップをサイトに導入するにはGoogle Mapsでソースコードを生成 し、ページにコピペする方法が一般的です。
    38. 38. 貼付けシリーズ3:Youtube YouTubeで好きな動画のページに行って、動画下の「共有」→「埋め込みコード」の 順に展開し、埋め込みコードを取得する。後はこれを.htmlファイルに埋め込むだけ。
    39. 39. 貼付けシリーズ4:Facebookhttp://developers.facebook.com/
    40. 40. 貼付けシリーズ4:Facebook http://developers.facebook.com/ いいねボタンやシェアボタンなどの簡単な機能はプラグインで導入可能ですが以下の ような機能はFacebook Developersからソースコードを取得してコピペすることが必 要 になります。
    41. 41. 貼付けシリーズ5:Twitterhttps://twitter.com/about/resources
    42. 42. 貼付けシリーズ5:Twitterhttps://twitter.com/about/resourcesツイッタータイムラインの設置はこのように行います。
    43. 43. +α : オススメ書籍etc...
    44. 44. +α おすすめ書籍 WordPress 3.x (速習デザイン) ¥ 2,814 世界標準のCMS「ワードプレス」で実用サイトを作りたい人の ための決定版テキスト。サーバーへのインストールから始め、 実用的な商用サイトの作成までを実践。まったくはじめての人 でも自分だけのCMSサイトを立ち上げられる。
    45. 45. +α : アナウンス
    46. 46. 1. アンケートにご協力ください2. 次回イベントの告知3. Prejob Salon
    47. 47. To be continued...ありがとうございました!!
    48. 48. To be continued...ありがとうございました!!
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×